为打卡详情记录增加分页并保持全量统计

2026-10-11 09:50:36 +08:00
parent 7133ea583d
commit 2ffee9d7fb
7 changed files with 153 additions and 29 deletions
@@ -7,7 +7,7 @@ const { requestSubscribeAfterAction } = require('../../utils/subscribe');
 const COOLDOWN = 5000;
 Page(withDataCache({
  onResize: function() { this.setData(getLayout()); },
-  data: { loading: true, loadError: false, item: null, logs: [], freqLabel: '', typeLabel: '', myStreak: 0, partnerStreak: 0, showCheckModal: false, checkPhoto: '', checkNote: '', lastActionTime: 0, detailId: 0, myAvatar: '', partnerAvatar: '', myName: '我', partnerName: 'TA' },
+  data: { loading: true, loadError: false, item: null, logs: [], logsPage: 1, logsTotal: 0, logsHasMore: false, logsLoading: false, logsError: false, freqLabel: '', typeLabel: '', myStreak: 0, partnerStreak: 0, showCheckModal: false, checkPhoto: '', checkNote: '', lastActionTime: 0, detailId: 0, myAvatar: '', partnerAvatar: '', myName: '我', partnerName: 'TA' },

  onLoad: function(options) {
    this.setData(getLayout());
@@ -57,9 +57,11 @@ Page(withDataCache({
  loadDetail: async function(id) {
    if (this._pageLoading) return;
    this._pageLoading = true;
+    this._logsGeneration = (this._logsGeneration || 0) + 1;
+    this.setData({ logsLoading: false, logsError: false });
    this.setData({loading: !this._hasCachedData, loadError:false});
    try {
-      var data = await api.checkinDetail(id);
+      var data = await api.checkinDetail(id, { page: 1, page_size: 20 });
      var item = data.item || {};
      var myUid = wx.getStorageSync('userId');
      var freqLabels = { daily: '每天', weekly: '每周', monthly: '每月', once: '一次', unlimited: '不限' };
@@ -73,11 +75,7 @@ Page(withDataCache({
      var partnerAvatar = this.data.partnerAvatar;
      var myName = this.data.myName;
      var partnerName = this.data.partnerName;
-      var logs = (data.logs || []).map(function(l) {
-        l.time = l.created_at ? l.created_at.substring(0, 16).replace('T', ' ') : '';
-        l.photoUrl = l.photo ? getImageUrl(l.photo) : '';
-        return l;
-      });
+      var logs = this.formatLogs(data.logs || []);
      // 根据打卡权限类型映射统计数据
      var isCreator = (myUid == item.created_by);
      var showMyStats = (item.type == 'both') || (item.type == 'first');
@@ -93,6 +91,8 @@ Page(withDataCache({
      var pageData = {
        item: item,
        logs: logs,
+        logsPage: 1, logsTotal: Number(data.total) || logs.length,
+        logsHasMore: data.has_more === true, logsError: false,
        freqLabel: freqLabel,
        typeLabel: typeLabel,
        myStreak: (item.type == 'both') ? (item.my_streak || 0) : checkinStreak,
@@ -118,6 +118,37 @@ Page(withDataCache({
    finally { this._pageLoading = false; this.setData({loading:false}); }
  },

+  formatLogs: function(logs) {
+    return logs.map(function(log) {
+      return Object.assign({}, log, {
+        time: log.created_at ? log.created_at.substring(0, 16).replace('T', ' ') : '',
+        photoUrl: log.photo ? getImageUrl(log.photo) : ''
+      });
+    });
+  },
+  loadMoreLogs: async function() {
+    if (this._pageLoading || this.data.loading || this.data.loadError || this.data.logsLoading || !this.data.logsHasMore) return;
+    var generation = this._logsGeneration;
+    var page = this.data.logsPage + 1;
+    this.setData({ logsLoading: true, logsError: false });
+    try {
+      var data = await api.checkinDetail(this.data.detailId, { page: page, page_size: 20 });
+      if (generation !== this._logsGeneration) return;
+      var seen = new Set(this.data.logs.map(function(log) { return String(log.id); }));
+      var added = this.formatLogs(data.logs || []).filter(function(log) {
+        var id = String(log.id);
+        if (seen.has(id)) return false;
+        seen.add(id); return true;
+      });
+      this.setData({ logs: this.data.logs.concat(added), logsPage: page,
+        logsTotal: Number(data.total) || 0, logsHasMore: data.has_more === true });
+    } catch (e) {
+      if (generation === this._logsGeneration) this.setData({ logsError: true });
+    } finally {
+      if (generation === this._logsGeneration) this.setData({ logsLoading: false });
+    }
+  },
+
  // ===== 打卡操作 =====
  showCheckinModal: function() {
    var now = Date.now();
@@ -2,7 +2,7 @@
 <launch-transition />
 <!-- pages/checkin-detail/checkin-detail.wxml - 打卡详情 -->
 <app-nav title="打卡详情" back="{{true}}" />
-<scroll-view class="page-bg" scroll-y show-scrollbar="{{false}}" bounces="{{true}}" style="height:100vh;" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd">
+<scroll-view class="page-bg" scroll-y show-scrollbar="{{false}}" bounces="{{true}}" bindscrolltolower="loadMoreLogs" lower-threshold="120" style="height:100vh;" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd">
  <view class="c-body">
 <page-state wx:if="{{loading}}" kind="loading" title="正在加载详情" /><page-state wx:elif="{{loadError}}" kind="error" title="详情加载失败" action="重试" bind:action="retryDetail" />
 <block wx:else>
@@ -92,7 +92,7 @@
    <button class="detail-checkin-btn" wx:if="{{item.can_checkin}}" bindtap="showCheckinModal" hover-class="none">记录这一次</button>

    <!-- 打卡记录列表 -->
-    <text class="section-title">打卡记录</text>
+    <text class="section-title">打卡记录 · {{logsTotal}} 条</text>
    <view class="log-list" wx:if="{{logs.length > 0}}">
      <view class="log-item" wx:for="{{logs}}" wx:key="id">
        <view class="log-dot" style="background:{{item.avatar ? '#B74768' : '#9C27B0'}};"></view>
@@ -116,6 +116,12 @@
      <text>📭</text>
      <text>暂无打卡记录</text>
    </view>
+    <view class="logs-footer" wx:if="{{logs.length > 0}}">
+      <text wx:if="{{logsLoading}}">正在加载…</text>
+      <text wx:elif="{{logsError}}" bindtap="loadMoreLogs">加载失败，点击重试</text>
+      <text wx:elif="{{logsHasMore}}" bindtap="loadMoreLogs">加载更多</text>
+      <text wx:else>已加载全部记录</text>
+    </view>
  </block>
 </view>
  
@@ -22,3 +22,5 @@
@import '../../styles/button-theme.wxss';

@import '../../styles/typography.wxss';
+
+.logs-footer { padding:28rpx 0; text-align:center; color:#85776D; font-size:23rpx; }