微信小程序多宮格/九宮格抽獎 基於vue來寫

 

 

html

<template>
  <view>
    <!-- <image  src="@/static/images/activity/classify.png" mode="aspectFill"> -->
    <view class="box">
        <view :class="luckynum==index?'luck boxsub':'boxsub'" 
                v-for='(item,index) in box' 
                :style="index>0&&index<4?('top:0;left:'+index*140+'rpx;')
                                        :(index>3&&index<8?('right:0;top:'+((index-4)*100)+'rpx;')
                                                        :(index>7&&index<12?('bottom:0;right:'+(index-7)*140+'rpx;')
                                                                            :(index>11&&index<14?('left:0;bottom:'+(index-11)*100+'rpx;')
                                                                                                :'')
                                                        )
                                        ) " :key='index'>
             <text class='boxcontent' :style='item.name.length>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"'>{{item.name}}</text> 
            
        </view>
        <view class="lucky" @tap="luckyTap">
            <text class="taplucky">點擊抽獎</text>
            <text class="howMany">您還有<text class="howMany_num" >{{howManyNum}}</text>次抽獎機會</text>
        </view>
    </view>
    <view class="explain">
    
    </view>
  </view>
</template>

js

export default {
  data() {
    return {
        box: [{
              name:'100積分'
            }, {
                name: '10元優惠券\n滿100可用'
            }, {
                name: '60積分'
            }, {
                name: '30積分'
            }, {
                name: '50積分'
            }, {
                name: '30元優惠券\n滿120可用'
            }, {
                name: '100積分'
            }, {
                name: '200積分'
            }, {
                name: '10積分'
            }, {
                name: '50積分'
            }, {
                name: '40積分'
            }, {
                name: '50優惠券滿500可用'
            }, {
                name: '60積分'
            }, {
                name: '70積分'
            }],
            luckynum:0,//當前運動到的位置，在界面渲染
            howManyNum:10,//抽獎的剩余次數
            content:{
              index: 0,    //當前轉動到哪個位置，起點位置
              count: 0,    //總共有多少個位置
              speed: 50,    //初始轉動速度
              cycle: 3*14,    //轉動基本次數：即至少需要轉動多少次再進入抽獎環節，這里設置的是轉動三次后進入抽獎環節
            },
            prize:12,//中獎的位置
            luckytapif:true//判斷現在是否可以點擊
    };
  },
  
  onLoad() {
     // let that = this;
  },
  methods: {
    //點擊抽獎
      luckyTap:function(){
        var i=0,
            that=this,
            howManyNum = this.howManyNum,//剩余的抽獎次數
            luckytapif = this.luckytapif,//獲取現在處於的狀態
            luckynum = this.luckynum,//當前所在的格子
            prize =Math.floor(Math.random()*14) ;//中獎序號,隨機生成
        if (luckytapif && howManyNum>0){//當沒有處於抽獎狀態且剩余的抽獎次數大於零，則可以進行抽獎
          console.log('prize:'+prize);
          this.content.count=this.box.length;
          this.howManyNum=howManyNum-1//更新抽獎次數
          this.luckytapif=false;//設置為抽獎狀態
          this.prize = prize;//中獎的序號
          this.roll();//運行抽獎函數
        } else if (howManyNum == 0 && luckytapif){
          wx.showModal({
            title: '',
            content: '您的抽獎次數已經沒有了',
            showCancel:false
          })
        }
      },
    //抽獎
      roll:function(){
        var content=this.content,
          prize = this.prize,//中獎序號
          that=this;
        if (content.cycle - (content.count-prize)>0){//最后一輪的時間進行抽獎
          content.index++;
          content.cycle--;
            this.luckynum= content.index%14  //當前應該反映在界面上的位置
          setTimeout(this.roll, content.speed);//繼續運行抽獎函數
        }else{
          if (content.index < (content.count*3 + prize)){//判斷是否停止
    
            content.index++;  
            content.speed += (550 /14);//最后一輪的速度，勻加速，最后停下時的速度為550+50
            this.content=content;
              this.luckynum= content.index % 14
            console.log(content.index, content.speed);//打印當前的步數和當前的速度
            setTimeout(this.roll,content.speed);
          }else{
            //完成抽獎，初始化數據
            console.log('完成');
            content.index =0;
            content.cycle = 3 * 14;
            content.speed = 50;
            this.luckytapif = true;
            // clearTimeout(time);
            wx.showModal({
              title: '',
              content: '恭喜你抽到了'+that.box[prize].name,
              showCancel:false
            })
          }
        }
      }
  }
  
};

scss

.box{
      margin:20rpx 25rpx;
      height: 400rpx;
      width: 698rpx;
      /*border:1px solid #ddd;*/
      position: relative;
      /*box-sizing: border-box;*/
    }
    .boxsub{
      width: 140rpx;
      height: 100rpx;
      /*border: 1px solid #f00;*/
      box-sizing: border-box;
      position: absolute;
      background: #ff6100;
      border: 1rpx solid #fff;
     
    }
    .boxcontent{
      text-align: center;
      font-size: 26rpx;
      display: block;
      color: #fff;
    }
    .lucky{
      width: 300rpx;
      height:130rpx;
      background:#ff6100;/* #ff6100;007FFF*/
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0rpx;
      margin: auto;
    }
    
    .lucky:active{
      opacity: 0.7;
    }
    .taplucky{
      display: block;
      text-align: center;
      font-size: 30rpx;
      line-height: 50rpx;
      height: 50rpx;
      color: #fff;
      margin-top: 20rpx;
    }
    .howMany{
      display: block;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      line-height: 40rpx;
      height: 40rpx;
    }
    .howMany_num{
      color:#007FFF;
      font-size:32rpx;
      line-height:40rpx;
      padding:0 10rpx;
    }
    .luck{
      opacity: 0.5;
      background: #ff6100;
    }

 九宮格方法寫抽獎：

 

 簡單樣式，圖片啥的自己替換就行了

html部分

<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>

js部分

export default {
  data() {
    return {
        list: [
            {
                number:0,
              prize_name:'100積分'
            }, {
                number:1,
                prize_name: '10元優惠券\n滿100可用'
            }, {
                number:2,
                prize_name: '30積分'
            }, {
                number:3,
                prize_name: '50積分'
            }, {
                number:4,
                prize_name: '30元優惠券\n滿120可用'
            }, {
                number:5,
                prize_name: '100積分'
            }, {
                number:6,
                prize_name: '200積分'
            }, {
                number:7,
                prize_name: '10積分'
            }
        ],//獎品列表
        index: 0, // 當前轉動到哪個位置，第一次起點位置0,對應頁面item1位置
        count: 8, // 總共有多少個位置
        times: 0, // 轉動跑格子次數,
        cycle: 60, // 轉動基本次數：即至少需要轉動多少次再進入抽獎環節
        speed: 200, // 初始轉動速度
        lampShow:false,//開始抽獎，燈光閃爍
        timer: 0, // 轉動定時器
        lamp:0, // 燈光定時器
        prize: 0, // 中獎位置，接口返回
        number_of_draws:3,//限制每天抽獎次數，接口返回
        prize_data: {//中獎信息
            id:0,//獎品ID
            name:'中獎',//獎品名稱
            number:1,//獎品數量
            image:'',//獎品圖片
            type:0,// 獎品類型
        },
    };
  },
  
  onLoad() {
     // let that = this;
     //獲取獎品列表
         // this.axios.post('/api/luckdraw/prizeList').then(res=>{
         //     if(res.status == 1){
         //         this.list = res.data.list; // 獎品列表數據
         //         this.number_of_draws = res.data.number_of_draws; // 該用戶剩余抽獎次數
         //     }
         // })
  },
  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 = 200;//每次抽獎速度初始化為200
                        // this.prize_data = res.data.yes;//已經拿到中獎信息，頁面展示，等抽獎結束后，將彈窗彈出
                        this.prize = 6-1;//中獎位置賦值，跑馬燈最終停留位置，這里實際位置需要-1
                        this.startRoll();//執行抽獎
                        this.lamp = setInterval(()=>{//燈光閃爍開啟
                            this.lampShow = !this.lampShow;
                        },500)
                //     }
                // })
            }
        },
        // 開始轉動
        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('中獎啦');//中獎彈出提示
                }
            } else {
                if(this.times < this.cycle -20){
                    this.speed -= 4; // 加快轉動速度
                }else{
                    this.speed += 10; // 抽獎即將結束，放慢轉動速度
                }
                this.timer = setTimeout(this.startRoll, this.speed);//開始轉動
            }
        },
  }
};
</script>

css樣式部分

/*
     整體布局采用定位實現
     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(../../static/images/activity/shop.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(../../static/images/activity/shop.png)no-repeat center;
                background-size: 317px 317px;
            }
            .bg2 {
                position: absolute;
                left: 4.5px;
                top: 4px;
                width: 317px;
                height: 317px;
                background: url(../../static/images/activity/shop.png)no-repeat center;
                background-size: 317px 317px;
            }
            .start {
                position: relative;
                padding-top: 70px;
                width: 86px;
                height: 86px;
                background: url(../../static/images/activity/shop.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;}
            }
        }