vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）

No.1 九宫格

1.1 九宫格抽奖使用的是组件lattice-lotteryhttps://h5-group.github.io/lattice-lottery/

# vue2
# 安装 sh
npm install lattice-lottery --save

# 注册 
import Vue from 'vue'
import LatticeLottery from 'lattice-lottery'
import 'lattice-lottery/lib/lattice-lottery.css'

Vue.use(LatticeLottery)


# vue3
# 安装 sh
npm install lattice-lottery-plus --save

# 注册 
import { createApp } from 'vue'
import App from './App.vue'

import LatticeLottery from 'lattice-lottery-plus'
import 'lattice-lottery-plus/lib/lattice-lottery.css'

const app = createApp(App);

app.use(LatticeLottery)

1.2 使用 

// html 代码
      <lottery-grid
        ref="lottery1"
        :list="list1"
        @onend="onend"
        @onsubmit="request('lottery1')"
      />


// data()
// 注意：list不满8个会自动补全8个，内容：谢谢参与，超过8个会截取前8个
      list1: [
        {
          label: "生活一角",
          image: require("@/assets/image/a.jpeg"),
        },
      ],


// methods
// 九宫格抽奖
    rndNum(min, max) {
      if (min > max) min = [max, (max = min)][0];
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    request(name) {
      // 模拟抽奖请求
      setTimeout(() => {
        const luckyIndex = this.rndNum(0, 7);  
        console.log(luckyIndex);
        this.$refs[name].go(luckyIndex);
      }, 100);
    },
    // 抽奖动画结束
    onend(data) {
      console.log("抽奖结果回调：", data);
      alert("恭喜您获得：" + data.label);
    },

 

No.2 翻牌效果

代码实现

// html
    <div class="overall">
      <div>
        <div class="box">
          <div
            v-for="(i, index) in list"
            :key="index"
            class="card-box"
            @click="open(i, index)"
          >
            <div class="card" :class="{ active: i.activeIndex == index }">
              <!-- 正面 -->
              <div class="z">
                <img src="@/assets/image/a.jpeg" alt />
                <h3>点我翻牌</h3>
              </div>
              <!-- 反面 内容面 -->
              <div class="f">
                <span>{{ i.winner }}</span>
              </div>
            </div>
          </div>
        </div>
        <p style="margin-top: 40px">
          剩余翻牌
          <b>{{ openNumber }}</b> 次数
        </p>
      </div>
    </div>

<script>
export default {
  data() {
    return {
      openNumber: 3, // 剩余翻牌次数
      listNum: 6, // 卡片个数
      winner: null, // 当前抽中的奖品
      list: [], // 奖品列表
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 翻牌抽奖
    // 初始化奖品列表，根据listNum生成奖品列表
    init() {
      for (let i = 0; i < this.listNum; i++) {
        const item = {
          activeIndex: null, // 翻开的下标
          winner: null, // 获得的奖品
        };
        this.list.push(item);
      }
    },
    // 后端获取数据
    getWinner() {
      return new Promise((resolve) => {
        this.winner = "谢谢参与";
        resolve();
      });
    },
    // 翻开卡片的方法
    async open(row, i) {
      if (this.openNumber > 0) {
        // 判断用户没有翻开卡片
        if (!row.activeIndex) {
          await this.getWinner();
          this.list.forEach((item, index) => {
            if (i === index) {
              item.activeIndex = index;
              item.winner = this.winner;
            }
          });
          this.openNumber--;
          console.log(this.list);
        } else {
          alert("你已经翻开过了哦");
        }
      } else {
        alert("你的机会已经用完了哦");
      }
    },
  },
};
</script>

// css   lang='scss'
.box {
  position: relative;
  margin: 50px auto;
  width: 800px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

img {
  width: 100%;
  height: 100%;
}

.box div {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  /* 主要内容 */
  background: rgba(0, 0, 0, 0.5);
  /* 模糊大小就是靠的blur这个函数中的数值大小 */
  backdrop-filter: blur(10px);
}

.overall {
  perspective: 1000px;
}
.box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 95vw;
  max-width: 400px;
  .card-box {
    width: 28%;
    height: 11rem;
    position: relative;
    margin: 0.5rem;
    cursor: pointer;
    user-select: none;
  }
  .card {
    width: 100%;
    height: 100%;
    perspective: 500px;
    transform-style: preserve-3d;
    transition: 0.5s;
    position: absolute;
    left: 0;
    top: 0;
    &.active {
      transform: rotateY(180deg);
    }
    /* 正面的样式 */
    .z {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background: white;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0 2px #cc9793;
      &:hover img {
        transform: scale(1.5) translateX(-20%);
      }
      img {
        transition: 0.3s;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      h3 {
        position: relative;
        z-index: 3;
        color: white;
        font-weight: 200;
        font-size: 1rem;
        display: inline-block;
        border: 1px dashed white;
        padding: 5px;
      }
      //   opacity: .5;
    }
    /* 反面的样式 内容部分 */
    .f {
      outline: 1px dashed #0ee7e7;
      outline-offset: -0.5rem;
      box-sizing: border-box;
      background: #fcfcfc;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      transform-style: preserve-3d;
      transform: rotateY(180deg) translateZ(1px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
    }
  }