|
|
@@ -14,6 +14,13 @@ const skelet = ref(true)
|
|
|
const navActiveTab = ref('all')
|
|
|
const scrollViewId = ref()
|
|
|
const orderStatusActive = ref('all')
|
|
|
+
|
|
|
+// 缓存各 tab 的数据,key = `${navActiveTab}-${orderStatusActive}`
|
|
|
+const orderCache = new Map<string, Api.xsbOrderList[]>()
|
|
|
+function getCacheKey() {
|
|
|
+ return `${navActiveTab.value}-${orderStatusActive.value}`
|
|
|
+}
|
|
|
+
|
|
|
const { data: orderList, isLastPage, page, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({
|
|
|
data: {
|
|
|
businessType: unref(navActiveTab) === 'all' ? '' : unref(navActiveTab),
|
|
|
@@ -28,18 +35,41 @@ const { data: orderList, isLastPage, page, reload } = usePagination((pageNum, pa
|
|
|
initialData: [],
|
|
|
data: res => res.data?.list,
|
|
|
append: true,
|
|
|
-}).onSuccess(() => skelet.value = false)
|
|
|
+}).onSuccess(() => {
|
|
|
+ skelet.value = false
|
|
|
+ // 数据加载完成后写入缓存(含分页追加的情况)
|
|
|
+ orderCache.set(getCacheKey(), [...orderList.value])
|
|
|
+})
|
|
|
|
|
|
+function loadTab() {
|
|
|
+ const key = getCacheKey()
|
|
|
+ if (orderCache.has(key)) {
|
|
|
+ orderList.value = orderCache.get(key)!
|
|
|
+ skelet.value = false
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ skelet.value = true
|
|
|
+ orderList.value = []
|
|
|
+ reload()
|
|
|
+ }
|
|
|
+}
|
|
|
+onLoad((options: any) => {
|
|
|
+ if (options.status) {
|
|
|
+ orderStatusActive.value = options.status
|
|
|
+ }
|
|
|
+})
|
|
|
function handleChangeTypeNav(value: string) {
|
|
|
- skelet.value = true
|
|
|
navActiveTab.value = value
|
|
|
scrollViewId.value = null
|
|
|
- orderList.value = []
|
|
|
+ orderStatusActive.value = 'all'
|
|
|
nextTick(() => scrollViewId.value = value)
|
|
|
- reload()
|
|
|
+ loadTab()
|
|
|
}
|
|
|
+
|
|
|
onShow(() => {
|
|
|
- // orderList.value = []
|
|
|
+ // 每次页面显示时刷新当前 tab(清除旧缓存保证数据最新)
|
|
|
+ orderCache.delete(getCacheKey())
|
|
|
+ orderList.value = []
|
|
|
reload()
|
|
|
})
|
|
|
onReachBottom(() => {
|
|
|
@@ -48,8 +78,14 @@ onReachBottom(() => {
|
|
|
}
|
|
|
})
|
|
|
function handleChangeStatus(value: string) {
|
|
|
- skelet.value = true
|
|
|
orderStatusActive.value = value
|
|
|
+ loadTab()
|
|
|
+}
|
|
|
+
|
|
|
+// 子组件触发刷新时,清除当前 tab 缓存再重新加载
|
|
|
+function handleRefresh() {
|
|
|
+ orderCache.delete(getCacheKey())
|
|
|
+ skelet.value = true
|
|
|
orderList.value = []
|
|
|
reload()
|
|
|
}
|
|
|
@@ -134,7 +170,7 @@ function handleChangeStatus(value: string) {
|
|
|
<template v-for="item in orderList" :key="item.orderNumber">
|
|
|
<OrderRenderer
|
|
|
:order-list="item"
|
|
|
- @refresh="reload"
|
|
|
+ @refresh="handleRefresh"
|
|
|
/>
|
|
|
</template>
|
|
|
<StatusTip v-if="!orderList.length" tip="暂无内容" />
|