|
|
|
@ -1,15 +1,17 @@ |
|
|
|
<template> |
|
|
|
<view class="prizePage" :style="{'background-image':`url('${ticketInfo.bgImg}')`}"> |
|
|
|
<view class="prizePage" :style="{'background-image':`url('${ticketInfo.bg_image}')`}"> |
|
|
|
<view class="ticketInfoPrice">面值{{ticketInfo.price}}元</view> |
|
|
|
<view class="ticketInfoPrice2">面值{{ticketInfo.price}}元</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="img" :class="toDraw?'zIndex1':''"> |
|
|
|
<view v-for="(item,index) in dataList" :key="index" class="data_item"> |
|
|
|
<image :src="item.image" mode=""></image> |
|
|
|
<view class="">￥{{item.amount}}</view> |
|
|
|
<view :class="toDraw?'zIndex1':''" style="" class="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> |
|
|
|
<view class="">￥{{lineItem.amount}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 刮奖canvas容器 --> |
|
|
|
@ -66,19 +68,24 @@ export default { |
|
|
|
}, |
|
|
|
awards_amount: '20', |
|
|
|
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'}, |
|
|
|
{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'}, |
|
|
|
{image: '',amount:'100.00'}, |
|
|
|
{image: '',amount:'100.00'} |
|
|
|
], |
|
|
|
], |
|
|
|
// dataList: [], |
|
|
|
toDraw: false, // 是否开始刮奖 |
|
|
|
showResult: false, // 是否显示抽奖结果 |
|
|
|
isWin: false, // 是否中奖 |
|
|
|
@ -91,7 +98,8 @@ export default { |
|
|
|
isThank: false, |
|
|
|
// show: false, |
|
|
|
guaCanvas: null, |
|
|
|
isShow: false |
|
|
|
isShow: false, |
|
|
|
c_r_id: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
updated() { |
|
|
|
@ -137,13 +145,17 @@ export default { |
|
|
|
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(); |
|
|
|
// console.log(this.dataList, 'dataList----'); |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 请求刮奖结果 |
|
|
|
doPrizeScratchTicketFun () { |
|
|
|
// this.isWin = true; |
|
|
|
// this.isThank = true; |
|
|
|
API.endLottery({c_r_id: this.id}, res=>{ |
|
|
|
API.endLottery({c_r_id: this.c_r_id}, res=>{ |
|
|
|
this.awards_amount = res.data.awards_amount; |
|
|
|
this.isWin = true; |
|
|
|
}, fail=>{ |
|
|
|
@ -154,8 +166,7 @@ export default { |
|
|
|
}, |
|
|
|
// 点击按钮开始刮奖 |
|
|
|
scratchStart () { |
|
|
|
this.toDraw = true |
|
|
|
this.initCanvas() |
|
|
|
|
|
|
|
this.beginLottery() |
|
|
|
}, |
|
|
|
// 再刮一次 |
|
|
|
@ -204,6 +215,7 @@ export default { |
|
|
|
.scratch { |
|
|
|
position: relative; |
|
|
|
padding-top: 380px; |
|
|
|
// padding-top: 280px; |
|
|
|
width: 330px; |
|
|
|
height: 280px; |
|
|
|
margin: 0px auto; |
|
|
|
@ -223,9 +235,14 @@ export default { |
|
|
|
z-index: -1; |
|
|
|
background-color: #DCDEDD; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-content: space-around; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.img_row{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-content: space-around; |
|
|
|
} |
|
|
|
&.zIndex1{ |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
@ -238,7 +255,7 @@ export default { |
|
|
|
image{ |
|
|
|
width: 80rpx; |
|
|
|
height: 60rpx; |
|
|
|
background-color: #000; |
|
|
|
// background-color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
