基于vue实现九宫格大转盘抽奖

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言
• 一、基于vue实现九宫格大转盘抽奖
• 二、使用步骤
  • 基于vue实现九宫格大转盘抽奖
• 总结

 

---

前言

基于vue实现九宫格大转盘抽奖

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基于vue实现九宫格大转盘抽奖

示例：为活动而写的一小段代码。

二、使用步骤

1.基于vue实现九宫格大转盘抽奖

代码如下（示例）：

<template>
  <div style="background: #2C9AFC;height: 100vh;width: 100vw;overflow: hidden;text-align: center;">
    <div style="font-size: 22px;padding-top: 70px;color: #fff;">
      <span>javascript 实现九宫格抽奖</span>
    </div>
    <!-- 抽奖 -->
    <div class="gameBox">
      <div class="bg1"></div>
      <div class="bg2" v-show="lampShow"></div>
      <div class="start" @click="move">
     <!--  <p>（{{number_of_draws}}次）</p> -->
      <span>开始抽奖</span>
      </div>
      <ul>
        <li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]">
          <div class="img1">
            <img :src="item.image" alt />
          </div>
          <p>{{item.prize_name}}</p>
        </li>
      </ul>
    </div>
    <!-- 弹出信息 -->
    <!-- <div>
      <van-popup v-model="show"   :style="{ height: '50%',width:'60%',}" style="border-radius: 9px;border:2px solid rgb(44,154,252);">
        <div>
          <div style="margin: auto;">
            <span>恭喜中奖</span>
          </div>
          <div style="width: 80px;margin: auto;">
            <img :src="prize_data.image"  style="width: 100%;border-radius: 9px;border:2px solid rgb(44,154,252);"/>
          </div>
           <span>{{prize_data.id}}</span>
        </div>
      </van-popup>
    </div> -->
  </div>
    </template>

    <script type="text/javascript">
    export default {
      data() {
        return {
          list: [], //奖品列表
          index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
          count: 8, // 总共有多少个位置
          times: 0, // 转动跑格子次数,
          cycle: 60, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
          speed: 200, // 初始转动速度
          lampShow: false, //开始抽奖，灯光闪烁
          timer: 0, // 转动定时器
          lamp: 0, // 灯光定时器
          prize: 0, // 中奖位置，接口返回
          number_of_draws: 0, //限制每天抽奖次数，接口返回
          prize_data: {
            //中奖信息
            id: Number, //奖品ID
            name: "", //奖品名称
            number: Number, //奖品数量
            image: "", //奖品图片
            type: Number // 奖品类型
          },
          show: false,//vant弹出层
        };
      },
      mounted() {
        //获取奖品列表
        // this.axios.post("/api/luckdraw/prizeList").then(res => {
          // if (res.status == 1) {
            this.list = [
              {
                id: 1,
                number: 1,
                prize_name: "案例",
                image:require('./img/222.png')
              },
              {
                id: 2,
                number: 2,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 3,
                number: 3,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 4,
                number: 4,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 5,
                number: 5,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 6,
                number: 6,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 7,
                number: 7,
                prize_name: "lele",
                image:require('./img/222.png')
              },
              {
                id: 8,
                number: 8,
                prize_name: "lele",
                image:require('./img/222.png')
              }
            ]; // 奖品列表数据
            this.number_of_draws = 1; // 该用户剩余抽奖次数
          // }
        // });
      },
      methods: {
        //点击开始抽奖
        move() {
          if (this.number_of_draws == 0) {
            this.$toast("今日抽奖次数已用完,明天再来吧");
          } else if (this.times != 0) {
            this.$toast("正在抽奖中，请勿重复点击");
          } else {
            // this.axios.post(baseURL + "/api/luckdraw/doDraw").then(res => {
              // if (res.status == 1) {
                // this.number_of_draws--; //抽奖开始，次数-1
                this.speed = 150; //每次抽奖速度初始化为200
                this.prize_data = {
                  id: 1,
                  name: "案例",
                  number: 1,
                  image: require('./img/222.png'),
                  type: 1
                }
                this.prize = 5 - 1
                // this.prize_data = res.data.yes; //已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
                // this.prize = res.data.yes.id - 1; //中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
                this.startRoll(); //执行抽奖
                this.lamp = setInterval(() => {
                  //灯光闪烁开启
                  this.lampShow = !this.lampShow;
                }, 100);
              // }
            // });
          }
        },
        // 开始转动
        startRoll() {
          this.times += 1; // 转动次数
          this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
          this.usePrize();
        },

        // 每一次转动
        oneRoll() {
          let index = this.index; // 当前转动到哪个位置
          const count = 8; // 总共有多少个位置
          index += 1;
          if (index > count - 1) {
            index = 0;
          }
          this.index = index;
        },

        usePrize() {
          // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
          if (this.times > this.cycle + 10 && this.prize === this.index) {
            clearTimeout(this.timer); // 清除转动定时器
            clearTimeout(this.lamp); // 清除灯光定时器
            this.lampShow = false; // 白色灯隐藏
            this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖

            if (this.prize_data.type == 0) {
              console.log("未中奖，谢谢参与"); //未中奖提示弹出，
            } else {
              console.log("中奖啦"); //中奖弹出提示
              this.show=true
            }
          } else {
            if (this.times < this.cycle - 20) {
              this.speed -= 4; // 加快转动速度
            } else {
              this.speed += 10; // 抽奖即将结束，放慢转动速度
            }
            this.timer = setTimeout(this.startRoll, this.speed); //开始转动
          }
        }
      }
    };
    </script>
    <style scoped lang="less">
    .gameBox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 326px;
      height: 326px;
      margin: 150px auto 0;
      border-radius: 8px;
      // background: red no-repeat left top;
      background-size: 326px 326px;
      position: relative;
      .bg1 {
        position: absolute;
        left: 13.5px;
        top: 12px;
        width: 300px;
        height: 300px;
        background: #2A9AFC;
        background-size: 317px 317px;
        border: 1vw solid #97D2FC;
        border-radius: 9px;
      }
      .bg2 {
        position: absolute;
        left: 13.5px;
        top: 12px;
        width: 300px;
        height: 300px;
        background: #2A9AFC;
        background-size: 317px 317px;
        border: 1vw solid #97D2FC;
        border-radius: 9px;
      }
      .start {
        position: relative;
        // padding-top: 70px;
        width: 86px;
        height: 86px;
        background: #FD3A58;
        background-size: 86px 86px;
        border-radius: 9px;
        text-align: center;
        line-height: 86px;
        p {
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
        span {
          text-align: center;
          font-size: 16px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
      ul {
        li {
          position: absolute;
          width: 86px;
          height: 86px;
          background: rgba(255, 255, 255, 1);
          border: 2px solid #97D2FC;
          border-radius: 8px;

          .img1 {
            margin: 15px auto 3px;
            width: 35px;
            height: 35px;
            margin: 0;
            width: 83px;
            img {
              width: 100%;
              height: auto;
              border-radius: 7px;
            }
          }
          p {
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            color: #fff;
            margin-top: 20px;
          }
        }
        .item1 {
          left: 25px;
          top: 25px;
        }
        .item2 {
          left: 120px;
          top: 25px;
        }
        .item3 {
          left: 215px;
          top: 25px;
        }
        .item4 {
          left: 215px;
          top: 120px;
        }
        .item5 {
          left: 215px;
          top: 215px;
        }
        .item6 {
          left: 120px;
          top: 215px;
        }
        .item7 {
          left: 25px;
          top: 215px;
        }
        .item8 {
          left: 25px;
          top: 120px;
        }
        .active {
          background: #97D2FC;
          .img1 {
            margin: 15px auto 3px;
            width: 35px;
            height: 35px;
            margin: 0;
            width: 83px;
            opacity: 0.6;
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
    }
    </style>

 

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了基于vue实现九宫格大转盘抽奖