Skip to content

G
game-h5
Commit 107e541a by 曾经
Options

中秋-浪漫礼盒

parent c9835193
Showing with 3419 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/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-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/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/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