修改转盘抽奖领取弹窗

This commit is contained in:
2024-12-06 15:17:46 +08:00
parent 98d3572526
commit c97811b50d
4 changed files with 179 additions and 31 deletions

View File

@@ -1,5 +1,5 @@
<template>
<view class="almost-lottery">
<view class="almost-lottery min-page">
<!-- head -->
<view class="almost-lottery__head">
<view class="btn-group u-flex u-row-between">
@@ -25,14 +25,16 @@
<!-- lottery -->
<view class="almost-lottery__wheel">
<view class="almost-lottery__count">
<text class="text">剩余免费抽奖 {{ freeNum }} </text>
</view>
<!-- <button @click="showLingPop">showLingPop</button> -->
<almost-lottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
:ring-count="2" :duration="1" :self-rotaty="false" :img-circled="true" :canvasCached="true"
:prize-list="prizeList" :prize-index="prizeIndex" :lotteryBg="lotteryBg" :actionBg="actionBg"
@reset-index="prizeIndex = -1" @draw-before="handleDrawBefore" @draw-start="handleDrawStart"
@draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" />
<view class="almost-lottery__count">
<text class="text">剩余免费抽奖 {{ freeNum }} </text>
</view>
</view>
<!-- rule -->
<view class="almost-lottery__rule">
@@ -74,11 +76,13 @@
</template> -->
</view>
</view>
<ling-qu ref="refLingqu" @success="getRedPack"></ling-qu>
</view>
</template>
<script>
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
import lingQu from '@/components/pop-ling-qu.vue'
import {
clearCacheFile,
clearStore
@@ -86,7 +90,7 @@
export default {
name: 'Home',
components: {
AlmostLottery
AlmostLottery,lingQu
},
data() {
return {
@@ -311,7 +315,6 @@
// 还有免费数次
if (this.freeNum > 0) {
this.freeNum--
flag = true
} else {
flag = false
@@ -328,7 +331,6 @@
console.log('触发抽奖按钮')
if (this.prizeing) return
this.prizeing = true
this.tryLotteryDraw()
},
// 尝试发起抽奖
@@ -418,9 +420,8 @@
async remoteGetPrizeIndex() {
this.result=''
console.warn('###当前处于模拟的请求接口,并返回了中奖信息###')
const res = await this.$Request.getT('app/discSpinning/draw', {
orderId: this.option.orderId||2145
})
const res = await this.$Request.getT('app/discSpinning/draw')
this.freeNum--
this.getCount()
console.log(res);
if (res.code != 0) {
@@ -461,6 +462,11 @@
tipContent = `恭喜您,获得 ${name}${this.result.type==2?(this.result.number+'元'):''} `
}
const _this=this;
console.log(this.result);
this.showLingPop({...this.result})
this.result=''
this.prizeing = false
return
uni.showModal({
content: tipContent,
showCancel: false,
@@ -523,6 +529,9 @@
if(res.code==0){
this.freeNum=res.count||0
}
},
showLingPop(data){
this.$refs.refLingqu.open(data)
}
},
onLoad(opt) {
@@ -598,25 +607,6 @@
background-image: url("~static/gift.png");
}
.gold {
width: 44rpx;
height: 44rpx;
margin-right: 10rpx;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("~static/images/lottery/gold.png");
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2) {
background-image: url("~static/images/lottery/gold@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3),
(min-device-pixel-ratio: 3) {
background-image: url("~static/images/lottery/gold@3x.png");
}
}
.num {
color: #F9FC31;
@@ -633,14 +623,16 @@
.almost-lottery__wheel {
text-align: center;
position: relative;
z-index: 3;
margin-top: -50rpx;
.almost-lottery__count {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40rpx 0;
padding: 20rpx 0 40rpx 0;
}
.text {