|
|
|
@ -1,60 +1,63 @@ |
|
|
|
<template> |
|
|
|
<view class="prizePage" :style="{'background-image':`url('${ticketInfo.bg_image}')`}"> |
|
|
|
<!-- <view class="bg" :style="{'background-image':`url('${ticketInfo.bg_image}')`}" v-if="gai"></view> --> |
|
|
|
<view class="scratch"> |
|
|
|
<view class="box"> |
|
|
|
<!-- 刮奖结果图片 --> |
|
|
|
<view :class="toDraw?'zIndex1':''" style="" class="result_img"> |
|
|
|
<view style="font-size: 12px;text-align: center;margin-top: 8px;">中奖号码</view> |
|
|
|
<view class="img_row" style="border-bottom: 1px solid #333;width: 90%;margin: 5px auto;"> |
|
|
|
<view v-for="(prizeItem,prizeIndex) in prizeList" :key="prizeIndex" class="data_item"> |
|
|
|
<image :src="prizeItem" mode="aspectFill"></image> |
|
|
|
<view class="prizePage" > |
|
|
|
<view class="prizeBg" :style="{'background-image':`url('${ticketInfo.bg_image}')`}"></view> |
|
|
|
<view class="prizeContent" :style="{'background-image':`url('${ticketInfo.bg_image}')`}"> |
|
|
|
<!-- <view class="bg" :style="{'background-image':`url('${ticketInfo.bg_image}')`}" v-if="gai"></view> --> |
|
|
|
<view class="scratch"> |
|
|
|
<view class="box"> |
|
|
|
<!-- 刮奖结果图片 --> |
|
|
|
<view :class="showBackboard?'zIndex1':'hide'" style="" class="result_img"> |
|
|
|
<view style="font-size: 12px;text-align: center;margin-top: 8px;">中奖号码</view> |
|
|
|
<view class="img_row" style="border-bottom: 1px solid #333;width: 90%;margin: 5px auto;"> |
|
|
|
<view v-for="(prizeItem,prizeIndex) in prizeList" :key="prizeIndex" class="data_item"> |
|
|
|
<image :src="prizeItem" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-for="(item,index) in dataList" :key="index" class="img_row"> |
|
|
|
<view v-for="(lineItem, lineIndex) in item" :key="lineIndex" class="data_item" |
|
|
|
style="border-bottom: 1px dashed #333;"> |
|
|
|
<image :src="lineItem.image" mode="aspectFill"></image> |
|
|
|
<view class="">￥{{lineItem.amount}}</view> |
|
|
|
<view style="font-size: 12px;font-weight: normal;transform: scale(0.8);">{{lineItem.pinyin}}</view> |
|
|
|
<view class="circle" :class="lineItem.is_awards?'show':''"></view> |
|
|
|
<view v-for="(item,index) in dataList" :key="index" class="img_row"> |
|
|
|
<view v-for="(lineItem, lineIndex) in item" :key="lineIndex" class="data_item" |
|
|
|
style="border-bottom: 1px dashed #333;"> |
|
|
|
<image :src="lineItem.image" mode="aspectFill"></image> |
|
|
|
<view class="">￥{{lineItem.amount}}</view> |
|
|
|
<view style="font-size: 12px;font-weight: normal;transform: scale(0.8);">{{lineItem.pinyin}}</view> |
|
|
|
<view class="circle" :class="(lineItem.is_awards&&awards_amount)?'show':''"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 刮奖canvas容器 --> |
|
|
|
<canvas v-if="!isWin && !isThank" |
|
|
|
class="canvas-box" |
|
|
|
canvas-id="guagua" |
|
|
|
:disable-scroll="true" |
|
|
|
@touchstart="touchStart" |
|
|
|
@touchmove="touchMove" |
|
|
|
@touchend="touchEnd" |
|
|
|
></canvas> |
|
|
|
<!-- 刮奖前提示消息，开始刮奖后隐藏 --> |
|
|
|
<cover-view class="tip" v-if="!toDraw"> |
|
|
|
<!-- 开始刮奖按钮 --> |
|
|
|
<cover-view class="btn" @tap="scratchStart()"> |
|
|
|
<cover-view class="text">立即刮奖</cover-view> |
|
|
|
</cover-view> |
|
|
|
</cover-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="mask" v-if="showResult"> |
|
|
|
<!-- 刮奖canvas容器 --> |
|
|
|
<canvas v-if="!isWin && !isThank" |
|
|
|
class="canvas-box" |
|
|
|
canvas-id="guagua" |
|
|
|
:disable-scroll="true" |
|
|
|
@touchstart="touchStart" |
|
|
|
@touchmove="touchMove" |
|
|
|
@touchend="touchEnd" |
|
|
|
></canvas> |
|
|
|
<!-- 刮奖前提示消息，开始刮奖后隐藏 --> |
|
|
|
<cover-view class="tip" v-if="!toDraw"> |
|
|
|
<!-- 开始刮奖按钮 --> |
|
|
|
<cover-view class="btn" @tap="scratchStart()"> |
|
|
|
<cover-view class="text">立即刮奖</cover-view> |
|
|
|
</cover-view> |
|
|
|
</cover-view> |
|
|
|
</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="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> |
|
|
|
<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="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> |
|
|
|
@ -68,41 +71,41 @@ export default { |
|
|
|
return { |
|
|
|
id: '', |
|
|
|
ticketInfo: { |
|
|
|
bg_image: '../../static/home/4.jpg', |
|
|
|
// bg_image: '', |
|
|
|
// bg_image: '../../static/home/4.jpg', |
|
|
|
bg_image: '', |
|
|
|
price: '20', |
|
|
|
content: `刮开覆盖膜，如果出现背书标志“1倍”、“2倍”、“5倍”、“10倍”、“20倍”、 |
|
|
|
“50倍”、“100倍”，既中得该标志下方所示的金额乘以该倍数； |
|
|
|
如果在“全中”区出现标志“赢”，即中图刮开区内所示的20个金额之和。` |
|
|
|
}, |
|
|
|
awards_amount: '20', |
|
|
|
awards_amount: 0, |
|
|
|
prizeList: ['','',''], |
|
|
|
dataList: [ |
|
|
|
[ |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'} |
|
|
|
], |
|
|
|
[ |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'} |
|
|
|
], |
|
|
|
[ |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'} |
|
|
|
], |
|
|
|
], |
|
|
|
// dataList: [], |
|
|
|
toDraw: false, // 是否开始刮奖 |
|
|
|
// dataList: [ |
|
|
|
// [ |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'} |
|
|
|
// ], |
|
|
|
// [ |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'} |
|
|
|
// ], |
|
|
|
// [ |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'}, |
|
|
|
// {image: '',amount:'100.00'} |
|
|
|
// ], |
|
|
|
// ], |
|
|
|
dataList: [], |
|
|
|
toDraw: false, // 是否开始刮奖, |
|
|
|
showResult: false, // 是否显示抽奖结果 |
|
|
|
isWin: false, // 是否中奖 |
|
|
|
scratchWidth: 330, // 绘制刮奖范围宽-375屏幕330 |
|
|
|
scratchHeight: 300, // 绘制刮奖范围高-375屏幕300 |
|
|
|
scratchSize: 10, // 触手大小 |
|
|
|
scratchScale: 0.6, // 需刮开百分比 |
|
|
|
scratchScale: 0.8, // 需刮开百分比 |
|
|
|
prize_img: '', // 中奖图片 |
|
|
|
isScratching: false, // 是否正在刮奖, |
|
|
|
isThank: false, |
|
|
|
@ -111,7 +114,7 @@ export default { |
|
|
|
c_r_id: '', |
|
|
|
gai: true, |
|
|
|
screenWidth: 375, |
|
|
|
|
|
|
|
showBackboard: false,// 页面初始，底下的结果层先不渲染 |
|
|
|
} |
|
|
|
}, |
|
|
|
updated() { |
|
|
|
@ -179,13 +182,15 @@ export default { |
|
|
|
this.toDraw = true; |
|
|
|
this.initCanvas(); |
|
|
|
this.dataList = res.data.list; |
|
|
|
this.prizeList = res.data.prizes_data; |
|
|
|
// console.log(this.dataList, 'dataList----'); |
|
|
|
setTimeout(()=>{ |
|
|
|
this.showBackboard = true; |
|
|
|
}, 1000) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 请求刮奖结果 |
|
|
|
doPrizeScratchTicketFun () { |
|
|
|
// this.isWin = true; |
|
|
|
// this.isThank = true; |
|
|
|
uni.showLoading({ |
|
|
|
title: '加载中' |
|
|
|
}) |
|
|
|
@ -200,8 +205,6 @@ export default { |
|
|
|
this.isThank = true; |
|
|
|
this.guaCanvas = null; |
|
|
|
} |
|
|
|
this.dataList = res.data.list; |
|
|
|
this.prizeList = res.data.prizes_data; |
|
|
|
|
|
|
|
}, fail=>{ |
|
|
|
// this.isScratching = false |
|
|
|
@ -210,7 +213,7 @@ export default { |
|
|
|
}, |
|
|
|
// 点击按钮开始刮奖 |
|
|
|
scratchStart () { |
|
|
|
this.beginLottery() |
|
|
|
this.beginLottery(); |
|
|
|
}, |
|
|
|
// 再刮一次 |
|
|
|
again(){ |
|
|
|
@ -220,6 +223,8 @@ export default { |
|
|
|
this.gai = true; |
|
|
|
this.isScratching = false; |
|
|
|
this.isShow = false; |
|
|
|
this.showBackboard = false; |
|
|
|
this.awards_amount = 0; |
|
|
|
|
|
|
|
API.request('/zone/beginInitInfo', {zone_goods_id: this.id}, res=>{ |
|
|
|
this.ticketInfo = res.data.data; |
|
|
|
@ -248,16 +253,41 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.prizePage{ |
|
|
|
width: 750rpx; |
|
|
|
// min-height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
// padding-top: calc((100vh - 88rpx - var(--status-bar-height) - (750rpx * 1700 / 1080)) / 2); |
|
|
|
// filter: blur(5px); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.prizeBg{ |
|
|
|
width: 750rpx; |
|
|
|
min-height: calc(100vh - 88rpx - var(--status-bar-height)); |
|
|
|
background-repeat: no-repeat; |
|
|
|
// background-size: 100% 100%; |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
filter: blur(5px); |
|
|
|
position: fixed; |
|
|
|
top: 88rpx; |
|
|
|
z-index: -1; |
|
|
|
} |
|
|
|
.prizeContent{ |
|
|
|
width: 750rpx; |
|
|
|
height: calc(750rpx * 1700 / 1080); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
margin-top: calc((100vh - 88rpx - var(--status-bar-height) - (750rpx * 1700 / 1080)) / 2); |
|
|
|
// 背景色和背景图相差的高度 |
|
|
|
|
|
|
|
// background-size: auto 100%; |
|
|
|
// background-color: #fff; |
|
|
|
// height: 590px; |
|
|
|
// background-position: center top; |
|
|
|
// position: fixed; |
|
|
|
// top: calc((100vh - 88rpx - var(--status-bar-height) - (750rpx * 1700 / 1080)) / 2 + 88rpx); |
|
|
|
// z-index: 4; |
|
|
|
} |
|
|
|
.bg{ |
|
|
|
position: fixed; |
|
|
|
@ -279,6 +309,10 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
&.hide{ |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.img_row{ |
|
|
|
display: flex; |
|
|
|
@ -287,6 +321,7 @@ export default { |
|
|
|
} |
|
|
|
&.zIndex1{ |
|
|
|
z-index: 1; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.data_item{ |
|
|
|
width: 22%; |
|
|
|
|
