TypechoJoeTheme

Dcr163的博客

统计

VUE九宫格抽奖页面实现

2022-05-11
/
0 评论
/
222 阅读
/
正在检测是否收录...
05/11

VUE模拟九宫格抽奖页面实现

直接上代码

<template>
  <div class="gameBox">
    <div class="bg1"></div>
    <div class="bg2" v-show="lampShow"></div>
    <div class="start" @click="move">
      点击抽奖
      <p>({{ number_of_draws }}次)</p>
    </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.number }}{{ item.prize_name }}</p>
      </li>
    </ul>
  </div>

</template>

<script>
export default {
  components: {},
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      list: [
        {
          id: 1,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a1',
        },
        {
          id: 2,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a2',
        },
        {
          id: 3,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a3',
          type: 0,
        },
        {
          id: 4,
          image: require('@/assets/logo.png'),
          number: 4,
          prize_name: 'a4',
        },
        {
          id: 5,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a5',
        },
        {
          id: 6,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a6',
        },
        {
          id: 7,
          image: require('@/assets/logo.png'),
          number: 2,
          prize_name: 'a7',
        },
        {
          id: 8,
          image: require('@/assets/logo.png'),
          number: 4,
          prize_name: 'a8',
        },
      ],//奖品列表
      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,// 奖品类型
      },
    }
  },
  mounted() {
    this.number_of_draws = 10;
  },
  methods: {
    //点击开始抽奖
    move() {
      if (this.number_of_draws === 0) {
        this.$toast('今日抽奖次数已用完,明天再来吧');
      } else if (this.times !== 0) {
        this.$toast('正在抽奖中,请勿重复点击')
      } else {
        //模拟请求
        setTimeout(() => {
          let prize = this.list[2];
          this.number_of_draws--;//抽奖开始,次数-1
          this.speed = 200;//每次抽奖速度初始化为200
          this.prize_data = prize;//已经拿到中奖信息,页面展示,等抽奖结束后,将弹窗弹出
          this.prize = prize.id - 1;//中奖位置赋值,跑马灯最终停留位置,这里实际位置需要-1
          this.startRoll();//执行抽奖
          this.lamp = setInterval(() => {//灯光闪烁开启
            this.lampShow = !this.lampShow;
          }, 500)
        }, 600)
      }
    },
    // 开始转动
    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('未中奖,谢谢参与');//未中奖提示弹出,
          this.$toast('未中奖,谢谢参与');
        } else {
          console.log('中奖啦');//中奖弹出提示
          this.$toast('中奖啦');
        }
      } 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:父盒子,最外层背景图
bg1:灰色灯
bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示
start:按钮样式
item1-8:通过定位方式将dom元素顺时针排列
active:点击开始开妞后,从1位置开始高亮,类似跑马灯
*/
.gameBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 326px;
  height: 326px;
  margin: 150px auto 0;
  border-radius: 8px;
  background: url(@/assets/logo.png) no-repeat left top;
  background-size: 326px 326px;
  position: relative;

  .bg1 {
    position: absolute;
    left: 4.5px;
    top: 4px;
    width: 317px;
    height: 317px;
    background: url(@/assets/logo.png) no-repeat center;
    background-size: 317px 317px;
  }

  .bg2 {
    position: absolute;
    left: 4.5px;
    top: 4px;
    width: 317px;
    height: 317px;
    background: url(@/assets/logo.png) no-repeat center;
    background-size: 317px 317px;
  }

  .start {
    position: relative;
    padding-top: 70px;
    width: 86px;
    height: 86px;
    background: url(@/assets/logo.png) no-repeat center;
    background-size: 86px 86px;

    p {
      text-align: center;
      font-size: 12px;
      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 rgba(227, 161, 0, 1);
      border-radius: 8px;

      .img1 {
        margin: 15px auto 3px;
        width: 35px;
        height: 35px;

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

      p {
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }

    .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: #FFF2B1;
    }
  }
}

</style>

效果图如下:

VUE九宫格抽奖
朗读
赞(0)
版权属于:

Dcr163的博客

本文链接:

https://dcr163.cn/644.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. admin
    2021-08-15

    {!{data:image/webp;base64,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}!}

标签云