<template>
<view class="draw-container">
<view class="btn fz-32 flex-x flex-space">
<view class="left">ynn抽中了kindle</view>
<view class="">1人参与</view>
</view>
<view class="draw-table-box">
<!-- 转盘背景图 -->
<img :src="tableBg" class="draw-table-bg" :animation="animationData" />
<!-- 点击触发抽奖的按钮 -->
<img @click="tableroll" :src="go" :class="{'draw-table-go': true, 'draw-table-go-grey': !times}" />
</view>
<!-- 显示剩余抽奖次数 -->
<view class="num fz-24 mt-40">今日剩余 {{ times }} 次抽奖机会</view>
<view class="illustrate fz-24">
活动说明
</view>
<view class="illustrate1 fz-24">
我的奖品
</view>
<view class="forward">
<cms-image src="https://qnpu.xlt-cd.com/turntable/forward.png" size="110"></cms-image>
</view>
<view class="footer fz-32">距离结束还剩251时03分59秒</view>
</view>
</template>
<script>
export default {
data() {
return {
// 转盘背景图的链接
tableBg: 'https://qnpu.xlt-cd.com/turntable/turntable_content.png',
// 抽奖按钮的链接
go: 'https://qnpu.xlt-cd.com/turntable/pointer.png',
// 动画数据
animationData: {},
// 单个奖项的角度
singleDeg: 45,
// 自测中奖初始值
i: 1,
// 初始旋转角度
initDeg: 360,
// 奖项列表
awards: [{
id: 1,
degree: '1等奖',
name: '20元优惠卷',
//自定义中奖概率
probability: 0.10
},
{
id: 2,
degree: '2等奖',
name: '10元优惠卷',
probability: 0.10
},
{
id: 3,
degree: '3等奖',
name: '10元优惠卷',
probability: 0.10
},
{
id: 4,
degree: '4等奖',
name: '书',
probability: 0.10
},
{
id: 5,
degree: '5等奖',
name: '笔记本',
probability: 0.10
},
{
id: 6,
degree: '6等奖',
name: '10元红包',
probability: 0.10
},
{
id: 7,
degree: '7等奖',
name: '耳机',
probability: 0.30
},
{
id: 8,
degree: '8等奖',
name: 'kindle',
probability: 0.10
},
],
// 剩余抽奖次数
times: 10,
// 转盘转动时防止用户再次点击抽奖
isClick: false,
};
},
onShow() {
// 创建一个动画实例
this.animation = uni.createAnimation({
duration: 2000, // 动画时长为2秒
timingFunction: 'ease', // 缓动函数为ease
});
},
methods: {
// 点击开始抽奖
tableroll() {
if (this.isClick) return; // 防止重复点击
if (this.times < 1) return; // 抽奖次数为0时不可抽奖
this.isClick = true;
let randomNum = Math.random();
let deviation = randomNum > 0.5 ? randomNum - 0.1 : randomNum + 0.1;
// 模拟接口返回的中奖信息
this.mockDrawInfo().then((result) => {
// 根据中奖信息查找奖项
let res1 = this.awards.filter((item) => {
return item.degree === result.degree;
});
this.i++;
if (this.i === 7) {
this.i = 1;
}
// 计算旋转角度
let rotateDeg = 45 * (res1[0].id - deviation) + 360;
// 随机增加额外的旋转角度(4-7圈)
let surplusDeg = (Math.floor(Math.random() * 4) + 4) * 360;
// 设置旋转动画
this.animation.rotate(this.initDeg + rotateDeg + surplusDeg).step();
this.initDeg += surplusDeg;
// 导出动画数据
this.animationData = this.animation.export();
setTimeout(() => {
this.isClick = false; // 抽奖结束后允许再次点击
this.times--; // 抽奖次数减1
console.log("奖项名称:" + res1[0].name);
console.log("奖项等级:" + res1[0].degree);
}, 2000); // 等待2秒后执行
});
},
// 模拟接口返回中奖信息
mockDrawInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let totalProbability = 0;
for (let award of this.awards) {
totalProbability += award.probability;
}
let randomNum = Math.random() * totalProbability;
let cumulativeProbability = 0;
let resultDegree = null;
for (let award of this.awards) {
cumulativeProbability += award.probability;
if (randomNum <= cumulativeProbability) {
resultDegree = award.degree;
break;
}
}
resolve({
degree: resultDegree,
});
}, 1000);
});
},
},
};
</script>
<style lang="scss">
page {
min-height: 100vh;
background: url(https://qnpu.xlt-cd.com/turntable/lottery_draw_big_banner.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.draw-container {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
padding-top: 300rpx;
}
.draw-table-box {
width: 580rpx;
height: 580rpx; // 根据需要进行调整
margin-top: 38rpx; // 根据需要进行调整
position: relative;
}
.draw-table-bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.draw-table-go {
width: 148rpx;
height: 192rpx;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.draw-table-go-grey {
filter: grayscale(100%);
filter: gray;
}
.btn {
width: 566rpx;
padding: 30rpx 46rpx 30rpx 46rpx;
background: linear-gradient(180deg, #FFFFD1 1%, #FFF1D4 51%, #FFDB95 100%);
box-shadow: 6rpx 6rpx 0rpx 0rpx #D20000;
border-radius: 50rpx;
font-weight: 400;
color: #EC0000;
}
.left {
padding-right: 60rpx;
border-right: 2rpx solid #EC0000;
}
.num {
padding: 24rpx 50rpx 24rpx 50rpx;
border-radius: 44rpx;
color: #FFFFFF;
background-color: rgba(255, 207, 10, 0.3);
}
.illustrate {
padding: 20rpx 36rpx 20rpx 36rpx;
background: linear-gradient(180deg, #EC0000 0%, #FF4035 49%, #EC0000 100%);
box-shadow: 4rpx 4rpx 8rpx 0rpx #B00000;
border-radius: 44rpx 0rpx 0rpx 44rpx;
border: 4rpx solid #FFD400;
color: #FFFFFF;
position: absolute;
right: 0rpx;
bottom: 420rpx;
}
.illustrate1 {
padding: 20rpx 36rpx 20rpx 36rpx;
background: linear-gradient(180deg, #EC0000 0%, #FF4035 49%, #EC0000 100%);
box-shadow: 4rpx 4rpx 8rpx 0rpx #B00000;
border-radius: 44rpx 0rpx 0rpx 44rpx;
border: 4rpx solid #FFD400;
color: #FFFFFF;
position: absolute;
right: 0rpx;
bottom: 318rpx;
}
.forward {
position: absolute;
right: 24rpx;
bottom: 180rpx;
}
.footer {
position: absolute;
bottom: 30rpx;
color: #FFFFFF;
text-align: center;
}
</style>