uniapp九宫格概率抽奖功能

<template>
  <view class="">
    <uv-overlay :show="show" @click="show = false">
      <uv-modal ref="modal" title="抽奖活动" :content='draw[0].active.content' @confirm="confirm"></uv-modal>
    </uv-overlay>
    <view style="margin-top: 40px;">
      <uv-navbar title="抽奖">
        <template v-slot:left>
          <view class="uv-nav-slot">
            <uv-icon name="arrow-left" size="19" @tap="leftClick"></uv-icon>
            <uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
            <uv-icon name="home" size="20" @tap="home"></uv-icon>
          </view>
        </template>
      </uv-navbar>
    </view>
    <view class="draw">
      <image src="https://7up.pics/images/2023/12/26/img17704218ad045b198.png" mode="" class="draw_one"
        @tap="click">
      </image>
      <view class="last">
        <view class="draws_one" :style="'background-color:' +(back==1?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_two" :style="'background-color:' +(back==2?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_three" :style="'background-color:'+ (back==3?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_four" :style="'background-color:'+ (back==4?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_five" :style="'background-color:'+ (back==5?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_six" :style="'background-color:'+ (back==6?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_seven" :style="'background-color:'+ (back==7?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_eight" :style="'background-color:'+ (back==8?'#F9DE23':'')" v-if="type==false">
        </view>
        <view class="draws_one" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[0].img" mode=""></image>
          <view class="">
            {{draw[0].name}}
          </view>
        </view>
        <view class="draws_two" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[1].img" mode="">
          </image>
          <view class="" v-if="type==true">
            {{draw[1].name}}
          </view>
        </view>
        <view class="draws_three" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[2].img" mode="">
          </image>
          <view class="">
            {{draw[2].name}}
          </view>
        </view>
        <view class="draws_four" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[3].img" mode=""></image>
          <view class="">
            {{draw[3].name}}
          </view>
        </view>
        <view class="draws_five" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[4].img" mode=""></image>
          <view class="">
            {{draw[4].name}}
          </view>
        </view>
        <view class="draws_six" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[5].img" mode=""></image>
          <view class="">
            {{draw[5].name}}
          </view>
        </view>
        <view class="draws_seven" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[6].img" mode="">
          </image>
          <view class="">
            {{draw[6].name}}
          </view>
        </view>
        <view class="draws_eight" v-if="type==true">
          <image :src="'https://wwz.jingyi.icu'+draw[7].img" mode="">
          </image>
          <view class="">
            {{draw[7].name}}
          </view>
        </view>
      </view>
      <view class="butt" @click="start">开始</view>
      <view class="butts" @click="end">结束</view>
    </view>
    <view class="hint">
      <view class="" @tap="shows">
        查看攻略
      </view>
      <view class="">
        可抽奖次数:{{nums}}
      </view>
      <view class="more" @tap="more">
        <view class="">
          更多
        </view>
        <view class="">
          <image src="../../static/right.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="content_head" style="">
        <view class="">
          序号
        </view>
        <view class="">
          昵称
        </view>
        <view class="">
          奖品
        </view>
        <view class="">
          时间
        </view>
      </view>
      <view class="container" style="margin-top:10px;">
        <scroll-view class="list" scroll-y>
          <view class="content_foot">
            <view class="" v-for="(item,index) in content" :key="item.id" style="margin-top: 10px;">
              <view class="contents" style="">
                <view class="">
                  {{index+1}}
                </view>
                <view class="">
                  {{item.nickname}}
                </view>
                <view class="">
                  {{item.name}}
                </view>
                <view class="">
                  {{item.create_time}}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
  var intime = 100
  export default {
    data() {
      return {
        back: 0,
        type: true,
        draw: [],
        ai: null,
        round: 0,
        content: [],
        nums: 1,
        show: false,
        probability: [],
        Luck: true,
        index:null,
        user:'',
      }
    },
    onLoad() {
    this.user=uni.getStorageSync("userId")
    console.log(this.user);
    this.winning_list()
      // 奖品列表
      let that = this;
      uni.request({
        url: "接口数据",
        method: 'POST',
        data: {
          参数
        },
        success: (res) => {
          console.log(res);
          that.draw = res.data.data;
        },
      });
    },
    methods: {
      // 提示
      winning_list(){
        uni.request({
          url: "接口数据",
          method: 'POST',
          success: (res) => {
            console.log(res, 123255225);
            this.content = res.data.data
          },
        })
      },
      click() {
        uni.showToast({
          title: '点击蓝色按钮开始，点击红色按钮暂停开奖',
          icon: "none"
        })
      },
      shows() {
        this.show = true
        this.$refs.modal.open();
      },
         // 跳转
     more(){
       uni.navigateTo({
        url:'/pages/prize_list/prize_list'
       })
     },
      //点击开始
      start() {
        if (this.Luck == false) { //防止过度点击
          return;
        }
        this.nums--
        this.Luck = false;
        let that = this
        that.type = false
        var arr = [];
        for (var i = 0; i < this.draw.length; i++) {
          for (var k = 0; k < this.draw[i].num; k++) {
            arr.push(i);
          }
        }
        console.log(arr);
        for (let i = 0, len = arr.length; i < len; i++) {
          let index = parseInt(Math.random() * (len - 1));
          let tempValue = arr[i];
          arr[i] = arr[index];
          arr[index] = tempValue;
        }
        console.log(arr);
        var a = Math.ceil(Math.random() * 100);
        console.log(arr[a],a);//5,81 每次不一样
        this.luckPosition = arr[a];
        // 使用永久性定时器
        that.ai = setInterval(() => {
          that.back += 1
          console.log(that.back);
          if (that.back == 9) {
            that.back = 1
            that.round += 1
          }
        }, intime)
      },
      random() {
        // var stack = [];
        // while (arr.length) {
        //  var index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机索引值
        //  stack.push(arr[index]); // 将随机索引对应的数组元素添加到新的数组中
        //  arr.splice(index, 1); // 删除原数组中随机生成的元素
        // }
      },
      //暂停
      end() {
        let that = this
        console.log(that.ai);
        if (that.ai==null) {
          uni.showToast({
            title:'请先开始抽奖',
            icon:"none"
          })
        }else if (that.round > 0){
          that.type = true
          clearInterval(that.ai)
          that.ai = null
          that.a = 0
                  console.log(this.luckPosition);
            uni.request({
            header:{
              id:this.user
            },
            method:"POST",
              url:'接口数据',
            data:{
              参数
            },
            success(res) {
              console.log(res);
              that.winning_list()
              uni.showToast({
                title:`恭喜获得${that.draw[that.luckPosition].name}`,
              })
            }
            })
        }
      },
    // 返回
    leftClick() {
      uni.navigateBack()
    },
    home() {
      uni.reLaunch({
        url: '/pages/shouye/tabbar'
      })
    },
    }
  }
</script>
<style scoped lang="scss">
  @mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
  }
  .uv-nav-slot {
    @include flex;
    align-items: center;
    justify-content: space-between;
    border-width: 0.5px;
    border-radius: 100px;
    border-color: #dadbde;
    padding: 3px 7px;
    opacity: 0.8;
  }
  .draw {
    position: relative;
  }
  .draw_one {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }
  .last {
    font-size: 13px;
    text-align: center;
  }
  .last image {
    height: 45px;
    width: 45px;
  }
  .draws_one {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 28vh;
    left: 13vw;
    border-radius: 10rpx;
  }
  .butts {
    height: 4vh;
    width: 15vw;
    position: absolute;
    top: 57vh;
    left: 35vw;
    background-color: red;
    opacity: 0;
  }
  .butt {
    height: 4vh;
    width: 15vw;
    position: absolute;
    top: 57vh;
    left: 53vw;
    /* background-color: red; */
    opacity: 0;
  }
  .three_one {
    background-color: red;
    position: absolute;
    z-index: 10;
    top: 28vh;
    left: 13vw;
    border-radius: 10rpx;
  }
  .draws_two {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 28vh;
    left: 38vw;
    border-radius: 10rpx;
  }
  .draws_three {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 28vh;
    left: 63vw;
    border-radius: 10rpx;
  }
  .draws_four {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 37.8vh;
    left: 63vw;
    border-radius: 10rpx;
  }
  .draws_five {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 47.6vh;
    left: 63vw;
    border-radius: 10rpx;
  }
  .draws_six {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 47.6vh;
    left: 38vw;
    border-radius: 10rpx;
  }
  .draws_seven {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 47.6vh;
    left: 13vw;
    border-radius: 10rpx;
  }
  .draws_eight {
    height: 9vh;
    width: 24vw;
    position: absolute;
    z-index: 10;
    top: 37.8vh;
    left: 13vw;
    border-radius: 10rpx;
  }
  .content {
    margin-top: 70vh;
    text-align: center;
    font-size: 13px;
    position: absolute;
  }
  .content_head {
    display: flex;
    justify-content: space-around;
    text-align: center
  }
  .content_head view {
    width: 90px;
  }
  .contents {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }
  .contents view {
    width: 90px;
  }
  .container {
    height: 150px;
    overflow: hidden;
  }
  .list {
    height: 100%;
  }
  /* 介绍 */
  .hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    margin-top: 62vh;
    font-size: 13px;
    width: 95%;
    margin-left: 2.5%;
  }
  .more image {
    width: 30px;
    height: 30px;
  }
  .more {
    display: flex;
    align-items: center;
  }
</style>