uni-app,H5抽奖

<template>
  <view class='lottery'>
    <view class="lotteryTop">
      会员每日幸运抽奖
    </view>
    <view class="roulette">
      <view class="surplus">
        剩余抽奖次数：{{surplus}}
      </view>
      <view class="turntable" id="rotary_table">
        <view v-for="(item , index) in awards" :key="item.id" :class="['award' + index, { active: index == current }]" class="award">
          <image :src='item.images' mode='widthFix' class='image'></image>
          <view class="mask" v-if="index == current">

          </view>
        </view>
        <view id="start-btn" class="" @click="start">
          <view class="luck">
            <view class="">
              立即
            </view>
            <view class="">
              抽奖
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="winningList">
      中奖名单
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      surplus: 0,
      loadingPrize: true,
      awards: [],
      current: 1, // 当前索引值
      speed: 200, // 时间->速度
      diff: 15, // 基数
      award: {}, // 抽中的奖品
      time: 0, // 当前时间戳
      timer: null, // 定时器
      isPrize: false,
      records: [],
    };
  },
  onLoad(opt) {
    this.loadData();
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 开始抽奖
    start() {
      if (this.isPrize) return;
      if (this.surplus <= 0) {
        uni.showModal({
          title: "抽奖提醒",
          content: "剩余抽奖次数为" + this.surplus + "次",
          success: function (res) {
            if (res.confirm) {
            } else if (res.cancel) {
            }
          },
        });
        return;
      }
      this.isPrize = true;
      this.getLottery();
      this.time = Date.now();
      this.speed = 200;
      this.diff = 12;
    },
    // 调接口获取奖品
    getLottery() {
      this.loadingPrize = true;
      this.http
        .get(getApp().globalData.prizeAction, {})
        .then((res) => {
          console.log(res, "===321==");
          this.award.name = res.data.title;
          this.award.id = res.data.prizeId;
          this.award.identification = res.data.identification;
          this.record = res.data;
          this.loadingPrize = false;
          this.move();
        })
        .catch((err) => {
          this.loadingPrize = false;
          this.isPrize = false;
        });
    },

    // 开始转动
    move() {
      this.timer = setTimeout(() => {
        this.current++;
        if (this.current > 7) {
          this.current = 0;
        }

        // 若抽中的奖品id存在，则开始减速转动
        if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
          this.speed += this.diff; // 转动减速
          // 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
          if (
            (Date.now() - this.time) / 1000 > 4 &&
            this.award.id == this.awards[this.current].id
          ) {
            clearTimeout(this.timer);
            setTimeout(() => {
              this.surplus--;
              this.isPrize = false;
              this.records.push(this.record);
              console.log(this.award.id, "=====");

              uni.showModal({
                title: "中奖通知",
                content: `恭喜您中奖 “${this.award.name}”`,
                success: function (res) {
                  if (res.confirm) {
                  } else if (res.cancel) {
                  }
                },
              });
              //   if (this.record.identification.indexOf("address") != -1) {
              //     //中奖实物奖品，需填写联系信息发货
              //     // this.handleShoppClose();
              //   }
            }, 0);
            return;
          }
        } else {
          // 若抽中的奖品不存在，则加速转动
          this.speed -= this.diff;
        }
        this.move();
      }, this.speed);
    },

    //抽奖次数
    loadData() {
      this.http.get(getApp().globalData.prizeSurplus, {}).then(({ data }) => {
        this.surplus = data;
      });
      this.http.get(getApp().globalData.prizeAll, {}).then(({ data }) => {
        this.awards = data;
        console.log(data, "===123==");
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.lottery {
  width: 100vw;
  height: 100vh;
  background: no-repeat top center/100%
    url(http://192.168.0.87/file/image/prize-back.png);
}
.lotteryTop {
  font-size: 52upx;
  color: #fff;
  text-align: center;
  padding: 100upx 0 40upx;
}
.roulette {
  width: 80vw;
  height: 90vw;
  margin: 0 auto;
  border: 1px solid #6255cc;
  background-color: rgba(54, 43, 170, 0.404);
  padding: 36upx;
  .surplus {
    color: #fff;
    font-size: 32upx;
    text-align: center;
  }
  .turntable {
    width: 100px;
    color: red;
  }
}
#rotary_table {
  width: 70vw;
  height: 70vw;
  position: relative;
  margin-top: 24upx;
  // background-color: antiquewhite;
  //background-image: url('../../assets/images/prize-back.png');

  .award {
    width: 23vw;
    height: 23vw;
    text-align: center;
    float: left;
    background-color: red;
    position: absolute;
    overflow: hidden;
    image {
      position: absolute;
      width: 23vw;
      top: 0;
      left: 0;
      height: 23vw;
    }
    .prize-title {
      z-index: 99;
      position: absolute;
      font-size: 28upx;
      text-align: center;
      background: #000000;
      opacity: 0.7;
      width: 318upx;
      bottom: 0;
      padding: 0 20upx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #e8d639;
    }
    &.active {
      .mask {
        width: 23vw;
        height: 23vw;
        position: absolute;
        border-radius: 10px;
        opacity: 0.8;
        background-color: #fff0bd;
      }
    }

    &.award0 {
      top: 0;
      left: 0;
      border-top-left-radius: 10upx;
    }
    &.award1 {
      top: 0upx;
      left: calc(1vw / 2 + 23vw);
    }
    &.award2 {
      top: 0;
      right: 0;
      border-top-right-radius: 10upx;
    }
    &.award3 {
      top: calc(1vw / 2 + 23vw);
      right: 0;
    }
    &.award4 {
      bottom: 0;
      right: 0;
      border-bottom-right-radius: 10upx;
    }
    &.award5 {
      bottom: 0;
      right: calc(1vw / 2 + 23vw);
    }
    &.award6 {
      bottom: 0;
      left: 0;
      border-bottom-left-radius: 10upx;
    }
    &.award7 {
      top: calc(1vw / 2 + 23vw);
      left: 0;
    }
  }
  #start-btn {
    position: absolute;
    width: 23vw;
    height: 23vw;
    top: calc(1vw / 2 + 23vw);
    left: calc(1vw / 2 + 23vw);
    text-align: center;
    border-radius: calc(23vw / 2);
    background: #6c5ab7;
    color: #fff;
    //background: #000;
    cursor: pointer;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-image: url('../../assets/images/lottery1.png');
    .luck {
      width: 19vw;
      height: 19vw;
      background-image: linear-gradient(to bottom right, #f6d0b0, #ef2e26);
      border-radius: calc(19vw / 2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 38upx;
    }
    .prize-title {
      z-index: 99;
      position: absolute;
      font-size: 28upx;
      font-weight: bold;
      text-align: center;
      width: 318upx;
      bottom: 16upx;
      padding: 0 20upx;
      color: #ffffff;
      span {
        color: #ffffff;
      }
    }
  }
  #start-btn:hover {
    opacity: 0.9;
  }
}
</style>

背景图和请求接口根据情况修改,

抽中是后端返回的