vue-九宫格抽奖

九宫格抽奖

<template>
  <div class="turn-table-box">
    <div
      class="top"
      :style="'background-image: url(' + config.nineCellsTopBg + ')'"
    >
      剩余抽奖次数{{ remainingCount }}
    </div>
    <div
      class="nine-cell-box"
      :style="'background-image: url(' + config.nineCellsBg + ')'"
      v-if="config.prizes && config.prizes.length"
    >
      <div
        v-for="(item, index) in config.prizes"
        :key="index"
        :class="['cell', 'cell' + (index + 1)]"
      >
        <img class="prize-image" :src="item.image" />
        <div :class="currentIndex == index + 1 ? 'mask mask-move' : ''"></div>
      </div>
      <div class="draw-btn">
        <img
          v-if="remainingCount > 0"
          class="img"
          :src="config.drawBtn"
          @click="startDraw"
        />
        <img v-else class="img" :src="config.viewElseBtn" @click="goMore" />
      </div>
    </div>
    <!-- <div class="test">123</div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      marqueeLeft: 0, // 大奖跑马灯的位置
      isStart: false, // 是否开始抽奖动画
      currentIndex: 1, // 灯停留的索引
      positionIndex: 1, // 接口返回的指定的中奖位置
      prizeInfo: {}, // 中奖的奖品信息
      count: 0, // 当前第几圈
      totalCount: 2, // 跑马灯总共跑几圈
      speed: 80, // 速度初始值
      lightTimer: null, // 跑马灯
      remainingCount: 3, //剩余抽奖次数
      config: {
        nineCellsBg:
          "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644913672597-nine-bg.webp",
        nineCellsTopBg:
          "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644913701084-nine-topbg.png",
        drawBtn:
          "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644913579473-btn1.png",
        viewElseBtn:
          "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644913603451-btn2.png",
        prizes: [
          {
            type: "0",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "1",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "2",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "3",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "4",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "5",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "6",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
          {
            type: "7",
            image:
              "https://xiaojinhe-cdn.iyoudui.cn/haixing/test/other/1644914292243-p1.png",
          },
        ],
      },
    };
  },
  mounted() {
    console.log("mounted");
  },
  methods: {
    // 开始抽奖 跑马灯
    async startDraw() {
      if (this.lightTimer) {
        console.log(111);
        return;
      }
      // const res=await this.startDrawApi()
      let res = {
        code: 200,
        position: 1,
      };
      console.log("抽奖返回数据", res);
      if (res.code == 200) {
        this.positionIndex = res.position;
        this.prizeInfo = res;

        // 跑马灯相关参数初始化
        this.currentIndex = 1;
        this.count = 0;
        this.totalCount = 3;
        this.speed = 80;

        // 执行跑马灯动画
        this.roll();
      } else {
        // code 为其他情况 "请稍后再试";
      }
    },
    roll() {
      this.isStart = true;
      this.currentIndex++; // 灯停留的索引
      this.speed -= 2; // 速度
      if (this.speed <= 10) {
        this.speed = 10;
      }
      // 计算转圈次数
      if (this.currentIndex >= 9) {
        this.currentIndex = 1;
        this.count++; // 当前第几圈
      }
      // 满足转圈数和指定位置就停止
      if (
        // positionIndex接口返回的指定的中奖位置
        this.count >= this.totalCount &&
        this.currentIndex == this.positionIndex
      ) {
        clearTimeout(this.lightTimer);
        this.lightTimer = null;
        setTimeout(() => {
          this.isStart = false;
          this.currentIndex = 0;
          console.log(" 抽奖完毕,展示奖品", this.prizeInfo);
        }, 500);
      } else {
        this.lightTimer = setTimeout(this.roll, this.speed); // 不满足条件时调用定时器
        // 最后一圈减速
        if (this.count >= this.totalCount - 1 || this.speed <= 10) {
          this.speed += 50;
        }
      }
    },
    goMore() {
      console.log("goMore");
    },
  },
  beforeDestroy() {
    clearInterval(this.lightTimer);
    this.lightTimer = null;
  },
};
</script>

<style lang="less" scoped>
html {
  font-size: 100px;
}
.test {
  width: 100px;
  height: 1rem;
  background-color: pink;
}
.turn-table-box {
  width: 6.42rem;
  height: 6.95rem;
  margin: 0 auto;
  background-size: 5.6rem 6.48rem;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
  .top {
    width: 100%;
    height: 0.67rem;
    background: no-repeat center;
    background-size: 4.86rem 0.67rem;
    text-align: center;
    font-size: 0.28rem;
    color: #e5814e;
    padding-top: 0.26rem;
    box-sizing: border-box;
    font-weight: bold;
  }
  .bubble {
    width: 1.59rem;
    height: 0.52rem;
    background-size: 100%;
    position: absolute;
    top: -0.13rem;
    right: 0.3rem;
  }
  .draw-btn {
    .img {
      position: absolute;
      width: 1.89rem;
      height: 1.79rem;
      left: 2.27rem;
      top: 2.17rem;
    }
  }
  .nine-cell-box {
    width: 6.42rem;
    height: 6.1rem;
    background-size: 100%;
    position: relative;
    .cell {
      width: 1.89rem;
      height: 1.79rem;
      background-size: 100% 100%;
      position: absolute;
      .prize-image {
        width: 1.89rem;
        height: 1.79rem;
      }
      .mask {
        width: 1.89rem;
        height: 1.79rem;
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0.2rem;
      }
    }
    .cell1 {
      opacity: 1;
    }
    .cell1,
    .cell2,
    .cell3 {
      top: 0.25rem;
    }
    .cell8,
    .cell4 {
      top: 2.17rem;
    }
    .cell7,
    .cell5,
    .cell6 {
      top: 4.1rem;
    }
    .cell1,
    .cell7,
    .cell8 {
      left: 0.26rem;
    }
    .cell2,
    .cell6 {
      left: 2.27rem;
    }
    .cell3,
    .cell4,
    .cell5 {
      left: 4.27rem;
    }
  }
  .turn-table {
    width: 4.74rem;
    height: 4.74rem;
    display: block;
    position: absolute;
    top: 0.43rem;
    left: 0.43rem;
  }
  .point {
    height: 1.04rem;
    position: absolute;
    img {
      width: 0.8rem;
      height: 1.04rem;
    }
    top: 2.28rem;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
  }
}
</style>