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

weapp/pages/checkin-detail/checkin-detail.js

@@ -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();