Explorar el Código

fix(order): 优化订单页缓存和分页逻辑并增加退款详情跳转

- 注释切换开发环境接口地址,便于切换调试
- 维护order页缓存,新增tabLastPageMap以保存各tab分页状态
- 加载缓存时页面滚动至顶部,避免残留滚动位置
- 切换tab时清理相关缓存和分页状态,防止数据错乱
- 重写onReachBottom逻辑,优先使用tab分页状态,避免继承错误isLastPage
- 刷新操作清除当前tab所有缓存及分页状态
- 订单详情页新增handleRefundDetail方法,实现退款列表点击跳转退款详情页
- 退款列表项增加点击事件绑定handleRefundDetail
zhangtao hace 4 días
padre
commit
01867e03e5
Se han modificado 3 ficheros con 28 adiciones y 12 borrados
  1. 2 2
      src/config/index.ts
  2. 22 9
      src/subPack-smqjh/order/index.vue
  3. 4 1
      src/subPack-xsb/orderDetaile/index.vue

+ 2 - 2
src/config/index.ts

@@ -8,10 +8,10 @@ const mapEnvVersion = {
   // develop: 'http://192.168.1.253:8080',
   // develop: 'http://192.168.0.19:8080', // 邓
   // develop: 'http://192.168.0.217:8080', // 黄
-  develop: 'http://192.168.0.11:8080', // 王
+  // develop: 'http://192.168.0.11:8080', // 王
   // develop: 'http://192.168.1.89:8080', // 田
   // develop: 'http://74949mkfh190.vicp.fun', // 付
-  // develop: 'http://47.109.84.152:8081',
+  develop: 'http://47.109.84.152:8081',
   // develop: 'https://5ed0f7cc.r9.vip.cpolar.cn',
   // develop: 'https://smqjh.api.zswlgz.com',
   /**

+ 22 - 9
src/subPack-smqjh/order/index.vue

@@ -15,8 +15,9 @@ const navActiveTab = ref('all')
 const scrollViewId = ref()
 const orderStatusActive = ref('all')
 
-// 缓存各 tab 的数据,key = `${navActiveTab}-${orderStatusActive}`
 const orderCache = new Map<string, Api.xsbOrderList[]>()
+
+const tabLastPageMap = new Map<string, boolean>()
 function getCacheKey() {
   return `${navActiveTab.value}-${orderStatusActive.value}`
 }
@@ -37,8 +38,11 @@ const { data: orderList, isLastPage, page, reload } = usePagination((pageNum, pa
   append: true,
 }).onSuccess(() => {
   skelet.value = false
-  // 数据加载完成后写入缓存(含分页追加的情况)
-  orderCache.set(getCacheKey(), [...orderList.value])
+  const key = getCacheKey()
+  orderCache.set(key, [...orderList.value])
+  setTimeout(() => {
+    tabLastPageMap.set(key, isLastPage.value)
+  }, 100)
 })
 
 function loadTab() {
@@ -46,8 +50,10 @@ function loadTab() {
   if (orderCache.has(key)) {
     orderList.value = orderCache.get(key)!
     skelet.value = false
+    uni.pageScrollTo({ scrollTop: 0, duration: 0 })
   }
   else {
+    tabLastPageMap.delete(key)
     skelet.value = true
     orderList.value = []
     reload()
@@ -67,13 +73,18 @@ function handleChangeTypeNav(value: string) {
 }
 
 onShow(() => {
-  // 每次页面显示时刷新当前 tab(清除旧缓存保证数据最新)
-  orderCache.delete(getCacheKey())
-  orderList.value = []
+  // 页面重新显示:清除当前 tab 的所有状态,强制刷新
+  const key = getCacheKey()
+  orderCache.delete(key)
+  tabLastPageMap.delete(key)
   reload()
 })
+
 onReachBottom(() => {
-  if (!isLastPage.value) {
+  const key = getCacheKey()
+  // 优先使用 per-tab 的 isLastPage,避免从其他 tab 继承错误状态
+  const tabIsLast = tabLastPageMap.has(key) ? tabLastPageMap.get(key) : isLastPage.value
+  if (!tabIsLast) {
     page.value++
   }
 })
@@ -82,9 +93,11 @@ function handleChangeStatus(value: string) {
   loadTab()
 }
 
-// 子组件触发刷新时,清除当前 tab 缓存再重新加载
+// 子组件触发刷新时,清除当前 tab 的所有状态再重新加载
 function handleRefresh() {
-  orderCache.delete(getCacheKey())
+  const key = getCacheKey()
+  orderCache.delete(key)
+  tabLastPageMap.delete(key)
   skelet.value = true
   orderList.value = []
   reload()

+ 4 - 1
src/subPack-xsb/orderDetaile/index.vue

@@ -250,6 +250,9 @@ async function handleReceive() {
   await useUserStore().handleCommonOrderReceive(orderInfo.value as Api.xsbOrderList)
   getDetail(String(unref(orderInfo)?.orderNumber))
 }
+function handleRefundDetail(item: any) {
+  router.push({ name: 'common-afterSalesDetail', params: { refundNumber: String(item.refundNumber) } })
+}
 </script>
 
 <template>
@@ -487,7 +490,7 @@ async function handleReceive() {
       </view>
 
       <view v-if="orderInfo.refundOrderList" class="mt-20rpx rounded-16rpx bg-white p-24rpx">
-        <view v-for="item in orderInfo.refundOrderList" :key="item.createTime" class="mb10rpx">
+        <view v-for="item in orderInfo.refundOrderList" :key="item.createTime" class="mb10rpx" @click="handleRefundDetail(item)">
           <view class="flex items-center justify-between">
             <view>{{ item.refundOrderStatusDesc }} </view>
             <view class="flex items-center">