微信小程序九宫格抽奖,随机选中奖品。

wxml

<view class="container-out">
  <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
  <view class="container-in">
    <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
     {{item.Award.name}}
    </view>
    <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">抽奖</view>
  </view>
</view>

js

Page({
    data: {
        circleList: [],//圆点数组
        awardList: [],//奖品数组
        colorCircleFirst: '#FFDF2F',//圆点颜色1
        colorCircleSecond: '#FE4D32',//圆点颜色2
        colorAwardDefault: '#F5F0FC',//奖品默认颜色
        colorAwardSelect: '#ffe400',//奖品选中颜色
        indexSelect: 0,//被选中的奖品index
        isRunning: false,//是否正在抽奖
        Award: [
            { name: '2元', value: 2 },
            { name: '免单', value: 100 },
            { name: '3元', value: 3 },
            { name: '2.66元', value: 2.66 },
            { name: '3.88元', value: 3.88 },
            { name: '4元', value: 4 },
            { name: '3.66元', value: 3.66 },
            { name: '2.88元', value: 2.88 },
           
        ],//奖品数组
    },

    onLoad: function () {
        var _this = this;
        //圆点设置
        var leftCircle = 7.5;
        var topCircle = 7.5;
        var circleList = [];
        for (var i = 0; i < 24; i++) {
            if (i == 0) {
                topCircle = 15;
                leftCircle = 15;
            } else if (i < 6) {
                topCircle = 7.5;
                leftCircle = leftCircle + 102.5;
            } else if (i == 6) {
                topCircle = 15
                leftCircle = 620;
            } else if (i < 12) {
                topCircle = topCircle + 94;
                leftCircle = 620;
            } else if (i == 12) {
                topCircle = 565;
                leftCircle = 620;
            } else if (i < 18) {
                topCircle = 570;
                leftCircle = leftCircle - 102.5;
            } else if (i == 18) {
                topCircle = 565;
                leftCircle = 15;
            } else if (i < 24) {
                topCircle = topCircle - 94;
                leftCircle = 7.5;
            } else {
                return
            }
            circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
        }
        this.setData({
            circleList: circleList
        })
        //圆点闪烁
        setInterval(function () {
            if (_this.data.colorCircleFirst == '#FFDF2F') {
                _this.setData({
                    colorCircleFirst: '#FE4D32',
                    colorCircleSecond: '#FFDF2F',
                })
            } else {
                _this.setData({
                    colorCircleFirst: '#FFDF2F',
                    colorCircleSecond: '#FE4D32',
                })
            }
        }, 500)
        //奖品item设置
        var awardList = [];
        //间距,怎么顺眼怎么设置吧.
        var topAward = 25;
        var leftAward = 25;
        for (var j = 0; j < 8; j++) {
            if (j == 0) {
                topAward = 25;
                leftAward = 25;
            } else if (j < 3) {
                topAward = topAward;
                //166.6666是宽.15是间距.下同
                leftAward = leftAward + 166.6666 + 15;
            } else if (j < 5) {
                leftAward = leftAward;
                //150是高,15是间距,下同
                topAward = topAward + 150 + 15;
            } else if (j < 7) {
                leftAward = leftAward - 166.6666 - 15;
                topAward = topAward;
            } else if (j < 8) {
                leftAward = leftAward;
                topAward = topAward - 150 - 15;
            }
            var Award = this.data.Award[j];
            awardList.push({ topAward: topAward, leftAward: leftAward, Award: Award });
        }
        this.setData({
            awardList: awardList
        })
    },
    //开始游戏
    startGame: function () {
        if (this.data.isRunning) return
        this.setData({
            isRunning: true
        })
        var _this = this;
        var indexSelect = 0
        var i = 0;
        let f = Math.floor(Math.random() *8);
        console.warn(f)
        var timer = setInterval(function () {
            indexSelect++;
            //可根据自己的需求改变转盘速度
            i += 90;
            if (i > 1000) {
                //判断是随机生成的那个值得时候就停止
                if (f == indexSelect % 8){
                    _this.setData({
                        indexSelect: indexSelect
                    })
                    //去除循环
                    clearInterval(timer)

                    _this.setData({
                        isRunning: false
                    })
                }
                
                
                //获奖提示
                if(!_this.data.isRunning){
                    wx.showModal({
                        title: '恭喜您',
                        content: '获得了' + (_this.data.Award[f].name)+'尚坡红包',
                        showCancel: false,//去掉取消按钮
                        success: function (res) {
                            if (res.confirm) {

                            }
                        }
                    })
                }
               
            }
            indexSelect = indexSelect % 8;
            _this.setData({
                indexSelect: indexSelect
            })
        }, (200 + i))
    }
})

wxss

.container-out {
  height: 600rpx;
  width: 650rpx;
  background-color: #b136b9;
  margin: 100rpx auto;
  border-radius: 40rpx;
  box-shadow: 0 10px 0 #871a8e;
  position: relative;
}

.container-in {
  width: 580rpx;
  height: 530rpx;
  background-color: #871a8e;
  border-radius: 40rpx;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 20rpx;
  width: 20rpx;
}

.content-out {
  position: absolute;
  text-align: center;
  height: 150rpx;
  width: 166.6666rpx;
  background-color: #f5f0fc;
  border-radius: 15rpx;
  box-shadow: 0 5px 0 #d87fde;
  color: #f6251e;
  line-height: 150rpx;
}

/**居中 加粗*/

.start-btn {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 15rpx;
  height: 150rpx;
  width: 166.6666rpx;
  background-color: #ffe400;
  box-shadow: 0 5px 0 #e7930a;
  color: #f6251e;
  text-align: center;
  font-size: 55rpx;
  font-weight: bolder;
  line-height: 150rpx;
}