|
|
|
@ -1,12 +1,10 @@ |
|
|
|
<template> |
|
|
|
<view class="prizePage" :style="{'background-image':`url('${ticketInfo.bg_image}')`}"> |
|
|
|
<!-- <view class="ticketInfoPrice">面值{{ticketInfo.price}}元</view> --> |
|
|
|
<!-- <view class="ticketInfoPrice2">面值{{ticketInfo.price}}元</view> --> |
|
|
|
<!-- <view class="bg" :style="{'background-image':`url('${ticketInfo.bg_image}')`}" v-if="gai"></view> --> |
|
|
|
<view class="scratch"> |
|
|
|
<view class="box"> |
|
|
|
<!-- 刮奖结果图片 --> |
|
|
|
<!-- <image src="../../static/home/logo.png" class="img" :class="toDraw?'zIndex1':''" v-if="showResult||1"></image> --> |
|
|
|
<view :class="toDraw?'zIndex1':''" style="" class="img"> |
|
|
|
<view :class="toDraw?'zIndex1':''" style="" class="result_img"> |
|
|
|
<view v-for="(item,index) in dataList" :key="index" class="img_row"> |
|
|
|
<view v-for="(lineItem, lineIndex) in item" :key="lineIndex" class="data_item"> |
|
|
|
<image :src="lineItem.image" mode=""></image> |
|
|
|
@ -15,7 +13,7 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 刮奖canvas容器 --> |
|
|
|
<canvas |
|
|
|
<canvas v-if="!isWin && !isThank" |
|
|
|
class="canvas-box" |
|
|
|
canvas-id="guagua" |
|
|
|
:disable-scroll="true" |
|
|
|
@ -31,29 +29,29 @@ |
|
|
|
</cover-view> |
|
|
|
</cover-view> |
|
|
|
</view> |
|
|
|
<cover-view class="mask" v-if="isWin || isThank"> |
|
|
|
|
|
|
|
</cover-view> |
|
|
|
<cover-view class="winPrize" v-if="isWin"> |
|
|
|
{{awards_amount}}元 |
|
|
|
<cover-view style="width: 300rpx;height: 90rpx;position: absolute;left: 225rpx;top: 680rpx;z-index: 4;" @click="again"></cover-view> |
|
|
|
<cover-view class="close" @click="close(1)"></cover-view> |
|
|
|
</cover-view> |
|
|
|
<cover-view class="noPrize" v-if="isThank"> |
|
|
|
<cover-view class="thank">谢谢惠顾</cover-view> |
|
|
|
<cover-view class="thank2">再接再厉</cover-view> |
|
|
|
<cover-view class="again" @click="again">再刮一次</cover-view> |
|
|
|
<cover-view class="close" @click="close(2)"></cover-view> |
|
|
|
</cover-view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="mask" v-if="showResult"> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="winPrize" v-if="isWin"> |
|
|
|
{{awards_amount}}元 |
|
|
|
<cover-view class="again" @click="again"></cover-view> |
|
|
|
<view class="close" @click="close(1)"></view> |
|
|
|
</view> |
|
|
|
<!-- <view class="ticketInfoCon">{{ticketInfo.content}}</view> --> |
|
|
|
<!-- <view class="ticketInfoCon2">{{ticketInfo.content}}</view> --> |
|
|
|
<view class="noPrize_box" v-if="isThank"> |
|
|
|
<cover-view class="noPrize" v-if="isThank"></cover-view> |
|
|
|
<cover-view class="again" v-if="isThank"></cover-view> |
|
|
|
<cover-view class="again_mask" @click="again" v-if="isThank"></cover-view> |
|
|
|
<cover-view class="close" @click="close(2)" v-if="isThank"></cover-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import API from '@/common/js/api.js' |
|
|
|
import API from '@/common/js/api.js' |
|
|
|
import Scratch from './scratch.js' |
|
|
|
// import VConsole from './renderjs.js' |
|
|
|
export default { |
|
|
|
@ -101,6 +99,7 @@ export default { |
|
|
|
guaCanvas: null, |
|
|
|
isShow: false, |
|
|
|
c_r_id: '', |
|
|
|
gai: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
updated() { |
|
|
|
@ -111,6 +110,7 @@ export default { |
|
|
|
console.log(n,o); |
|
|
|
if(n && n!=o){ |
|
|
|
this.showResult = true; |
|
|
|
this.gai = false; |
|
|
|
this.doPrizeScratchTicketFun(); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -144,17 +144,18 @@ export default { |
|
|
|
width: this.scratchWidth, |
|
|
|
height: this.scratchHeight, |
|
|
|
size: this.scratchSize, |
|
|
|
scale: this.scratchScale |
|
|
|
scale: this.scratchScale, |
|
|
|
bgImg: this.ticketInfo.bg_image |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
// 开始刮奖获取信息 |
|
|
|
beginLottery(){ |
|
|
|
API.beginLottery({zone_goods_id: this.id}, res=>{ |
|
|
|
this.dataList = res.data.list; |
|
|
|
this.c_r_id = res.data.c_r_id; |
|
|
|
this.toDraw = true; |
|
|
|
this.initCanvas(); |
|
|
|
this.dataList = res.data.list; |
|
|
|
// console.log(this.dataList, 'dataList----'); |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -162,17 +163,24 @@ export default { |
|
|
|
doPrizeScratchTicketFun () { |
|
|
|
// this.isWin = true; |
|
|
|
// this.isThank = true; |
|
|
|
uni.showLoading({ |
|
|
|
title: '加载中' |
|
|
|
}) |
|
|
|
API.endLottery({c_r_id: this.c_r_id}, res=>{ |
|
|
|
uni.hideLoading(); |
|
|
|
if(res.data.awards_amount){ |
|
|
|
this.awards_amount = res.data.awards_amount; |
|
|
|
this.isWin = true; |
|
|
|
this.guaCanvas = null; |
|
|
|
}else{ |
|
|
|
this.isWin = false |
|
|
|
this.isThank = true; |
|
|
|
this.guaCanvas = null; |
|
|
|
} |
|
|
|
|
|
|
|
}, fail=>{ |
|
|
|
// this.isScratching = false |
|
|
|
uni.hideLoading(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 点击按钮开始刮奖 |
|
|
|
@ -186,9 +194,10 @@ export default { |
|
|
|
this.isThank = false; |
|
|
|
this.toDraw = false; |
|
|
|
this.showResult = false; |
|
|
|
this.gai = true; |
|
|
|
this.isScratching = false; |
|
|
|
this.isShow = false; |
|
|
|
this.guaCanvas.show = false; |
|
|
|
// this.guaCanvas.show = false; |
|
|
|
this.initInfo(); |
|
|
|
}, |
|
|
|
close(type){ |
|
|
|
@ -198,46 +207,67 @@ export default { |
|
|
|
if(type===2){ |
|
|
|
this.isThank = false; |
|
|
|
} |
|
|
|
this.showResult = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.prizePage{ |
|
|
|
width: 750rpx; |
|
|
|
min-height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-color: #fff; |
|
|
|
.prizePage{ |
|
|
|
width: 750rpx; |
|
|
|
min-height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
// background-size: auto 100%; |
|
|
|
// background-color: #fff; |
|
|
|
// height: 590px; |
|
|
|
// background-position: center top; |
|
|
|
} |
|
|
|
.bg{ |
|
|
|
position: fixed; |
|
|
|
z-index: 2; |
|
|
|
width: 750rpx; |
|
|
|
min-height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
.result_img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: -1; |
|
|
|
background-color: #dddddd; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.img_row{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-content: space-around; |
|
|
|
} |
|
|
|
&.zIndex1{ |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.data_item{ |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
.ticketInfoPrice{ |
|
|
|
position: fixed;top: 60px;right: 20px;z-index: 3; |
|
|
|
color: #fff; |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
.ticketInfoPrice2{ |
|
|
|
position: fixed;top: 64px;right: 16px;z-index: 2; |
|
|
|
color: #000; |
|
|
|
font-size: 30px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.ticketInfoCon{ |
|
|
|
position: fixed;top: 150px;left:10vw; |
|
|
|
width: 80vw;text-align: justify; |
|
|
|
color: #fff; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
.ticketInfoCon2{ |
|
|
|
position: fixed; |
|
|
|
top: 152px; |
|
|
|
left:calc(10vw + 2px); |
|
|
|
width: 80vw;text-align: justify; |
|
|
|
font-weight: bold; |
|
|
|
color: #000; |
|
|
|
z-index: 2; |
|
|
|
image{ |
|
|
|
width: 80rpx; |
|
|
|
height: 60rpx; |
|
|
|
// background-color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.scratch { |
|
|
|
position: relative; |
|
|
|
padding-top: 600rpx; |
|
|
|
@ -252,44 +282,12 @@ export default { |
|
|
|
// border-radius: 20rpx; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: -1; |
|
|
|
background-color: #DCDEDD; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.img_row{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-content: space-around; |
|
|
|
} |
|
|
|
&.zIndex1{ |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.data_item{ |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
image{ |
|
|
|
width: 80rpx; |
|
|
|
height: 60rpx; |
|
|
|
// background-color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.canvas-box { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100.5%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
// border-radius: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
@ -358,8 +356,8 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.mask{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background-color: rgba(0, 0, 0, 0.2); |
|
|
|
position: fixed; |
|
|
|
top: 0px; |
|
|
|
@ -374,7 +372,7 @@ export default { |
|
|
|
position: fixed; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
z-index: 3; |
|
|
|
z-index: 30; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
text-align: center; |
|
|
|
line-height: 550px; |
|
|
|
@ -383,6 +381,12 @@ export default { |
|
|
|
font-size: 60px; |
|
|
|
animation: showPrize 1s ease-in-out; |
|
|
|
|
|
|
|
.again{ |
|
|
|
width: 300rpx;height: 200rpx; |
|
|
|
position: absolute;left: 225rpx;top: 630rpx; |
|
|
|
z-index: 31; |
|
|
|
// background: rgba(0, 0, 0, 0.5); |
|
|
|
} |
|
|
|
.close{ |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
@ -391,61 +395,69 @@ export default { |
|
|
|
position: fixed; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
z-index: 5; |
|
|
|
z-index: 32; |
|
|
|
} |
|
|
|
} |
|
|
|
.noPrize{ |
|
|
|
width: 550rpx; |
|
|
|
height: 550rpx; |
|
|
|
background-image: url("../../static/home/noPrize.png"); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
.noPrize_box{ |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
position: fixed; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
z-index: 3; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
animation: showPrize 1s ease-in-out; |
|
|
|
top: 0px; |
|
|
|
left: 0px; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
// background-color: rgba(0,0,0,0.5); |
|
|
|
z-index: 30; |
|
|
|
|
|
|
|
.thank{ |
|
|
|
width: 100%; |
|
|
|
color: #fff; |
|
|
|
.noPrize{ |
|
|
|
width: 550rpx; |
|
|
|
height: 550rpx; |
|
|
|
background-image: url("../../static/home/noPrize.png"); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
top: 20rpx; |
|
|
|
z-index: 4; |
|
|
|
} |
|
|
|
.thank2{ |
|
|
|
line-height: 150px; |
|
|
|
color: #DB4542; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 30px; |
|
|
|
z-index: 4; |
|
|
|
top: 400rpx; |
|
|
|
left: 100rpx; |
|
|
|
z-index: 31; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
animation: showNoPrize 1s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.again{ |
|
|
|
width: 240rpx; |
|
|
|
height: 66rpx; |
|
|
|
line-height: 66rpx; |
|
|
|
border-radius: 20px; |
|
|
|
position: absolute; |
|
|
|
left: 155rpx; |
|
|
|
top: 256rpx; |
|
|
|
left: 255rpx; |
|
|
|
top: 650rpx; |
|
|
|
color: #F05859; |
|
|
|
background-color: #FFE1AE; |
|
|
|
z-index: 5; |
|
|
|
background-image: url("../../static/home/btn_11.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
z-index: 32; |
|
|
|
animation: showNoPrize 1s ease-in-out; |
|
|
|
} |
|
|
|
.again_mask{ |
|
|
|
width: 340rpx; |
|
|
|
height: 150rpx; |
|
|
|
position: absolute; |
|
|
|
left: 205rpx; |
|
|
|
top: 610rpx; |
|
|
|
z-index: 33; |
|
|
|
// background: rgba(0, 0, 0, 0.5); |
|
|
|
} |
|
|
|
.close{ |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
width: 100rpx; |
|
|
|
height: 200rpx; |
|
|
|
background-image: url("../../static/home/close.png"); |
|
|
|
background-size: contain; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: 230px; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
z-index: 5; |
|
|
|
left: 325rpx; |
|
|
|
top: 770rpx; |
|
|
|
z-index: 32; |
|
|
|
animation: showNoPrize 1s ease-in-out; |
|
|
|
// background-color: rgba(255, 0, 0, 0.5); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: bottom; |
|
|
|
} |
|
|
|
} |
|
|
|
@keyframes showPrize { |
|
|
|
@ -456,4 +468,12 @@ export default { |
|
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
|
} |
|
|
|
} |
|
|
|
@keyframes showNoPrize { |
|
|
|
0%{ |
|
|
|
transform: scale(0.4); |
|
|
|
} |
|
|
|
100%{ |
|
|
|
transform: scale(1); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
