vue3.0 抽奖 小功能

<template>
	<div id="toll">
		<div class="lottery-box">
			<div class="lottery">
				<div class="lottery-item">
					<div class="lottery-start">
						<div class="box gray" v-if="isStart===0">
							<p>活动未开始</p>
						</div>
						<div class="box" @click="startLottery" v-if="isStart===1">
							<p><b>点击</b></p>
							<p><b>抽奖</b></p>
						</div>
						<div class="box gray" v-if="isStart===2">
							<p>活动已过期</p>
						</div>
					</div>
					<ul>
						<li v-for="(item,i) in arra" :class="i==index?'on':''">
							<div class="box">
								<p><img src="../assets/奖品.png" v-show="item.status==1&&item.img==null"></p>
								<p><img src="../assets/谢谢参与.png" v-show="item.status==0&&item.img==null"></p>
								<p><img :src="item.img" v-show="item.img!=null"></p>
								<p>{
   {
   item.name}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 中奖弹窗 -->
			<div class="mask" v-if="showToast"></div>
			<div class="lottery-alert" v-if="showToast">
				<h1 v-if="arra[index].name!=='谢谢参与'">恭喜您</h1>
				<p>
					<img v-if="arra[index].name!=='谢谢参与'" src="../assets/奖品.png" alt="">
					<img v-if="arra[index].name==='谢谢参与'" src="../assets/谢谢参与.png" alt="">
				</p>
				<h2 v-if="arra[index].name!=='谢谢参与'">获得{
   {
   arra[index].name}}</h2>
				<h2 v-if="arra[index].name=='谢谢参与'">{
   {
   arra[index].name}}</h2>
				<div class="btnsave" @click="showToast=false">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
   
		ref,
		watch,
	} from 'vue'
	export default {