Add server and mini-program pagination for shared lists

weapp/pages/album/album.js

@@ -1,3 +1,4 @@
+const { itemsOf, startList, current, mergeUnique, applyList, failList, finishList, withListPagination } = require('../../utils/list-pagination');
 const { currentUserLocation } = require('../../utils/user-location');
 const { photoForm, metadataRows } = require('../../utils/photo-metadata');
 const { withDataCache } = require('../../utils/page-cache');
@@ -5,7 +6,7 @@ const { getLayout } = require('../../utils/layout');
 // pages/album/album.js - 日记式分组相册
 const { api, getImageUrl, API_BASE, uploadFileCompat } = require('../../utils/request');
 const { requestSubscribeAfterAction } = require('../../utils/subscribe');
-Page(withDataCache({
+Page(withDataCache(withListPagination({
   onResize: function() { this.setData(getLayout()); },
   data: { loading: true, loadError: false,
     batches: [],
@@ -86,7 +87,8 @@ Page(withDataCache({
         return { ...batch, photos, metadata: metadataRows(photos) };
       });
       const previewImages = this.data.previewImages.map(item => String(item.id) === String(photo.id) ? { ...item, ...form } : item);
-      this.setData({ batches, previewImages, showPhotoEditor: false });
+      this._photoRows = (this._photoRows || []).map(item => String(item.id) === String(photo.id) ? { ...item, ...form } : item);
+      this.setData({ batches, photoItems: this._photoRows, previewImages, showPhotoEditor: false });
       wx.showToast({ title: '照片信息已保存', icon: 'success' });
     } catch (error) {
       wx.showToast({ title: (error && (error.error || error.message)) || '保存失败，请重试', icon: 'none' });
@@ -129,15 +131,14 @@ Page(withDataCache({
     };
   },
 
-  loadData: async function() {
-    if (this._pageLoading) return;
-    this._pageLoading = true;
-    this.setData({loading: !this._hasCachedData, loadError:false});
+  loadData: async function(page) {
+    const ticket = startList(this,page);
+    if (!ticket) return;
     try {
       var self = this;
       var albumId = this.data.albumId;
       if (!albumId) {
-        var albums = await api.albumList();
+        var albums = itemsOf(await api.albumList({page:1,page_size:1}));
         if (albums && albums.length > 0) {
           albumId = albums[0].id;
           this.setData({ albumId: albumId });
@@ -145,11 +146,14 @@ Page(withDataCache({
       }
       if (albumId) {
         // 共享内存缓存；写操作成功后自动失效。
-        var photos = await api.photos(albumId);
+        var result = await api.photos(albumId, {page:ticket.page,page_size:20});
+        if (!current(this,ticket)) return;
+        var photos = ticket.page === 1 ? itemsOf(result) : mergeUnique(this._photoRows || [], itemsOf(result));
         // 根据 batch_id 分组
         var batchMap = {};
         var myUid = wx.getStorageSync('userId');
         var info = await api.coupleInfo();
+        if (!current(this,ticket)) return;
         var p1 = info.partner1 || {}, p2 = info.partner2 || {};
         var nameMap = {};
         var avatarMap = {};
@@ -182,13 +186,13 @@ Page(withDataCache({
         var batches = Object.values(batchMap);
         batches.sort(function(a, b) { return b.created_at > a.created_at ? 1 : -1; });
         batches.forEach(function(batch) { batch.metadata = metadataRows(batch.photos); });
-        this.setData({ batches: batches });
-      } else { this.setData({batches:[]}); }
+        this._photoRows = photos;
+        applyList(this,ticket,result,itemsOf(result),'photoItems',{batches:batches});
+      } else { applyList(this,ticket,{items:[],total:0,has_more:false},[],'photoItems',{batches:[]}); }
     } catch (e) {
-      this.setData({loadError:true}); console.error(e); }
+      failList(this,ticket); console.error(e); }
     finally {
-      this._pageLoading = false;
-      this.setData({loading:false});
+      finishList(this,ticket);
       if (this._visible && this._pendingPhotoPicker && !this.data.loadError && this.data.albumId) {
         this._pendingPhotoPicker = false;
         this.chooseImage();
@@ -522,4 +526,4 @@ Page(withDataCache({
   goToAlbums: function() { wx.navigateBack(); },
   goHome: function() { wx.switchTab({ url: '/pages/index/index' }); },
   goProfile: function() { wx.switchTab({ url: '/pages/profile/profile' }); }
-}, {"loadData": ["photos", "albumList"]}));
+}, 'loadData'), {"loadData": ["photos", "albumList"]}));

weapp/pages/album/album.wxml

@@ -5,7 +5,7 @@
 
 
 
-<scroll-view class="page-bg" scroll-y show-scrollbar="{{false}}" bounces="{{true}}" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" wx:if="{{!showUploadModal}}">
+<scroll-view class="page-bg" scroll-y bindscrolltolower="loadMore" lower-threshold="120" show-scrollbar="{{false}}" bounces="{{true}}" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" wx:if="{{!showUploadModal}}">
   <view class="container"><view class="j-row"><view><text class="j-eyebrow">MOMENTS WE KEEP</text><text class="j-page-title">相册里的片段</text></view><button class="j-button j-button-small" bindtap="chooseImage">＋ 照片</button></view>
 <page-state wx:if="{{loading}}" kind="loading" title="正在加载" /><page-state wx:elif="{{loadError}}" kind="error" title="加载失败" description="请检查网络后重新加载" action="重试" bind:action="loadData" />
     <view class="moments-list" wx:if="{{!loading && !loadError && batches.length > 0}}">
@@ -36,6 +36,7 @@
     </view>
   </view>
   
+<view class="j-pagination" wx:if="{{!loading && !loadError && total > 0}}"><text wx:if="{{loadingMore}}">正在加载…</text><text wx:elif="{{moreError}}" bindtap="loadMore">加载失败，点击重试</text><text wx:elif="{{hasMore}}" bindtap="loadMore">加载更多</text><text wx:else>已加载全部照片</text></view>
 </scroll-view>
 
 <view class="preview-overlay" wx:if="{{showPreview}}" bindtap="closePreview">