微信小程序签到

wxml

  
  <view class="check">
    <view class="checknumber">
      <view class="number" wx:for="{{list}}" wx:key="index" data-index="{{index}}">
        <image wx:if="{{item.star==0}}" class="numberimg" mode="widthFix" src="{{item.img}}">image>
        <image wx:if="{{item.star==1}}" class="numberimg" mode="widthFix" src="{{checkb}}">image>
      view>
    view>
    <button bindtap="qiandao" class="weicheck" wx:if="{{datecheck==0}}">签到领积分button>
    <button wx:if="{{datecheck==1}}" class="yicheck">已签到button>
  view>
  

wxss

.check {
  width: 90%;
  height: 420rpx;
  margin-left: 5%;
  border-radius: 16rpx;
  background-color: white;
  position: absolute;
  top: 10%;
  box-shadow: 2px 2px 5px #e2e5e9;
}

.checknumber {
  display: flex;
  flex-direction: row;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  width: 80%;
  margin-left: 10%;
  justify-content: space-around;
}

.numberimg {
  width: 60rpx;
}

.yicheck {
  background: #ff98be;
  color: white;
  width: 50%;
  border-radius: 60rpx;
}

.weicheck {
  border-radius: 60rpx;
  width: 50%;
}

js

// pages/arrive/arrive.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  	chenumber: "1",	//表示签到从1开始，用在下面获取star中
    datecheck:"0",  //为0表示今日未签到，为1表示已签到
    checkb:"../../img/arrive/check.png",  //已签到图片
    //当star等于1表示这一天已签到
    list:[
      {
        id:1,
        star:1,
        img:"../../img/arrive/1a.png",
      },
      {
        id: 2,
        star: 0,
        img: "../../img/arrive/2a.png",
      },
      {
        id: 3,
        star: 0,
        img: "../../img/arrive/3a.png",
      },
      {
        id: 4,
        star: 0,
        img: "../../img/arrive/4a.png",
      },
      {
        id: 5,
        star: 0,
        img: "../../img/arrive/5a.png",
      },
    ]
  },

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

  },
  // 签到事件
  qiandao:function(e){
    console.log(e)
    let that = this
    let temp = 'list[' + that.data.chenumber + '].star'
    console.log(that.data.list[0].star)
        that.setData({
          [temp]: 1,
          datecheck:1,
        });
    wx.showToast({
      title: '签到成功',
      icon: 'success',
      duration: 2000
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

重点：签到事件
'list[' + that.data.chenumber + '].star'获取list的star

 // 签到事件
  qiandao:function(e){
    console.log(e)
    let that = this
    let temp = 'list[' + that.data.chenumber + '].star'
    console.log(that.data.list[0].star)
        that.setData({
          [temp]: 1,
          datecheck:1,
        });
    wx.showToast({
      title: '签到成功',
      icon: 'success',
      duration: 2000
    })
  },