frontend_h5/treegitee/pages/scap/Turn/index.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>