init

项目初始化

pages/checkin/checkin.js

@@ -0,0 +1,211 @@
+const api = require('../../utils/api');
+const auth = require('../../utils/auth');
+
+const STATUSES = ['正常', '迟到', '请假', '不参加讨论', '早退'];
+const WEEKDAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+const STATUS_META = {
+  正常: '#2E7D32',
+  迟到: '#C67B30',
+  请假: '#3A7BD5',
+  早退: '#8B7A6A',
+  '不参加讨论': '#C0392B'
+};
+const STATUS_ITEMS = STATUSES.map((label) => ({
+  label,
+  color: STATUS_META[label] || '#C67B30'
+}));
+
+function errMessage(err) {
+  if (err && typeof err === 'object') {
+    if (err.detail) return String(err.detail);
+    if (err.error) return String(err.error);
+    if (err.message) return err.message;
+  }
+  return '';
+}
+
+function pad2(n) {
+  return n < 10 ? '0' + n : String(n);
+}
+
+function fmtTime(ts) {
+  if (!ts) return '';
+  const d = new Date(String(ts).replace(' ', 'T'));
+  if (isNaN(d.getTime())) return String(ts);
+  const now = new Date();
+  const startOfDay = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const diff = Math.round((startOfDay(now) - startOfDay(d)) / 86400000);
+  const hm = pad2(d.getHours()) + ':' + pad2(d.getMinutes());
+  if (diff === 0) return '今天 ' + hm;
+  if (diff === 1) return '昨天 ' + hm;
+  return pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + hm;
+}
+
+Page({
+  data: {
+    statuses: STATUSES,
+    statusItems: STATUS_ITEMS,
+    statusIndex: -1,
+    loading: true,
+    classDate: '',
+    weekday: '',
+    dayNum: '',
+    checked: false,
+    record: null,
+    statusColor: '',
+    statusBg: '',
+    history: [],
+    group: [],
+    groupName: '',
+    checkedCount: 0,
+    total: 0,
+    tab: 'group',
+    submitting: false,
+    refreshing: false,
+    loadError: '',
+  },
+
+  onShow() {
+    this.loadPage();
+  },
+
+  onPullDownRefresh() {
+    this.loadPage().then(() => wx.stopPullDownRefresh());
+  },
+
+  loadPage() {
+    this.setData({ loadError: '' });
+    return auth.ensureLogin()
+      .then((token) => {
+        if (!token) {
+          wx.switchTab({ url: '/pages/profile/profile' });
+          return;
+        }
+        return this.loadWeek();
+      })
+      .catch((err) => {
+        const msg = (err && (err.error || err.detail || err.message)) || '加载失败，请重试';
+        this.setData({ loading: false, loadError: msg });
+        wx.showToast({ title: msg, icon: 'none' });
+      });
+  },
+
+  onRetry() {
+    this.loadPage();
+  },
+
+  loadWeek() {
+    this.setData({ loading: true });
+    return api.request({ url: '/api/v1/checkin/week' }).then((res) => {
+      const classDate = res.class_date || '';
+      const weekday = WEEKDAYS[new Date(classDate + 'T00:00:00').getDay()] || '';
+      const dayNum = classDate.split('-')[2] || '';
+      const statusIndex = res.record && res.record.status
+        ? Math.max(0, STATUSES.indexOf(res.record.status))
+        : -1;
+      const statusColor = res.record ? (STATUS_META[res.record.status] || '#C67B30') : '';
+      this.setData({
+        classDate,
+        weekday,
+        dayNum,
+        checked: !!res.checked,
+        record: res.record || null,
+        statusIndex,
+        statusColor,
+        statusBg: statusColor ? statusColor + '1A' : ''
+      });
+      return this.loadGroup();
+    }).then(() => {
+      this.setData({ loading: false });
+    }).catch(() => {
+      this.setData({ loading: false });
+    });
+  },
+
+  loadGroup() {
+    const data = this.data.classDate ? { class_date: this.data.classDate } : {};
+    return api.request({ url: '/api/v1/checkin/group', data }).then((res) => {
+      const members = (res.members || []).map((m) => ({
+        ...m,
+        shortName: (m.name || '?').charAt(0),
+        timeText: m.checked && m.record ? fmtTime(m.record.checked_at) : ''
+      }));
+      const checkedCount = members.filter((m) => m.checked).length;
+      this.setData({
+        group: members,
+        groupName: res.group_name || '',
+        checkedCount,
+        total: members.length
+      });
+    }).catch(() => {});
+  },
+
+  loadHistory() {
+    return api.request({ url: '/api/v1/checkin/list', data: { page: 1, size: 20 } }).then((res) => {
+      const history = (res.list || []).map((item) => {
+        const color = STATUS_META[item.status] || '#C67B30';
+        return {
+          ...item,
+          timeText: fmtTime(item.checked_at),
+          color,
+          bg: color + '1A'
+        };
+      });
+      this.setData({ history });
+    }).catch(() => {});
+  },
+
+  onStatusTap(e) {
+    if (this.data.submitting) {
+      return;
+    }
+    const statusIndex = Number(e.currentTarget.dataset.index);
+    const status = STATUSES[statusIndex];
+    if (!status) {
+      return;
+    }
+    const prevIndex = this.data.statusIndex;
+    this.setData({ statusIndex, submitting: true });
+    api.request({
+      url: '/api/v1/checkin',
+      method: 'POST',
+      data: {
+        status,
+        class_date: this.data.classDate,
+        course_type: '会员课程'
+      }
+    }).then((res) => {
+      const record = res.record || null;
+      const statusColor = record ? (STATUS_META[record.status] || '#C67B30') : '';
+      this.setData({ submitting: false, checked: true, record, statusColor, statusBg: statusColor ? statusColor + '1A' : '' });
+      wx.showToast({ title: '打卡成功', icon: 'success' });
+      this.loadGroup();
+      if (this.data.tab === 'personal') {
+        this.loadHistory();
+      }
+    }).catch((err) => {
+      this.setData({ submitting: false, statusIndex: prevIndex });
+      wx.showToast({ title: errMessage(err) || '打卡失败', icon: 'none' });
+    });
+  },
+
+  switchTab(e) {
+    const tab = e.currentTarget.dataset.tab;
+    if (tab !== 'group' && tab !== 'personal') {
+      return;
+    }
+    this.setData({ tab });
+    if (tab === 'personal') {
+      this.loadHistory();
+    }
+  },
+
+
+  onRefresh() {
+    this.setData({ refreshing: true });
+    const task = this.data.tab === 'group' ? this.loadWeek() : this.loadHistory();
+    Promise.resolve(task).then(() => {
+      this.setData({ refreshing: false });
+    });
+  }
+});

pages/checkin/checkin.json

@@ -0,0 +1 @@
+{ "usingComponents": {} }

pages/checkin/checkin.wxml

@@ -0,0 +1,108 @@
+<!-- 加载失败 -->
+<block wx:if="{{loadError}}">
+  <view class="page">
+    <view class="error-card">
+      <view class="error-icon">!</view>
+      <view class="error-title">{{loadError}}</view>
+      <button class="btn-retry" hover-class="btn-hover" bindtap="onRetry">重新加载</button>
+    </view>
+  </view>
+</block>
+
+<!-- 首次加载骨架屏 -->
+<block wx:if="{{loading}}">
+  <view class="page">
+    <view class="skeleton-card">
+      <view class="sk sk-title"></view>
+      <view class="sk sk-line w60"></view>
+      <view class="sk sk-line w90"></view>
+    </view>
+    <view class="skeleton-list">
+      <view class="sk sk-row" wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="*this"></view>
+    </view>
+  </view>
+</block>
+
+<block wx:else>
+  <view class="page fade-in">
+    <view class="card top-card {{checked ? 'done-card' : ''}}">
+      <view class="status-row">
+        <view class="date-chip">
+          <view class="date-week">{{weekday}}</view>
+          <view class="date-num">{{dayNum}}</view>
+        </view>
+        <view class="status-main">
+          <view class="status-title {{checked ? 'done' : 'undone'}}">{{checked ? '已打卡' : '未打卡'}}</view>
+          <view class="status-sub">{{checked ? '已完成今日打卡' : '请选择状态完成打卡'}}</view>
+          <view class="hero-status" wx:if="{{checked}}">
+            <view class="hero-status-dot" style="background-color:{{statusColor}}"></view>
+            <text class="hero-status-label" style="color:{{statusColor}}">{{record.status}}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="pills-grid {{submitting ? 'disabled' : ''}}">
+        <view
+          wx:for="{{statusItems}}"
+          wx:key="label"
+          class="pill {{statusIndex === index ? 'active' : ''}}"
+          style="background-color:{{statusIndex === index ? item.color : '#ffffff'}};border-color:{{statusIndex === index ? item.color : '#D8C7B4'}};color:{{statusIndex === index ? '#ffffff' : '#5A4A3A'}}"
+          data-index="{{index}}"
+          hover-class="pill-hover"
+          bindtap="onStatusTap"
+        >
+          <view class="dot" style="background-color:{{statusIndex === index ? '#ffffff' : item.color}}"></view>
+          <text>{{item.label}}</text>
+        </view>
+        <view class="submitting" wx:if="{{submitting}}">提交中…</view>
+      </view>
+
+    </view>
+
+    <view class="record-panel">
+      <view class="tabs">
+        <view class="tab {{tab === 'group' ? 'active' : ''}}" data-tab="group" hover-class="tab-hover" bindtap="switchTab">小组</view>
+        <view class="tab {{tab === 'personal' ? 'active' : ''}}" data-tab="personal" hover-class="tab-hover" bindtap="switchTab">个人</view>
+      </view>
+      <scroll-view class="record-scroll" scroll-y refresher-enabled refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
+        <view class="record-inner" wx:if="{{tab === 'group'}}">
+          <view class="group-head" wx:if="{{groupName}}">
+            <view class="group-title">{{groupName}} · {{classDate}}</view>
+            <view class="group-progress">{{checkedCount}}/{{total}} 已打卡</view>
+          </view>
+          <view class="empty" wx:if="{{!groupName}}">
+            <view class="empty-icon">👥</view>
+            <view class="empty-text">暂无小组，请联系老师分配</view>
+          </view>
+          <view class="empty" wx:elif="{{group.length === 0}}">
+            <view class="empty-icon">📭</view>
+            <view class="empty-text">本周暂无打卡记录</view>
+          </view>
+          <view wx:for="{{group}}" wx:key="student_id" class="member {{item.checked ? 'ok' : 'idle'}}">
+            <view class="member-avatar {{item.checked ? 'ok' : ''}}">{{item.shortName}}</view>
+            <view class="member-info">
+              <view class="member-name">{{item.name}}</view>
+              <view class="member-meta">{{item.checked ? ('打卡 ' + item.timeText) : ''}}</view>
+            </view>
+            <view class="member-badge {{item.checked ? 'ok' : 'idle'}}">{{item.checked ? item.record.status : '未打卡'}}</view>
+          </view>
+        </view>
+        <view wx:else class="record-inner">
+          <view class="empty" wx:if="{{history.length === 0}}">
+            <view class="empty-icon">📒</view>
+            <view class="empty-text">暂无个人打卡记录</view>
+          </view>
+          <view class="history-item" wx:for="{{history}}" wx:key="id">
+            <view class="history-head">
+              <view class="history-date">{{item.class_date}}</view>
+              <view class="history-badge" style="color:{{item.color}};background:{{item.bg}}">{{item.status}}</view>
+            </view>
+            <view class="history-time">{{item.timeText}}</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</block>
+
+

pages/checkin/checkin.wxss

@@ -0,0 +1,394 @@
+/* ---- error state ---- */
+.error-card {
+  margin-top: 160rpx;
+  text-align: center;
+  padding: 0 40rpx;
+}
+.error-icon {
+  width: 96rpx;
+  height: 96rpx;
+  line-height: 96rpx;
+  margin: 0 auto 24rpx;
+  border-radius: 50%;
+  background: #fdecea;
+  color: #c0392b;
+  font-size: 48rpx;
+  font-weight: 700;
+  text-align: center;
+}
+.error-title {
+  color: #5A4A3A;
+  font-size: 28rpx;
+  margin-bottom: 48rpx;
+  line-height: 1.6;
+}
+.btn-retry {
+  display: inline-block;
+  min-width: 240rpx;
+  background: #C67B30;
+  color: #fff;
+  border-radius: 12rpx;
+}
+.btn-hover { opacity: .85; transform: scale(.98); }
+
+.page {
+  padding: 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #FDFBF7;
+}
+
+.fade-in {
+  animation: fadeIn .3s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8rpx); }
+  to { opacity: 1; transform: none; }
+}
+
+.card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(44, 24, 16, 0.05);
+}
+.top-card {
+  flex-shrink: 0;
+  border: 1rpx solid transparent;
+  box-shadow: 0 8rpx 24rpx rgba(44, 24, 16, 0.08);
+}
+.top-card.done-card {
+  border-color: rgba(46, 125, 50, 0.25);
+}
+
+/* 打卡状态卡 */
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+.date-chip {
+  width: 124rpx;
+  flex-shrink: 0;
+  border-radius: 14rpx;
+  padding: 16rpx 8rpx;
+  text-align: center;
+  background: #2C1810;
+  color: #FDFBF7;
+}
+.date-week {
+  font-size: 22rpx;
+  opacity: 0.75;
+}
+.date-num {
+  font-size: 40rpx;
+  font-weight: 800;
+  margin-top: 6rpx;
+  line-height: 1;
+}
+.status-main {
+  flex: 1;
+  min-width: 0;
+}
+.status-title {
+  font-size: 40rpx;
+  font-weight: 800;
+}
+.status-title.done {
+  color: #2E7D32;
+}
+.status-title.undone {
+  color: #C67B30;
+}
+.status-sub {
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: #7A6A5C;
+}
+
+/* 状态按钮：两行布局 */
+.pills-grid {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-top: 28rpx;
+  padding-top: 24rpx;
+  border-top: 1rpx solid #F2EDE7;
+}
+.pills-grid.disabled {
+  opacity: 0.7;
+}
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 30%;
+  min-width: 180rpx;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 18rpx 20rpx;
+  border-radius: 999rpx;
+  border: 1rpx solid #D8C7B4;
+  background: #FFF;
+  color: #5A4A3A;
+  font-size: 26rpx;
+  line-height: 1;
+}
+.pill.active {
+  background: #C67B30;
+  border-color: #C67B30;
+  color: #fff;
+  box-shadow: 0 6rpx 14rpx rgba(198, 123, 48, 0.22);
+}
+.pill-hover {
+  opacity: 0.85;
+  transform: scale(0.97);
+}
+.dot {
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+.submitting {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(253, 251, 247, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #C67B30;
+  font-weight: 700;
+  border-radius: 12rpx;
+  z-index: 2;
+}
+
+/* 记录区 */
+.record-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin-top: 24rpx;
+}
+.record-scroll {
+  flex: 1;
+  min-height: 0;
+}
+.record-inner {
+  padding: 4rpx 4rpx 24rpx;
+}
+.tabs {
+  display: flex;
+  border-bottom: 1rpx solid #eee;
+  margin-bottom: 8rpx;
+}
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 22rpx 0;
+  color: #7A6A5C;
+  transition: color .15s ease;
+}
+.tab.active {
+  color: #C67B30;
+  font-weight: 700;
+  border-bottom: 4rpx solid #C67B30;
+  transform: translateY(-2rpx);
+}
+.tab-hover {
+  background: #f6efe6;
+}
+
+/* 小组头部 + 进度 */
+.group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12rpx 8rpx;
+}
+.group-title {
+  color: #C67B30;
+  font-weight: 700;
+  font-size: 26rpx;
+}
+.group-progress {
+  padding: 6rpx 14rpx;
+  border-radius: 999rpx;
+  background: #f6efe6;
+  color: #C67B30;
+  font-size: 22rpx;
+}
+
+/* 成员列表 */
+.member {
+  display: flex;
+  align-items: center;
+  padding: 18rpx 8rpx;
+  border-bottom: 1rpx solid #f2ede7;
+}
+.member-avatar {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: #f6efe6;
+  color: #C67B30;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.member-avatar.ok {
+  background: #e8f4eb;
+  color: #2E7D32;
+}
+.member-info {
+  flex: 1;
+  min-width: 0;
+  margin-left: 16rpx;
+}
+.member-name {
+  font-size: 28rpx;
+  color: #2C1810;
+}
+.member.ok .member-name {
+  color: #2E7D32;
+}
+.member-meta {
+  margin-top: 6rpx;
+  font-size: 22rpx;
+  color: #8B7A6A;
+}
+.member-badge {
+  flex-shrink: 0;
+  margin-left: 12rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+}
+.member-badge.ok {
+  background: #e8f4eb;
+  color: #2E7D32;
+}
+.member-badge.idle {
+  background: #f2ede7;
+  color: #8B7A6A;
+}
+
+/* 历史 */
+.history-item {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(44, 24, 16, 0.04);
+}
+.history-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.history-date {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #2C1810;
+}
+.history-badge {
+  padding: 6rpx 14rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+}
+.history-time {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #999;
+}
+
+/* 空态 */
+.empty {
+  padding: 64rpx 24rpx;
+  text-align: center;
+  color: #B6A996;
+  font-size: 26rpx;
+}
+.empty-icon {
+  width: 96rpx;
+  height: 96rpx;
+  line-height: 96rpx;
+  margin: 0 auto 20rpx;
+  border-radius: 50%;
+  background: #f6efe6;
+  font-size: 48rpx;
+  text-align: center;
+}
+.empty-text {
+  color: #B6A996;
+}
+
+/* 骨架屏 */
+.skeleton-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(44, 24, 16, 0.04);
+}
+.sk {
+  background: #F0EBE3;
+  border-radius: 12rpx;
+}
+.sk-title {
+  width: 60%;
+  height: 40rpx;
+  margin-bottom: 24rpx;
+}
+.sk-line {
+  height: 24rpx;
+  margin-top: 16rpx;
+}
+.w60 {
+  width: 60%;
+}
+.w90 {
+  width: 90%;
+}
+.skeleton-list {
+  margin-top: 24rpx;
+}
+.sk-row {
+  height: 96rpx;
+  margin-bottom: 16rpx;
+}
+
+/* 顶部当前状态徽标 */
+.hero-status {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 14rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 999rpx;
+  background: #F6F0E7;
+  font-size: 24rpx;
+}
+.hero-status-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  margin-right: 10rpx;
+  flex-shrink: 0;
+}
+.hero-status-label {
+  font-weight: 700;
+}
+
+
+