Skip to content

G
game-h5
Commit a1694510 by 曾经
Options

模板

parent f0bcf283
Showing with 4142 additions and 120 deletions
src/api/common.js
...@@ -57,6 +57,9 @@ const gameApiMap = { ...@@ -57,6 +57,9 @@ const gameApiMap = {
getGameShareQrCodeUrl: { getGameShareQrCodeUrl: {
type:"post", type:"post",
url: '/gic-wx-app/game/share' url: '/gic-wx-app/game/share'
} },
// 获取助力详情
getHelpDetail: '/gic-wx-app/game/help_detail',
} }
export const gameRequestApi = getExport(gameApiMap) export const gameRequestApi = getExport(gameApiMap)
\ No newline at end of file
src/api/service.js
...@@ -13,13 +13,13 @@ service.interceptors.request.use((config) => { ...@@ -13,13 +13,13 @@ service.interceptors.request.use((config) => {
service.interceptors.response.use((response) => { service.interceptors.response.use((response) => {
const { data } = response; const { data } = response;
let err; // let err;
const { errorCode, code } = data; const { errorCode, code } = data;
if( errorCode==0||code==0){ if( errorCode==0||code==0){
return data.result; return data.result;
}else{ }else{
err = new Error(data.message || '系统异常'); // err = new Error(data.message || '系统异常');
return Promise.reject(err); return Promise.reject(data);
} }
}, (err) => { }, (err) => {
const status = err.response.status; const status = err.response.status;
......
src/components/cmh/components/open-box.vue → src/components/cmh/theme-1/components/open-box.vue
<template> <template>
<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="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content"> <div class="content">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix"> <img :src="data.imageSelectUrl" class="box-img" mode="widthFix">
......
src/components/cmh/components/share-img-dialog.vue → src/components/cmh/theme-1/components/share-img-dialog.vue
...@@ -12,14 +12,8 @@ ...@@ -12,14 +12,8 @@
<script> <script>
export default { export default {
props: { props: {
bgImage: { bgImage: String,
type: String, qrcodeUrl: 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, show: Boolean,
}, },
data() { data() {
...@@ -46,7 +40,6 @@ export default { ...@@ -46,7 +40,6 @@ export default {
myImage.height = _h; myImage.height = _h;
myImage.crossOrigin = "Anonymous"; myImage.crossOrigin = "Anonymous";
myImage.src = this.bgImage; //背景图片 你自己本地的图片或者在线图片 myImage.src = this.bgImage; //背景图片 你自己本地的图片或者在线图片
console.log(this.bgImage);
myImage.onload = () => { myImage.onload = () => {
context.drawImage(myImage, 0, 0, _w, _h); context.drawImage(myImage, 0, 0, _w, _h);
...@@ -60,8 +53,6 @@ export default { ...@@ -60,8 +53,6 @@ export default {
context.drawImage(myImage2, 400, 824, 120, 120); context.drawImage(myImage2, 400, 824, 120, 120);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下 var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById("shareImage"); var img = document.getElementById("shareImage");
// document.getElementById('avatar').src = base64;
img.src = base64; img.src = base64;
}; };
}; };
...@@ -110,7 +101,7 @@ export default { ...@@ -110,7 +101,7 @@ export default {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; text-align: center;
width: 75%; width: 60%;
} }
.dialog-bg .content .tips { .dialog-bg .content .tips {
...@@ -124,7 +115,7 @@ export default { ...@@ -124,7 +115,7 @@ export default {
} }
.dialog-bg .content .icon-guanbi { .dialog-bg .content .icon-guanbi {
margin: 32px auto 0; margin: 20px auto 0;
color: white; color: white;
opacity: 0.8; opacity: 0.8;
padding: 15px; padding: 15px;
......
src/components/cmh/theme-1/components/share-select-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" :class="show ? 'show' : 'hidden'" @click="close">
<div class="content" @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">
每邀请{{ shareConditionObj.inviteNum }}位好友助力增加{{ shareConditionObj.value }}次，被邀请用户进入分享页{{ shareConditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。
</div>
<div class="share-type-box">
<div class="share-type-item" @click="shareWx">
<img src="../images/wx_icon.png" mode="aspectFit"/>
<div class="share-type-name">微信</div>
</div>
<div class="share-type-item" @click="sharePyq">
<img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div>
</div>
</div>
</div>
</div>
<div class="cell" v-if="list && list.length" v-infinite-scroll="loadData">
<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 list" :key="item">
<div class="time">{{ item.createTime | formatDate }}</div>
<div class="text">{{ item.helpMemberName || item.helpMemberNick }} 助力成功</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getReportRecord,
} = gameRequestApi;
export default {
props: {
memberId: String,
enterpriseId: String,
gameId: String,
show: Boolean,
shareConditionObj: {
type: Object,
default:()=> {
return {};
},
},
},
data() {
return {
conditionObj: {},
totalCount: 0,
pageSize: 20,
currentPage: 1,
list: [],
};
},
created(){
},
methods: {
reloadData(){
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
},
async loadData(){
if(this.list.length >= this.totalCount && this.totalCount != 0){
return;
}
let res = await getReportRecord({
memberId: this.memberId || '',
enterpriseId: this.enterpriseId || '',
gameId: this.gameId || '',
currentPage: this.currentPage,
pageSize: this.pageSize
})
this.totalCount = res.totalCount;
let list = this.list || [];
if(this.currentPage == 1){
list = res.result||[];
}else{
list = list.concat(res.result||[])
}
this.currentPage ++;
this.list = list;
},
again() {
this.$emit("again");
this.close();
},
close() {
this.show = false;
setTimeout(() => {
this.$emit("update:show", false);
}, 200);
},
tap() {},
shareWx(){
this.$emit("shareWx",this.conditionObj);
},
sharePyq(){
this.$emit("sharePyq",this.conditionObj);
}
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}
},
watch:{
show(n){
console.log("show---------->",n);
if(n){
this.reloadData();
}
},
}
};
</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 .info{
flex: 1;
}
.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/theme-1/my-reward.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img src="./images/rulebg.png" class="bg-img" mode="widthFix" />
</div>
<div class="content">
<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="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" @click="toRewardDetail(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>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi;
import { Manager } from "../../manager";
export default {
components: {},
data() {
return {
list: [],
pageSize: 20,
currentPage: 1,
totalCount: 0,
};
},
created() {
document.title = "我的奖品";
this.manager = new Manager(this);
this.windowHeight = window.innerHeight;
this.reloadData();
},
methods: {
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 = this.list || [];
if (this.currentPage == 1) {
list = res.result || [];
} else {
list = list.concat(res.result || []);
}
this.currentPage++;
this.list = list;
},
toRewardDetail(item) {
switch (+item.prizeType) {
case 0:
break;
case 1:
this.manager.toIntegralDetail();
break;
case 2:
this.manager.toCouponList();
break;
case 3:
break;
default:
break;
}
},
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>
<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-cell {
border-radius: 8px;
border: 1px solid #06b0b2;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
}
.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;
}
.infinite-list {
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 → src/components/cmh/theme-1/rule.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/rulebg.png" class="bg-img" mode="widthFix">
</div> </div>
<div class="content"> <div class="content">
<div class="content-cell" v-if="rule && rule.gameId"> <div class="content-cell" v-if="rule && rule.gameId">
......
src/components/cmh/support.vue → src/components/cmh/theme-1/support.vue
<template> <template>
<div class="box"> <div class="box">
<div class="page-bg"> <div class="page-bg" v-if="game && game.gameExt && game.gameExt.bgHelpUrl">
<img <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" :src="game.gameExt.bgHelpUrl"
class="bg-img" class="bg-img"
mode="widthFix" mode="widthFix"
/> />
</div> </div>
<div class="content"> <div class="content">
<div class="content-top"> <div class="content-top">
<img <img v-if="game && game.gameExt && game.gameExt.bgBannerHelpUrl"
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_helppage_banner.png" :src="game.gameExt.bgBannerHelpUrl"
class="top-img" class="top-img"
mode="widthFix" mode="widthFix"
/> />
...@@ -21,63 +21,130 @@ ...@@ -21,63 +21,130 @@
</div> </div>
</div> </div>
<div class="content-cell"> <div class="content-cell">
<img src="" class="header-img" /> <div class="header-img-box">
<div class="friend-name">你的好友 凌*</div> <img :src="helpDetail.shareMemberImage" class="header-img" />
</div>
<div class="friend-name">你的好友 {{ helpDetail.shareMemberName }}</div>
<div class="tip-text">正在请求您的助力</div> <div class="tip-text">正在请求您的助力</div>
<div class="handle-btn red" @click="support">为好友助力</div> <div class="handle-btn red" @click="support" v-if="helpDetail.helpStatus == 0">为好友助力</div>
<div class="handle-btn blue" @click="playGame">我要参加游戏</div> <div class="handle-btn blue" @click="toPlayGame">我要参加游戏</div>
</div> </div>
<div class="content-cell"> <div class="content-cell" v-if="gameReward && gameReward.length">
<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>
<div class="iconfont icon-duobianxing"></div> <div class="iconfont icon-duobianxing"></div>
</div> </div>
<div class="reward-box"> <div class="reward-box">
<div class="reward-item-box"> <div class="reward-item-box" v-for="item in gameReward" :key="item">
<div class="reward-item-detail"> <div class="reward-item-detail">
<div class="img-box"> <div class="img-box">
<img <img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png" :src="item.prizeImageUrl"
class="reward-img" class="reward-img"
mode="scaleToFit" mode="scaleToFit"
/> />
</div> </div>
<div class="reward-name">100元无门槛券</div> <div class="reward-name">{{ item.prizeName }}</div>
<div class="reward-des">线下门店消费满500使用</div> <div class="reward-des">{{ item.prizeDesc }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="pyqOptions"
></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div> </div>
</template> </template>
<script> <script>
import { gameRequestApi } from "@/api/common.js";
const {
getHelpDetail,
getGameReward,
getGameInfo,
getGameShareQrCodeUrl,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import { Manager } from "../../manager";
export default { export default {
components: {}, components: {
ShareImgDialog,
AlertDialog
},
data() { data() {
return {}; return {
alertOptions:{},
showShareImgDialog: false,
game:{},
helpDetail: {},
gameReward: []
};
}, },
created() { created() {
document.title = "游戏助力"; document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData(); this.loadData();
}, },
methods: { methods: {
loadData() { async loadData() {
console.log(this.$route.query); console.log(this.$route.query);
let query = this.$route.query;
this.helpDetail = await getHelpDetail({
enterpriseId: query.enterpriseId,
shareMemberId: query.shareMemberId,
gameId: query.gameId,
helpMemberId: query.memberId || '',
});
this.gameReward = await getGameReward({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
this.game = await getGameInfo({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
}, },
playGame() { toPlayGame() {
let query = this.$route.query;
this.$router.replace({ this.$router.replace({
path: "/cmh/", path: "/cmh/1",
query: { query: {
gameId: "1121213", gameId: query.gameId,
memberId: query.memberId || '',
enterpriseId: query.enterpriseId,
isAttest: query.isAttest,
}, },
}); });
}, },
support(){ support(){
this.manager.support();
},
async sharePyq(options) {
let query = this.$route.query;
let result = await getGameShareQrCodeUrl({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.shareMemberId || '',
shareType: options.type == 12 ? 2 : 1,
});
this.pyqOptions = {
bgImage: options.shareReport,
qrcodeUrl: result.qrCodeUrl,
};
this.showShareImgDialog = true;
}, },
}, },
}; };
...@@ -162,11 +229,13 @@ export default { ...@@ -162,11 +229,13 @@ export default {
} }
/* 好友助力 */ /* 好友助力 */
.header-img-box{
padding: 40px 0 14px;
}
.header-img { .header-img {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
padding: 40px 0 14px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
......
src/components/cmh/theme-2/components/alert.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show && (title || content || (buttonList && buttonList.length))">
<div class="content">
<div class="content-detail-bg">
<div class="content-detail">
<div class="title" v-if="title">{{ title }}</div>
<div class="subtitle" v-if="content">{{ content }}</div>
<div class="handle-btn-box" v-if="buttonList && buttonList.length">
<div
class="handle-btn"
v-for="item in buttonList"
:key="item"
@click="item.click()"
>
{{ item.text }}
</div>
</div>
</div>
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
title:{
type: String,
default: "提示"
},
content:{
type: String,
default: "提示内容"
},
buttonList:{
type: Object,
default(){
return [
{
text: "btn1",
click: function () {
console.log("click1");
},
},
{
text: "btn1",
click: function () {
console.log("click2");
},
},
]
}
},
cancel:{
type: Function,
default(){
console.log("cancel");
}
},
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
this.options.cancel();
},
},
};
</script>
<style scoped lang="scss">
.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: 45%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
.content-detail-bg {
background: #FDFCEE;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
padding: 8px 10px;
.content-detail {
border: 2px solid #C9C6AD;
border-radius: 10px;
text-align: center;
padding: 10px 13px;
// box-sizing: border-box;
.title {
color: #21252B;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #21252B;
font-size: 15px;
padding: 20px 0 30px;
}
.handle-btn-box {
display: flex;
padding-bottom: 15px;
justify-content: center;
.handle-btn {
box-sizing: border-box;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
font-size: 16px;
font-weight: 600;
border-radius: 20px;
background: #000000;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
flex: 1;
max-width: 165px;
margin-right: 15px;
&:last-child {
margin-right: 0px;
}
}
}
}
}
}
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: rgba(255, 255, 255, 0.8);
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-2/components/open-box.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img src="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content">
<div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
data: Object,
show: Boolean
},
data() {
return {};
},
methods: {
open(){
this.$emit('open');
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.dialog-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content{
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
text-align: center;
width: 82%;
}
.dialog-bg .content .title{
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 100%;
margin: 0 auto;
height: 320px;
}
.dialog-bg .content .handle-btn{
margin: -12px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #FFFAB0;
text-align: center;
line-height: 40px;
color: black;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
font-family: PingFangSC-Medium, PingFang SC;
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-2/components/reward-dialog.vue 0 → 100644
<template>
<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"
/>
<div class="content">
<div class="title">恭喜获得</div>
<div class="subtitle">{{ reward.prizeName }}</div>
<div class="reward-box">
<img :src="reward.prizeImageUrl" class="reward-img"/>
<div class="reward-log-text">
<span>奖品已放置</span>
<span class="color-text">【我的奖品】</span>
</div>
</div>
<div class="handle-btn" @click="close">收下</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
reward: Object,
show: Boolean,
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
},
},
};
</script>
<style scoped>
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content {
position: absolute;
z-index: 2;
left: 50%;
top: 49%;
transform: translate(-50%, -50%);
text-align: center;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .reward-box{
width: 218px;
border-radius: 5px;
background: linear-gradient(90deg, #E8FFFD 0%, #FAFFE7 100%);
text-align: center;
margin-top: 38px;
}
.dialog-bg .content .reward-img{
margin: 0 auto;
padding: 29px 0 0;
width: 150px;
height: 150px;
}
.dialog-bg .content .reward-log-text{
padding: 11px 0 14px;
font-size: 12px;
color: #27292B;
}
.dialog-bg .content .reward-log-text .color-text{
color: black;
}
.dialog-bg .content .handle-btn {
margin: 42px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #FFFAB0;
text-align: center;
line-height: 40px;
color: black;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
font-family: PingFangSC-Medium, PingFang SC;
}
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-2/components/reward-fail.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<div class="content">
<div class="title">差一点就中奖了</div>
<div class="subtitle">一定是姿势不对，换个姿势试试</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_fail_pic.png" class="box-img" mode="widthFix">
<div class="handle-btn" @click="again">再抽一个</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean
},
data() {
return {};
},
methods: {
again(){
this.$emit('again');
this.close();
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.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: 49%;
transform: translate(-50%,-50%);
text-align: center;
min-width: 224px;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 180px;
margin: 50px auto 0;
}
.dialog-bg .content .handle-btn{
margin: 70px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #FFFAB0;
text-align: center;
line-height: 40px;
color: black;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
font-family: PingFangSC-Medium, PingFang SC;
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-2/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: String,
qrcodeUrl: String,
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; //背景图片 你自己本地的图片或者在线图片
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");
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: 60%;
}
.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: 20px 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 → src/components/cmh/theme-2/components/share-select-dialog.vue
...@@ -10,15 +10,15 @@ ...@@ -10,15 +10,15 @@
<div class="info"> <div class="info">
<div class="title">分享至微信/朋友圈</div> <div class="title">分享至微信/朋友圈</div>
<div class="subtitle"> <div class="subtitle">
每邀请{{ conditionObj.inviteNum }}位好友助力增加{{ conditionObj.value }}次，被邀请用户进入分享页{{ conditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。 每邀请{{ shareConditionObj.inviteNum }}位好友助力增加{{ shareConditionObj.value }}次，被邀请用户进入分享页{{ shareConditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。
</div> </div>
<div class="share-type-box"> <div class="share-type-box">
<div class="share-type-item" @click="shareWx"> <div class="share-type-item" @click="shareWx">
<img src="" /> <img src="../images/wx_icon.png" mode="aspectFit"/>
<div class="share-type-name">微信</div> <div class="share-type-name">微信</div>
</div> </div>
<div class="share-type-item" @click="sharePyq"> <div class="share-type-item" @click="sharePyq">
<img src="" /> <img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div> <div class="share-type-name">朋友圈</div>
</div> </div>
</div> </div>
...@@ -52,7 +52,12 @@ export default { ...@@ -52,7 +52,12 @@ export default {
enterpriseId: String, enterpriseId: String,
gameId: String, gameId: String,
show: Boolean, show: Boolean,
rule: Object, shareConditionObj: {
type: Object,
default:()=> {
return {};
},
},
}, },
data() { data() {
return { return {
...@@ -86,7 +91,7 @@ export default { ...@@ -86,7 +91,7 @@ export default {
pageSize: this.pageSize pageSize: this.pageSize
}) })
this.totalCount = res.totalCount; this.totalCount = res.totalCount;
let list = []; let list = this.list || [];
if(this.currentPage == 1){ if(this.currentPage == 1){
list = res.result||[]; list = res.result||[];
}else{ }else{
...@@ -120,17 +125,6 @@ export default { ...@@ -120,17 +125,6 @@ export default {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
} }
}, },
watch:{
rule(n){
let gameRuleConditionList = n.gameRuleConditionList || [];
gameRuleConditionList.map((item)=>{
let obj = JSON.parse(item.conditionJson);
if(+obj.type == 11 || +obj.type == 12){
this.conditionObj = obj;
}
})
}
}
}; };
</script> </script>
...@@ -249,6 +243,9 @@ export default { ...@@ -249,6 +243,9 @@ export default {
padding: 14px 12px 16px; padding: 14px 12px 16px;
display: flex; display: flex;
} }
.content .cell .info{
flex: 1;
}
.content .cell .icon-duobianxing { .content .cell .icon-duobianxing {
color: #38bdcd; color: #38bdcd;
font-size: 15px; font-size: 15px;
......
src/components/cmh/index.vue → src/components/cmh/theme-2/index.vue
...@@ -113,14 +113,19 @@ ...@@ -113,14 +113,19 @@
<share-select-dialog <share-select-dialog
:show.sync="showShareSelectDialog" :show.sync="showShareSelectDialog"
v-show="showShareSelectDialog" v-show="showShareSelectDialog"
:rule="rule" :memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="shareWx" @shareWx="shareWx"
@sharePyq="sharePyq" @sharePyq="sharePyq"
></share-select-dialog> ></share-select-dialog>
<share-img-dialog <share-img-dialog
:show.sync="showShareImgDialog" :show.sync="showShareImgDialog"
v-bind="pyqOptions" v-bind="pyqOptions"
></share-img-dialog> ></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog> <alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div> </div>
</template> </template>
...@@ -138,7 +143,7 @@ const { ...@@ -138,7 +143,7 @@ const {
import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Manager } from "../manager"; import { Manager } from "../../manager";
import "swiper/css/swiper.css"; import "swiper/css/swiper.css";
...@@ -167,6 +172,7 @@ export default { ...@@ -167,6 +172,7 @@ export default {
showRewardFailDialog: false, showRewardFailDialog: false,
showShareSelectDialog: false, showShareSelectDialog: false,
showShareImgDialog: false, showShareImgDialog: false,
shareConditionObj: {},
alertOptions: {}, alertOptions: {},
list: [ list: [
"刷卡拉拉卡", "刷卡拉拉卡",
...@@ -176,40 +182,40 @@ export default { ...@@ -176,40 +182,40 @@ export default {
], ],
boxList: [ boxList: [
{ {
left: "calc(51% - 47px)", left: "calc(23% - 47px)",
top: "214px", top: "204px",
}, },
{ {
left: "calc(33% - 47px)", left: "calc(45% - 47px)",
top: "262px", top: "204px",
}, },
{ {
left: "calc(66% - 47px)", left: "calc(68% - 47px)",
top: "258px", top: "204px",
}, },
{ {
left: "calc(16% - 47px)", left: "calc(30% - 47px)",
top: "307px", top: "281px",
}, },
{ {
left: "calc(52% - 47px)", left: "calc(53% - 47px)",
top: "306px", top: "281px",
}, },
{ {
left: "calc(84% - 47px)", left: "calc(76% - 47px)",
top: "307px", top: "281px",
}, },
{ {
left: "calc(35% - 47px)", left: "calc(23% - 47px)",
top: "351px", top: "368px",
}, },
{ {
left: "calc(68% - 47px)", left: "calc(45% - 47px)",
top: "355px", top: "368px",
}, },
{ {
left: "calc(53% - 47px)", left: "calc(68% - 47px)",
top: "400px", top: "368px",
}, },
], ],
swiperOptions: { swiperOptions: {
...@@ -227,7 +233,7 @@ export default { ...@@ -227,7 +233,7 @@ export default {
gameId: "", gameId: "",
enterpriseId: "", enterpriseId: "",
memberId: "", memberId: "",
isAttest: false, isAttest: 0,
currentIntegral: "--", currentIntegral: "--",
rule: {}, rule: {},
}; };
...@@ -239,7 +245,7 @@ export default { ...@@ -239,7 +245,7 @@ export default {
this.gameId = query.gameId; this.gameId = query.gameId;
this.enterpriseId = query.enterpriseId; this.enterpriseId = query.enterpriseId;
this.memberId = query.memberId; this.memberId = query.memberId;
this.isAttest = query.isAttest; this.isAttest = +query.isAttest;
if (!this.audio) { if (!this.audio) {
this.audio = new Audio(); this.audio = new Audio();
...@@ -259,6 +265,11 @@ export default { ...@@ -259,6 +265,11 @@ export default {
this.getGamePlayNumber(); this.getGamePlayNumber();
this.getIntegral(); this.getIntegral();
this.getGamePlayBarrage(); this.getGamePlayBarrage();
this.manager.startPolling();
},
mounted(){
this.manager.stopPolling();
}, },
methods: { methods: {
async getGame() { async getGame() {
...@@ -286,6 +297,13 @@ export default { ...@@ -286,6 +297,13 @@ export default {
gameId: this.gameId, gameId: this.gameId,
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
}); });
let gameRuleConditionList = rule.gameRuleConditionList || [];
gameRuleConditionList.map((item)=>{
let obj = JSON.parse(item.conditionJson);
if(+obj.type == 11 || +obj.type == 12){
this.shareConditionObj = obj;
}
})
this.rule = rule; this.rule = rule;
window.wx.miniProgram.postMessage({ window.wx.miniProgram.postMessage({
data: { data: {
...@@ -322,10 +340,15 @@ export default { ...@@ -322,10 +340,15 @@ export default {
let boxItem = prizeStyleList[itemIndex]; let boxItem = prizeStyleList[itemIndex];
this.showOpenBoxDialog = true; this.showOpenBoxDialog = true;
this.openBoxData = boxItem; this.openBoxData = boxItem;
if(this.playNumberObj.playNumber == 0 && this.rule.integral && this.currentIntegral > this.rule.integral){
this.openBoxTitle = `每次参与游戏消耗${ this.rule.integral }积分`
}else{
this.openBoxTitle = "";
}
}, },
toGameRule() { toGameRule() {
this.$router.push({ this.$router.push({
path: "/cmh/rule", path: "/cmh/2/rule",
query: { query: {
gameId: this.gameId, gameId: this.gameId,
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
...@@ -334,7 +357,7 @@ export default { ...@@ -334,7 +357,7 @@ export default {
}, },
toMyReward() { toMyReward() {
this.$router.push({ this.$router.push({
path: "/cmh/my-reward", path: "/cmh/2/my-reward",
query: { query: {
gameId: this.gameId, gameId: this.gameId,
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
...@@ -350,15 +373,22 @@ export default { ...@@ -350,15 +373,22 @@ export default {
this.audio.pause(); this.audio.pause();
} }
}, },
clickShareBtn() { async clickShareBtn() {
// this.showShareImgDialog = true; await this.manager.checkAttest();
this.showShareSelectDialog = true; this.showShareSelectDialog = true;
}, },
shareWx(options) { shareWx() {
console.log(options); let options = this.shareConditionObj;
this.showShareSelectDialog = false;
this.manager.shareWx({
title: options.shareTitle,
imageUrl: options.shareCard,
path: `/pages/game/game-h5?gameId=${ this.gameId }&shareMemberId=${ this.memberId }`,
})
}, },
async sharePyq(options) { async sharePyq() {
let result = getGameShareQrCodeUrl({ let options = this.shareConditionObj;
let result = await getGameShareQrCodeUrl({
gameId: this.gameId, gameId: this.gameId,
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
memberId: this.memberId, memberId: this.memberId,
...@@ -373,7 +403,9 @@ export default { ...@@ -373,7 +403,9 @@ export default {
this.showShareImgDialog = true; this.showShareImgDialog = true;
}, },
clickAdImg() { clickAdImg() {
console.log(); window.wx.miniProgram.navigateTo({
url: '/' + this.rule.dumpPath,
})
}, },
async open() { async open() {
let gameRes = await this.manager.play(); let gameRes = await this.manager.play();
...@@ -383,11 +415,11 @@ export default { ...@@ -383,11 +415,11 @@ export default {
if (gameRes.prizeType) { if (gameRes.prizeType) {
this.rewardDetail = gameRes; this.rewardDetail = gameRes;
this.showRewardDialog = true; this.showRewardDialog = true;
this.getGamePlayNumber();
this.getIntegral();
} else { } else {
this.showRewardFailDialog = true; this.showRewardFailDialog = true;
} }
this.getGamePlayNumber();
this.getIntegral();
}, },
}, },
}; };
...@@ -454,7 +486,7 @@ export default { ...@@ -454,7 +486,7 @@ export default {
top: 20px; top: 20px;
padding: 7px 5px; padding: 7px 5px;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
background: rgba(39, 41, 43, 0.5); background: rgba(39, 41, 43, 0.75);
z-index: 10; z-index: 10;
color: white; color: white;
font-size: 11px; font-size: 11px;
...@@ -584,7 +616,7 @@ export default { ...@@ -584,7 +616,7 @@ export default {
font-family: DINAlternate-Bold, DINAlternate; font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #388ccc; color: #000000;
line-height: 23px; line-height: 23px;
position: relative; position: relative;
z-index: 2; z-index: 2;
...@@ -621,7 +653,7 @@ export default { ...@@ -621,7 +653,7 @@ export default {
position: fixed; position: fixed;
z-index: 10; z-index: 10;
right: 10px; right: 10px;
bottom: 90px; bottom: 40px;
padding: 10px; padding: 10px;
} }
.share-box .icon { .share-box .icon {
...@@ -635,7 +667,7 @@ export default { ...@@ -635,7 +667,7 @@ export default {
box-shadow: inset 0px 3px 2px 0px rgba(243, 243, 243, 0.4); box-shadow: inset 0px 3px 2px 0px rgba(243, 243, 243, 0.4);
} }
.share-box .icon .iconfont { .share-box .icon .iconfont {
background-image: -webkit-linear-gradient(180deg, #01ffde 0%, #01fff4 100%); background-image: -webkit-linear-gradient(180deg, #FAF53E 0%, #FAF53E 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
......
src/components/cmh/theme-2/my-reward.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img
src="./images/rulebg.png"
class="bg-img"
mode="widthFix"
/>
</div>
<div class="content">
<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="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" @click="toRewardDetail(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>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi;
import { Manager } from "../../manager";
export default {
components: {},
data() {
return {
list:[],
pageSize: 20,
currentPage: 1,
totalCount: 0,
};
},
created() {
document.title = "我的奖品";
this.manager = new Manager(this);
this.windowHeight = window.innerHeight;
this.reloadData();
},
methods: {
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 = this.list || [];
if(this.currentPage == 1){
list = res.result||[];
}else{
list = list.concat(res.result||[])
}
this.currentPage ++;
this.list = list;
},
toRewardDetail(item) {
switch (+item.prizeType) {
case 0:
break;
case 1:
this.manager.toIntegralDetail();
break;
case 2:
this.manager.toCouponList();
break;
case 3:
break;
default:
break;
}
},
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>
<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-cell {
border-radius: 8px;
border: 1px solid #21252B;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
}
.cell-top {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(
180deg,
#E8FCCF 0%,
rgba(238, 247, 225, 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: #21252B;
font-size: 15px;
}
.infinite-list {
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;
text-align: center;
background: #000000;
color: white;
font-size: 14px;
font-weight: 600;
}
</style>
src/components/cmh/theme-2/rule.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img src="./images/rulebg.png" class="bg-img" mode="widthFix">
</div>
<div class="content">
<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="rule-box">
<div class="rule-item">
<div class="title">游戏时间</div>
<div class="value">{{ rule.startDate | formatDate }}-{{ rule.endDate | formatDate }}</div>
</div>
<div class="rule-item" v-if="rule.playConditionFlag">
<div class="title">参与门槛</div>
<div class="value point" v-for="item in rule.gameRuleConditionList" :key="item">
<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 class="rule-item" v-if="rule.playTimes">
<div class="title">游戏参与次数</div>
<div class="value">每人{{ rule.playTimes }}次</div>
</div>
<div class="rule-item">
<div class="title">适用人群</div>
<div class="value">{{ rule.memberDesc }}</div>
</div>
<div class="rule-item">
<div class="title">游戏说明</div>
<div class="value point" v-html="rule.gameRule"></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>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getGameRule,
getGameReward,
} = gameRequestApi;
export default {
components:{},
data(){
return {
rule:{},
rewardList:[],
}
},
created(){
document.title = "游戏规则"
this.loadData();
},
methods:{
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() + "日"
}
}
}
</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-cell{
border-radius: 8px;
border: 1px solid #21252B;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
}
.cell-top{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(180deg, #E8FCCF 0%, rgba(238, 247, 225, 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: #21252B;
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;
}
.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;
}
.rule-box{
}
.rule-item{
padding: 15px 13px 0;
}
.rule-item:last-child{
padding-bottom: 16px;
}
.rule-item .title{
color: #21252B;
font-size: 14px;
font-weight: 600;
}
.rule-item .value{
color: #21252B;
font-size: 13px;
margin-top: 8px;
}
.rule-item .value.point{
padding-left: 10px;
position: relative;
}
.rule-item .value.point::before{
content: " ";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #38BDCD;
top: 7px;
left: 0;
z-index: 1;
}
</style>
\ No newline at end of file
src/components/cmh/theme-2/support.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg" v-if="game && game.gameExt && game.gameExt.bgHelpUrl">
<img
:src="game.gameExt.bgHelpUrl"
class="bg-img"
mode="widthFix"
/>
</div>
<div class="content">
<div class="content-top">
<img v-if="game && game.gameExt && game.gameExt.bgBannerHelpUrl"
:src="game.gameExt.bgBannerHelpUrl"
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">
<div class="header-img-box">
<img :src="helpDetail.shareMemberImage" class="header-img" />
</div>
<div class="friend-name">你的好友 {{ helpDetail.shareMemberName }}</div>
<div class="tip-text">正在请求您的助力</div>
<div class="handle-btn red" @click="support" v-if="helpDetail.helpStatus == 0">为好友助力</div>
<div class="handle-btn blue" @click="toPlayGame">我要参加游戏</div>
</div>
<div class="content-cell" v-if="gameReward && gameReward.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 gameReward" :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>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="pyqOptions"
></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getHelpDetail,
getGameReward,
getGameInfo,
getGameShareQrCodeUrl,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import { Manager } from "../../manager";
export default {
components: {
ShareImgDialog,
AlertDialog
},
data() {
return {
alertOptions:{},
showShareImgDialog: false,
game:{},
helpDetail: {},
gameReward: []
};
},
created() {
document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData();
},
methods: {
async loadData() {
console.log(this.$route.query);
let query = this.$route.query;
this.helpDetail = await getHelpDetail({
enterpriseId: query.enterpriseId,
shareMemberId: query.shareMemberId,
gameId: query.gameId,
helpMemberId: query.memberId || '',
});
this.gameReward = await getGameReward({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
this.game = await getGameInfo({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
},
toPlayGame() {
let query = this.$route.query;
this.$router.replace({
path: "/cmh/2",
query: {
gameId: query.gameId,
memberId: query.memberId || '',
enterpriseId: query.enterpriseId,
isAttest: query.isAttest,
},
});
},
support(){
this.manager.support();
},
async sharePyq(options) {
let query = this.$route.query;
let result = await getGameShareQrCodeUrl({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.shareMemberId || '',
shareType: options.type == 12 ? 2 : 1,
});
this.pyqOptions = {
bgImage: options.shareReport,
qrcodeUrl: result.qrCodeUrl,
};
this.showShareImgDialog = true;
},
},
};
</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-box{
padding: 40px 0 14px;
}
.header-img {
width: 60px;
height: 60px;
border-radius: 50%;
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/components/cmh/theme-3/components/alert.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show && (title || content || (buttonList && buttonList.length))">
<div class="content">
<div class="content-detail-bg">
<div class="content-detail">
<div class="title" v-if="title">{{ title }}</div>
<div class="subtitle" v-if="content">{{ content }}</div>
<div class="handle-btn-box" v-if="buttonList && buttonList.length">
<div
class="handle-btn"
v-for="item in buttonList"
:key="item"
@click="item.click()"
>
{{ item.text }}
</div>
</div>
</div>
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
title:{
type: String,
default: "提示"
},
content:{
type: String,
default: "提示内容"
},
buttonList:{
type: Object,
default(){
return [
{
text: "btn1",
click: function () {
console.log("click1");
},
},
{
text: "btn1",
click: function () {
console.log("click2");
},
},
]
}
},
cancel:{
type: Function,
default(){
console.log("cancel");
}
},
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
this.options.cancel();
},
},
};
</script>
<style scoped lang="scss">
.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: 45%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
.content-detail-bg {
background: #D9FCF5;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
padding: 8px 10px;
.content-detail {
border-radius: 10px;
text-align: center;
padding: 10px 13px;
border: 2px solid #ADC9C5;
.title {
color: #21252B;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #21252B;
font-size: 15px;
padding: 20px 0 30px;
}
.handle-btn-box {
display: flex;
padding-bottom: 15px;
justify-content: center;
.handle-btn {
box-sizing: border-box;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
font-size: 16px;
font-weight: 600;
border-radius: 20px;
background: #000000;
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);
flex: 1;
max-width: 165px;
margin-right: 15px;
&:last-child {
margin-right: 0px;
}
}
}
}
}
}
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-3/components/open-box.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img src="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content">
<div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
data: Object,
show: Boolean
},
data() {
return {};
},
methods: {
open(){
this.$emit('open');
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.dialog-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content{
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
text-align: center;
width: 82%;
}
.dialog-bg .content .title{
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 100%;
margin: 0 auto;
height: 320px;
}
.dialog-bg .content .handle-btn{
margin: -12px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #D8FCFA;
text-align: center;
line-height: 40px;
color: #21252B;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 1px 1px 0px rgba(246, 255, 212, 0.8);
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-3/components/reward-dialog.vue 0 → 100644
<template>
<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"
/>
<div class="content">
<div class="title">恭喜获得</div>
<div class="subtitle">{{ reward.prizeName }}</div>
<div class="reward-box">
<img :src="reward.prizeImageUrl" class="reward-img"/>
<div class="reward-log-text">
<span>奖品已放置</span>
<span class="color-text">【我的奖品】</span>
</div>
</div>
<div class="handle-btn" @click="close">收下</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
reward: Object,
show: Boolean,
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
},
},
};
</script>
<style scoped>
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content {
position: absolute;
z-index: 2;
left: 50%;
top: 49%;
transform: translate(-50%, -50%);
text-align: center;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .reward-box{
width: 218px;
border-radius: 5px;
background: linear-gradient(90deg, #E8FFFD 0%, #FAFFE7 100%);
text-align: center;
margin-top: 38px;
}
.dialog-bg .content .reward-img{
margin: 0 auto;
padding: 29px 0 0;
width: 150px;
height: 150px;
}
.dialog-bg .content .reward-log-text{
padding: 11px 0 14px;
font-size: 12px;
color: #27292B;
}
.dialog-bg .content .reward-log-text .color-text{
color: rgba(33, 37, 43, 1);
font-weight: 600;
}
.dialog-bg .content .handle-btn {
margin: 42px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #D8FCFA;
text-align: center;
line-height: 40px;
color: #21252B;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(246, 255, 212, 0.8);
}
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-3/components/reward-fail.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<div class="content">
<div class="title">差一点就中奖了</div>
<div class="subtitle">一定是姿势不对，换个姿势试试</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_fail_pic.png" class="box-img" mode="widthFix">
<div class="handle-btn" @click="again">再抽一个</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean
},
data() {
return {};
},
methods: {
again(){
this.$emit('again');
this.close();
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.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: 49%;
transform: translate(-50%,-50%);
text-align: center;
min-width: 224px;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 180px;
margin: 50px auto 0;
}
.dialog-bg .content .handle-btn{
margin: 70px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: rgba(216, 252, 250, 1);
text-align: center;
line-height: 40px;
color: #21252B;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(246, 255, 212, 0.8);
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-3/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: String,
qrcodeUrl: String,
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; //背景图片 你自己本地的图片或者在线图片
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");
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: 60%;
}
.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: 20px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/theme-3/components/share-select-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" :class="show ? 'show' : 'hidden'" @click="close">
<div class="content" @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">
每邀请{{ shareConditionObj.inviteNum }}位好友助力增加{{ shareConditionObj.value }}次，被邀请用户进入分享页{{ shareConditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。
</div>
<div class="share-type-box">
<div class="share-type-item" @click="shareWx">
<img src="../images/wx_icon.png" mode="aspectFit"/>
<div class="share-type-name">微信</div>
</div>
<div class="share-type-item" @click="sharePyq">
<img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div>
</div>
</div>
</div>
</div>
<div class="cell" v-if="list && list.length" v-infinite-scroll="loadData">
<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 list" :key="item">
<div class="time">{{ item.createTime | formatDate }}</div>
<div class="text">{{ item.helpMemberName || item.helpMemberNick }} 助力成功</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getReportRecord,
} = gameRequestApi;
export default {
props: {
memberId: String,
enterpriseId: String,
gameId: String,
show: Boolean,
shareConditionObj: {
type: Object,
default:()=> {
return {};
},
},
},
data() {
return {
conditionObj: {},
count: 100,
pageSize: 20,
currentPage: 1,
list: [],
};
},
created(){
this.loadData();
},
methods: {
reloadData(){
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
this.getGameRule();
},
async loadData(){
if(this.list.length >= this.totalCount && this.totalCount != 0){
return;
}
let res = await getReportRecord({
memberId: this.memberId || '',
enterpriseId: this.enterpriseId || '',
gameId: this.gameId || '',
currentPage: this.currentPage,
pageSize: this.pageSize
})
this.totalCount = res.totalCount;
let list = this.list || [];
if(this.currentPage == 1){
list = res.result||[];
}else{
list = list.concat(res.result||[])
}
this.currentPage ++;
this.list = list;
},
again() {
this.$emit("again");
this.close();
},
close() {
this.show = false;
setTimeout(() => {
this.$emit("update:show", false);
}, 200);
},
tap() {},
shareWx(){
this.$emit("shareWx",this.conditionObj);
},
sharePyq(){
this.$emit("sharePyq",this.conditionObj);
}
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}
}
};
</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 .info{
flex: 1;
}
.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 → src/components/cmh/theme-3/my-reward.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="box"> <div class="box">
<div class="page-bg"> <div class="page-bg">
<img <img
src="./images/mould_01_rulebg.png" src="./images/rulebg.png"
class="bg-img" class="bg-img"
mode="widthFix" mode="widthFix"
/> />
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
class="infinite-list" class="infinite-list"
v-infinite-scroll="loadData" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}" v-if="list && list.length"> 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-box" v-for="item in list" :key="item">
<div class="reward-item"> <div class="reward-item" @click="toRewardDetail(item)">
<div class="reward-img-box"> <div class="reward-img-box">
<img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit"/> <img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit"/>
</div> </div>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<script> <script>
import { gameRequestApi } from "@/api/common.js"; import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi; const { getMyReward } = gameRequestApi;
import { Manager } from "../../manager";
export default { export default {
components: {}, components: {},
data() { data() {
...@@ -58,6 +58,7 @@ export default { ...@@ -58,6 +58,7 @@ export default {
}, },
created() { created() {
document.title = "我的奖品"; document.title = "我的奖品";
this.manager = new Manager(this);
this.windowHeight = window.innerHeight; this.windowHeight = window.innerHeight;
this.reloadData(); this.reloadData();
}, },
...@@ -67,6 +68,22 @@ export default { ...@@ -67,6 +68,22 @@ export default {
this.totalCount = 0; this.totalCount = 0;
this.loadData(); this.loadData();
}, },
toRewardDetail(item) {
switch (+item.prizeType) {
case 0:
break;
case 1:
this.manager.toIntegralDetail();
break;
case 2:
this.manager.toCouponList();
break;
case 3:
break;
default:
break;
}
},
async loadData() { async loadData() {
if(this.list.length >= this.totalCount && this.totalCount != 0){ if(this.list.length >= this.totalCount && this.totalCount != 0){
return; return;
...@@ -79,7 +96,7 @@ export default { ...@@ -79,7 +96,7 @@ export default {
}) })
this.haveLoad = true; this.haveLoad = true;
this.totalCount = res.totalCount; this.totalCount = res.totalCount;
let list = []; let list = this.list || [];
if(this.currentPage == 1){ if(this.currentPage == 1){
list = res.result||[]; list = res.result||[];
}else{ }else{
...@@ -131,7 +148,7 @@ export default { ...@@ -131,7 +148,7 @@ export default {
.content-cell { .content-cell {
border-radius: 8px; border-radius: 8px;
border: 1px solid #06b0b2; border: 1px solid #21252B;
background: white; background: white;
margin: 12px 12px 3px; margin: 12px 12px 3px;
width: calc(100% - 24px); width: calc(100% - 24px);
...@@ -145,8 +162,8 @@ export default { ...@@ -145,8 +162,8 @@ export default {
height: 50px; height: 50px;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
#dff7f4 0%, #D9FCF5 0%,
rgba(223, 247, 244, 0.3) 100% rgba(238, 247, 225, 0.3) 100%
); );
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
...@@ -159,7 +176,7 @@ export default { ...@@ -159,7 +176,7 @@ export default {
} }
.cell-top .iconfont { .cell-top .iconfont {
color: #38bdcd; color: #21252B;
font-size: 15px; font-size: 15px;
} }
......
src/components/cmh/theme-3/rule.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img src="./images/rulebg.png" class="bg-img" mode="widthFix">
</div>
<div class="content">
<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="rule-box">
<div class="rule-item">
<div class="title">游戏时间</div>
<div class="value">{{ rule.startDate | formatDate }}-{{ rule.endDate | formatDate }}</div>
</div>
<div class="rule-item" v-if="rule.playConditionFlag">
<div class="title">参与门槛</div>
<div class="value point" v-for="item in rule.gameRuleConditionList" :key="item">
<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 class="rule-item" v-if="rule.playTimes">
<div class="title">游戏参与次数</div>
<div class="value">每人{{ rule.playTimes }}次</div>
</div>
<div class="rule-item">
<div class="title">适用人群</div>
<div class="value">{{ rule.memberDesc }}</div>
</div>
<div class="rule-item">
<div class="title">游戏说明</div>
<div class="value point" v-html="rule.gameRule"></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>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getGameRule,
getGameReward,
} = gameRequestApi;
export default {
components:{},
data(){
return {
rule:{},
rewardList:[],
}
},
created(){
document.title = "游戏规则"
this.loadData();
},
methods:{
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() + "日"
}
}
}
</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-cell{
border-radius: 8px;
border: 1px solid #21252B;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
}
.cell-top{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(180deg, #D9FCF5 0%, rgba(238, 247, 225, 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: #21252B;
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;
}
.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;
}
.rule-box{
}
.rule-item{
padding: 15px 13px 0;
}
.rule-item:last-child{
padding-bottom: 16px;
}
.rule-item .title{
color: #21252B;
font-size: 14px;
font-weight: 600;
}
.rule-item .value{
color: #21252B;
font-size: 13px;
margin-top: 8px;
}
.rule-item .value.point{
padding-left: 10px;
position: relative;
}
.rule-item .value.point::before{
content: " ";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #38BDCD;
top: 7px;
left: 0;
z-index: 1;
}
</style>
\ No newline at end of file
src/components/cmh/theme-3/support.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg" v-if="game && game.gameExt && game.gameExt.bgHelpUrl">
<img
:src="game.gameExt.bgHelpUrl"
class="bg-img"
mode="widthFix"
/>
</div>
<div class="content">
<div class="content-top">
<img v-if="game && game.gameExt && game.gameExt.bgBannerHelpUrl"
:src="game.gameExt.bgBannerHelpUrl"
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">
<div class="header-img-box">
<img :src="helpDetail.shareMemberImage" class="header-img" />
</div>
<div class="friend-name">你的好友 {{ helpDetail.shareMemberName }}</div>
<div class="tip-text">正在请求您的助力</div>
<div class="handle-btn red" @click="support" v-if="helpDetail.helpStatus == 0">为好友助力</div>
<div class="handle-btn blue" @click="toPlayGame">我要参加游戏</div>
</div>
<div class="content-cell" v-if="gameReward && gameReward.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 gameReward" :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>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="pyqOptions"
></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getHelpDetail,
getGameReward,
getGameInfo,
getGameShareQrCodeUrl,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import { Manager } from "../../manager";
export default {
components: {
ShareImgDialog,
AlertDialog
},
data() {
return {
alertOptions:{},
showShareImgDialog: false,
game:{},
helpDetail: {},
gameReward: []
};
},
created() {
document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData();
},
methods: {
async loadData() {
console.log(this.$route.query);
let query = this.$route.query;
this.helpDetail = await getHelpDetail({
enterpriseId: query.enterpriseId,
shareMemberId: query.shareMemberId,
gameId: query.gameId,
helpMemberId: query.memberId || '',
});
this.gameReward = await getGameReward({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
this.game = await getGameInfo({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
},
toPlayGame() {
let query = this.$route.query;
this.$router.replace({
path: "/cmh/3",
query: {
gameId: query.gameId,
memberId: query.memberId || '',
enterpriseId: query.enterpriseId,
isAttest: query.isAttest,
},
});
},
support(){
this.manager.support();
},
async sharePyq(options) {
let query = this.$route.query;
let result = await getGameShareQrCodeUrl({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.shareMemberId || '',
shareType: options.type == 12 ? 2 : 1,
});
this.pyqOptions = {
bgImage: options.shareReport,
qrcodeUrl: result.qrCodeUrl,
};
this.showShareImgDialog = true;
},
},
};
</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-box{
padding: 40px 0 14px;
}
.header-img {
width: 60px;
height: 60px;
border-radius: 50%;
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/components/index.vue
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
break; break;
} }
this.$router.replace({ this.$router.replace({
path: `/${ gameName }${ query.shareMemberId ? '/support' : '' }`, path: `/${ gameName }/${ res.templateId }${ query.shareMemberId ? '/support' : '' }`,
query: query, query: query,
}); });
......
src/components/manager.js
...@@ -2,17 +2,20 @@ import { gameRequestApi } from "@/api/common.js"; ...@@ -2,17 +2,20 @@ import { gameRequestApi } from "@/api/common.js";
const { const {
getPlayCount, getPlayCount,
validGame, validGame,
gamePlay getGameRule,
gamePlay,
getGameNumberPolling
} = gameRequestApi; } = gameRequestApi;
const MemberCenterPath = "/pages/member-center/member-center/member-center-index"; const MemberCenterPath = "/pages/member-center/member-center/member-center-index";
const GameHomePath = "/pages/game/game-h5"; const GameHomePath = "/pages/game/game-h5";
const OpenCardPath = "/pages/open-card/open-card/open-card"; const OpenCardPath = "/pages/open-card/open-card/open-card";
const ShareWxaPath = "/pages/access-2-h5/h5-share/h5-share";
const IntegralDetailPath = "/pages/points-mall/points-detail/points-detail";
const CouponListPath = "/pages/member-center/coupon/coupon-list/coupon-list";
export function Manager(component) { export function Manager(component) {
let _component; let _component;
if (component) { if (component) {
_component = component; _component = component;
...@@ -34,14 +37,14 @@ export function Manager(component) { ...@@ -34,14 +37,14 @@ export function Manager(component) {
const checkAttest = () => { const checkAttest = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let query = _component.$route.query; let query = _component.$route.query;
if (query.isAttest) { if (+query.isAttest) {
resolve(); resolve();
return; return;
} else { } else {
reject(); reject();
showAlert({ showAlert({
show: true, show: true,
content: "成为会员才可参与游戏哦~<br/>快认证成为会员赢好礼吧！", content: "成为会员才可参与游戏哦~\n快认证成为会员赢好礼吧！",
buttonList: [ buttonList: [
{ {
text: "立即认证", text: "立即认证",
...@@ -179,6 +182,7 @@ export function Manager(component) { ...@@ -179,6 +182,7 @@ export function Manager(component) {
}, },
}, },
]; ];
console.log("res----->",res);
switch (+res.code) { switch (+res.code) {
case 2001: case 2001:
// 游戏已结束 // 游戏已结束
...@@ -206,7 +210,21 @@ export function Manager(component) { ...@@ -206,7 +210,21 @@ export function Manager(component) {
break; break;
case 2005: case 2005:
// 用户游戏抽奖次数小于0 // 用户游戏抽奖次数小于0
content = "游戏次数已达上限，\n去其他地方看看吧~"; title = "游戏剩余次数已用完";
content = `每邀请${ _component.shareConditionObj.inviteNum }位好友助力即可获得${ _component.shareConditionObj.value }次游戏机会哦~`;
buttonList = [{
text: "分享好友",
click: () => {
_component.shareWx();
hiddenAlert();
},
},{
text: "分享朋友圈",
click: () => {
_component.sharePyq();
hiddenAlert();
},
}];
break; break;
case 2006: case 2006:
// 用户积分不足 // 用户积分不足
...@@ -215,7 +233,7 @@ export function Manager(component) { ...@@ -215,7 +233,7 @@ export function Manager(component) {
text: "立即获取积分", text: "立即获取积分",
click: () => { click: () => {
hiddenAlert(); hiddenAlert();
}, },
}]; }];
break; break;
...@@ -232,7 +250,6 @@ export function Manager(component) { ...@@ -232,7 +250,6 @@ export function Manager(component) {
buttonList = []; buttonList = [];
break; break;
} }
console.log(title, content);
if (title || content) { if (title || content) {
showAlert({ showAlert({
show: true, show: true,
...@@ -257,6 +274,7 @@ export function Manager(component) { ...@@ -257,6 +274,7 @@ export function Manager(component) {
return play(); return play();
}) })
} }
this.checkAttest = checkAttest;
const openCard = () => { const openCard = () => {
...@@ -265,7 +283,7 @@ export function Manager(component) { ...@@ -265,7 +283,7 @@ export function Manager(component) {
let options = { let options = {
type: 2,// 开卡之后要做的事件类型 1，开卡完成打开网页 2,开卡完成打开小程序页面 type: 2,// 开卡之后要做的事件类型 1，开卡完成打开网页 2,开卡完成打开小程序页面
data: { data: {
path: `${ GameHomePath }?gameId=${ query.gameId }&enterpriseId=${ query.enterpriseId }&shareMemberId=${ query.shareMemberId || '' }` path: `${GameHomePath}?gameId=${query.gameId}&enterpriseId=${query.enterpriseId}&shareMemberId=${query.shareMemberId || ''}&isFrom=openCard`
} }
} }
path += "?intent=" + encodeURIComponent(JSON.stringify(options)); path += "?intent=" + encodeURIComponent(JSON.stringify(options));
...@@ -274,12 +292,130 @@ export function Manager(component) { ...@@ -274,12 +292,130 @@ export function Manager(component) {
}); });
} }
const toMemberCenter = ()=>{ const toMemberCenter = () => {
window.wx.miniProgram.reLaunch({ window.wx.miniProgram.reLaunch({
url: MemberCenterPath, url: MemberCenterPath,
}); });
} }
this.shareWx = (shareOptions) => {
// let shareOptions = {
// title: '',
// path: '',
// imageUrl: '',
// };
let url = `${ShareWxaPath}?shareOptions=${encodeURIComponent(JSON.stringify(shareOptions))}&content=邀好友助力加参与游戏次数，赢好礼&confirmText=立即分享`;
window.wx.miniProgram.navigateTo({
url,
});
}
this.support = async () => {
let query = _component.$route.query;
if(query.memberId == query.shareMemberId){
showAlert({
show: true,
content: "无法为自己助力，赶快邀请好友助力",
buttonList: [
{
text: "参与游戏赢好礼",
click: () => {
hiddenAlert();
// window.wx.miniProgram
// TODO
_component.toPlayGame();
},
},
],
cancel: () => {
hiddenAlert();
},
});
return;
}
let conditionObj;
let rule = await getGameRule({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
})
let gameRuleConditionList = rule.gameRuleConditionList || [];
gameRuleConditionList.map((item) => {
let obj = JSON.parse(item.conditionJson);
if (+obj.type == 11 || +obj.type == 12) {
conditionObj = obj;
}
})
if (conditionObj.type == 11) {
// 认证
if (+query.isAttest) {
// 已认证
showAlert({
show: true,
content: "很遗憾，您已成为会员，无法助力好友，可立即参与游戏，赢取好礼",
buttonList: [
{
text: "参与游戏赢好礼",
click: () => {
hiddenAlert();
// window.wx.miniProgram
// TODO
_component.toPlayGame();
},
},
],
cancel: () => {
hiddenAlert();
},
});
} else {
// 未认证
openCard();
}
} else if (conditionObj.type == 12) {
// 关注服务号
_component.sharePyq(conditionObj);
}
}
let pollingTimer;
let playNumberPolling = async ()=>{
let query = _component.$route.query;
let res = await getGameNumberPolling({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.memberId
})
_component.playNumberObj.playNumber = res;
}
this.startPolling = ()=>{
pollingTimer = setInterval(() => {
playNumberPolling();
}, 10000);
}
this.stopPolling = ()=>{
clearInterval(pollingTimer);
}
this.toIntegralDetail = function (){
window.wx.miniProgram.navigateTo({
url: IntegralDetailPath,
})
}
this.toCouponList = function (){
window.wx.miniProgram.navigateTo({
url: CouponListPath,
})
}
return this; return this;
} }
src/router/index.js
...@@ -8,27 +8,77 @@ const routes = [ ...@@ -8,27 +8,77 @@ const routes = [
component: () => import('@/components/index.vue'), component: () => import('@/components/index.vue'),
}, },
{ {
path: '/cmh', path: '/cmh/1',
name: '猜盲盒', name: '猜盲盒',
component: () => import('@/components/cmh/index.vue'), component: () => import('@/components/cmh/theme-1/index.vue'),
}, },
{ {
path: '/cmh/rule', path: '/cmh/1/rule',
component: () => import('@/components/cmh/rule.vue'), component: () => import('@/components/cmh/theme-1/rule.vue'),
name: '游戏规则' name: '游戏规则'
}, },
{ {
path: '/cmh/my-reward', path: '/cmh/1/my-reward',
component: () => import('@/components/cmh/my-reward.vue'), component: () => import('@/components/cmh/theme-1/my-reward.vue'),
name: '我的奖品' name: '我的奖品'
}, },
{ {
path: '/cmh/support', path: '/cmh/1/support',
component: () => import('@/components/cmh/support.vue'), component: () => import('@/components/cmh/theme-1/support.vue'),
name: '助力拆盲盒' name: '助力拆盲盒'
}, },
{
path: '/cmh/2',
name: '猜盲盒',
component: () => import('@/components/cmh/theme-2/index.vue'),
},
{
path: '/cmh/2/rule',
component: () => import('@/components/cmh/theme-2/rule.vue'),
name: '游戏规则'
},
{
path: '/cmh/2/my-reward',
component: () => import('@/components/cmh/theme-2/my-reward.vue'),
name: '我的奖品'
},
{
path: '/cmh/2/support',
component: () => import('@/components/cmh/theme-2/support.vue'),
name: '助力拆盲盒'
},
{
path: '/cmh/3',
name: '猜盲盒',
component: () => import('@/components/cmh/theme-3/index.vue'),
},
{
path: '/cmh/3/rule',
component: () => import('@/components/cmh/theme-3/rule.vue'),
name: '游戏规则'
},
{
path: '/cmh/3/my-reward',
component: () => import('@/components/cmh/theme-3/my-reward.vue'),
name: '我的奖品'
},
{
path: '/cmh/3/support',
component: () => import('@/components/cmh/theme-3/support.vue'),
name: '助力拆盲盒'
},
]; ];
const router = new VueRouter({ const router = new VueRouter({
base: '/', base: '/',
routes, routes,
......
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