vue组件 九宫格抽奖

无图无真相！！！

lz_lucky_draw.gif

环境 vue 2.x
scss

组件 LzLuckyDraw.vue

<template>
  <div class="wrapper">
    <div
      class="prize-box"
      v-for="(prize, index) in prizes"
      :key="index"
      v-bind:class="{ active: luckyIndex == index }"
      @click="index == 4 && move2Prize()"
    >
      <img class="prize-img" :src="prize.image" />
      <span class="prize-name">{{ prize.detail }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "lz-lucky-draw",
  props: {
    prizes: null,
    moveIndex: {
      //用来控制下一个奖项的索引
      type: Array,
      default: () => [0, 1, 2, 5, 8, 7, 6, 3],
    },
  },
  data() {
    return {
      timer: null,
      moving: false,
      luckyIndex: 4,
      timerSpeed: 100,
      selectedIndex: 0,
    };
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
      this.moving = false;
    },
    getRandom(min, max) {
      //根据最小值和最大值产生一个随机数
      return Math.floor(Math.random() * (max - min) + min);
    },
    move2Prize() {
      if (this.moving == false) {
        this.moving = true;
        var that = this;
        var count = 0;
        var total = this.getRandom(48, 56);
        this.timer = setInterval(function () {
          count++;
          if (count >= total) {
            that.clearTimer();
          }
          console.log("移动次数: " + count);

          if (that.selectedIndex >= that.moveIndex.length) {
            that.selectedIndex = 0;
          }
          that.luckyIndex = that.moveIndex[that.selectedIndex];
          console.log("抽中的东西: " + that.prizes[that.luckyIndex].detail);

          that.selectedIndex++;

        }, this.timerSpeed);
      } else {
        alert("正在抽奖中哦。。");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  color: darkgreen;
  background-color: dodgerblue;
  width: 18rem;
  height: 18rem;
  margin: auto;
  display: grid;
  font-size: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 3%;
  grid-auto-flow: row;
  padding: 20px;
  border-radius: 12px;
  .prize-box {
    background-color: #f2f2f2;
    margin: 0.1rem;
    text-align: center;
    display: inherit;
    border-radius: 12px;
    .prize-img {
      width: 60%;
      height: auto;
      margin: 0.5rem auto auto auto;
    }
  }

  .active {
    background-color: yellow;
    color: red;
    font-weight: 900;
    font-size: 0.8rem;
  }
}
</style>

使用

默认为顺时针顺序抽奖，传入逆时针顺序抽奖。

<template>
  <div>
    <lz-lucky-draw :prizes="prizes" :moveIndex="moveIndex" />
  </div>
</template>

<script>
import LzLuckyDraw from "../components/LzLuckyDraw.vue";
export default {
  components: {
    LzLuckyDraw,
  },
  name: "Setting",
  data() {
    return {
      prizes: [
        {
          id: 1,
          detail: "海尔冰箱",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 2,
          detail: "帅哥一枚",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 3,
          detail: "格力空调",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 4,
          detail: "iPhone 12",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 5,
          detail: "立即抽奖",
          image: require("../assets/anniu.png"),
        },
        {
          id: 6,
          detail: "华为M20",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 7,
          detail: "神舟笔记本",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 8,
          detail: "飞科剃须刀",
          image: require("../assets/my_vip.png"),
        },
        {
          id: 9,
          detail: "美女一枚",
          image: require("../assets/my_vip.png"),
        },
      ],
      moveIndex:[0, 3, 6, 7, 8, 5, 2, 1], //逆时针顺序
    };
  },
};
</script>

<style>
</style>

当然你也可以调整为随机的

需求增加：要求移动速度逐渐变慢？请自行实现！