微信小程序九宫格抽奖

一个很简陋的抽奖demo，记录在这里。

效果图：

---

结构：

<!--index.wxml-->
<view class="container-out">
  <view 
    class='circle'
    wx:for="{{ circleList }}"
    wx:key="{{ index }}"
    style="top:{{ item.circleTop }}rpx;left:{{ item.circleLeft }}rpx;background-color:{{ (index%2==0)?colorEven:colorOdd }}"     
  ></view>
  <view class='container-in'>
    <view 
      class='award'
      wx:for="{{ awardList }}"
      wx:key="{{ index }}"
      style="top:{{ item.awardTop }}rpx;left:{{ item.awardLeft }}rpx;background-color: {{(index==selectedIdx)?'#ffff00':'#ffffff'}};"  
    >
      <image class='award-img' src="{{ item.awardUrl }}"></image>
    </view>
    <view 
      class="start-btn" 
      bindtap="startHandle"
    >开始</view>
  </view>
</view>

---

样式：

/**index.wxss**/
page {
  height: 100%;
  background-color: #f0f0f0; 
}
.container-out {
  position: relative;
  width: 650rpx;
  height: 650rpx;
  margin: 150rpx auto;
  border-radius: 40rpx;
  background-color: #ff6666;
}
.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 20rpx;
  width: 20rpx;
}
.container-in {
  position: absolute;
  width: 580rpx;
  height: 580rpx;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #ff0000;
  border-radius: 40rpx;
}
.award {
  position: absolute;
  height: 150rpx;
  width: 150rpx;
  background-color: #fff;
  border-radius: 15rpx;
}
.award image {
  display: block;
  width: 120rpx;
  height: 120rpx;
  margin: 10rpx auto;
}
.start-btn {
  position: absolute;
  width: 150rpx;
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  font-weight: 600;
  top: 215rpx;
  left: 215rpx;
  border-radius: 15rpx;
  background-color: #ffff00;
}

---

逻辑：

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 圆点列表
    circleList: {
      0: { circleTop: '20', circleLeft: '20'},
      1: { circleTop: '10', circleLeft: '160'},
      2: { circleTop: '10', circleLeft: '310'},
      3: { circleTop: '10', circleLeft: '460'},
      4: { circleTop: '20', circleLeft: '610'},
      5: { circleTop: '160', circleLeft: '620'},
      6: { circleTop: '310', circleLeft: '620'},
      7: { circleTop: '460', circleLeft: '620'},
      8: { circleTop: '610', circleLeft: '610'},
      9: { circleTop: '620', circleLeft: '460'},
      10: { circleTop: '620', circleLeft: '310'},
      11: { circleTop: '620', circleLeft: '160'},
      12: { circleTop: '610', circleLeft: '20'},
      13: { circleTop: '460', circleLeft: '10'},
      14: { circleTop: '310', circleLeft: '10'},
      15: { circleTop: '160', circleLeft: '10'}
    },
    colorOdd: "	#CD00CD",// 奇数点颜色
    colorEven: "#ffff00",// 偶数点颜色
    awardList: {
      0: { awardTop: '40', awardLeft: '40', awardUrl: '/images/1.jpg'},
      1: { awardTop: '40', awardLeft: '215', awardUrl: '/images/2.jpg'},
      2: { awardTop: '40', awardLeft: '390', awardUrl: '/images/3.jpg'},
      3: { awardTop: '215', awardLeft: '390', awardUrl: '/images/4.jpg'},
      4: { awardTop: '390', awardLeft: '390', awardUrl: '/images/5.jpg'},
      5: { awardTop: '390', awardLeft: '215', awardUrl: '/images/6.jpg'},
      6: { awardTop: '390', awardLeft: '40', awardUrl: '/images/7.jpg'},
      7: { awardTop: '215', awardLeft: '40', awardUrl: '/images/8.jpg'}
    },
    isContinue: false, // 正在抽奖
    selectedIdx: 0 // 被选中的奖品
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 让圆点闪烁
    setInterval(() => {
      if (this.data.colorOdd == '#CD00CD') {
        this.setData({
          colorOdd: '#ffff00',
          colorEven: '#CD00CD'
        })
      } else {
        this.setData({
          colorOdd: '#CD00CD',
          colorEven: '#ffff00'
        })
      }
    }, 500);
 
  },
  startHandle () {
    if (this.data.isContinue) {
      return;
    }
    this.setData({
      isContinue: true
    })
    let that = this;
    let selectedIdx = 0
    let i = 0;
    const timer = setInterval( () => {
      selectedIdx ++;
      i += Math.random() * 100;
      if (i > 1000) {
        clearInterval(timer);
        wx.showModal({
          title: '中奖啦！！!',
          content: '恭喜你获得兰博基尼5元代金券',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              that.setData({
                isContinue: false
              })
            }
          }
        })
      }
      selectedIdx = selectedIdx % 8;
      that.setData({
        selectedIdx
      })
    }, 200)
  }
})