vue实现跑马灯抽奖

近期使用vue开发了一个抽奖活动页面，以下代码块为该功能的所有代码，里面有详细的代码注释，有需要的伙伴可根据自己的业务需求做相应调整，效果图放置最底部， 废话不多数直接上代码→

HTML部分
<template>
    <div class="luck-rotary" :style="{marginTop:`${statusBarHeight}px`}">
        <div class="title-bar flex" :style="{paddingTop:`${statusBarHeight}px`}">
            <div class="icon-back" @click="goBack()">
                <img src="../../assets/back-icon.png" alt="" />
            </div>
            <p class="nav-tit">土豪大作战</p>
        </div>
        <header class="header">
            <span class="router-btn active-rule" @click="activityRule()"></span>
            <span class="router-btn prize-rule" @click="prizeRecord()"></span>
        </header>
        <div class="main" :style="{
    'height':screenH/100+'rem'}">
            <div class="draw-box">
                <van-notice-bar left-icon="volume-o" color="#ffffff" :scrollable="false">
                    <van-swipe
                            vertical
                            class="notice-swipe"
                            :autoplay="3000"
                            :show-indicators="false"
                    >
                        <van-swipe-item v-for="item in noticeList">
                            <span class="coin-color">{
  {formatName(item.userNickName)}}</span>获得{
  {item.lotteryName}}
                            <span class="coin-color">{
  {item.lotteryType == 1?'价值':'获得'}}{
  {item.lotteryDesc}}</span>
                        </van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
                <img :src='lampUrl' alt="" id="lampIcon">
                <div class="prize-list">
                    <div class="line_item" id="tuHao" @click="goBuyTicket()">
                        <span>{
  {ticketsSum}}张</span>
                    </div>
                    <template v-for="(item,index) in prizesList">
                        <div class="line_item position"
                             :class="[{ active: index == current }]" :id="'item'+(index+1)">
                            <div class="gift-icon">
                                <img :src="item.lotteryIcon" alt="">
                                <img :src="item.daysIcon" class="noble-icon" alt="" v-if="item.daysIcon">
                                <span class="coin-num" v-if="item.id !== 123">{
  {item.valueDescribe}}</span>
                                <span class="prize-name" :class="item.id == 123 ? 'noble-color':''">{
  {item.name}}</span>
                                <div :class="bgSwitch ? 'bg-color':''"></div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="draw-btn flex">
                    <span class="roll1 roll-bg" @click="luckDraw(1)"></span>
                    <span class="roll10 roll-bg" @click="luckDraw(10)"></span>
                </div>
                <div class="exchange-times"><em class="star-flag">*</em>已兑换{
  {lotteryPrizeTimes}}次,累计兑换168次必中<span class="noble-prize">贵族大奖</span></div>
            </div>
            <div class="lucky-list">
                <ul class="title-list flex">
                    <li class="title-item"><b>排名</b></li>
                    <li class="title-item"><b>用户</b></li>
                    <li class="title-item"><b>奖励</b></li>
                </ul>
                <div class="list-box">
                    <ul class="user-list">
                        <li class="list-item flex" v-for="(item,index) in luckyList" :key="index">
                            <span class="rank-num">{
  {rankIndex(index)}}</span>
                            <div class="user-info flex">
                                <img :src="item.userIcon" alt="">
                                <span class="nick-name">{
  {item.userNickName}}</span>
                            </div>
                            <div class="prizes-info flex">
                                <div class="gift-box">
                                    <img :src="item.prizeIcon" alt="">
                                </div>
                                <span class="gift-name">{
  {item.lotteryName}}</span>
                            </div>
                        </li>
                        <footer class="footer">
                            <p class="txt">没有更多了哦~