116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
<template>
|
|
<view class="lottery-page">
|
|
<view class="lottery-title">幸运九宫格抽奖</view>
|
|
|
|
<view class="remain-count"> 剩余抽奖次数: {{ remainCount }} </view>
|
|
|
|
<!-- 九宫格抽奖组件 -->
|
|
<LotteryGrid :prizes="prizes" :remain-count="remainCount" :is-disabled="isRotating" @start="handleStartLottery"
|
|
@complete="handleLotteryComplete" />
|
|
|
|
<!-- 中奖结果弹窗 -->
|
|
<ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import LotteryGrid from './components/LotteryGrid.vue'
|
|
import ResultModal from './components/ResultModal.vue'
|
|
import { getActivityList, raffleExecute } from '@/api/raffle.js';
|
|
|
|
export default {
|
|
components: {
|
|
LotteryGrid,
|
|
ResultModal
|
|
},
|
|
data() {
|
|
return {
|
|
// 奖品配置数据
|
|
prizes: [
|
|
{ name: '10元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/logo.png' },
|
|
{ name: '20积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/teacher.png' },
|
|
{ name: '50元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/student.png' },
|
|
{ name: '谢谢参与', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/recommend.png' },
|
|
{ name: '', img: '' }, // 中间按钮位置，不使用
|
|
{ name: '100积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/uncollection.png' },
|
|
{ name: '2元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-mn.png' },
|
|
{ name: '50积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' },
|
|
{ name: '8元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' }
|
|
],
|
|
// 状态管理
|
|
remainCount: 3, // 剩余抽奖次数
|
|
isRotating: false, // 是否正在抽奖
|
|
showResult: false, // 是否显示结果弹窗
|
|
currentPrize: {} // 当前中奖奖品
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getActivityList();
|
|
},
|
|
methods: {
|
|
//
|
|
/**
|
|
* 查询活动详情
|
|
*/
|
|
async getActivityList() {
|
|
const { bizcode, data } = await getActivityList();
|
|
if (bizcode === 100) {
|
|
this.prizes = data.prizes || [];
|
|
this.prizes.split(4, 1, { iconUrl:'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png',})
|
|
}
|
|
},
|
|
/**
|
|
* 处理开始抽奖事件
|
|
*/
|
|
handleStartLottery() {
|
|
if (this.remainCount <= 0) {
|
|
uni.showToast({ title: '没有抽奖次数了', icon: 'none' })
|
|
return false
|
|
}
|
|
|
|
// 减少抽奖次数并标记为正在抽奖
|
|
this.remainCount--
|
|
this.isRotating = true
|
|
this.showResult = false
|
|
|
|
return true
|
|
},
|
|
/**
|
|
* 处理抽奖完成事件
|
|
* @param {Object} prize - 中奖奖品
|
|
*/
|
|
handleLotteryComplete(prize) {
|
|
this.isRotating = false
|
|
this.currentPrize = prize
|
|
this.showResult = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.lottery-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.lottery-title {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #e63946;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.remain-count {
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
margin-bottom: 30rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
}
|
|
</style> |