微信小程序制作学习计划打卡记录页面代码

以下是一个简单的微信小程序制作学习计划打卡记录页面的代码示例：

<!-- index.wxml -->
<view class="container">
  <view class="header">学习计划打卡记录</view>
  <view class="content">
    <view class="plan">
      <view class="plan-title">今日计划</view>
      <view class="plan-item" wx:for="{{planList}}" wx:key="index">
        <checkbox value="{{item.checked}}" bindchange="onPlanChange">{{item.title}}</checkbox>
      </view>
    </view>
    <view class="record">
      <view class="record-title">打卡记录</view>
      <view class="record-item" wx:for="{{recordList}}" wx:key="index">
        <checkbox checked="{{item.checked}}" disabled="{{!item.enable}}">{{item.date}}</checkbox>
      </view>
    </view>
  </view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: #007aff;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.plan {
  margin-bottom: 20px;
}

.plan-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.plan-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.record-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

// index.js
Page({
  data: {
    planList: [
      { title: '阅读一篇英文文章', checked: false },
      { title: '学习一小时编程', checked: false },
      { title: '完成一个小项目', checked: false },
    ],
    recordList: [],
  },
  onPlanChange(event) {
    const { index } = event.currentTarget.dataset;
    const { value } = event.detail;
    this.setData({
      [`planList[${index}].checked`]: value,
    });
    this.updateRecordList();
  },
  updateRecordList() {
    const recordList = [];
    const today = new Date().toLocaleDateString();
    this.data.planList.forEach((plan, index) => {
      if (plan.checked) {
        recordList.push({
          date: today,
          checked: true,
          enable: true,
        });
      } else {
        const lastRecord = this.data.recordList[index - recordList.length];
        if (lastRecord && lastRecord.date === today) {
          recordList.push(lastRecord);
        } else {
          recordList.push({
            date: today,
            checked: false,
            enable: false,
          });
        }
      }
    });
    this.setData({ recordList });
  },
});

这个页面包含两个部分：学习计划和打卡记录。学习计划部分使用 `checkbox` 组件表示每日计划，当用户勾选计划后，会更新打卡记录部分的内容。打卡记录部分使用 `checkbox` 组件表示每天的打卡情况，已经打卡过的日期会被禁用。

在 `onPlanChange` 方法中，我们处理计划勾选状态的变化，并且调用 `updateRecordList` 方法更新打卡记录。在 `updateRecordList` 方法中，我们根据计划的勾选状态和之前的打卡记录生成新的打卡记录。这个方法会在页面加载和计划勾选状态变化时被调用。