132 lines
3.7 KiB
Vue
132 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<view class="lottery">
|
|
<block v-for="(item, index) in prizeList" :key="index">
|
|
<image class="prize" :class="currentIndex==index?'active':''"
|
|
src="https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" />
|
|
<view v-if="index==3" class="goLottery center_row" :style="btnDisabled?'opacity:0.5;':''"
|
|
@tap="goLottery">
|
|
<view>立即抽奖</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 示例代码
|
|
prizeList: [{
|
|
id: 1,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品1",
|
|
chance: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品2",
|
|
chance: 3
|
|
}, {
|
|
id: 3,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品3",
|
|
chance: 1
|
|
},
|
|
{
|
|
id: 4,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品4",
|
|
chance: 1
|
|
},
|
|
{
|
|
id: 5,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品5",
|
|
chance: 1
|
|
},
|
|
{
|
|
id: 6,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品6",
|
|
chance: 1
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品7",
|
|
chance: 2
|
|
},
|
|
{
|
|
id: 8,
|
|
image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
|
|
name: "奖品8",
|
|
chance: 1
|
|
}
|
|
],
|
|
currentIndex: 0,
|
|
runIndexList: [0, 1, 2, 4, 7, 6, 5, 3],
|
|
lastRunStepList: [0, 1, 2, 7, 3, 6, 5, 4],
|
|
btnDisabled: false,
|
|
}
|
|
},
|
|
onload() {},
|
|
metheds: {
|
|
submit() {
|
|
let timer = setInterval(() => {
|
|
count--
|
|
currentIndex++
|
|
this.currentIndex = (this.runIndexList[currentIndex % 8])
|
|
if (count < this.prizeList.length * 2) {
|
|
clearInterval(timer)
|
|
let timer2 = setInterval(() => {
|
|
count--
|
|
currentIndex++
|
|
this.currentIndex = (this.runIndexList[currentIndex % 8])
|
|
if (count < this.prizeList.length * 1 - 3) {
|
|
clearInterval(timer2)
|
|
let timer3 = setInterval(() => {
|
|
count--
|
|
currentIndex++
|
|
this.currentIndex = (this.runIndexList[currentIndex % 8])
|
|
if (count <= 0) {
|
|
clearInterval(timer3)
|
|
this.btnDisabled = false
|
|
uni.showToast({
|
|
title: `恭喜您，抽中了${this.prizeList[this.currentIndex].name}`,
|
|
icon: "none"
|
|
})
|
|
}
|
|
}, 400)
|
|
}
|
|
}, 200)
|
|
}
|
|
}, 100)
|
|
},
|
|
overg() {
|
|
// 返回抽奖结果奖品的index
|
|
getResultIndex() {
|
|
let totalChance = 0
|
|
for (let i in this.prizeList) {
|
|
totalChance += Number(this.prizeList[i].chance ? this.prizeList[i].chance : 1)
|
|
}
|
|
// 0 ~ 1
|
|
let random = Math.random()
|
|
let index = 0
|
|
let num = 0
|
|
for (let i in this.prizeList) {
|
|
num += (Number(this.prizeList[i].chance) / totalChance)
|
|
if (random < num) {
|
|
index = Number(i)
|
|
break
|
|
}
|
|
}
|
|
return index
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|