基于微信小程序开发简约打卡程序及源码

<view class="container">
  <view>打卡</view>
  <view> {{time}}</view>
  <view> {{name}}</view>
  <view>
    <button class="btn" bindtap="submit">提交</button>
  </view>
  <view>
    <view>今日已打卡</view>
    <view>{{todayCount}}</view>
  </view>
  <view>
    <view>累计打卡 {{totalCount}}</view>
    <view>次</view>
  </view>
</view>

Page({
  data: {
    time: '',
    name: '',
    status: 'idle',
    todayCount: 0,
    totalCount: 0
  },
  onLoad: function() {
    // 初始化数据
    this.setData({
      time: new Date().toLocaleString(),
      name: '张三'
    });
    // 获取今日已打卡数量和累计打卡数量
    this.getCount();
  },
  submit: function() {
    // 处理提交逻辑
    if (this.data.status === 'idle') {
      this.setData({
        status: 'submitting'
      });
      // 模拟提交过程
      setTimeout(() => {
        this.setData({
          status: 'success',
          todayCount: this.data.todayCount + 1
        });
        // 保存打卡记录
        this.saveRecord({
          name: this.data.name,
          time: this.data.time
        });
      }, 2000);
    }
  },
  getCount: function() {
    // 获取今日已打卡数量和累计打卡数量
    this.setData({
      todayCount: 0,
      totalCount: 0
    });
    // 模拟已打卡记录
    const records = [
      {
        name: '李四',
        time: '2022-02-22 09:00:00'
      },
      {
        name: '王五',
        time: '2022-02-22 09:30:00'
      },
      {
        name: '张三',
        time: '2022-02-22 10:00:00'
      }
    ];
    // 统计今日已打卡数量和累计打卡数量
    records.forEach(record => {
      const date = new Date(record.time).toLocaleDateString();
      if (date === new Date().toLocaleDateString()) {
        this.setData({
          todayCount: this.data.todayCount + 1
        });
      }
      this.setData({
        totalCount: this.data.totalCount + 1
      });
    });
  },
  saveRecord: function(record) {
    // 保存打卡记录
    const records = [...this.data.records, record];
    this.setData({
      records: records
    });
  }
})

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50rpx;
}
.time {
  font-size: 32rpx;
  color: #333;
}
.name {
  font-size: 48rpx;
  color: #333;
  margin-top: 30rpx;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600rpx;
  height: 80rpx;
  margin-top: 30rpx;
  background-color: #4cd964;
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
  cursor: pointer;
}
.todayCount {
  font-size: 32rpx;
  color: #333;
  margin-top: 30rpx;
}
.totalCount {
  font-size: 32rpx;
  color: #333;
  margin-top: 30rpx;
}