Skip to content

G
game-h5
Commit 107e541a by 曾经
Options

中秋-浪漫礼盒

parent c9835193
Showing with 5851 additions and 4 deletions
src/components/cmh/theme-2/components/share-select-dialog.vue
......@@ -82,7 +82,6 @@ export default {
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
this.getGameRule();
},
async loadData(){
......
src/components/cmh/theme-3/components/share-select-dialog.vue
......@@ -82,7 +82,6 @@ export default {
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
this.getGameRule();
},
async loadData(){
......
src/components/cmh/theme-5/components/share-select-dialog.vue
......@@ -82,7 +82,6 @@ export default {
this.currentPage = 1;
this.totalCount = 0;
this.loadData();
this.getGameRule();
},
async loadData(){
......
src/components/cmh/theme-6/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: 101;
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: #9A92EA;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
padding: 8px 10px;
border: 1px solid #D1BBFF;
.content-detail {
background: white;
border-radius: 10px;
text-align: center;
padding: 10px 13px;
.title {
color: #21252B;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #21252B;
font-size: 15px;
padding: 20px 0 30px;
white-space: pre-wrap;
}
.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: #7464E2;
box-shadow: inset 0px 2px 2px 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-6/components/fwh-qrcode.vue 0 → 100644
<template>
<div
class="dialog-bg"
v-if="show"
>
<div class="content">
<div class="content-detail-bg">
<div class="content-detail">
<div class="title">您还未关注服务号</div>
<div class="subtitle">关注服务号，助力赢好礼</div>
<div class="qrcode-box">
<div class="image-box">
<img :src="qrcodeUrl" class="qrcode-img" />
</div>
<div class="tips">长按保存/识别二维码</div>
</div>
</div>
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
qrcodeUrl: String,
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
},
},
};
</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 {
box-sizing: border-box;
border-radius: 10px;
background: #9A92EA;
border: 1px solid #D1BBFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
padding: 8px 10px;
.content-detail {
border-radius: 10px;
background: white;
text-align: center;
padding: 10px 13px;
.title {
color: #21252B;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #21252B;
font-size: 15px;
padding: 20px 0 18px;
white-space: pre-wrap;
}
.qrcode-box {
margin: 0 auto;
text-align: center;
width: fit-content;
.image-box {
background: white;
padding: 5px;
border-radius: 4px;
border: 2px solid #ADC9C5;
.qrcode-img {
width: 110px;
height: 110px;
}
}
.tips {
color: #21252B;
text-align: center;
font-size: 12px;
padding: 8px 0 24px;
}
}
}
}
}
.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-6/components/open-box.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img src="../images/mould_box_bg.png" class="dialog-bg-img">
<div class="content">
<div class="title">{{ title }}</div>
<div class="img-box">
<!-- <img class="img-box-bg" src="../images/light_bg.png"> -->
<img :src="isOpening ? data.imageSelectUrl : data.imageNoSelectUrl" class="box-img" mode="widthFix">
</div>
<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,
isOpening: Boolean,
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: 49%;
transform: translate(-50%,-50%);
text-align: center;
width: 82%;
}
.dialog-bg .content .title{
color: white;
font-size: 16px;
font-weight: 500;
height: 22px;
}
.dialog-bg .content .img-box{
margin: 0px auto 0;
width: 287px;
height: 287px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dialog-bg .content .img-box .img-box-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.dialog-bg .content .box-img{
position: relative;
z-index: 1;
height: 200px;
width: 200px
}
.dialog-bg .content .handle-btn{
margin: 0px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #F9667F;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.8);
position: relative;
z-index: 2;
}
.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-6/components/reward-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img
src="../images/mould_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" @click="toMyReward">【我的奖品】</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);
},
toMyReward(){
this.$emit("toMyReward");
}
},
};
</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, #E9F7FF 0%, #DBD6FF 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: #21252B;
}
.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: #F9667F;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.8);
position: relative;
z-index: 2;
}
.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-6/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="../images/mould_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: #F9667F;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 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-6/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.crossOrigin = "Anonymous";
myImage2.src = this.qrcodeUrl; //你自己本地的图片或者在线图片
myImage2.width = 120;
myImage2.height = 120;
myImage2.onload = function () {
context.drawImage(myImage2, 371, 793, 136, 136);
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-6/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.type == 11 ? '完成新会员注册' : '首次关注服务号' }}助力增加{{ shareConditionObj.value }}次机会
</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="shareTimeline" v-if="isSupportShareTimeline">
<img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div>
</div>
<div class="share-type-item" @click="sharePoster">
<img src="../images/fenxianghaibao_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" infinite-scroll-distance="10">
<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";
import { isSupportShareTimeline } from '../../../version';
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: [],
isSupportShareTimeline: false,
};
},
created(){
this.isSupportShareTimeline = isSupportShareTimeline()
},
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);
},
sharePoster(){
this.$emit("sharePoster",this.conditionObj);
},
shareTimeline(){
this.$emit("shareTimeline",this.conditionObj);
}
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}
},
watch:{
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: #7464E2;
font-size: 15px;
padding-top: 3px;
padding-right: 3px;
}
.content .cell .info .title {
color: #21252B;
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;
margin-right: 60px;
}
.share-type-box .share-type-item:last-child{
margin-right: 0;
}
.share-type-box .share-type-item img {
width: 52px;
height: 52px;
border-radius: 50%;
margin: 0 auto 8px;
background: white;
}
.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: #21252B;
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-6/components/share-tip-mask.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show" @click="close">
<img src="../images/shareTip.png">
</div>
</template>
<script>
export default {
props: {
show: Boolean,
},
data() {
return {};
},
created() {},
methods: {
close() {
this.$emit("update:show", false);
},
}
};
</script>
<style scoped>
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg img{
width: 100%;
height: 180px;
}
</style>
src/components/cmh/theme-6/index.vue 0 → 100644
<template>
<div v-if="game && game.gameExt">
<div class="bg-image-box">
<img class="bg-image" :src="game.gameExt.backImageUrl" mode="widthFix" />
</div>
<div class="right-btn rule" @click="toGameRule">游戏规则</div>
<div class="right-btn award" @click="toMyReward">我的奖品</div>
<div class="content">
<div
class="music-icon iconfont"
:class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"
@click="playMusic"
v-if="game.backMusicFlag && game.gameExt.backMusicUrl"
></div>
<div class="integral" v-if="(rule.giveawayType == 21 || rule.giveawayType == 22) && rule.giveawayNum">
<div v-if="rule.giveawayType == 21">每天可有{{ rule.giveawayNum }}次免费参与次数</div>
<div v-else-if="rule.giveawayType == 22">共有{{ rule.giveawayNum }}次免费参与次数</div>
</div>
<div class="integral" v-else-if="rule.integral && rule.inviteNum">
{{ rule.integral || 0 }}积分/次或好友助力参与
</div>
<div class="integral" v-else-if="rule.integral">
{{ rule.integral || 0 }}积分/次
</div>
<div class="integral" v-else-if="rule.inviteNum">邀请好友助力参与</div>
<swiper
class="swiper-class"
ref="mySwiper"
:options="swiperOptions"
v-if="game.bulletFlag && barrageList && barrageList.length > 2"
>
<swiper-slide v-for="item in barrageList.length * 2" :key="item">
<div
class="swiper-item"
v-if="item % 2 == 0 && barrageList[item / 2 - 1]"
>
<img src="./images/tips_bg.png" />
<span
>恭喜 {{ barrageList[item / 2 - 1].memberName }} 获得
{{ barrageList[item / 2 - 1].prizeName }}</span
>
</div>
</swiper-slide>
</swiper>
<div class="box-box" :style="{ height: 525 * screenWidth / 375 + 'px' }">
<img
:class="{
active: clickIndex == index,
'animation-end': animationEnd,
}"
v-for="(item, index) in boxList"
:key="item"
:src="
game.gameExt.prizeStyleList.length == 1
? game.gameExt.prizeStyleList[0].imageNoSelectUrl
: game.gameExt.prizeStyleList[index].imageNoSelectUrl
"
:style="{ left: item.left, top: item.top * screenWidth / 375 + 'px' }"
@click="clickBox(index)"
/>
</div>
<div class="points-count-box">
<div style="min-width:48px;">
<!-- 左边显示-右边次数显示且积分玩法开启才显示在左边 -->
<div
class="text-box"
v-if="
rule.integral && playNumberObj && playNumberObj.playNumberFlag
"
>
<div class="text">{{ currentIntegral }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/我的积分.png" />
</div>
</div>
<img
class="guide-img"
:src="game.gameExt.noticeImageUrl"
mode="widthFix"
/>
<div style="min-width:48px;">
<div
class="text-box number"
v-if="playNumberObj && playNumberObj.playNumberFlag"
>
<div class="text">{{ playNumberObj.playNumber }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/剩余次数.png" />
</div>
<div class="text-box" v-else-if="rule.integral">
<div class="text">{{ currentIntegral }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/我的积分.png" />
</div>
</div>
<div class="share-box" @click.stop="clickShareBtn" v-if="rule.inviteNum">
<div class="icon">
<div class="iconfont icon-yaoqing"></div>
</div>
<img src="./images/邀请助力.png" />
</div>
</div>
<img
class="ad-image"
:src="game.gameExt.adsImageUrl"
mode="widthFix"
@click="clickAdImg"
v-if="game.adsFlag"
/>
</div>
<open-box-dialog
:show.sync="showOpenBoxDialog"
:title="openBoxTitle"
:data="openBoxData"
:isOpening="isOpening"
@open="open()"
></open-box-dialog>
<reward-dialog
:show.sync="showRewardDialog"
:reward="rewardDetail"
@toMyReward="toMyReward"
></reward-dialog>
<reward-fail-dialog :show.sync="showRewardFailDialog"></reward-fail-dialog>
<share-select-dialog
:show.sync="showShareSelectDialog"
v-show="showShareSelectDialog"
:memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="manager.shareWx()"
@shareTimeline="manager.shareTimeline()"
@sharePoster="manager.sharePoster()"
></share-select-dialog>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="posterOptions"
></share-img-dialog>
<share-tip-mask :show.sync="showShareTipMask"/>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getGameInfo,
getGamePlayNumber,
getGamePlayBarrage,
getIntegral,
getGameRule,
shareEvent,
} = gameRequestApi;
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Manager } from "../../manager";
import "swiper/css/swiper.css";
import OpenBoxDialog from "./components/open-box.vue";
import RewardDialog from "./components/reward-dialog.vue";
import RewardFailDialog from "./components/reward-fail.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import AlertDialog from "./components/alert.vue";
import ShareTipMask from './components/share-tip-mask.vue';
export default {
components: {
OpenBoxDialog,
Swiper,
SwiperSlide,
RewardDialog,
RewardFailDialog,
ShareSelectDialog,
ShareImgDialog,
AlertDialog,
ShareTipMask,
},
data() {
return {
clickIndex: -1,
posterOptions:{},
showShareTipMask: false,
animationEnd: false,
isOpening: false,
showOpenBoxDialog: false,
showRewardDialog: false,
showRewardFailDialog: false,
showShareSelectDialog: false,
showShareImgDialog: false,
shareConditionObj: {},
alertOptions: {},
barrageList: [],
screenWidth: window.screen.width,
boxConfig:{
itemH: 80,
itemW: 80,
boxHeight: 525
},
boxList: [
{
left: "calc(26.5% - 40px)",
top: 199,
},
{
left: "calc(49.2% - 40px)",
top: 199,
},
{
left: "calc(71.87% - 40px)",
top: 199,
},
{
left: "calc(26.5% - 40px)",
top: 299,
},
{
left: "calc(49.2% - 40px)",
top: 299,
},
{
left: "calc(71.87% - 40px)",
top: 299,
},
{
left: "calc(26.5% - 40px)",
top: 404,
},
{
left: "calc(49.2% - 40px)",
top: 404,
},
{
left: "calc(71.87% - 40px)",
top: 404,
},
],
swiperOptions: {
direction: "vertical",
loop: true,
speed: 500,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
},
isPlay: false,
name: "猜盲盒",
game: {},
gameId: "",
enterpriseId: "",
memberId: "",
isAttest: 0,
currentIntegral: "--",
rule: {},
playNumberObj: {},
};
},
created() {
this.manager = new Manager(this);
let query = this.$route.query;
this.gameId = query.gameId;
this.enterpriseId = query.enterpriseId;
this.memberId = query.memberId;
this.isAttest = +query.isAttest;
if (!this.audio) {
this.audio = new Audio();
this.audio.autoplay = true;
this.audio.addEventListener(
"ended",
() => {
if (this.isPlay) {
this.audio.play();
}
},
false
);
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
this.isPlay = false;
this.audio.pause();
}
});
}
this.getGame();
this.getGameRule();
this.getGamePlayNumber();
this.getIntegral();
this.getGamePlayBarrage();
this.lookBuryPoint();
},
mounted() {
this.manager.startPolling();
},
destroyed() {
this.manager.stopPolling();
this.audio.pause();
document.removeEventListener("visibilitychange",()=>{});
},
methods: {
lookBuryPoint() {
let query = this.$route.query;
if (query.memberId) {
shareEvent({
enterpriseId: query.enterpriseId || "",
memberId: query.memberId || "",
relationType: "game",
relationId: query.gameId || "",
event: 2,
});
}
},
async getGame() {
let res = await getGameInfo({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
});
document.title = res.gameName;
res.gameExt.prizeStyleList = JSON.parse(
res.gameExt.prizeStyleJson || "[]"
);
this.game = res;
setTimeout(() => {
this.animationEnd = true;
}, 1000);
this.audio.src = res.gameExt.backMusicUrl;
if (this.isPlay) {
this.audio.play();
} else {
this.audio.pause();
}
},
async getGameRule() {
let rule = await getGameRule({
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: {
shareTitle: rule.shareRuleDesc,
shareImage: rule.shareImageUrl,
},
});
},
async getGamePlayNumber() {
let playNumberObj = await getGamePlayNumber({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId || "",
});
this.playNumberObj = playNumberObj;
},
async getGamePlayBarrage() {
let barrageList = await getGamePlayBarrage({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
});
this.barrageList = barrageList || [];
},
async getIntegral() {
let currentIntegral = await getIntegral({
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
this.currentIntegral = currentIntegral;
},
clickBox(index) {
if (this.clickIndex != -1) {
return;
}
this.clickIndex = index;
setTimeout(() => {
let prizeStyleList = this.game.gameExt.prizeStyleList;
let itemIndex = prizeStyleList.length > index ? index : 0;
let boxItem = prizeStyleList[itemIndex];
this.showOpenBoxDialog = true;
this.openBoxData = boxItem;
if (this.playNumberObj.playNumber == 0 && this.rule.integral) {
this.openBoxTitle = `每次参与游戏消耗${this.rule.integral}积分${
this.playNumberObj.playNumberFlag ? "或参与次数" : ""
}`;
} else {
this.openBoxTitle = "";
}
}, 900);
},
toGameRule() {
this.$router.push({
path: "/cmh/6/rule",
query: this.$route.query,
});
},
async toMyReward() {
await this.manager.checkMyReward();
this.$router.push({
path: "/cmh/6/my-reward",
query: this.$route.query,
});
},
playMusic() {
this.isPlay = !this.isPlay;
if (this.isPlay) {
this.audio.play();
} else {
this.audio.pause();
}
},
async clickShareBtn() {
await this.manager.checkPlay();
this.showShareSelectDialog = true;
},
clickAdImg() {
window.wx.miniProgram.navigateTo({
url: "/" + this.game.gameExt.adsLinkUrl,
});
},
async open() {
let gameRes = await this.manager.play();
this.showOpenBoxDialog = false;
// this.rewardDetail = {};
if (gameRes.prizeType) {
this.rewardDetail = gameRes;
this.showRewardDialog = true;
} else {
this.showRewardFailDialog = true;
}
this.getGamePlayNumber();
this.getIntegral();
},
},
watch: {
showOpenBoxDialog(n) {
if (!n) {
this.clickIndex = -1;
}
},
},
};
</script>
<style>
body{
margin: 0;
}
</style>
<style scoped>
.bg-image-box{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.bg-image {
width: 100%;
}
.content {
position: relative;
z-index: 1;
}
.music-icon {
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
position: fixed;
top: 20px;
left: 20px;
z-index: 10;
background: rgba(39, 41, 43, 0.5);
color: white;
font-size: 20px;
/* transform: rotate(90deg); */
}
@keyframes transform {
0% {
transform: rotate(0%);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.music-icon.icon-yinfu {
animation-name: transform;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.right-btn {
text-align: center;
position: fixed;
right: 0px;
top: 20px;
padding: 5px 7px;
line-height: 13px;
width: 25px;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
background: rgba(39, 41, 43, 0.5);
z-index: 10;
color: white;
font-size: 11px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.right-btn.award {
top: 89px;
}
.integral {
position: absolute;
z-index: 2;
top: 126px;
left: 50%;
transform: translateX(-50%);
min-width: 120px;
height: 24px;
line-height: 24px;
text-align: center;
padding: 0 10px;
box-sizing: border-box;
border-radius: 8px;
background: rgba(255, 255, 255, 0.3);
color: #21252B;
font-size: 12px;
font-weight: 500;
border: 1px solid white;
}
.swiper-class {
position: absolute;
left: 20px;
top: 160px;
z-index: 10;
width: 300px;
height: 36px;
}
.swiper-item {
width: 300px;
height: 36px;
box-sizing: border-box;
border-radius: 17px 0 0 17px;
position: relative;
display: flex;
align-items: center;
}
.swiper-item img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.swiper-item span {
padding-left: 30px;
color: black;
font-size: 12px;
z-index: 2;
}
.box-box {
height: 525px;
width: 100%;
position: relative;
}
@keyframes box-animation {
from {
transform: translate(0, -100px);
}
to {
transform: translate(0, 0);
}
}
@keyframes box-up-animation{
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(0, -50%) scale(1);
}
}
@keyframes box-active-animation {
0% {
transform: translate(0, -50%) scale(1);
}
99% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 0;
}
}
.box-box img {
position: absolute;
/* transform: translate(0, -100px); */
width: 80px;
height: 80px;
/* animation-timing-function: linear; */
/* animation-name: box-animation; */
/* animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: 1; */
}
.box-box img:nth-child(1) {
animation-delay: 0.65s;
}
.box-box img:nth-child(2) {
animation-delay: 0.6s;
}
.box-box img:nth-child(3) {
animation-delay: 0.7s;
}
.box-box img:nth-child(4) {
animation-delay: 0.5s;
}
.box-box img:nth-child(5) {
animation-delay: 0.45s;
}
.box-box img:nth-child(6) {
animation-delay: 0.55s;
}
.box-box img.animation-end {
transform: translate(0, 0);
animation: none;
}
.box-box img.active {
animation-timing-function: linear, linear;
animation-name: box-up-animation, box-active-animation;
animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards, forwards;
animation-iteration-count: 1, 1;
animation-delay: 0s, 0.4s;
}
.points-count-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
position: relative;
height: 57px;
}
.text-box {
position: relative;
text-align: center;
}
.text-box .text {
font-family: DINAlternate-Bold, DINAlternate;
font-size: 26px;
font-weight: 600;
color: #FB6487;
line-height: 23px;
position: relative;
z-index: 2;
}
.text-box.number .text {
font-size: 40px;
line-height: 30px;
}
.text-box .text-shadow {
position: absolute;
left: 50%;
top: 17px;
transform: translateX(-50%);
width: 41px;
height: 8px;
z-index: 1;
}
.text-box.number .text-shadow {
top: 25px;
}
.text-box .title-image {
padding-top: 5px;
width: 48px;
height: 16px;
}
.guide-img {
width: 174px;
height: 17px;
}
.ad-image {
margin: 39px 15px 15px;
border-radius: 8px;
width: calc(100% - 30px);
}
.share-box {
position: absolute;
z-index: 10;
right: 10px;
bottom: -64px;
padding: 10px;
}
.share-box .icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #27292B;
box-shadow: inset 0px 2px 1px 0px rgba(243, 243, 243, 0.4000);
}
.share-box .icon .iconfont {
background: linear-gradient(180deg, #FAA7C9 0%, #EAD5F8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px;
}
.share-box img {
position: absolute;
left: 50%;
bottom: 0;
width: 48px;
height: 16px;
transform: translateX(-50%);
z-index: 2;
}
</style>
src/components/cmh/theme-6/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"
infinite-scroll-distance="10"
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_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();
},
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;
}
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;
},
toPlay(){
this.$router.go(-1);
},
},
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 #7464E2;
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, #BFB4FB 0%, rgba(247, 245, 255, 0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title {
color: #21252B;
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;
min-width: 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;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.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;
background: #7464E2;
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
}
</style>
src/components/cmh/theme-6/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">
<div class="title">参与门槛</div>
<div class="value" v-if="!rule.playConditionFlag">无门槛</div>
<div class="value" v-for="item in rule.gameRuleConditionList" :key="item" v-else>
<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" 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 #7464E2;
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, #BFB4FB 0%, rgba(247, 245, 255, 0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title{
color: #21252B;
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;
margin: 11px 0 7px;
height: 40px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.reward-item-detail .reward-des{
color: #21252B;
font-size: 11px;
font-weight: 300;
margin: 4px 0 7px;
min-height: 17px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.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;
word-break: break-all;
white-space: pre-wrap;
}
</style>
\ No newline at end of file
src/components/cmh/theme-6/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 disable" v-if="helpDetail.helpStatus == 2">我已助力</div>
<div class="handle-btn red" @click="support" v-else>为好友助力</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>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
<fwh-qrcode-dialog v-bind.sync="fwhQrcodeOptions"></fwh-qrcode-dialog>
<share-select-dialog
:show.sync="showShareSelectDialog"
v-show="showShareSelectDialog"
:memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="manager.shareWx()"
@shareTimeline="manager.shareTimeline()"
@sharePoster="manager.sharePoster()"
></share-select-dialog>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="posterOptions"
></share-img-dialog>
<share-tip-mask :show.sync="showShareTipMask"/>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getHelpDetail,
getGameReward,
getGameInfo,
getGameShareQrCodeUrl,
getGameRule,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import FwhQrcodeDialog from "./components/fwh-qrcode.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import ShareTipMask from './components/share-tip-mask.vue';
import { Manager } from "../../manager";
export default {
components: {
AlertDialog,
ShareSelectDialog,
ShareImgDialog,
FwhQrcodeDialog,
ShareTipMask,
},
data() {
return {
showShareTipMask: false,
alertOptions:{},
game:{},
helpDetail: {},
fwhQrcodeOptions: {
show: false,
qrcodeUrl: '',
},
gameReward: [],
showShareSelectDialog: false,
showShareImgDialog: false,
posterOptions:{},
memberId:"",
enterpriseId: '',
gameId: '',
shareConditionObj:{},
};
},
created() {
document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData();
},
methods: {
async loadData() {
let query = this.$route.query;
this.memberId = query.memberId;
this.enterpriseId = query.enterpriseId;
this.gameId = query.gameId;
this.getGameInfo();
this.getGameRule();
this.getGameReward();
this.getHelpDetail();
},
async getGameInfo(){
let query = this.$route.query;
this.game = await getGameInfo({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
},
async getGameReward(){
let query = this.$route.query;
this.gameReward = await getGameReward({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
})
},
async getHelpDetail(){
let query = this.$route.query;
this.helpDetail = await getHelpDetail({
enterpriseId: query.enterpriseId,
shareMemberId: query.shareMemberId,
gameId: query.gameId,
helpMemberId: query.memberId || '',
}) || {};
},
async getGameRule() {
let rule = await getGameRule({
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: {
shareTitle: rule.shareRuleDesc,
shareImage: rule.shareImageUrl,
},
});
},
toPlayGame() {
let query = this.$route.query;
this.$router.replace({
path: "/cmh/6",
query: {
gameId: query.gameId,
memberId: query.memberId || '',
enterpriseId: query.enterpriseId,
isAttest: query.isAttest,
},
});
},
support(){
this.manager.support();
},
shareFwh() {
let query = this.$route.query;
getGameShareQrCodeUrl({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.shareMemberId,
shareType: 2,
}).then((result) => {
this.fwhQrcodeOptions = {
show: true,
qrcodeUrl: result.qrCodeUrl,
};
}).catch((err) => {
this.manager.showTips(err.message);
});
},
},
};
</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;
color: black;
align-items: center;
border-radius: 12px;
background: #FFFFFF;
}
.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, rgba(33, 37, 43, 1) 0%, rgba(33, 37, 43, 0) 100%);
margin-right: 9px;
}
.content-top .top-tip-box .line.right {
background: linear-gradient(270deg, rgba(33, 37, 43, 0) 0%, rgba(33, 37, 43, 1) 100%);
margin-left: 9px;
}
.content-top .top-tip-box .title {
color: #21252b;
font-size: 15px;
}
/* 顶部 end */
.content-cell {
border-radius: 8px;
border: 1px solid #7464E2;
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;
font-size: 16px;
font-weight: 600;
margin: 0 auto 19px;
box-sizing: border-box;
background: #c7c7c7;
}
.handle-btn:last-child {
margin-bottom: 23px;
}
.handle-btn.disable{
background: #c7c7c7;
color: white;
}
.handle-btn.red {
background: #7464E2;
color: white;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
}
.handle-btn.blue {
background: white;
border: 1px solid #7464E2;
color: #7464E2;
}
/* 好友助力 end */
/* 游戏奖品 */
.cell-top {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(180deg, #BFB4FB 0%, rgba(247, 245, 255, 0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title {
color: #21252B;
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;
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;
margin: 11px 0 0;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.reward-item-detail .reward-des {
color: #21252b;
font-size: 11px;
font-weight: 300;
margin: 4px 0 7px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
/* 游戏奖品 end */
</style>
src/components/cmh/theme-7/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"
:class="{
'weight':buttonList.length == 1
}"
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: 101;
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;
white-space: pre-wrap;
}
.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;
}
}
.handle-btn.weight{
font-size: 20px;
font-weight: 500;
}
}
}
}
}
.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-7/components/fwh-qrcode.vue 0 → 100644
<template>
<div
class="dialog-bg"
v-if="show"
>
<div class="content">
<div class="content-detail-bg">
<div class="content-detail">
<div class="title">您还未关注服务号</div>
<div class="subtitle">关注服务号，助力赢好礼</div>
<div class="qrcode-box">
<div class="image-box">
<img :src="qrcodeUrl" class="qrcode-img" />
</div>
<div class="tips">长按保存/识别二维码</div>
</div>
</div>
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
qrcodeUrl: String,
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
},
},
};
</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;
border: 1px solid #54fefe;
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;
.title {
color: #21252B;
font-weight: 600;
font-size: 20px;
padding-top: 15px;
}
.subtitle {
color: #21252B;
font-size: 15px;
padding: 20px 0 18px;
white-space: pre-wrap;
}
.qrcode-box {
margin: 0 auto;
text-align: center;
width: fit-content;
.image-box {
padding: 5px;
border-radius: 4px;
border: 2px solid #C9C6AD;
background: white;
.qrcode-img {
width: 110px;
height: 110px;
}
}
.tips {
color: #21252B;
text-align: center;
font-size: 12px;
padding: 8px 0 24px;
}
}
}
}
}
.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-7/components/open-box.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img src="../images/mould_box_bg.png" class="dialog-bg-img">
<div class="content">
<div class="title">{{ title }}</div>
<div class="img-box">
<img class="img-box-bg" src="../images/light_bg.png">
<img :src="isOpening ? data.imageSelectUrl : data.imageNoSelectUrl" class="box-img" mode="widthFix">
</div>
<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,
isOpening: Boolean,
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: 49%;
transform: translate(-50%,-50%);
text-align: center;
width: 82%;
}
.dialog-bg .content .title{
color: white;
font-size: 16px;
font-weight: 500;
height: 22px;
}
.dialog-bg .content .img-box{
margin: 0px auto 0;
width: 287px;
height: 287px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dialog-bg .content .img-box .img-box-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.dialog-bg .content .box-img{
position: relative;
z-index: 1;
height: 200px;
width: 200px;
}
.dialog-bg .content .handle-btn{
margin: 0px 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 2px 2px 0px rgba(255, 255, 255, 0.8);
font-family: PingFangSC-Medium, PingFang SC;
position: relative;
z-index: 2;
}
.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-7/components/reward-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img
src="../images/mould_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" @click="toMyReward">【我的奖品】</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);
},
toMyReward(){
this.$emit("toMyReward");
}
},
};
</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: #21252B;
}
.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 2px 2px 0px rgba(255, 255, 255, 0.8);
font-family: PingFangSC-Medium, PingFang SC;
position: relative;
z-index: 2;
}
.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-7/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="../images/mould_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 2px 2px 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-7/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.crossOrigin = "Anonymous";
myImage2.src = this.qrcodeUrl; //你自己本地的图片或者在线图片
myImage2.width = 120;
myImage2.height = 120;
myImage2.onload = function () {
context.drawImage(myImage2, 371, 793, 136, 136);
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-7/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.type == 11 ? '完成新会员注册' : '首次关注服务号' }}助力增加{{ shareConditionObj.value }}次机会
</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="shareTimeline" v-if="isSupportShareTimeline">
<img src="../images/pyq_icon.png" mode="aspectFit"/>
<div class="share-type-name">朋友圈</div>
</div>
<div class="share-type-item" @click="sharePoster">
<img src="../images/fenxianghaibao_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" infinite-scroll-distance="10">
<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";
import { isSupportShareTimeline } from '../../../version';
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: [],
isSupportShareTimeline: false,
};
},
created(){
this.isSupportShareTimeline = isSupportShareTimeline();
},
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);
},
sharePoster(){
this.$emit("sharePoster",this.conditionObj);
},
shareTimeline(){
this.$emit("shareTimeline",this.conditionObj);
}
},
filters:{
formatDate(value){
if (!value) return '--';
let date = new Date(value);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}
},
watch:{
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: #21252B;
font-size: 15px;
padding-top: 3px;
padding-right: 3px;
}
.content .cell .info .title {
color: #21252B;
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;
margin-right: 60px;
}
.share-type-box .share-type-item:last-child{
margin-right: 0;
}
.share-type-box .share-type-item img {
width: 52px;
height: 52px;
border-radius: 50%;
margin: 0 auto 8px;
background: white;
}
.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: #21252B;
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-7/components/share-tip-mask.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show" @click="close">
<img src="../images/shareTip.png">
</div>
</template>
<script>
export default {
props: {
show: Boolean,
},
data() {
return {};
},
created() {},
methods: {
close() {
this.$emit("update:show", false);
},
}
};
</script>
<style scoped>
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg img{
width: 100%;
height: 180px;
}
</style>
src/components/cmh/theme-7/index.vue 0 → 100644
<template>
<div v-if="game && game.gameExt">
<div class="bg-image-box">
<img class="bg-image" :src="game.gameExt.backImageUrl" mode="widthFix" />
</div>
<div class="right-btn rule" @click="toGameRule">游戏规则</div>
<div class="right-btn award" @click="toMyReward">我的奖品</div>
<div class="content">
<div
class="music-icon iconfont"
:class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"
@click="playMusic"
v-if="game.backMusicFlag && game.gameExt.backMusicUrl"
></div>
<swiper
class="swiper-class"
ref="mySwiper"
:options="swiperOptions"
v-if="game.bulletFlag && barrageList && barrageList.length > 2"
>
<swiper-slide v-for="item in barrageList.length * 2" :key="item">
<div
class="swiper-item"
v-if="item % 2 == 0 && barrageList[item / 2 - 1]"
>
<img src="./images/tips_bg.png" />
<span
>恭喜 {{ barrageList[item / 2 - 1].memberName }} 获得
{{ barrageList[item / 2 - 1].prizeName }}</span
>
</div>
</swiper-slide>
</swiper>
<div class="box-box">
<img
:class="{
active: clickIndex == index,
'animation-end': animationEnd,
}"
v-for="(item, index) in boxList"
:key="item"
:src="
game.gameExt.prizeStyleList.length == 1
? game.gameExt.prizeStyleList[0].imageNoSelectUrl
: game.gameExt.prizeStyleList[index].imageNoSelectUrl
"
:style="{ left: item.left, top: item.top }"
@click="clickBox(index)"
/>
</div>
<div class="points-count-box">
<div style="min-width:48px;">
<!-- 左边显示-右边次数显示且积分玩法开启才显示在左边 -->
<div
class="text-box"
v-if="
rule.integral && playNumberObj && playNumberObj.playNumberFlag
"
>
<div class="text">{{ currentIntegral }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/我的积分.png" />
</div>
</div>
<img
class="guide-img"
:src="game.gameExt.noticeImageUrl"
mode="widthFix"
/>
<div style="min-width:48px;">
<div
class="text-box number"
v-if="playNumberObj && playNumberObj.playNumberFlag"
>
<div class="text">{{ playNumberObj.playNumber }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/剩余次数.png" />
</div>
<div class="text-box" v-else-if="rule.integral">
<div class="text">{{ currentIntegral }}</div>
<img class="text-shadow" src="./images/circle_bg.png" />
<img class="title-image" src="./images/我的积分.png" />
</div>
</div>
<div class="share-box" @click.stop="clickShareBtn" v-if="rule.inviteNum">
<div class="icon">
<div class="iconfont icon-yaoqing"></div>
</div>
<img src="./images/邀请助力.png" />
</div>
</div>
<img
class="ad-image"
:src="game.gameExt.adsImageUrl"
mode="widthFix"
@click="clickAdImg"
v-if="game.adsFlag"
/>
</div>
<open-box-dialog
:show.sync="showOpenBoxDialog"
:title="openBoxTitle"
:data="openBoxData"
:isOpening="isOpening"
@open="open()"
></open-box-dialog>
<reward-dialog
:show.sync="showRewardDialog"
:reward="rewardDetail"
@toMyReward="toMyReward"
></reward-dialog>
<reward-fail-dialog :show.sync="showRewardFailDialog"></reward-fail-dialog>
<share-select-dialog
:show.sync="showShareSelectDialog"
v-show="showShareSelectDialog"
:memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="manager.shareWx()"
@shareTimeline="manager.shareTimeline()"
@sharePoster="manager.sharePoster()"
></share-select-dialog>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="posterOptions"
></share-img-dialog>
<share-tip-mask :show.sync="showShareTipMask"/>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getGameInfo,
getGamePlayNumber,
getGamePlayBarrage,
getIntegral,
getGameRule,
shareEvent,
} = gameRequestApi;
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Manager } from "../../manager";
import "swiper/css/swiper.css";
import OpenBoxDialog from "./components/open-box.vue";
import RewardDialog from "./components/reward-dialog.vue";
import RewardFailDialog from "./components/reward-fail.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import AlertDialog from "./components/alert.vue";
import ShareTipMask from './components/share-tip-mask.vue';
export default {
components: {
OpenBoxDialog,
Swiper,
SwiperSlide,
RewardDialog,
RewardFailDialog,
ShareSelectDialog,
ShareImgDialog,
AlertDialog,
ShareTipMask,
},
data() {
return {
clickIndex: -1,
posterOptions:{},
showShareTipMask: false,
animationEnd: false,
isOpening: false,
showOpenBoxDialog: false,
showRewardDialog: false,
showRewardFailDialog: false,
showShareSelectDialog: false,
showShareImgDialog: false,
shareConditionObj: {},
alertOptions: {},
barrageList: [],
boxList: [
{
left: "calc(22.7% - 50px)",
top: "212px",
},
{
left: "calc(50% - 50px)",
top: "277px",
},
{
left: "calc(77% - 50px)",
top: "212px",
},
{
left: "calc(22.7% - 50px)",
top: "349px",
},
{
left: "calc(50% - 50px)",
top: "405px",
},
{
left: "calc(77% - 50px)",
top: "349px",
},
],
swiperOptions: {
direction: "vertical",
loop: true,
speed: 500,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
},
isPlay: false,
name: "猜盲盒",
game: {},
gameId: "",
enterpriseId: "",
memberId: "",
isAttest: 0,
currentIntegral: "--",
rule: {},
playNumberObj: {},
};
},
created() {
document.title = "猜盲盒";
this.manager = new Manager(this);
let query = this.$route.query;
this.gameId = query.gameId;
this.enterpriseId = query.enterpriseId;
this.memberId = query.memberId;
this.isAttest = +query.isAttest;
if (!this.audio) {
this.audio = new Audio();
this.audio.autoplay = true;
this.audio.addEventListener(
"ended",
() => {
if (this.isPlay) {
this.audio.play();
}
},
false
);
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
this.isPlay = false;
this.audio.pause();
}
});
}
this.getGame();
this.getGameRule();
this.getGamePlayNumber();
this.getIntegral();
this.getGamePlayBarrage();
this.lookBuryPoint();
},
mounted() {
this.manager.startPolling();
},
destroyed() {
this.manager.stopPolling();
this.audio.pause();
document.removeEventListener("visibilitychange",()=>{});
},
methods: {
lookBuryPoint() {
let query = this.$route.query;
if (query.memberId) {
shareEvent({
enterpriseId: query.enterpriseId || "",
memberId: query.memberId || "",
relationType: "game",
relationId: query.gameId || "",
event: 2,
});
}
},
async getGame() {
let res = await getGameInfo({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
});
document.title = res.gameName;
res.gameExt.prizeStyleList = JSON.parse(
res.gameExt.prizeStyleJson || "[]"
);
this.game = res;
setTimeout(() => {
this.animationEnd = true;
}, 1000);
this.audio.src = res.gameExt.backMusicUrl;
if (this.isPlay) {
this.audio.play();
} else {
this.audio.pause();
}
},
async getGameRule() {
let rule = await getGameRule({
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: {
shareTitle: rule.shareRuleDesc,
shareImage: rule.shareImageUrl,
},
});
},
async getGamePlayNumber() {
let playNumberObj = await getGamePlayNumber({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
memberId: this.memberId || "",
});
this.playNumberObj = playNumberObj;
},
async getGamePlayBarrage() {
let barrageList = await getGamePlayBarrage({
gameId: this.gameId,
enterpriseId: this.enterpriseId,
});
this.barrageList = barrageList || [];
},
async getIntegral() {
let currentIntegral = await getIntegral({
enterpriseId: this.enterpriseId,
memberId: this.memberId,
});
this.currentIntegral = currentIntegral;
},
clickBox(index) {
if (this.clickIndex != -1) {
return;
}
this.clickIndex = index;
setTimeout(() => {
let prizeStyleList = this.game.gameExt.prizeStyleList;
let itemIndex = prizeStyleList.length > index ? index : 0;
let boxItem = prizeStyleList[itemIndex];
this.showOpenBoxDialog = true;
this.openBoxData = boxItem;
if (this.playNumberObj.playNumber == 0 && this.rule.integral) {
this.openBoxTitle = `每次参与游戏消耗${this.rule.integral}积分${
this.playNumberObj.playNumberFlag ? "或参与次数" : ""
}`;
} else {
this.openBoxTitle = "";
}
}, 900);
},
toGameRule() {
this.$router.push({
path: "/cmh/7/rule",
query: this.$route.query,
});
},
async toMyReward() {
await this.manager.checkMyReward();
this.$router.push({
path: "/cmh/7/my-reward",
query: this.$route.query,
});
},
playMusic() {
this.isPlay = !this.isPlay;
if (this.isPlay) {
this.audio.play();
} else {
this.audio.pause();
}
},
async clickShareBtn() {
await this.manager.checkPlay();
this.showShareSelectDialog = true;
},
clickAdImg() {
window.wx.miniProgram.navigateTo({
url: "/" + this.game.gameExt.adsLinkUrl,
});
},
async open() {
let gameRes = await this.manager.play();
this.showOpenBoxDialog = false;
// this.rewardDetail = {};
if (gameRes.prizeType) {
this.rewardDetail = gameRes;
this.showRewardDialog = true;
} else {
this.showRewardFailDialog = true;
}
this.getGamePlayNumber();
this.getIntegral();
},
},
watch: {
showOpenBoxDialog(n) {
if (!n) {
this.clickIndex = -1;
}
},
},
};
</script>
<style scoped>
.bg-image-box{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.bg-image {
width: 100%;
}
.content {
position: relative;
z-index: 1;
}
.music-icon {
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
position: fixed;
top: 20px;
left: 20px;
z-index: 10;
background: rgba(39, 41, 43, 0.75);
color: white;
font-size: 20px;
/* transform: rotate(90deg); */
}
@keyframes transform {
0% {
transform: rotate(0%);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.music-icon.icon-yinfu {
animation-name: transform;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.right-btn {
text-align: center;
position: fixed;
right: 0px;
top: 20px;
padding: 5px 7px;
line-height: 13px;
width: 25px;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
background: rgba(39, 41, 43, 1);
z-index: 10;
color: white;
font-size: 11px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
opacity: 0.75;
}
.right-btn.award {
top: 89px;
}
.swiper-class {
position: absolute;
left: 20px;
top: 160px;
z-index: 10;
width: 300px;
height: 36px;
}
.swiper-item {
width: 300px;
height: 36px;
box-sizing: border-box;
border-radius: 17px 0 0 17px;
position: relative;
display: flex;
align-items: center;
}
.swiper-item img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.swiper-item span {
padding-left: 30px;
color: white;
font-size: 12px;
z-index: 2;
}
.box-box {
height: 515px;
width: 100%;
position: relative;
}
@keyframes box-animation {
from {
transform: translate(0, -100px);
}
to {
transform: translate(0, 0);
}
}
@keyframes box-up-animation{
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(0, -50%) scale(1);
}
}
@keyframes box-active-animation {
0% {
transform: translate(0, -50%) scale(1);
}
99% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.8);
left: 50%;
top: 346px;
z-index: 10;
opacity: 0;
}
}
.box-box img {
position: absolute;
transform: translate(0, -100px);
width: 100px;
height: 100px;
animation-timing-function: linear;
animation-name: box-animation;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.box-box img:nth-child(1) {
animation-delay: 0.65s;
}
.box-box img:nth-child(2) {
animation-delay: 0.6s;
}
.box-box img:nth-child(3) {
animation-delay: 0.7s;
}
.box-box img:nth-child(4) {
animation-delay: 0.5s;
}
.box-box img:nth-child(5) {
animation-delay: 0.45s;
}
.box-box img:nth-child(6) {
animation-delay: 0.55s;
}
.box-box img.animation-end {
transform: translate(0, 0);
animation: none;
}
.box-box img.active {
animation-timing-function: linear, linear;
animation-name: box-up-animation, box-active-animation;
animation-duration: 0.3s, 0.3s;
animation-fill-mode: forwards, forwards;
animation-iteration-count: 1, 1;
animation-delay: 0s, 0.4s;
}
.points-count-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
position: relative;
height: 57px;
}
.text-box {
position: relative;
text-align: center;
}
.text-box .text {
font-family: DINAlternate-Bold, DINAlternate;
font-size: 26px;
font-weight: 600;
color: #000000;
line-height: 23px;
position: relative;
z-index: 2;
}
.text-box.number .text {
font-size: 40px;
line-height: 30px;
}
.text-box .text-shadow {
position: absolute;
left: 50%;
top: 17px;
transform: translateX(-50%);
width: 41px;
height: 8px;
z-index: 1;
}
.text-box.number .text-shadow {
top: 25px;
}
.text-box .title-image {
padding-top: 5px;
width: 48px;
height: 16px;
}
.guide-img {
width: 174px;
height: 17px;
}
.ad-image {
margin: 39px 15px 15px;
border-radius: 8px;
width: calc(100% - 30px);
}
.share-box {
position: absolute;
z-index: 10;
right: 10px;
bottom: -64px;
padding: 10px;
}
.share-box .icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #21252b;
box-shadow: inset 0px 2px 1px 0px rgba(243, 243, 243, 0.4);
}
.share-box .icon .iconfont {
/* background-image: -webkit-linear-gradient(180deg, #faf53e 0%, #faf53e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
color: #FFFAB0;
font-size: 18px;
}
.share-box img {
position: absolute;
left: 50%;
bottom: 0;
width: 48px;
height: 16px;
transform: translateX(-50%);
z-index: 2;
}
</style>
src/components/cmh/theme-7/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"
infinite-scroll-distance="10"
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_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.go(-1);
},
},
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, #DFF7F4 0%, rgba(223,247,244,0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title {
color: #21252B;
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;
min-width: 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{
margin: 3px 0 5px;
color: #21252B;
font-weight: 300;
font-size: 12px;
height: 33px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.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-7/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">
<div class="title">参与门槛</div>
<div class="value" v-if="!rule.playConditionFlag">无门槛</div>
<div class="value" v-for="item in rule.gameRuleConditionList" :key="item" v-else>
<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" 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, #DFF7F4 0%, rgba(223,247,244,0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title{
color: #21252B;
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;
margin: 11px 0 7px;
height: 40px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.reward-item-detail .reward-des{
color: #21252B;
font-size: 11px;
font-weight: 300;
margin: 4px 0 7px;
min-height: 17px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.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;
word-break: break-all;
white-space: pre-wrap;
}
</style>
\ No newline at end of file
src/components/cmh/theme-7/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 disable" v-if="helpDetail.helpStatus == 2">
我已助力
</div>
<div class="handle-btn red" @click="support" v-else>为好友助力</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>
<alert-dialog v-bind.sync="alertOptions"></alert-dialog>
<fwh-qrcode-dialog v-bind.sync="fwhQrcodeOptions"></fwh-qrcode-dialog>
<share-select-dialog
:show.sync="showShareSelectDialog"
v-show="showShareSelectDialog"
:memberId="memberId"
:enterpriseId="enterpriseId"
:gameId="gameId"
:shareConditionObj="shareConditionObj"
@shareWx="manager.shareWx()"
@shareTimeline="manager.shareTimeline()"
@sharePoster="manager.sharePoster()"
></share-select-dialog>
<share-img-dialog
:show.sync="showShareImgDialog"
v-bind="posterOptions"
></share-img-dialog>
<share-tip-mask :show.sync="showShareTipMask"/>
</div>
</template>
<script>
import { gameRequestApi } from "@/api/common.js";
const {
getHelpDetail,
getGameReward,
getGameInfo,
getGameShareQrCodeUrl,
getGameRule,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import FwhQrcodeDialog from "./components/fwh-qrcode.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import ShareTipMask from './components/share-tip-mask.vue';
import { Manager } from "../../manager";
export default {
components: {
AlertDialog,
ShareSelectDialog,
ShareImgDialog,
FwhQrcodeDialog,
ShareTipMask,
},
data() {
return {
showShareTipMask: false,
alertOptions: {},
game: {},
helpDetail: {},
fwhQrcodeOptions: {
show: false,
qrcodeUrl: "",
},
gameReward: [],
showShareSelectDialog: false,
showShareImgDialog: false,
posterOptions:{},
memberId: "",
enterpriseId: "",
gameId: "",
shareConditionObj: {},
};
},
created() {
document.title = "游戏助力";
this.manager = new Manager(this);
this.loadData();
},
methods: {
async loadData() {
let query = this.$route.query;
this.memberId = query.memberId;
this.enterpriseId = query.enterpriseId;
this.gameId = query.gameId;
this.getGameInfo();
this.getGameRule();
this.getGameReward();
this.getHelpDetail();
},
async getGameInfo() {
let query = this.$route.query;
this.game = await getGameInfo({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
});
},
async getGameReward() {
let query = this.$route.query;
this.gameReward = await getGameReward({
enterpriseId: query.enterpriseId,
gameId: query.gameId,
});
},
async getHelpDetail() {
let query = this.$route.query;
this.helpDetail =
(await getHelpDetail({
enterpriseId: query.enterpriseId,
shareMemberId: query.shareMemberId,
gameId: query.gameId,
helpMemberId: query.memberId || "",
})) || {};
},
async getGameRule() {
let rule = await getGameRule({
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: {
shareTitle: rule.shareRuleDesc,
shareImage: rule.shareImageUrl,
},
});
},
toPlayGame() {
let query = this.$route.query;
this.$router.replace({
path: "/cmh/7",
query: {
gameId: query.gameId,
memberId: query.memberId || "",
enterpriseId: query.enterpriseId,
isAttest: query.isAttest,
},
});
},
support() {
this.manager.support();
},
shareFwh() {
let query = this.$route.query;
getGameShareQrCodeUrl({
gameId: query.gameId,
enterpriseId: query.enterpriseId,
memberId: query.shareMemberId,
shareType: 2,
})
.then((result) => {
this.fwhQrcodeOptions = {
show: true,
qrcodeUrl: result.qrCodeUrl,
};
})
.catch((err) => {
this.manager.showTips(err.message);
});
},
},
};
</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 rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 0.8);
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,
rgba(33, 37, 43, 1) 0%,
rgba(33, 37, 43, 0) 100%
);
margin-right: 9px;
}
.content-top .top-tip-box .line.right {
background: linear-gradient(
270deg,
rgba(33, 37, 43, 0) 0%,
rgba(33, 37, 43, 1) 100%
);
margin-left: 9px;
}
.content-top .top-tip-box .title {
color: #21252b;
font-size: 15px;
}
/* 顶部 end */
.content-cell {
border-radius: 8px;
border: 1px solid #21252b;
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);
box-sizing: border-box;
color: white;
font-size: 16px;
font-weight: 600;
margin: 0 auto 19px;
}
.handle-btn:last-child {
margin-bottom: 23px;
}
.handle-btn.disable {
background: #c7c7c7;
}
.handle-btn.red {
background: rgba(0, 0, 0, 1);
}
.handle-btn.blue {
background: white;
border: 1px solid black;
color: black
}
/* 好友助力 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: #21252b;
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;
margin: 11px 0 0;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.reward-item-detail .reward-des {
color: #21252b;
font-size: 11px;
font-weight: 300;
margin: 4px 0 7px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
/* 游戏奖品 end */
</style>
src/components/index.vue
......@@ -47,4 +47,8 @@ export default {
};
</script>
<style scoped></style>
<style scoped>
body{
margin: 0;
}
</style>
src/router/index.js
......@@ -37,6 +37,8 @@ const routes = [
...getGameTemplateList(2),
...getGameTemplateList(3),
...getGameTemplateList(5),
...getGameTemplateList(6),// 浪漫
...getGameTemplateList(7),// 中秋
];
......
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