Просмотр исходного кода

优化订单列表请求逻辑,避免在切换筛选条件时出现数据覆盖和错误显示

Yannay 1 месяц назад
Родитель
Сommit
a08ceac9d1
1 измененных файлов с 19 добавлено и 1 удалено
  1. 19 1
      pages/pagereceivecenter/pagereceivecenter.vue

+ 19 - 1
pages/pagereceivecenter/pagereceivecenter.vue

@@ -174,6 +174,13 @@ export default {
174 174
         },
175 175
         //获取列表数据
176 176
         async getOrderList() {
177
+            // 记录本次请求的筛选条件,用于避免“加载中切换 tab”导致旧请求覆盖新数据
178
+            const requestType = this.activeType;
179
+            const requestStatus = this.activeStatus;
180
+            const requestPageNum = this.activeType === 3
181
+                ? this.commissionQueryParams.pageNum
182
+                : this.queryParams.pageNum;
183
+
177 184
             try {
178 185
                 let result;
179 186
 
@@ -212,9 +219,20 @@ export default {
212 219
                     })
213 220
                 }
214 221
 
222
+                // 若用户在请求期间切换了类型或状态,丢弃本次结果,避免错误显示
223
+                if (this.activeType !== requestType || (this.activeType !== 3 && this.activeStatus !== requestStatus)) {
224
+                    return;
225
+                }
226
+                const currentPageNum = this.activeType === 3
227
+                    ? this.commissionQueryParams.pageNum
228
+                    : this.queryParams.pageNum;
229
+                if (currentPageNum !== requestPageNum) {
230
+                    return;
231
+                }
232
+
215 233
                 // 获取当前使用的查询参数
216 234
                 const params = this.activeType === 3 ? this.commissionQueryParams : this.queryParams;
217
-                
235
+
218 236
                 // 如果是第一页(下拉刷新或初始加载),直接替换列表
219 237
                 if (params.pageNum === 1) {
220 238
                     this.orderList = result.rows;