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

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>