微信小程序點擊按鈕簽到

微信小程序點擊按鈕簽到

1.wxml

<!-- 點擊簽到 -->
<view class='signIn'>
    <view class='sign-com'>
      <view class='thead'>
        <view class='tt'>已連續簽到</view>
          <view class='mm'><label class='n'>{{signNum}}</label>天</view>
        </view>
    <view class='the-btn'>
      <button type='button' class='btn' bindtap='bindSignIn' data-num="{{signNum}}" disabled='{{signState}}'>簽到</button>
    </view>
  </view>
</view>

2.css

/*點擊簽到  */
.signIn{ width: 100%; height: auto;}
.sign-com{ width: 100%; height: auto; padding: 0 30rpx; box-sizing: border-box; overflow: hidden; }
.sign-com .thead{ width: 100%; text-align: center; padding: 50rpx 0 35rpx;}
.sign-com .thead .tt{ font-size: 24rpx;}
.sign-com .thead .mm{ margin-top: 10rpx; font-size: 24rpx;}
.sign-com .thead .mm .n{ font-size: 66rpx; margin-right: 25rpx;}
.the-btn{ margin: 50rpx 0;}
.the-btn .btn{ background-color: #ff614a; color: #fff;}
.the-btn.signed .btn{ background-color: rgba(153, 153, 153, 0.61); }

3.js

  /**
   * 頁面的初始數據
   */
  data: {
      //簽到模塊
      signNum: 0,  //簽到數
      signState: false, //簽到狀態
  },
  //簽到
  bindSignIn(e) {
    var that = this,
      num = e.currentTarget.dataset.num;
    num++
    wx.showToast({
      icon: 'success',
      title: '簽到成功',
    })
    that.setData({
      signNum: num,
      //signState: true
    })
  },