<template>
|
<view class="layout">
|
<!-- 剩余抽奖次数 -->
|
<view class="remaining-times">
|
<text class="times-label">剩余抽奖次数:</text>
|
<text class="times-count">{{ remainingTimes }}</text>
|
</view>
|
|
<!-- 转盘抽奖 -->
|
<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
|
|
<!-- 奖品展示 -->
|
<view class="prize-section">
|
<view class="section-title">奖品池</view>
|
<view class="prize-grid">
|
<view class="prize-item" v-for="(prize, index) in prizeList" :key="prize.id">
|
<image :src="prize.img" class="prize-img" />
|
<text class="prize-name">{{ prize.name }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 最近中奖信息 -->
|
<view class="winners-section">
|
<view class="section-title">最近中奖</view>
|
<scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop"
|
>
|
<view class="winner-item" v-for="(winner, index) in recentWinners" :key="index">
|
<text class="winner-name">{{ winner.nickname }}</text>
|
<text class="winner-prize">获得 {{ winner.prizeName }}</text>
|
<text class="winner-time">{{ winner.time }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 自定义中奖弹窗 -->
|
<view class="prize-modal" v-if="showPrizeModal" @tap="closePrizeModal">
|
<view class="prize-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closePrizeModal">×</view>
|
|
<view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
|
🎉 恭喜您 🎉
|
</view>
|
<view class="sorry-text" v-else>
|
😔 很遗憾 😔
|
</view>
|
|
<view class="prize-display">
|
<image :src="currentPrize.img" class="modal-prize-img" />
|
<text class="modal-prize-name">{{ currentPrize.name }}</text>
|
</view>
|
|
<view class="prize-result-text" v-if="currentPrize.id !== 'thanks'">
|
获得了 {{ currentPrize.name }}
|
</view>
|
<view class="prize-result-text" v-else>
|
{{ currentPrize.name }}，再接再厉！
|
</view>
|
|
<view class="modal-buttons">
|
<button class="confirm-btn" @tap="closePrizeModal">确定</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
<script>
|
import bgConfig from '@/pages/prize/PrizeDetail/prize-bgConfig.js'
|
import {
|
prizeInfo,
|
prizeNum,
|
prize,
|
grantRecord
|
} from '@/api/prize.js'
|
export default {
|
data() {
|
return {
|
bg: bgConfig.bg,
|
// 剩余抽奖次数
|
remainingTimes: 0,
|
// 弹窗控制
|
showPrizeModal: false,
|
currentPrize: {},
|
// 自动滚动控制
|
scrollTimer: null,
|
scrollTop: 0,
|
activityId: '',
|
// 最近中奖信息
|
originalWinners: [],
|
// 奖品列表，
|
prizeList: []
|
};
|
},
|
computed: {
|
recentWinners() {
|
// 将原始数据重复3次，确保无缝循环
|
return [...this.originalWinners]
|
}
|
},
|
async onLoad(option) {
|
this.activityId = option.id
|
const prize = await prizeInfo(this.activityId);
|
console.log(prize.data)
|
this.prizeList = prize.data.data.prizeInfoVOS.map(item => {
|
return {
|
id: item.id,
|
name: item.prizeName,
|
img: item.prizeImg
|
}
|
})
|
this.prizeList.push({
|
id: 'notWIn',
|
name: "谢谢参与"
|
})
|
await this.getUnmber(this.activityId)
|
await this.getGrantRecord(this.activityId)
|
},
|
onShareTimeline(e){
|
console.log('------------------>',e)
|
},
|
mounted() {
|
// this.startAutoScroll()
|
},
|
beforeDestroy() {
|
this.stopAutoScroll()
|
},
|
methods: {
|
async getUnmber(id) {
|
const prizeNums = await prizeNum(id);
|
this.remainingTimes = prizeNums.data.data
|
},
|
async getGrantRecord(id) {
|
const record = await grantRecord(id);
|
this.originalWinners = record.data.data || []
|
console.log('-------------->', record.data.data)
|
|
},
|
startAutoScroll() {
|
this.scrollTimer = setInterval(() => {
|
this.scrollTop += 1
|
// 每个item约80rpx高度，当滚动到第二组数据的中间位置时，重置到第一组对应位置
|
const itemHeight = 80
|
const originalLength = this.originalWinners.length
|
const oneSetHeight = originalLength * itemHeight
|
|
// 当滚动到第二组数据时，无缝重置到第一组对应位置
|
if (this.scrollTop >= oneSetHeight) {
|
this.scrollTop = 0
|
}
|
}, 50)
|
},
|
stopAutoScroll() {
|
if (this.scrollTimer) {
|
clearInterval(this.scrollTimer)
|
this.scrollTimer = null
|
}
|
},
|
onDone(index) {
|
const prize = this.prizeList[index]
|
this.currentPrize = prize
|
this.showPrizeModal = true
|
},
|
closePrizeModal() {
|
this.showPrizeModal = false
|
this.currentPrize = {}
|
},
|
async onClick() {
|
// 检查剩余次数
|
if (this.remainingTimes <= 0) {
|
uni.showToast({
|
title: '抽奖次数已用完',
|
icon: 'none'
|
})
|
return
|
}
|
const prizeDraw = await prize(this.activityId);
|
let winId = 'notWIn'
|
if (prizeDraw.data.code == 200) {
|
winId = prizeDraw.data.data.id
|
}
|
const findInfo = this.prizeList.findIndex(item => {
|
return item.id == winId
|
})
|
// 减少剩余次数
|
this.remainingTimes--
|
|
// 奖品的索引
|
this.$refs.dialer.run(findInfo)
|
await this.getGrantRecord(this.activityId)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.layout {
|
width: 100%;
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
background: #f5f5f5;
|
padding: 20rpx;
|
}
|
|
/* 剩余抽奖次数 */
|
.remaining-times {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 40rpx;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
padding: 20rpx 40rpx;
|
border-radius: 50rpx;
|
box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
|
}
|
|
.times-label {
|
color: white;
|
font-size: 28rpx;
|
font-weight: 500;
|
margin-right: 10rpx;
|
}
|
|
.times-count {
|
color: white;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
|
/* 奖品展示 */
|
.prize-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
text-align: center;
|
margin-bottom: 20rpx;
|
}
|
|
.prize-grid {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
.prize-item {
|
width: 22%;
|
margin-bottom: 20rpx;
|
text-align: center;
|
background: #f8f9ff;
|
border-radius: 15rpx;
|
padding: 15rpx;
|
box-sizing: border-box;
|
}
|
|
.prize-img {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 10rpx;
|
}
|
|
.prize-name {
|
display: block;
|
font-size: 22rpx;
|
color: #666;
|
margin-top: 8rpx;
|
white-space: normal;
|
word-break: break-all;
|
line-height: 1.2;
|
}
|
|
/* 最近中奖信息 */
|
.winners-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.winners-list {
|
max-height: 320rpx;
|
overflow-y: scroll;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
.winners-list::-webkit-scrollbar {
|
width: 4rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb {
|
background: #ff6b6b;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb:hover {
|
background: #e55555;
|
}
|
|
.winner-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
height: 80rpx;
|
min-height: 80rpx;
|
border-bottom: 1px solid #f0f0f0;
|
box-sizing: border-box;
|
}
|
|
.winner-item:last-child {
|
border-bottom: none;
|
}
|
|
.winner-name {
|
font-size: 26rpx;
|
color: #333;
|
font-weight: 500;
|
flex: 1;
|
}
|
|
.winner-prize {
|
font-size: 26rpx;
|
color: #ff6b6b;
|
font-weight: bold;
|
flex: 2;
|
text-align: center;
|
}
|
|
.winner-time {
|
font-size: 22rpx;
|
color: #999;
|
flex: 1;
|
text-align: right;
|
}
|
|
/* 中奖弹窗样式 */
|
.prize-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.prize-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 80%;
|
max-width: 500rpx;
|
padding: 40rpx;
|
text-align: center;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
}
|
|
.modal-close {
|
position: absolute;
|
top: 20rpx;
|
right: 30rpx;
|
font-size: 40rpx;
|
color: #999;
|
font-weight: bold;
|
width: 50rpx;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.congratulations-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #ff6b6b;
|
margin-bottom: 30rpx;
|
}
|
|
.sorry-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #666;
|
margin-bottom: 30rpx;
|
}
|
|
.prize-display {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin: 30rpx 0;
|
}
|
|
.modal-prize-img {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 15rpx;
|
margin-bottom: 20rpx;
|
border: 3rpx solid #ff6b6b;
|
}
|
|
.modal-prize-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.prize-result-text {
|
font-size: 28rpx;
|
color: #666;
|
margin: 20rpx 0 30rpx;
|
line-height: 1.4;
|
}
|
|
.modal-buttons {
|
margin-top: 30rpx;
|
}
|
|
.confirm-btn {
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
color: white;
|
font-size: 30rpx;
|
border: none;
|
border-radius: 50rpx;
|
padding: 20rpx 60rpx;
|
font-weight: bold;
|
}
|
|
.confirm-btn::after {
|
border: none;
|
}
|
</style>
|
