微信小程序九宫格抽奖

<view class="login">
  <view class="cloud">
    <image src="../../public/images/yun.png"></image>
  </view>
  <view class="name">
    <image src="../../public/images/wenzi.png"></image>
  </view>
  <view class="grass">
    <image src="../../public/images/cao.png"></image>
  </view>
  <view class="sheep">
    <image src="../../public/images/xiaoyang.png"></image>
  </view>



  <!-- 抽奖 -->

  <view class="luck_fun">
    <view class="luck_title">
      <view><text class="iconfont icon-wenhao-xianxingyuankuang"></text>抽奖规则</view>
      <view>剩余次数0次</view>
    </view>

    <view class="luck_box">
      <view class="sheepImg">
        <image src="../../public/images/{{0 == index?'yangselect.png':'yang.png'}}" data-id="0"></image>
        <view class="sheep_inter">
          <view class="luck_inter">1</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{1 == index?'yangselect.png':'yang.png'}}" data-id="1"></image>
        <view class="sheep_inter">
          <view class="luck_inter">2</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{2 == index?'yangselect.png':'yang.png'}}" data-id="2"></image>
        <view class="sheep_inter">
          <view class="luck_inter">3</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{7 == index?'yangselect.png':'yang.png'}}" data-id="7"></image>
        <view class="sheep_inter">
          <view class="luck_inter">8</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg" bindtap="bindClick">
        <image src="../../public/images/btn.png"></image>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{3 == index?'yangselect.png':'yang.png'}}" data-id="3"></image>
        <view class="sheep_inter">
          <view class="luck_inter">4</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{6 == index?'yangselect.png':'yang.png'}}" data-id="6"></image>
        <view class="sheep_inter">
          <view class="luck_inter">7</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{5 == index?'yangselect.png':'yang.png'}}" data-id="5"></image>
        <view class="sheep_inter">
          <view class="luck_inter">6</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
      <view class="sheepImg">
        <image src="../../public/images/{{4 == index?'yangselect.png':'yang.png'}}" data-id="4"></image>
        <view class="sheep_inter">
          <view class="luck_inter">5</view>
          <view class="luck_name">积分</view>
        </view>
      </view>
    </view>
  </view>

</view>

/* pages/luck/index.wxss */
/* pages/Login/pages/index/index.wxss */
@import '../../public/css/iconfont.wxss';

page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(360deg, #84FFC5 0%, #0087D5 60%, #0074C0 100%);
  opacity: 1;
}

.login {
  position: relative;
}

.cloud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.cloud image {
  width: 100%;
}

.grass {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 360rpx;

}

.grass image {
  width: 100%;
  height: 360rpx;
}

.sheep {
  position: fixed;
  right: 21rpx;
  bottom: 57rpx;
  width: 182rpx;
  height: 182rpx;
  z-index: 100;
}

.sheep image {
  width: 100%;
  height: 100%;
}

.name {
  width: 636rpx;
  height: 139rpx;
  position: fixed;
  left: 57rpx;
  top: 61rpx;
}

.name image {
  width: 100%;
  height: 100%;
}

/* 抽奖 */
.luck_fun {
  position: absolute;
  left: 62rpx;
  top: 240rpx;
}

.luck_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 626rpx;
  color: #ffffff;
  font-size: 28rpx;
}

.luck_box {
  width: 602rpx;
  height: 602rpx;
  background: #006EB7;
  border: 7rpx solid #00C2FF;
  opacity: 1;
  border-radius: 20rpx;
  padding: 10rpx;
  display: flex;
  flex-wrap: wrap;
  margin-top: 22rpx;

}
.sheepImg {
  width: 191rpx;
  height: 191rpx;
  position: relative;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
.sheepImg:nth-child(3n){
  margin: 0;
}
.sheepImg image {
  width: 100%;
  height: 100%;
}
.sheep_inter {
  position: absolute;
  top: 86rpx;
  left: 44rpx;
  line-height: 1.2;
  width: 88rpx;
}
.luck_inter {
  text-align: center;
  font-size: 29rpx;
  color: #0074C0;
  font-weight: 800;
}
.luck_name {
  text-align: center;
  font-size: 29rpx;
  color: #0074C0;
  font-weight: 800;
}

// pages/luck/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    index: 0,//默认从1开始
    time: 50,//初始速度
    position: '',//停止位置
    timeCount: 20,//切换时间慢慢减慢
    btnImg: 1,//切换抽奖按钮颜色
    btn: false,//防止多次点击
  },
  //点击抽奖
  bindClick: function () {
    const that = this;
    if (that.data.btn) return
    that.luckStart(that.data.time);
    that.setData({
      btnImg: 2,
      btn: true
    })
    //模拟接口返回的位置
    setTimeout(function () {
      that.setData({
        position: 5,//中奖位置
      })
    }, 3000)

  },

  //
  startLuck: function () {
    const that = this;
    //请求接口
    if (that.data.time < 400 || that.data.position != that.data.index) {
      console.log(that.data.time)
      that.data.time += that.data.timeCount;
      that.setData({
        time: that.data.time
      })
      that.luckStart(that.data.time);
    } else {
      //中奖后初始化数据
      that.setData({
        time: 50,//初始速度
        position: '',//停止位置
        timeCount: 20,//切换时间慢慢减慢
        btnImg: 1,
        btn: false
      })
      wx.showToast({
        title: '中奖啦',
      })
    }
  },
  //抽奖方法
  luckStart: function (time) {
    const that = this;
    setTimeout(() => {
      if (this.data.index < 7) {
        this.setData({
          index: this.data.index + 1
        })
      } else {
        this.setData({
          index: 0
        })
      }
      that.startLuck()
    }, time);

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})