更新：增加课程首页分类跳转列表页；优化全站列表分页加载；

pages/user/index.vue

@@ -324,7 +324,7 @@ $theme-color: #54a966;
   align-items: center;
   justify-content: space-between;
   padding: 30rpx;
-  border-bottom: 1rpx solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
   
   &:last-child {
     border-bottom: none;

pages/user/myBook/index.vue

@@ -1,131 +1,64 @@
 <template>
-  <view class="my-book-page">
-    <!-- 自定义导航栏 -->
-    <nav-bar :title="$t('book.myBook')"></nav-bar>
+  <z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="loadBookList">
+    <template #top>
+      <!-- 自定义导航栏 -->
+      <nav-bar :title="$t('book.myBook')"></nav-bar>
+    </template>
     
     <!-- 书籍列表 -->
-    <scroll-view 
-      v-if="(bookList && bookList.length > 0) || loading"
-      scroll-y 
-      class="book-scroll"
-      :style="{ height: scrollHeight + 'px' }"
-      :scroll-into-view="scrollTarget"
-      @scrolltolower="loadMore"
-    >
-      <view :id="scrollTarget" />
-      <view class="book-list">
-        <BookCard 
-          v-for="item in bookList" 
-          :key="item.id"
-          :book="item"
-          @click="goToDetail(item.id)"
-          @read="goToReader(item.id)"
-          @listen="goToListen(item.id)"
-          @review="goToReview(item.id)"
-        />
-        
-        <!-- 加载提示 -->
-        <view v-if="showLoadMore && hasMore" class="load-tip">
-          <text>{{ $t('common.loadMore') }}</text>
-        </view>
-        <view v-if="!hasMore && bookList && bookList.length > 0" class="load-tip">
-          <text>{{ $t('common.noMore') }}</text>
-        </view>
-      </view>
-    </scroll-view>
+    <view v-if="(bookList && bookList.length > 0)" class="book-list">
+      <BookCard 
+        v-for="item in bookList" 
+        :key="item.id"
+        :book="item"
+        @click="goToDetail(item.id)"
+        @read="goToReader(item.id)"
+        @listen="goToListen(item.id)"
+        @review="goToReview(item.id)"
+      />
+    </view>
     
     <!-- 空状态 -->
-    <view v-else-if="!loading" class="empty-state">
+    <view v-else-if="!loading && !firstLoad" class="empty-state">
       <image src="@/static/null_img.png" mode="aspectFit" />
       <text class="empty-text">{{ $t('book.nullText') }}</text>
       <wd-button type="primary" @click="goToBuy">
         {{ $t('book.choose') }}
       </wd-button>
     </view>
-  </view>
+  </z-paging>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { bookApi } from '@/api/modules/book'
 import type { IBook } from '@/types/book'
 import BookCard from '@/components/book/BookCard.vue'
 
 const { t } = useI18n()
+const paging = ref<any>()
 
 // 数据状态
 const bookList = ref<IBook[]>([])
 const loading = ref(false)
-const page = ref({
-  current: 1,
-  limit: 10
-})
-const total = ref(0)
-const scrollTarget = ref('top')
-const scrollHeight = ref(0)
-const showLoadMore = ref(false)
-
-// 计算属性
-const hasMore = computed(() => bookList.value && bookList.value.length < total.value)
-
-// 生命周期
-onMounted(() => {
-  initScrollHeight()
-  loadBookList()
-})
-
-// 初始化滚动区域高度
-function initScrollHeight() {
-  const systemInfo = uni.getSystemInfoSync()
-  const statusBarHeight = systemInfo.statusBarHeight || 0
-  let navBarHeight = 44
-  if (systemInfo.model.includes('iPhone')) {
-    const modelNumber = parseInt(systemInfo.model.match(/\d+/)?.[0] || '0')
-    if (modelNumber >= 11) {
-      navBarHeight = 48
-    }
-  }
-  const totalNavHeight = statusBarHeight + navBarHeight
-  scrollHeight.value = systemInfo.windowHeight - totalNavHeight
-}
+const firstLoad = ref(true)
 
 // 加载书单列表
-async function loadBookList() {
-  if (loading.value || (!hasMore.value && bookList.value && bookList.value.length > 0)) {
-    return
-  }
-  
+async function loadBookList(pageNo: number, pageSize: number) {
   loading.value = true
-  
   try {
-    const res = await bookApi.getMyBooks(page.value.current, page.value.limit)
-    
-    if (res.page && res.page.records) {
-      total.value = res.page.total
-      const newBooks = res.page.records
-      
-      if (newBooks.length > 0) {
-        bookList.value = [...(bookList.value || []), ...newBooks]
-        page.value.current += 1
-        showLoadMore.value = true
-      }
-    }
+    const res = await bookApi.getMyBooks(pageNo, pageSize)
+    paging.value.complete(res.page.records)
   } catch (error) {
+    paging.value.complete(false)
     console.error('Failed to load book list:', error)
   } finally {
+    firstLoad.value = false
     loading.value = false
   }
 }
 
-// 加载更多
-function loadMore() {
-  if (!loading.value && hasMore.value) {
-    loadBookList()
-  }
-}
-
 // 页面跳转
 function goToDetail(bookId: number) {
   uni.navigateTo({
@@ -156,22 +89,6 @@ function goToBuy() {
     url: '/pages/book/index'
   })
 }
-
-// 页面显示时重新加载
-onShow(() => {
-  // 回到顶部
-  scrollTarget.value = 'top'
-  setTimeout(() => {
-    scrollTarget.value = ''
-  }, 300)
-  
-  // 重置并重新加载
-  bookList.value = []
-  page.value.current = 1
-  total.value = 0
-  showLoadMore.value = false
-  loadBookList()
-})
 </script>
 
 <style lang="scss" scoped>

pages/user/order/index.vue

@@ -1,62 +1,42 @@
 <template>
-  <view class="order-page">
-    <!-- 自定义导航栏 -->
-    <nav-bar :title="$t('user.myOrders')"></nav-bar>
+  <z-paging ref="paging" v-model="orderList" auto-show-back-to-top class="order-page" @query="getData">
+    <template #top>
+      <!-- 自定义导航栏 -->
+      <nav-bar :title="$t('user.myOrders')"></nav-bar>
+    </template>
 
     <!-- 订单列表 -->
-    <scroll-view 
-      v-if="orderList.length > 0"
-      scroll-y 
-      class="order-scroll"
-      @scrolltolower="loadMore"
-    >
-      <view class="order-list">
-        <view 
-          v-for="order in orderList" 
-          :key="order.id" 
-          class="order-item"
-        >
-          <view class="order-header">
-            <text class="book-name">{{ order.bookEntity.name }}</text>
-            <view class="price-info">
-              <image 
-                v-if="order.paymentMethod === '4'" 
-                src="/static/icon/coin.png" 
-                class="payment-icon"
-              />
-              <image 
-                v-else 
-                src="/static/icon/currency.png" 
-                class="payment-icon"
-              />
-              <text class="price">{{ order.orderMoney }}</text>
-              <text v-if="order.paymentMethod === '5'" class="currency">NZD</text>
-            </view>
+    <view class="order-list">
+      <view 
+        v-for="order in orderList" 
+        :key="order.id" 
+        class="order-item"
+      >
+        <view class="order-header">
+          <text class="book-name">{{ order.bookEntity.name }}</text>
+          <view class="price-info">
+            <image 
+              v-if="order.paymentMethod === '4'" 
+              src="/static/icon/coin.png" 
+              class="payment-icon"
+            />
+            <image 
+              v-else 
+              src="/static/icon/currency.png" 
+              class="payment-icon"
+            />
+            <text class="price">{{ order.orderMoney }}</text>
+            <text v-if="order.paymentMethod === '5'" class="currency">NZD</text>
           </view>
-          <text class="order-sn">
-            {{ $t('user.orderSn') }}
-            {{ order.orderSn }}
-          </text>
-          <text class="create-time">{{ order.createTime }}</text>
         </view>
+        <text class="order-sn">
+          {{ $t('user.orderSn') }}
+          {{ order.orderSn }}
+        </text>
+        <text class="create-time">{{ order.createTime }}</text>
       </view>
-
-      <!-- 加载提示 -->
-      <view class="load-tips">
-        <wd-divider v-if="hasMore && showLoadTip">
-          {{ $t('common.loadMore') }}
-        </wd-divider>
-        <wd-divider v-if="!hasMore && showLoadTip">
-          {{ $t('common.noMore') }}
-        </wd-divider>
-      </view>
-    </scroll-view>
-
-    <!-- 空状态 -->
-    <view v-else-if="!loading" class="empty-state">
-      <text class="empty-text">{{ $t('common.noData') }}</text>
     </view>
-  </view>
+  </z-paging>
 </template>
 
 <script setup lang="ts">
@@ -66,101 +46,23 @@ import type { IOrder } from '@/types/user'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-
-// 导航栏高度
-const statusBarHeight = ref(0)
-const navbarHeight = ref('44px')
+const paging = ref<any>(null)
 
 // 订单列表
 const orderList = ref<IOrder[]>([])
 
-// 分页信息
-const page = ref({
-  current: 1,
-  limit: 10
-})
-
-// 加载状态
-const loading = ref(false)
-const hasMore = ref(true)
-const showLoadTip = ref(false)
-const total = ref(0)
-
-/**
- * 获取导航栏高度
- */
-const getNavbarHeight = () => {
-  const systemInfo = uni.getSystemInfoSync()
-  statusBarHeight.value = systemInfo.statusBarHeight || 0
-  
-  let navBarHeight = 44
-  if (systemInfo.model.indexOf('iPhone') !== -1 && parseInt(systemInfo.model.slice(-2)) >= 11) {
-    navBarHeight = 48
-  }
-  
-  const totalHeight = statusBarHeight.value + navBarHeight
-  navbarHeight.value = totalHeight + 'px'
-}
-
 /**
  * 获取订单列表
  */
-const getData = async () => {
-  if (loading.value || !hasMore.value) {
-    return
-  }
-
+const getData = async (page: number, pageSize: number) => {
   try {
-    loading.value = true
-
-    const res = await getOrderList(page.value.current, page.value.limit)
-
-    if (res.orders && res.orders.records) {
-      total.value = res.orders.total
-      const records = res.orders.records
-
-      if (records.length > 0) {
-        orderList.value = [...orderList.value, ...records]
-        page.value.current += 1
-        showLoadTip.value = true
-
-        // 判断是否还有更多数据
-        if (orderList.value.length >= total.value || records.length < page.value.limit) {
-          hasMore.value = false
-        }
-      } else {
-        hasMore.value = false
-      }
-    }
+    const res = await getOrderList(page, pageSize)
+    paging.value.complete(res.orders.records)
   } catch (error) {
+    paging.value.complete(false)
     console.error('获取订单列表失败:', error)
-  } finally {
-    loading.value = false
   }
 }
-
-/**
- * 加载更多
- */
-const loadMore = () => {
-  if (!loading.value && hasMore.value) {
-    getData()
-  }
-}
-
-/**
- * 返回上一页
- */
-const goBack = () => {
-  uni.navigateBack({
-    delta: 1
-  })
-}
-
-onMounted(() => {
-  getNavbarHeight()
-  getData()
-})
 </script>
 
 <style lang="scss" scoped>