Skip to content

G
game-h5
Commit 1f869bf1 by 曾经
Options

no message

parent 20837fdc
Showing with 1095 additions and 88 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/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