HBuilderX 小白上手指南

<template>
	<view>
		<almost-lottery :prizeList="prizeList" :prizeIndex="prizeIndex" @reset-index="prizeIndex = -1"
			@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"
			v-if="prizeList.length" />
	</view>
</template>

<script>
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	export default {
		components: {
			AlmostLottery
		},
		data() {
			return {
				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [{
						prizeId: 1,
						prizeName: "西瓜",
						prizeStock: 10,
						prizeWeight: 10,
					},
					{
						prizeId: 2,
						prizeName: "苹果",
						prizeStock: 10,
						prizeWeight: 10,
					},
					{
						prizeId: 3,
						prizeName: "龙眼",
						prizeStock: 10,
						prizeWeight: 10,
					},
					{
						prizeId: 4,
						prizeName: "葡萄",
						prizeStock: 10,
						prizeWeight: 10,
					},
					{
						prizeId: 5,
						prizeName: "火龙果",
						prizeStock: 10,
						prizeWeight: 10,
					},
					{
						prizeId: 6,
						prizeName: "番茄",
						prizeStock: 10,
						prizeWeight: 10,
					}
				],
				// 中奖下标
				prizeIndex: -1
			}
		},
		methods: {
			// 本次抽奖开始
			handleDrawStart() {
				// 这里需要处理你的中奖逻辑，并得出 prizeIndex
				// 请查看示例项目中的代码
				this.prizeIndex=2;
			},
			// 本次抽奖结束
			handleDrawEnd() {
				// 完成抽奖后，这里处理你拿到结果后的逻辑
				// 请查看示例项目中的代码
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				// 抽奖转盘准备就绪后，这里处理你的逻辑
				// 请查看示例项目中的代码
				// console.log('抽奖转盘绘制完成', res)
			}
		}
	}
</script>