Commit a1694510 by 曾经

模板

parent f0bcf283
......@@ -57,6 +57,9 @@ const gameApiMap = {
getGameShareQrCodeUrl: {
type:"post",
url: '/gic-wx-app/game/share'
}
},
// 获取助力详情
getHelpDetail: '/gic-wx-app/game/help_detail',
}
export const gameRequestApi = getExport(gameApiMap)
\ No newline at end of file
......@@ -13,13 +13,13 @@ service.interceptors.request.use((config) => {
service.interceptors.response.use((response) => {
const { data } = response;
let err;
// let err;
const { errorCode, code } = data;
if( errorCode==0||code==0){
return data.result;
}else{
err = new Error(data.message || '系统异常');
return Promise.reject(err);
// err = new Error(data.message || '系统异常');
return Promise.reject(data);
}
}, (err) => {
const status = err.response.status;
......
<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">
<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">
......
......@@ -12,14 +12,8 @@
<script>
export default {
props: {
bgImage: {
type: String,
default: "https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png"
},
qrcodeUrl: {
type: String,
default: "https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png"
},
bgImage: String,
qrcodeUrl: String,
show: Boolean,
},
data() {
......@@ -46,7 +40,6 @@ export default {
myImage.height = _h;
myImage.crossOrigin = "Anonymous";
myImage.src = this.bgImage; //背景图片 你自己本地的图片或者在线图片
console.log(this.bgImage);
myImage.onload = () => {
context.drawImage(myImage, 0, 0, _w, _h);
......@@ -60,8 +53,6 @@ export default {
context.drawImage(myImage2, 400, 824, 120, 120);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById("shareImage");
// document.getElementById('avatar').src = base64;
img.src = base64;
};
};
......@@ -110,7 +101,7 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
width: 60%;
}
.dialog-bg .content .tips {
......@@ -124,7 +115,7 @@ export default {
}
.dialog-bg .content .icon-guanbi {
margin: 32px auto 0;
margin: 20px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
......
<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>
<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>
<template>
<div class="box">
<div class="page-bg">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix">
<img src="./images/rulebg.png" class="bg-img" mode="widthFix">
</div>
<div class="content">
<div class="content-cell" v-if="rule && rule.gameId">
......
<template>
<div class="box">
<div class="page-bg">
<div class="page-bg" v-if="game && game.gameExt && game.gameExt.bgHelpUrl">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png"
:src="game.gameExt.bgHelpUrl"
class="bg-img"
mode="widthFix"
/>
</div>
<div class="content">
<div class="content-top">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_helppage_banner.png"
<img v-if="game && game.gameExt && game.gameExt.bgBannerHelpUrl"
:src="game.gameExt.bgBannerHelpUrl"
class="top-img"
mode="widthFix"
/>
......@@ -21,63 +21,130 @@
</div>
</div>
<div class="content-cell">
<img src="" class="header-img" />
<div class="friend-name">你的好友 凌*</div>
<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">为好友助力</div>
<div class="handle-btn blue" @click="playGame">我要参加游戏</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">
<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">
<div class="reward-item-box" v-for="item in gameReward" :key="item">
<div class="reward-item-detail">
<div class="img-box">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png"
:src="item.prizeImageUrl"
class="reward-img"
mode="scaleToFit"
/>
</div>
<div class="reward-name">100元无门槛券</div>
<div class="reward-des">线下门店消费满500使用</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: {},
components: {
ShareImgDialog,
AlertDialog
},
data() {
return {};
return {
alertOptions:{},
showShareImgDialog: false,
game:{},
helpDetail: {},
gameReward: []
};
},
created() {
document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData();
},
methods: {
loadData() {
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,
})
},
playGame() {
toPlayGame() {
let query = this.$route.query;
this.$router.replace({
path: "/cmh/",
path: "/cmh/1",
query: {
gameId: "1121213",
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;
},
},
};
......@@ -162,11 +229,13 @@ export default {
}
/* 好友助力 */
.header-img-box{
padding: 40px 0 14px;
}
.header-img {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 40px 0 14px;
margin: 0 auto;
overflow: hidden;
}
......
<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>
<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>
<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>
<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>
<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>
......@@ -10,15 +10,15 @@
<div class="info">
<div class="title">分享至微信/朋友圈</div>
<div class="subtitle">
每邀请{{ conditionObj.inviteNum }}位好友助力增加{{ conditionObj.value }}次,被邀请用户进入分享页{{ conditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。
每邀请{{ shareConditionObj.inviteNum }}位好友助力增加{{ shareConditionObj.value }}次,被邀请用户进入分享页{{ shareConditionObj.type == 11 ? '会员注册' : '关注服务号' }}完成助力。
</div>
<div class="share-type-box">
<div class="share-type-item" @click="shareWx">
<img src="" />
<img src="../images/wx_icon.png" mode="aspectFit"/>
<div class="share-type-name">微信</div>
</div>
<div class="share-type-item" @click="sharePyq">
<img src="" />
<img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div>
</div>
</div>
......@@ -52,7 +52,12 @@ export default {
enterpriseId: String,
gameId: String,
show: Boolean,
rule: Object,
shareConditionObj: {
type: Object,
default:()=> {
return {};
},
},
},
data() {
return {
......@@ -86,7 +91,7 @@ export default {
pageSize: this.pageSize
})
this.totalCount = res.totalCount;
let list = [];
let list = this.list || [];
if(this.currentPage == 1){
list = res.result||[];
}else{
......@@ -120,17 +125,6 @@ export default {
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>
......@@ -249,6 +243,9 @@ export default {
padding: 14px 12px 16px;
display: flex;
}
.content .cell .info{
flex: 1;
}
.content .cell .icon-duobianxing {
color: #38bdcd;
font-size: 15px;
......
......@@ -113,14 +113,19 @@
<share-select-dialog
:show.sync="showShareSelectDialog"
v-show="showShareSelectDialog"
:rule="rule"
:memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="shareWx"
@sharePyq="sharePyq"
></share-select-dialog>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="pyqOptions"
></share-img-dialog>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
......@@ -138,7 +143,7 @@ const {
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Manager } from "../manager";
import { Manager } from "../../manager";
import "swiper/css/swiper.css";
......@@ -167,6 +172,7 @@ export default {
showRewardFailDialog: false,
showShareSelectDialog: false,
showShareImgDialog: false,
shareConditionObj: {},
alertOptions: {},
list: [
"刷卡拉拉卡",
......@@ -176,40 +182,40 @@ export default {
],
boxList: [
{
left: "calc(51% - 47px)",
top: "214px",
left: "calc(23% - 47px)",
top: "204px",
},
{
left: "calc(33% - 47px)",
top: "262px",
left: "calc(45% - 47px)",
top: "204px",
},
{
left: "calc(66% - 47px)",
top: "258px",
left: "calc(68% - 47px)",
top: "204px",
},
{
left: "calc(16% - 47px)",
top: "307px",
left: "calc(30% - 47px)",
top: "281px",
},
{
left: "calc(52% - 47px)",
top: "306px",
left: "calc(53% - 47px)",
top: "281px",
},
{
left: "calc(84% - 47px)",
top: "307px",
left: "calc(76% - 47px)",
top: "281px",
},
{
left: "calc(35% - 47px)",
top: "351px",
left: "calc(23% - 47px)",
top: "368px",
},
{
left: "calc(68% - 47px)",
top: "355px",
left: "calc(45% - 47px)",
top: "368px",
},
{
left: "calc(53% - 47px)",
top: "400px",
left: "calc(68% - 47px)",
top: "368px",
},
],
swiperOptions: {
......@@ -227,7 +233,7 @@ export default {
gameId: "",
enterpriseId: "",
memberId: "",
isAttest: false,
isAttest: 0,
currentIntegral: "--",
rule: {},
};
......@@ -239,7 +245,7 @@ export default {
this.gameId = query.gameId;
this.enterpriseId = query.enterpriseId;
this.memberId = query.memberId;
this.isAttest = query.isAttest;
this.isAttest = +query.isAttest;
if (!this.audio) {
this.audio = new Audio();
......@@ -259,6 +265,11 @@ export default {
this.getGamePlayNumber();
this.getIntegral();
this.getGamePlayBarrage();
this.manager.startPolling();
},
mounted(){
this.manager.stopPolling();
},
methods: {
async getGame() {
......@@ -286,6 +297,13 @@ export default {
gameId: this.gameId,
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;
window.wx.miniProgram.postMessage({
data: {
......@@ -322,10 +340,15 @@ export default {
let boxItem = prizeStyleList[itemIndex];
this.showOpenBoxDialog = true;
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() {
this.$router.push({
path: "/cmh/rule",
path: "/cmh/2/rule",
query: {
gameId: this.gameId,
enterpriseId: this.enterpriseId,
......@@ -334,7 +357,7 @@ export default {
},
toMyReward() {
this.$router.push({
path: "/cmh/my-reward",
path: "/cmh/2/my-reward",
query: {
gameId: this.gameId,
enterpriseId: this.enterpriseId,
......@@ -350,15 +373,22 @@ export default {
this.audio.pause();
}
},
clickShareBtn() {
// this.showShareImgDialog = true;
async clickShareBtn() {
await this.manager.checkAttest();
this.showShareSelectDialog = true;
},
shareWx(options) {
console.log(options);
shareWx() {
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) {
let result = getGameShareQrCodeUrl({
async sharePyq() {
let options = this.shareConditionObj;
let result = await getGameShareQrCodeUrl({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId,
......@@ -373,7 +403,9 @@ export default {
this.showShareImgDialog = true;
},
clickAdImg() {
console.log();
window.wx.miniProgram.navigateTo({
url: '/' + this.rule.dumpPath,
})
},
async open() {
let gameRes = await this.manager.play();
......@@ -383,11 +415,11 @@ export default {
if (gameRes.prizeType) {
this.rewardDetail = gameRes;
this.showRewardDialog = true;
this.getGamePlayNumber();
this.getIntegral();
} else {
this.showRewardFailDialog = true;
}
this.getGamePlayNumber();
this.getIntegral();
},
},
};
......@@ -454,7 +486,7 @@ export default {
top: 20px;
padding: 7px 5px;
border-radius: 8px 0 0 8px;
background: rgba(39, 41, 43, 0.5);
background: rgba(39, 41, 43, 0.75);
z-index: 10;
color: white;
font-size: 11px;
......@@ -584,7 +616,7 @@ export default {
font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px;
font-weight: 600;
color: #388ccc;
color: #000000;
line-height: 23px;
position: relative;
z-index: 2;
......@@ -621,7 +653,7 @@ export default {
position: fixed;
z-index: 10;
right: 10px;
bottom: 90px;
bottom: 40px;
padding: 10px;
}
.share-box .icon {
......@@ -635,7 +667,7 @@ export default {
box-shadow: inset 0px 3px 2px 0px rgba(243, 243, 243, 0.4);
}
.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;
......
<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>
<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
<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>
<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>
<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>
<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>
<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>
<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>
<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>
......@@ -2,7 +2,7 @@
<div class="box">
<div class="page-bg">
<img
src="./images/mould_01_rulebg.png"
src="./images/rulebg.png"
class="bg-img"
mode="widthFix"
/>
......@@ -19,7 +19,7 @@
class="infinite-list"
v-infinite-scroll="loadData" :style="{height:(windowHeight - 50 - 20 - 34 - 10)+'px'}" v-if="list && list.length">
<div class="reward-item-box" v-for="item in list" :key="item">
<div class="reward-item">
<div class="reward-item" @click="toRewardDetail(item)">
<div class="reward-img-box">
<img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit"/>
</div>
......@@ -45,7 +45,7 @@
<script>
import { gameRequestApi } from "@/api/common.js";
const { getMyReward } = gameRequestApi;
import { Manager } from "../../manager";
export default {
components: {},
data() {
......@@ -58,6 +58,7 @@ export default {
},
created() {
document.title = "我的奖品";
this.manager = new Manager(this);
this.windowHeight = window.innerHeight;
this.reloadData();
},
......@@ -67,6 +68,22 @@ export default {
this.totalCount = 0;
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() {
if(this.list.length >= this.totalCount && this.totalCount != 0){
return;
......@@ -79,7 +96,7 @@ export default {
})
this.haveLoad = true;
this.totalCount = res.totalCount;
let list = [];
let list = this.list || [];
if(this.currentPage == 1){
list = res.result||[];
}else{
......@@ -131,7 +148,7 @@ export default {
.content-cell {
border-radius: 8px;
border: 1px solid #06b0b2;
border: 1px solid #21252B;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
......@@ -145,8 +162,8 @@ export default {
height: 50px;
background: linear-gradient(
180deg,
#dff7f4 0%,
rgba(223, 247, 244, 0.3) 100%
#D9FCF5 0%,
rgba(238, 247, 225, 0.3) 100%
);
border-radius: 8px 8px 0 0;
}
......@@ -159,7 +176,7 @@ export default {
}
.cell-top .iconfont {
color: #38bdcd;
color: #21252B;
font-size: 15px;
}
......
<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
<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>
......@@ -36,7 +36,7 @@ export default {
break;
}
this.$router.replace({
path: `/${ gameName }${ query.shareMemberId ? '/support' : '' }`,
path: `/${ gameName }/${ res.templateId }${ query.shareMemberId ? '/support' : '' }`,
query: query,
});
......
......@@ -2,17 +2,20 @@ import { gameRequestApi } from "@/api/common.js";
const {
getPlayCount,
validGame,
gamePlay
getGameRule,
gamePlay,
getGameNumberPolling
} = gameRequestApi;
const MemberCenterPath = "/pages/member-center/member-center/member-center-index";
const GameHomePath = "/pages/game/game-h5";
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) {
let _component;
if (component) {
_component = component;
......@@ -34,14 +37,14 @@ export function Manager(component) {
const checkAttest = () => {
return new Promise((resolve, reject) => {
let query = _component.$route.query;
if (query.isAttest) {
if (+query.isAttest) {
resolve();
return;
} else {
reject();
showAlert({
show: true,
content: "成为会员才可参与游戏哦~<br/>快认证成为会员赢好礼吧!",
content: "成为会员才可参与游戏哦~\n快认证成为会员赢好礼吧!",
buttonList: [
{
text: "立即认证",
......@@ -179,6 +182,7 @@ export function Manager(component) {
},
},
];
console.log("res----->",res);
switch (+res.code) {
case 2001:
// 游戏已结束
......@@ -206,7 +210,21 @@ export function Manager(component) {
break;
case 2005:
// 用户游戏抽奖次数小于0
content = "游戏次数已达上限,\n去其他地方看看吧~";
title = "游戏剩余次数已用完";
content = `每邀请${ _component.shareConditionObj.inviteNum }位好友助力即可获得${ _component.shareConditionObj.value }次游戏机会哦~`;
buttonList = [{
text: "分享好友",
click: () => {
_component.shareWx();
hiddenAlert();
},
},{
text: "分享朋友圈",
click: () => {
_component.sharePyq();
hiddenAlert();
},
}];
break;
case 2006:
// 用户积分不足
......@@ -215,7 +233,7 @@ export function Manager(component) {
text: "立即获取积分",
click: () => {
hiddenAlert();
},
}];
break;
......@@ -232,7 +250,6 @@ export function Manager(component) {
buttonList = [];
break;
}
console.log(title, content);
if (title || content) {
showAlert({
show: true,
......@@ -257,6 +274,7 @@ export function Manager(component) {
return play();
})
}
this.checkAttest = checkAttest;
const openCard = () => {
......@@ -265,7 +283,7 @@ export function Manager(component) {
let options = {
type: 2,// 开卡之后要做的事件类型 1,开卡完成打开网页 2,开卡完成打开小程序页面
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));
......@@ -274,12 +292,130 @@ export function Manager(component) {
});
}
const toMemberCenter = ()=>{
const toMemberCenter = () => {
window.wx.miniProgram.reLaunch({
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;
}
......@@ -8,27 +8,77 @@ const routes = [
component: () => import('@/components/index.vue'),
},
{
path: '/cmh',
path: '/cmh/1',
name: '猜盲盒',
component: () => import('@/components/cmh/index.vue'),
component: () => import('@/components/cmh/theme-1/index.vue'),
},
{
path: '/cmh/rule',
component: () => import('@/components/cmh/rule.vue'),
path: '/cmh/1/rule',
component: () => import('@/components/cmh/theme-1/rule.vue'),
name: '游戏规则'
},
{
path: '/cmh/my-reward',
component: () => import('@/components/cmh/my-reward.vue'),
path: '/cmh/1/my-reward',
component: () => import('@/components/cmh/theme-1/my-reward.vue'),
name: '我的奖品'
},
{
path: '/cmh/support',
component: () => import('@/components/cmh/support.vue'),
path: '/cmh/1/support',
component: () => import('@/components/cmh/theme-1/support.vue'),
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({
base: '/',
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