vue.js实现简单的转动抽奖

其他h5活动实现:

抽奖转盘: vue.js实现抽奖转盘
收取能量: vue.js实现收能量
红包雨: vue.js实现红包雨

1.template

 <div class="prize-details">
    <div
      v-for="(item, index) in rewardList"
      :key="index"
      :class="['prize-item', { 'checked-prize-item' : currentIndex === index + 1},
      `prize-item-position-${index + 1}`]"
    >
      <img
        class="prize-img"
        :src="item.img"
      >
      <div class="prize-content">
        <div class="text-top">
          {{ item.title }}
        </div>
        <div class="text-bottom">
          {{ item.desc }}
        </div>
      </div>
    </div>
</div>
<div class="draw-btn">
    <div
      class="btn-img"
      @click="start"
    >
      点击抽奖
    </div>
    <div class="draw-times">
      当前抽奖次数: &nbsp;{{ xxxx.lotteryCount}} (每天0点清空)
    </div>
    <img
      class="draw-img"
      src="@/assets/image/exchangeActivity/drawTaskTitle.png"
    >
</div>

export const rewardList = [
  {
    title: 'title1',
    desc: 'desc1',
    img: require('@/assets/image/exchangeActivity/vip.png'),
  },
  {
    title: 'title2',
    desc: 'desc2',
    img: require('@/assets/image/exchangeActivity/vip.png'),
  },
  {
    title: 'title3',
    desc: 'desc3',
    img: require('@/assets/image/exchangeActivity/tencent.png'),
  },
  {
    title: 'title4',
    desc: 'desc4',
    img: require('@/assets/image/exchangeActivity/aqy.png'),
  },
  {
    title: 'title5',
    desc: 'desc5',
    img: require('@/assets/image/exchangeActivity/jd.png'),
  },
  {
    title: 'title6',
    desc: 'desc6',
    img: require('@/assets/image/exchangeActivity/superJd.png'),
  },
]

 data() {
    return {
        rewardList,
        circle: 2, // 转多少圈
        initCircle: 0, // 记录所转的圈数,进行加速
        timer: null,
        currentIndex: '',
        lotteryObj: {},
        targetIndex: '', // 目标index
    }
 }

.prize-details {
    margin-top: 256px;
    padding: 0px 75px;
    display: flex;
    width: 600px;
    position: relative;
    .prize-item {
      position: relative;
      @include backgroundImage(180px, 150px, $imgBaseUrl + "/notCheck.png")
      margin-bottom: 30px;
    }
    .checked-prize-item {
      @include backgroundImage(180px, 150px, $imgBaseUrl + "/checkedBg.png")
    }
    .prize-item-position-1 {
      position: absolute;
      left: 75px;
      top: 0px;
    }
    .prize-item-position-2 {
      position: absolute;
      left: 285px;
      top: 0px;
    }
    .prize-item-position-3 {
      position: absolute;
      left: 495px;
      top: 0px;
    }
    .prize-item-position-4 {
      position: absolute;
      left: 495px;
      top: 180px;
    }
    .prize-item-position-5 {
      position: absolute;
      left: 285px;
      top: 180px;
    }
    .prize-item-position-6 {
      position: absolute;
      left: 75px;
      top: 180px;
    }
    .prize-content {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      font-size: 20px;
      font-weight: 400;
      color: #6a2700;
      display: flex;
      flex-direction: column;
      align-items: center;
      .text-top {
        margin-top: 82px;
        font-size: 20px;
      }
    }
    .prize-img {
      width: 180px;
      height: 150px;
    }
  }

2.转动js代码

  async start() {
      if (!this.checkToken()) { // 登录校验
        return
      }
      if (this.isRun) { // 正在抽奖
        this.$toast('正在抽奖中请不要重复点击')
        return
      }
      if (+this.xxxx.lotteryCount === 0) { // 判断是不是有抽奖次数,从initData()里面接口拿的初始次数
        this.$toast('暂无抽奖次数哦~快去做任务吧！')
        return
      }
      const data = await xxxxAPi(this.token)
      this.lotteryObj = data
      this.running()
   },
    running() {
      this.initCircle ++
      clearInterval(this.timer)
      this.currentIndex = 1
      this.isRun = true
      this.timer = setInterval(() => {
        // 当完成所转的圈数并且找到了对应了后端返回的数据时候,可以进行中奖提示
        this.targetIndex = this.lotteryObj.某个后端返回的index 
        if (this.currentIndex === this.targetIndex && this.initCircle === this.circle + 1) {
          clearInterval(this.timer)
          this.showDialog('rewardVisible')
          this.isRun = false
          this.initCircle = 0 // 一定要重置,不然再次点击会加速
          return
        }
        this.currentIndex += 1
        // 如果到达7,重新转动
        if (this.currentIndex >= 7 ) {
          this.running()
        }
      }, 100 + this.initCircle * 100) // 加速,这个100的数据看你喜好
    },
    close(type) {
      this[type] = false
      if (type === 'rewardVisible') {
        this.initData() // 刷新次数更改接口
        this.currentIndex = ''
      }
    },

要注意的点:

1.页面是写死的,那么每个转动的item,应该与后端返回的index保持一致，后端从0-5,你就从0-5,如果别人从1开始,你的running()里面的this.currentIndex 的默认值从1开始
2.每个item的布局，最好就是用定位,定位比较好处理~

3.效果