Skip to content

G
game-h5
Commit 1f869bf1 by 曾经
Options

no message

parent 20837fdc
Showing with 1288 additions and 163 deletions
package-lock.json
...@@ -2418,6 +2418,14 @@ ...@@ -2418,6 +2418,14 @@
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true "dev": true
}, },
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": { "asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
...@@ -2487,6 +2495,11 @@ ...@@ -2487,6 +2495,11 @@
"resolve": "^1.12.0" "resolve": "^1.12.0"
} }
}, },
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-loader": { "babel-loader": {
"version": "8.2.5", "version": "8.2.5",
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz", "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz",
...@@ -2538,6 +2551,27 @@ ...@@ -2538,6 +2551,27 @@
"@babel/helper-define-polyfill-provider": "^0.3.1" "@babel/helper-define-polyfill-provider": "^0.3.1"
} }
}, },
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": { "balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
...@@ -4257,8 +4291,7 @@ ...@@ -4257,8 +4291,7 @@
"deepmerge": { "deepmerge": {
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz", "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==", "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
"dev": true
}, },
"default-gateway": { "default-gateway": {
"version": "5.0.5", "version": "5.0.5",
...@@ -4722,6 +4755,19 @@ ...@@ -4722,6 +4755,19 @@
"integrity": "sha512-GnITX8rHnUrIVnTxU9UlsTnSemHUA2iF+6QrRqxFbp/mf0vfuSc/goEyyQhUX3TUUCE3mv/4BNuXOtaJ4ur0eA==", "integrity": "sha512-GnITX8rHnUrIVnTxU9UlsTnSemHUA2iF+6QrRqxFbp/mf0vfuSc/goEyyQhUX3TUUCE3mv/4BNuXOtaJ4ur0eA==",
"dev": true "dev": true
}, },
"element-ui": {
"version": "2.15.8",
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.8.tgz",
"integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"elliptic": { "elliptic": {
"version": "6.5.4", "version": "6.5.4",
"resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz", "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
...@@ -7888,6 +7934,11 @@ ...@@ -7888,6 +7934,11 @@
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==", "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
"dev": true "dev": true
}, },
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
},
"npm-run-path": { "npm-run-path": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz", "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
...@@ -9586,6 +9637,11 @@ ...@@ -9586,6 +9637,11 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true "dev": true
}, },
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": { "resolve": {
"version": "1.22.0", "version": "1.22.0",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
...@@ -10851,6 +10907,11 @@ ...@@ -10851,6 +10907,11 @@
} }
} }
}, },
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
......
package.json
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.22.5", "core-js": "^3.22.5",
"element-ui": "^2.15.8",
"swiper": "^5.2.0", "swiper": "^5.2.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
......
public/index.html
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head> </head>
<body> <body>
<noscript> <noscript>
...@@ -17,5 +18,6 @@ ...@@ -17,5 +18,6 @@
<script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script> <script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script>
<script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script> <script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script>
<script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script> <script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body> </body>
</html> </html>
src/api/common.js
import { request } from './service'; import { getRequest, postRequest } from './service';
export function postApi (data) { // post function getExport(map) {
return request({ let res = {};
method: 'post', for (var key in map) {
url: '/haoban-commission-web/activity/queryByPage', let url = "";
data, let func = getRequest;
}); if (typeof map[key] == 'string') {
url = map[key];
} else if (map[key].type == 'get') {
url = map[key].url;
} else if (map[key].type == 'post') {
url = map[key].url;
func = postRequest;
}
res[key] = function(params){
return func(url,params)
}
}
return res;
} }
export function getApi (params) { // get
return request({ const gameApiMap = {
method: 'get', // 游戏详情
url: '/api-mall/page-simple-mall-goods', getGameInfo: "/gic-wx-app/game",
params, // 游戏规则
}); getGameRule: "/gic-wx-app/game/rule",
// 我的抽奖次数
getGamePlayNumber: "/gic-wx-app/game/play_number",
// 中奖弹幕
getGamePlayBarrage: '/gic-wx-app/game/play/barrage',
// 游戏奖品
getGameReward: '/gic-wx-app/game/prize',
// 我的奖品
getMyReward: '/gic-wx-app/game/member/prize',
// 规则条件
getGameRuleCondition: '/gic-wx-app/game/rule_condition',
// 助力记录
getReportRecord: '/gic-wx-app/game/help',
// 查询剩余次数
getGameNumberPolling: '/gic-wx-app/game/play_number/polling',
// 玩游戏抽奖
gamePlay: {
type: 'post',
url: '/gic-wx-app/game/play'
},
// 校验会员玩游戏权限
validGame: '/gic-wx-app/game/valid',
// 获取积分
getIntegral: '/gic-wx-app/common/integral',
} }
export const gameRequestApi = getExport(gameApiMap)
\ No newline at end of file \ No newline at end of file
src/api/service.js
...@@ -49,7 +49,7 @@ export function request (config) { ...@@ -49,7 +49,7 @@ export function request (config) {
data: {}, data: {},
}; };
if (config.url.match(/requestProject/) === null) { // 仅仅提供演示作用，如果用不到，删掉 if (config.url.match(/requestProject/) === null) { // 仅仅提供演示作用，如果用不到，删掉
config.url = config.url + '?requestProject=sale-manage'; config.url = config.url + '?';
} }
config = Object.assign(defaultConfig, config); config = Object.assign(defaultConfig, config);
if (config.useForm) { if (config.useForm) {
...@@ -58,3 +58,19 @@ export function request (config) { ...@@ -58,3 +58,19 @@ export function request (config) {
} }
return service(config); return service(config);
} }
export function getRequest(url,params){
return request({
method: 'get',
url,
params,
});
}
export function postRequest(url,params){
return request({
method: 'post',
url,
data: params,
});
}
\ No newline at end of file
src/components/cmh/components/open-box.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="dialog-bg" v-if="show"> <div class="dialog-bg" v-if="show">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box_bg.png" class="dialog-bg-img"> <img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content"> <div class="content">
<div class="title">每次消耗100积分</div> <div class="title">{{ title }}</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box02.png" class="box-img" mode="widthFix"> <img :src="data.imageSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div> <div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div> <div class="iconfont icon-guanbi" @click="close"></div>
</div> </div>
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
<script> <script>
export default { export default {
props: { props: {
title: String,
data: Object,
show: Boolean show: Boolean
}, },
data() { data() {
...@@ -70,6 +72,7 @@ export default { ...@@ -70,6 +72,7 @@ export default {
.dialog-bg .content .box-img{ .dialog-bg .content .box-img{
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
height: 320px;
} }
.dialog-bg .content .handle-btn{ .dialog-bg .content .handle-btn{
......
src/components/cmh/components/reward-dialog.vue
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
/> />
<div class="content"> <div class="content">
<div class="title">恭喜获得</div> <div class="title">恭喜获得</div>
<div class="subtitle">50元抵金券</div> <div class="subtitle">{{ reward.prizeName }}</div>
<div class="reward-box"> <div class="reward-box">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png" class="reward-img" mode="widthFix"/> <img :src="reward.prizeImageUrl" class="reward-img" mode="widthFix"/>
<div class="reward-log-text"> <div class="reward-log-text">
<span>奖品已放置</span> <span>奖品已放置</span>
<span class="color-text">【我的奖品】</span> <span class="color-text">【我的奖品】</span>
......
src/components/cmh/components/share-img-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show && bgImage && qrcodeUrl">
<canvas id="canvas" class="img-canvas" width="560" height="996"></canvas>
<div class="content">
<img class="box-img" mode="widthFix" id="shareImage" />
<div class="tips">长按保存至相册，打开朋友圈选取海报转发</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
bgImage: {
type: String,
default: "https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png"
},
qrcodeUrl: {
type: String,
default: "https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png"
},
show: Boolean,
},
data() {
return {
};
},
created() {},
methods: {
drawImage() {
let _w = 560,
_h = 996;
var canvas = document.createElement("canvas");
canvas.width = _w;
canvas.height = _h;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.width = _w;
myImage.height = _h;
myImage.crossOrigin = "Anonymous";
myImage.src = this.bgImage; //背景图片 你自己本地的图片或者在线图片
console.log(this.bgImage);
myImage.onload = () => {
context.drawImage(myImage, 0, 0, _w, _h);
var myImage2 = new Image();
myImage2.src = this.qrcodeUrl; //你自己本地的图片或者在线图片
myImage2.width = 120;
myImage2.height = 120;
myImage2.crossOrigin = "Anonymous";
myImage2.onload = function () {
context.drawImage(myImage2, 400, 824, 120, 120);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById("shareImage");
// document.getElementById('avatar').src = base64;
img.src = base64;
};
};
},
again() {
this.$emit("again");
this.close();
},
close() {
this.$emit("update:show", false);
},
},
watch: {
show(n) {
if (n) {
this.drawImage();
}
},
},
};
</script>
<style scoped>
.img-canvas {
position: fixed;
left: 100%;
top: 0;
width: 560px;
height: 996px;
}
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg .content {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
}
.dialog-bg .content .tips {
color: white;
font-size: 14px;
margin-top: 20px;
}
.dialog-bg .content .box-img {
width: 100%;
}
.dialog-bg .content .icon-guanbi {
margin: 32px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/components/share-select-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" :class="show ? 'show' : 'hidden'" @click="close">
<div class="content" v-infinite-scroll="load" @click.stop="tap">
<div class="top">
<div class="title">邀请好友助力</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
<div class="cell">
<div class="iconfont icon-duobianxing"></div>
<div class="info">
<div class="title">分享至微信/朋友圈</div>
<div class="subtitle">
每邀请2位好友助力增加1次，被邀请用户进入分享页会员注册完成助力。
</div>
<div class="share-type-box">
<div class="share-type-item">
<img src="" />
<div class="share-type-name">微信</div>
</div>
<div class="share-type-item">
<img src="" />
<div class="share-type-name">朋友圈</div>
</div>
</div>
</div>
</div>
<div class="cell">
<div class="iconfont icon-duobianxing"></div>
<div class="info">
<div class="title">助力成功记录</div>
<div class="record-list">
<div class="record-item" v-for="item in count" :key="item">
<div class="time">2022-05-07</div>
<div class="text">凌* 助力成功</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
},
data() {
return {
count: 100,
};
},
methods: {
again() {
this.$emit("again");
this.close();
},
close() {
this.show = false;
setTimeout(() => {
this.$emit("update:show", false);
}, 200);
},
tap() {},
load() {},
},
};
</script>
<style scoped>
@keyframes maskShowAnimation {
0% {
background: rgba(0, 0, 0, 0);
}
100% {
background: rgba(0, 0, 0, 0.85);
}
}
@keyframes maskHiddenAnimation {
0% {
background: rgba(0, 0, 0, 0.85);
}
100% {
background: rgba(0, 0, 0, 0);
}
}
@keyframes contentShowAnimation {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
@keyframes contentHiddenAnimation {
0% {
bottom: 0;
}
100% {
bottom: -100%;
}
}
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0);
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.dialog-bg.show {
animation-name: maskShowAnimation;
}
.dialog-bg.hidden {
animation-name: maskHiddenAnimation;
}
.content {
max-height: 80%;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-radius: 8px 8px 0 0;
background: #f6f6f6;
overflow: auto;
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.dialog-bg.show .content{
animation-name: contentShowAnimation;
}
.dialog-bg.hidden .content{
animation-name: contentHiddenAnimation;
}
.content::-webkit-scrollbar {
display: none;
}
.content .top {
position: sticky;
display: flex;
height: 55px;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
background: #f6f6f6;
z-index: 2;
}
.content .top .title {
color: #21252b;
font-size: 16px;
font-weight: 600;
padding: 0 12px;
}
.content .top .iconfont {
color: #21252b;
font-size: 16px;
padding: 18px 13px;
}
.content .cell {
padding: 14px 12px 16px;
display: flex;
}
.content .cell .icon-duobianxing {
color: #38bdcd;
font-size: 15px;
padding-top: 3px;
padding-right: 3px;
}
.content .cell .info .title {
color: #27292b;
font-size: 14px;
font-weight: 600;
padding-bottom: 5px;
}
.content .cell .info .subtitle {
color: #21252b;
font-size: 12px;
padding-bottom: 15px;
}
.content .cell .info .share-type-box {
display: flex;
}
.share-type-box .share-type-item {
text-align: center;
padding-right: 60px;
}
.share-type-box .share-type-item img {
width: 52px;
height: 52px;
margin: 0 auto;
padding-bottom: 8px;
}
.share-type-box .share-type-item .share-type-name {
color: #242835;
font-size: 12px;
text-align: center;
}
.record-list {
overflow: auto;
}
.record-item {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 10px 0;
color: #27292b;
font-size: 12px;
}
.record-item::after {
content: " ";
position: absolute;
left: 0;
width: 100%;
bottom: 0;
height: 1px;
transform: scaleY(0.5);
z-index: 1;
background: #e6e6e6;
}
</style>
src/components/cmh/index.vue
<template> <template>
<div> <div v-if="game && game.gameExt">
<img <img class="bg-image" :src="game.gameExt.backImageUrl" />
class="bg-image"
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png" <div class="right-btn rule" @click="toGameRule">游戏规则</div>
/>
<div class="right-btn award" @click="toMyReward">我的奖品</div>
<router-link :to="'/rule'">
<div class="right-btn rule">游戏规则</div>
</router-link>
<router-link :to="'/rule'">
<div class="right-btn award">我的奖品</div>
</router-link>
<div class="content"> <div class="content">
<div <div
class="music-icon iconfont" class="music-icon iconfont"
:class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'" :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"
@click="playMusic" @click="playMusic"
v-if="game.backMusicFlag && game.gameExt.backMusicUrl"
></div> ></div>
<div class="integral">100积分/次</div> <div class="integral" v-if="game.integral">
{{ game.integralCount || 0 }}积分/次
</div>
<swiper <swiper
class="swiper-class" class="swiper-class"
ref="mySwiper" ref="mySwiper"
:options="swiperOptions" :options="swiperOptions"
:autoplay="swiperOptions.autoplay" :autoplay="swiperOptions.autoplay"
v-if="game.bulletFlag"
> >
<swiper-slide v-for="item in list" :key="item"> <swiper-slide v-for="item in list" :key="item">
<div class="swiper-item"> <div class="swiper-item">
<img <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/tips_bg.png" src="./images/tips_bg.png"
/> />
<span>{{ item }}</span> <span>{{ item }}</span>
</div> </div>
...@@ -39,88 +36,130 @@ ...@@ -39,88 +36,130 @@
<div class="box-box"> <div class="box-box">
<img <img
v-for="item in boxList" v-for="(item, index) in boxList"
:key="item" :key="item"
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png" :src="
game.gameExt.prizeStyleList.length == 1
? game.gameExt.prizeStyleList[0].imageNoSelectUrl
: game.gameExt.prizeStyleList[index].imageNoSelectUrl
"
:style="{ left: item.left, top: item.top }" :style="{ left: item.left, top: item.top }"
@click="showOpenBoxDialog = true" @click="clickBox(index)"
/> />
</div> </div>
<div class="points-count-box"> <div class="points-count-box">
<div class="text-box"> <div>
<div class="text">1500</div> <div class="text-box">
<img <div class="text">{{ currentIntegral }}</div>
class="text-shadow" <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" class="text-shadow"
/> src="./images/circle_bg.png"
<img />
class="title-image" <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/我的积分.png" class="title-image"
/> src="./images/我的积分.png"
/>
</div>
</div> </div>
<div class="game-name-box"> <div class="game-name-box">
<div class="line left"></div> <div class="line left"></div>
<div class="game-name">点击盲盒抽取好礼</div> <div class="game-name">点击盲盒抽取好礼</div>
<div class="line right"></div> <div class="line right"></div>
</div> </div>
<div class="text-box"> <div>
<div class="text">55</div> <div
<img class="text-box"
class="text-shadow" v-if="playNumberObj && playNumberObj.playNumberFlag"
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" >
/> <div class="text">{{ playNumberObj.playNumber }}</div>
<img <img
class="title-image" class="text-shadow"
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/剩余次数.png" src="./images/circle_bg.png"
/> />
<img
class="title-image"
src="./images/剩余次数.png"
/>
</div>
</div> </div>
</div> </div>
<img class="ad-image" src="" mode="widthFix" /> <img
class="ad-image"
:src="game.gameExt.adsImageUrl"
mode="widthFix"
@click="clickAdImg"
v-if="game.adsFlag"
/>
<div class="share-box" @click="clickShareBtn"> <div class="share-box" @click.stop="clickShareBtn">
<div class="icon"> <div class="icon">
<div class="iconfont icon-yaoqing"></div> <div class="iconfont icon-yaoqing"></div>
</div> </div>
<img <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/邀请助力.png" src="./images/邀请助力.png"
/> />
</div> </div>
</div> </div>
<open-box-dialog :show.sync="showOpenBoxDialog" @open="open()"></open-box-dialog> <open-box-dialog
<reward-dialog :show.sync="showRewardDialog" :reward="rewardDetail"></reward-dialog> :show.sync="showOpenBoxDialog"
:title="openBoxTitle"
:data="openBoxData"
@open="open()"
></open-box-dialog>
<reward-dialog
:show.sync="showRewardDialog"
:reward="rewardDetail"
></reward-dialog>
<reward-fail-dialog :show.sync="showRewardFailDialog"></reward-fail-dialog> <reward-fail-dialog :show.sync="showRewardFailDialog"></reward-fail-dialog>
<share-select-dialog
:show.sync="showShareSelectDialog"
v-if="showShareSelectDialog"
></share-select-dialog>
<share-img-dialog :show.sync="showShareImgDialog"></share-img-dialog>
</div> </div>
</template> </template>
<script> <script>
import { postApi, getApi } from "@/api/common.js"; import { gameRequestApi } from "@/api/common.js";
const {
getGameInfo,
getGamePlayNumber,
getGamePlayBarrage,
gamePlay,
getIntegral,
} = gameRequestApi;
import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css"; import "swiper/css/swiper.css";
import OpenBoxDialog from './components/open-box.vue'; import OpenBoxDialog from "./components/open-box.vue";
import RewardDialog from "./components/reward-dialog.vue"; import RewardDialog from "./components/reward-dialog.vue";
import RewardFailDialog from './components/reward-fail.vue' import RewardFailDialog from "./components/reward-fail.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
export default { export default {
components: { components: {
OpenBoxDialog, OpenBoxDialog,
Swiper, Swiper,
SwiperSlide, SwiperSlide,
RewardDialog, RewardDialog,
RewardFailDialog RewardFailDialog,
}, ShareSelectDialog,
ShareImgDialog,
},
data() { data() {
return { return {
showOpenBoxDialog: false, showOpenBoxDialog: false,
showRewardDialog: false, showRewardDialog: false,
showRewardFailDialog: false, showRewardFailDialog: false,
showShareSelectDialog: false,
showShareImgDialog: false,
list: [ list: [
"刷卡拉拉卡", "刷卡拉拉卡",
"阿拉卡萨卢克和史莱克", "阿拉卡萨卢克和史莱克",
...@@ -129,39 +168,39 @@ export default { ...@@ -129,39 +168,39 @@ export default {
], ],
boxList: [ boxList: [
{ {
left: "51%", left: "calc(51% - 47px)",
top: "214px", top: "214px",
}, },
{ {
left: "33%", left: "calc(33% - 47px)",
top: "262px", top: "262px",
}, },
{ {
left: "66%", left: "calc(66% - 47px)",
top: "258px", top: "258px",
}, },
{ {
left: "16%", left: "calc(16% - 47px)",
top: "307px", top: "307px",
}, },
{ {
left: "52%", left: "calc(52% - 47px)",
top: "306px", top: "306px",
}, },
{ {
left: "84%", left: "calc(84% - 47px)",
top: "307px", top: "307px",
}, },
{ {
left: "35%", left: "calc(35% - 47px)",
top: "351px", top: "351px",
}, },
{ {
left: "68%", left: "calc(68% - 47px)",
top: "355px", top: "355px",
}, },
{ {
left: "53%", left: "calc(53% - 47px)",
top: "400px", top: "400px",
}, },
], ],
...@@ -176,34 +215,111 @@ export default { ...@@ -176,34 +215,111 @@ export default {
}, },
isPlay: true, isPlay: true,
name: "猜盲盒", name: "猜盲盒",
game: {},
gameId: "1",
enterpriseId: "ff8080815dacd3a2015dacd3ef5c0000",
memberId: "ff808081804666e3018049dee09102af",
currentIntegral: "--",
}; };
}, },
created() { created() {
document.title = "猜盲盒" document.title = "猜盲盒";
// this.postApi(); // this.postApi();
// this.getApi(); // this.getApi();
this.getGame();
this.getGamePlayNumber();
this.getIntegral();
}, },
methods: { methods: {
postApi() { getGame() {
postApi({ search: "123" }).then((res) => { getGameInfo({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
}).then((res) => {
console.log(res); console.log(res);
document.title = res.gameName;
res.gameExt.prizeStyleList = JSON.parse(
res.gameExt.prizeStyleJson || "[]"
);
this.game = res;
}); });
}, },
getApi() { async getGamePlayNumber() {
getApi({ search: "123" }).then((res) => { let playNumberObj = await getGamePlayNumber({
console.log(res); gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
console.log(playNumberObj);
this.playNumberObj = playNumberObj;
},
async getGamePlayBarrage() {
await getGamePlayBarrage({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
});
},
async getIntegral() {
let currentIntegral = await getIntegral({
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
this.currentIntegral = currentIntegral;
},
clickBox(index) {
let prizeStyleList = this.game.gameExt.prizeStyleList;
let itemIndex = prizeStyleList.length > index ? index : 0;
let boxItem = prizeStyleList[itemIndex];
this.showOpenBoxDialog = true;
this.openBoxData = boxItem;
},
toGameRule() {
this.$router.push({
path: "/rule",
query: {
gameId: this.gameId,
enterpriseId: this.enterpriseId,
},
});
},
toMyReward() {
this.$router.push({
path: "/my-reward",
query: {
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
},
}); });
}, },
playMusic() { playMusic() {
this.isPlay = !this.isPlay; this.isPlay = !this.isPlay;
}, },
clickShareBtn() {}, clickShareBtn() {
open(){ this.showShareImgDialog = true;
// this.showShareSelectDialog = true;
},
clickAdImg() {
console.log();
},
async open() {
let gameRes = await gamePlay({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
this.showOpenBoxDialog = false; this.showOpenBoxDialog = false;
// this.rewardDetail = {}; // this.rewardDetail = {};
this.showRewardFailDialog = true; if (gameRes.prizeType) {
} this.rewardDetail = gameRes;
this.showRewardDialog = true;
this.getGamePlayNumber();
this.getIntegral();
} else {
this.showRewardFailDialog = true;
}
},
}, },
}; };
</script> </script>
...@@ -340,20 +456,22 @@ export default { ...@@ -340,20 +456,22 @@ export default {
@keyframes box-animation { @keyframes box-animation {
from { from {
transform: translate(-50%, -50%); transform: translate(0, -50%);
} }
to { to {
transform: translate(-50%, 0); transform: translate(0, 0);
} }
} }
.box-box img { .box-box img {
position: absolute; position: absolute;
transform: translate(-50%, 0); transform: translate(0, -50%);
width: 95px; width: 95px;
height: 95px; height: 95px;
animation-timing-function: ease-in; animation-timing-function: ease-in;
/* animation-name: box-animation; */ animation-name: box-animation;
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
} }
.box-box img:nth-child(1) { .box-box img:nth-child(1) {
animation-delay: 0s; animation-delay: 0s;
......
src/components/cmh/my-reward.vue
<template> <template>
<div class="box"> <div class="box">
<div class="page-bg"> <div class="page-bg">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix"> <img
src="./images/mould_01_rulebg.png"
class="bg-img"
mode="widthFix"
/>
</div> </div>
<div class="content"> <div class="content">
<div class="content-cell"> <div class="content-cell">
...@@ -10,90 +14,252 @@ ...@@ -10,90 +14,252 @@
<div class="title">我的奖品</div> <div class="title">我的奖品</div>
<div class="iconfont icon-duobianxing"></div> <div class="iconfont icon-duobianxing"></div>
</div> </div>
</div>
<div
class="infinite-list"
v-infinite-scroll="loadData" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}" v-if="list && list.length">
<div class="reward-item-box" v-for="item in list" :key="item">
<div class="reward-item">
<div class="reward-img-box">
<img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit"/>
</div>
<div class="reward-info">
<div class="reward-name">{{ item.prizeName }}</div>
<div class="reward-condition">{{ item.prizeDesc || '' }}</div>
<div class="reward-time">{{ item.prizeTime | formatDate }}</div>
</div>
</div>
</div>
</div>
<div class="empty-box" v-else-if="haveLoad" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}">
<img class="empty-img" src="./images/mould_01_fail_pic.png" mode="widthFix">
<div class="title">这里空空如也</div>
<div class="subtitle">还没有获得任何奖品哦~赶紧拆盲盒赢取好礼吧！</div>
<div class="play-btn" @click="toPlay">去拆盲盒</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi;
export default { export default {
components:{}, components: {},
data(){ data() {
return { return {
list:[],
} pageSize: 20,
currentPage: 1,
totalCount: 0,
};
}, },
created(){ created() {
document.title = "我的奖品" document.title = "我的奖品";
this.loadData(); this.windowHeight = window.innerHeight;
this.reloadData();
}, },
methods:{ methods: {
loadData(){ reloadData(){
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
},
async loadData() {
if(this.list.length >= this.totalCount && this.totalCount != 0){
return;
}
let query = this.$route.query;
let res = await getMyReward({
...query,
currentPage: this.currentPage,
pageSize: this.pageSize
})
this.haveLoad = true;
this.totalCount = res.totalCount;
let list = [];
if(this.currentPage == 1){
list = res.result||[];
}else{
list = list.concat(res.result||[])
}
this.currentPage ++;
this.list = list;
},
toPlay(){
this.$router.replace({
path: "/",
query: this.$route.query,
});
},
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.box {
.box{
position: relative; position: relative;
} }
.page-bg{ .page-bg {
position: fixed; position: fixed;
z-index: 0; z-index: 0;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #ADDFCD; background: #addfcd;
} }
.page-bg .bg-img{ .page-bg .bg-img {
width: 100%; width: 100%;
} }
.content{ .content {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.content-cell{ .content-cell {
border-radius: 8px; border-radius: 8px;
border: 1px solid #06B0B2; border: 1px solid #06b0b2;
background: white; background: white;
margin: 12px 12px 3px; margin: 12px 12px 3px;
width: calc(100% - 24px); width: calc(100% - 24px);
box-sizing: border-box; box-sizing: border-box;
min-height: 600px;
} }
.cell-top{ .cell-top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 50px; height: 50px;
background: linear-gradient(180deg, #DFF7F4 0%, rgba(223, 247, 244, 0.3) 100%); background: linear-gradient(
180deg,
#dff7f4 0%,
rgba(223, 247, 244, 0.3) 100%
);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
.cell-top .title{ .cell-top .title {
color: #27292B; color: #27292b;
font-size: 17px; font-size: 17px;
padding: 0 10px; padding: 0 10px;
font-weight: 600; font-weight: 600;
} }
.cell-top .iconfont{ .cell-top .iconfont {
color: #38BDCD; color: #38bdcd;
font-size: 15px; font-size: 15px;
} }
</style> .infinite-list {
\ No newline at end of file overflow: auto;
padding: 10px 13px;
margin-bottom: 1px;
}
.reward-item-box{
padding: 5px 0;
}
.reward-item{
display: flex;
padding: 12px;
background: #F6F6F6;
border-radius: 4px;
}
.reward-item .reward-img-box{
width: 80px;
height: 80px;
background: white;
border-radius: 2px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.reward-item .reward-img-box .reward-img{
width: 66px;
height: 66px;
}
.reward-item .reward-info{
padding-left: 10px;
}
.reward-info .reward-name{
color: #21252B;
font-size: 14px;
font-weight: 600;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.reward-info .reward-condition{
padding: 3px 0 5px;
color: #21252B;
font-weight: 300;
font-size: 12px;
height: 33px;
}
.reward-info .reward-time{
color: #21252B;
font-weight: 300;
font-size: 13px;
}
.empty-box{
text-align: center;
background: white;
}
.empty-box .empty-img{
margin: 0 auto;
padding: 80px 0 20px;
width: 180px;
height: 167px;
}
.empty-box .title{
color: #21252B;
font-size: 16px;
font-weight: 600;
padding: 0 9px;
}
.empty-box .subtitle{
color: #63666B;
font-size: 14px;
max-width: 229px;
margin: 0 auto;
}
.empty-box .play-btn{
margin: 25px auto 0;
width: 180px;
height: 38px;
line-height: 36px;
box-sizing: border-box;
border-radius: 19px;
border: 1px solid #12B4BB;
text-align: center;
color: #12B4BB;
font-size: 14px;
font-weight: 600;
}
</style>
src/components/cmh/rule.vue
...@@ -4,26 +4,7 @@ ...@@ -4,26 +4,7 @@
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix"> <img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix">
</div> </div>
<div class="content"> <div class="content">
<div class="content-cell"> <div class="content-cell" v-if="rule && rule.gameId">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">游戏奖品</div>
<div class="iconfont icon-duobianxing"></div>
</div>
<div class="reward-box">
<div class="reward-item-box">
<div class="reward-item-detail">
<div class="img-box">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png" class="reward-img" mode="widthFix">
</div>
<div class="reward-name">100元无门槛券</div>
<div class="reward-des">线下门店消费满500使用</div>
</div>
</div>
</div>
</div>
<div class="content-cell">
<div class="cell-top"> <div class="cell-top">
<div class="iconfont icon-duobianxing"></div> <div class="iconfont icon-duobianxing"></div>
<div class="title">游戏规则</div> <div class="title">游戏规则</div>
...@@ -32,35 +13,58 @@ ...@@ -32,35 +13,58 @@
<div class="rule-box"> <div class="rule-box">
<div class="rule-item"> <div class="rule-item">
<div class="title">游戏时间</div> <div class="title">游戏时间</div>
<div class="value">2022年3月1日 10:00-2022年4月1日 10:00</div> <div class="value">{{ rule.startDate | formatDate }}-{{ rule.endDate | formatDate }}</div>
</div> </div>
<div class="rule-item"> <div class="rule-item" v-if="rule.playConditionFlag">
<div class="title">参与门槛</div> <div class="title">参与门槛</div>
<div class="value point">每邀请 1 位用户，增加 1 次游戏机会</div> <div class="value point" v-for="item in rule.gameRuleConditionList" :key="item">
<div class="value point">每参加 1 次游戏消耗 100 积分</div> <div v-if="item.conditionObj.type == 21">每天增加 {{ item.conditionObj.value }} 次免费游戏机会</div>
<div v-else-if="item.conditionObj.type == 22">赠送 {{ item.conditionObj.value }} 次免费游戏机会</div>
<div v-else-if="item.conditionObj.type == 1">每参加 1 次游戏消耗 {{ item.conditionObj.value }} 积分</div>
<div v-else-if="item.conditionObj.type == 11">每邀请 {{ item.conditionObj.inviteNum }} 位用户认证，增加 {{ item.conditionObj.value }} 次游戏机会</div>
<div v-else-if="item.conditionObj.type == 12">每邀请 {{ item.conditionObj.inviteNum }} 位用户关注服务号，增加 {{ item.conditionObj.value }} 次游戏机会</div>
</div>
</div> </div>
<div class="rule-item"> <div class="rule-item" v-if="rule.playTimes">
<div class="title">游戏参与次数</div> <div class="title">游戏参与次数</div>
<div class="value">无限制</div> <div class="value">每人{{ rule.playTimes }}次</div>
</div> </div>
<div class="rule-item"> <div class="rule-item">
<div class="title">适用人群</div> <div class="title">适用人群</div>
<div class="value">所有会员</div> <div class="value">{{ rule.memberDesc }}</div>
</div> </div>
<div class="rule-item"> <div class="rule-item">
<div class="title">参与门槛</div> <div class="title">游戏说明</div>
<div class="value point">每邀请 1 位用户，增加 1 次游戏机会</div> <div class="value point" v-html="rule.gameRule"></div>
<div class="value point">每参加 1 次游戏消耗 100 积分</div>
</div> </div>
</div> </div>
</div> </div>
<div class="content-cell" v-if="rewardList && rewardList.length">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">游戏奖品</div>
<div class="iconfont icon-duobianxing"></div>
</div>
<div class="reward-box">
<div class="reward-item-box" v-for="item in rewardList" :key="item">
<div class="reward-item-detail">
<div class="img-box">
<img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit">
</div>
<div class="reward-name">{{ item.prizeName }}</div>
<div class="reward-des">{{ item.prizeDesc }}</div>
</div>
</div>
</div>
</div>
</div> </div>
...@@ -68,11 +72,19 @@ ...@@ -68,11 +72,19 @@
</template> </template>
<script> <script>
import { gameRequestApi } from "@/api/common.js";
const {
getGameRule,
getGameReward,
} = gameRequestApi;
export default { export default {
components:{}, components:{},
data(){ data(){
return { return {
rule:{},
rewardList:[],
} }
}, },
created(){ created(){
...@@ -81,7 +93,31 @@ export default { ...@@ -81,7 +93,31 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
this.getGameRule();
this.getGameReward();
},
async getGameRule(){
let rule = await getGameRule({
...this.$route.query
})
rule.gameRuleConditionList && rule.gameRuleConditionList.map((item)=>{
item.conditionObj = JSON.parse(item.conditionJson);
})
this.rule = rule;
},
async getGameReward(){
let rewardList = await getGameReward({
...this.$route.query
})
this.rewardList = rewardList;
},
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
} }
} }
} }
...@@ -180,6 +216,7 @@ export default { ...@@ -180,6 +216,7 @@ export default {
top: 50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
width: calc(100% - 20px); width: calc(100% - 20px);
height: calc(100% - 20px);
} }
.reward-item-detail .reward-name{ .reward-item-detail .reward-name{
......
src/components/cmh/support.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png"
class="bg-img"
mode="widthFix"
/>
</div>
<div class="content">
<div class="content-top">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_helppage_banner.png"
class="top-img"
mode="widthFix"
/>
<div class="top-tip-box">
<div class="line left"></div>
<div class="title">助力好友你也可以参加</div>
<div class="line right"></div>
</div>
</div>
<div class="content-cell">
<img src="" class="header-img" />
<div class="friend-name">你的好友 凌*</div>
<div class="tip-text">正在请求您的助力</div>
<div class="handle-btn red" @click="support">为好友助力</div>
<div class="handle-btn blue" @click="playGame">我要参加游戏</div>
</div>
<div class="content-cell">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">游戏奖品</div>
<div class="iconfont icon-duobianxing"></div>
</div>
<div class="reward-box">
<div class="reward-item-box">
<div class="reward-item-detail">
<div class="img-box">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png"
class="reward-img"
mode="scaleToFit"
/>
</div>
<div class="reward-name">100元无门槛券</div>
<div class="reward-des">线下门店消费满500使用</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
created() {
document.title = "游戏规则";
this.loadData();
},
methods: {
loadData() {
console.log(this.$route.query);
},
playGame() {
this.$router.replace({
path: "/",
query: {
gameId: "1121213",
},
});
},
support(){
},
},
};
</script>
<style scoped>
.box {
position: relative;
}
.page-bg {
position: fixed;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #addfcd;
}
.page-bg .bg-img {
width: 100%;
}
.content {
position: relative;
z-index: 1;
}
/* 顶部 */
.content-top {
text-align: center;
}
.content-top .top-img {
width: 78%;
margin: 0 auto;
padding: 19px 0 10px;
}
.content-top .top-tip-box {
display: flex;
margin: 0 auto;
width: 206px;
height: 33px;
box-sizing: border-box;
border: 1px solid #ffffff;
color: rgba(255, 255, 255, 0.3);
align-items: center;
border-radius: 12px;
}
.content-top .top-tip-box .line {
width: 11px;
height: 2px;
border-radius: 1px;
margin: 0 7px;
}
.content-top .top-tip-box .line.left {
background: linear-gradient(270deg, #38bdcd 0%, rgba(56, 189, 205, 0) 100%);
margin-right: 9px;
}
.content-top .top-tip-box .line.right {
background: linear-gradient(270deg, rgba(56, 189, 205, 0) 0%, #38bdcd 100%);
margin-left: 9px;
}
.content-top .top-tip-box .title {
color: #21252b;
font-size: 15px;
}
/* 顶部 end */
.content-cell {
border-radius: 8px;
border: 1px solid #06b0b2;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
text-align: center;
}
/* 好友助力 */
.header-img {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 40px 0 14px;
margin: 0 auto;
overflow: hidden;
}
.friend-name {
color: #21252b;
font-size: 16px;
font-weight: 600;
}
.tip-text {
color: #21252b;
font-size: 16px;
padding-bottom: 22px;
}
.handle-btn {
width: 75%;
height: 48px;
line-height: 48px;
border-radius: 24px;
text-align: center;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
color: white;
font-size: 16px;
font-weight: 600;
margin: 0 auto 19px;
}
.handle-btn:last-child {
margin-bottom: 23px;
}
.handle-btn.red {
background: #fd452d;
}
.handle-btn.blue {
background: #12b4bb;
}
/* 好友助力 end */
/* 游戏奖品 */
.cell-top {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(
180deg,
#dff7f4 0%,
rgba(223, 247, 244, 0.3) 100%
);
border-radius: 8px 8px 0 0;
}
.cell-top .title {
color: #27292b;
font-size: 17px;
padding: 0 10px;
font-weight: 600;
}
.cell-top .iconfont {
color: #38bdcd;
font-size: 15px;
}
.reward-box {
padding: 15px 0 6px;
display: flex;
flex-wrap: wrap;
}
.reward-item-box {
width: calc(50% - 19px);
padding: 0 6px 12px;
text-align: left;
}
.reward-item-box:nth-child(2n + 1) {
padding-left: 13px;
}
.reward-item-box:nth-child(2n + 2) {
padding-right: 13px;
}
.reward-item-detail {
background: #f6f6f6;
border-radius: 4px;
padding: 6px;
}
.reward-item-detail .img-box {
padding-top: 100%;
position: relative;
background: white;
}
.reward-item-detail .img-box .reward-img {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.reward-item-detail .reward-name {
color: #21252b;
font-size: 14px;
font-weight: 500;
padding: 11px 0 0;
}
.reward-item-detail .reward-des {
color: #21252b;
font-size: 11px;
font-weight: 300;
padding: 4px 0 7px;
}
/* 游戏奖品 end */
</style>
src/router/index.js
...@@ -18,6 +18,11 @@ const routes = [ ...@@ -18,6 +18,11 @@ const routes = [
component: () => import('@/components/cmh/my-reward.vue'), component: () => import('@/components/cmh/my-reward.vue'),
name: '我的奖品' name: '我的奖品'
}, },
{
path: '/support',
component: () => import('@/components/cmh/support.vue'),
name: '助力拆盲盒'
},
]; ];
const router = new VueRouter({ const router = new VueRouter({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment