订单(我的订单,我的出售): 调整状态管理 fix #6265 #6266 #6267

6265	【ufo前端】【闲鱼合作】我的出售购买订单列表，我的进入该列表时，没有请求接口
6266	【ufo前端】【闲鱼合作】进入我的订单页面，切换到待发货tab列表，退出再次进入，没有默认选中全部
6267	【ufo前端】【闲鱼合作】我的订单列表，刷新数据后，会导致该数据出现在我的出售订单列表中。

@@ -68,6 +68,16 @@ export const buyerOrderStatusList = [
   },
 ];
 
+/**
+ * helper: 生成状态key
+ * @param type ownType buy|sell
+ * @param status sellerOrderStatus|buyerOrderStatus
+ * @returns {string}
+ */
+export function orderStatusKey(type, status) {
+  return `${type}-${status}`;
+}
+
 // 订单操作
 // ts IOrderAction[]
 export const orderActionsMap = {

@@ -8,7 +8,7 @@
           "
           v-for="(statusInfo, i) in statusList"
           :key="i"
-          @click="() => onHandleClick(statusInfo.value)"
+          @click="onClick(statusInfo.value)"
         >
           {{ statusInfo.text }}
         </li>
@@ -26,43 +26,25 @@ import {
   ownType
 } from "constants/order-constants";
 
-import { createNamespacedHelpers } from "vuex";
-
-const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
-  "order/orderList"
-);
 
 export default {
+  props: {
+    owner: String,
+    status: Number,
+  },
   components: {
     Scroll
   },
   computed: {
-    ...mapState(["currentStatus", "routeParamStatus"]),
-    statusList: function() {
-      const { owner } = this.$route.params;
-      return owner === ownType.BUY
-        ? buyerOrderStatusList
-        : sellerOrderStatusList;
+    statusList() {
+      return this.owner === ownType.BUY ? buyerOrderStatusList : sellerOrderStatusList;
     },
-    status() {
-      return this.currentStatus || this.routeParamStatus;
-    }
-  },
-  activated() {
-    let {status} = this.$route.params || this.statusList[0].value
-    this.setOrderStatus(status)
-    
   },
   methods: {
-    ...mapMutations(["setOrderStatus", "resetPartialData"]),
-    ...mapActions(["fetchOrderList"]),
-    onHandleClick(status) {
-      this.setOrderStatus(status);
-      this.resetPartialData();
-      const { owner } = this.$route.params;
-      this.fetchOrderList({ owner, status });
-    }
-  }
+    onClick(status) {
+      this.$emit('select', status);
+    },
+  },
 };
 </script>
 
@@ -107,4 +89,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

+import {
+  buyerOrderStatusList,
+  sellerOrderStatusList,
+} from "constants/order-constants";
+
 const routers = [
   // 订单列表
   // owner: {sell, buy} 订单来源
@@ -6,6 +11,23 @@ const routers = [
     name: 'OrderList',
     path: '/xianyu/:owner/order/list/:status?',
     component: () => import('./order-list'),
+    props({params}) {
+      let { owner, status } = params;
+
+      status = parseInt(status, 10);
+      if (isNaN(status)) {
+        // 取对应订单类型的第一个状态
+        status = (owner === 'buy' ? buyerOrderStatusList : sellerOrderStatusList)[0].value;
+      }
+
+      return {
+        owner,
+        status,
+      };
+    },
+    meta: {
+      routerViewKey: 'OrderList',
+    },
   },
 
   // 出售订单列表

 <template>
   <layout-app :title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'"
     class="list-page">
-    <status-nav />
+    <status-nav :status="status" :owner="owner" @select="onStatusChange"/>
     <div class="content-wrapper">
       <scroll
         @pulling-up="fetchData"
         @pulling-down="onRefresh"
         :options="options"
-        :data="orderList"
+        :data="viewOrderList"
         class="order-list-scroll-wrap"
+        ref="scroll"
       >
         <ul class="list-wrapper">
-          <li v-for="order in orderList" :key="order.orderCode">
+          <li v-for="order in viewOrderList" :key="order.orderCode">
             <order-item-header :order="order" />
             <order-item :order="order" />
             <!-- 订单操作 -->
@@ -39,12 +40,11 @@
             </div>
           </li>
         </ul>
-
         <empty-list
           @touch.prevent
           class="empty-wrapper"
           tip="这里什么都没有..."
-          v-show="isShowEmpty"
+          v-show="orderStatus.isShowEmpty"
         />
       </scroll>
     </div>
@@ -67,6 +67,7 @@ import CountDown from "../components/count-down";
 
 import orderActionMixin from "../mixin/order-action";
 import orderInSaleActionMixin from "../mixin/order-in-sale-action";
+import {orderStatusKey} from "constants/order-constants";
 
 const STORE_PATH = "order/orderList";
 
@@ -87,25 +88,29 @@ export default {
     CountDown,
     VideoPlayer
   },
-  data() {
-    const { status = 1, owner } = this.$route.params;
-    return {
-      currentStatus: +status,
-      owner
-    };
+  props: {
+    owner: String,
+    status: Number,
   },
   computed: {
-    ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
-    options: function() {
-      return {
-        pullUpLoad: this.pullUpLoad,
-        bounce: this.isShowEmpty ? false : true,
-        pullDownRefresh: this.isShowEmpty
-          ? false
-          : {
-              txt: "更新成功"
-            }
+    ...mapState(['orderListByType']),
+    orderStatus() {
+      return this.orderListByType[orderStatusKey(this.owner, this.status)];
+    },
+    viewOrderList() {
+      return this.orderStatus.orderList;
+    },
+    options() {
+      const options = {
+        pullUpLoad: this.orderStatus.pullUpLoad,
+        bounce: !this.orderStatus.isShowEmpty,
       };
+
+      if (this.$refs.scroll && this.$refs.scroll.scroll) {
+        options.pullDownRefresh = this.isShowEmpty ? false : {txt: '更新成功'};
+      }
+
+      return options;
     }
   },
 
@@ -113,23 +118,23 @@ export default {
   asyncData({ store, router }) {
     const {owner, status} = router.params;
 
-    store.commit(`${STORE_PATH}/resetData`);
-    store.commit(`${STORE_PATH}/setOrderStatus`, status);
-    store.commit(`${STORE_PATH}/setRouteParamStatus`, status);
-    return store.dispatch(`${STORE_PATH}/fetchOrderList`, router.params);
-  },
-  activated() {
-    this.resetData();
-    this.fetchData();
+    store.commit(`${STORE_PATH}/resetData`, {owner, status});
+    return store.dispatch(`${STORE_PATH}/fetchOrderList`, {owner, status});
   },
   methods: {
     ...mapActions(["fetchOrderList", "confirmReceipt"]),
     ...mapMutations(["resetData"]),
     fetchData() {
-      this.fetchOrderList(this.$route.params);
+      this.fetchOrderList({
+        owner: this.owner,
+        status: this.status,
+      });
     },
     onRefresh() {
-      this.resetData();
+      this.resetData({
+        owner: this.owner,
+        status: this.status,
+      });
       this.fetchData();
     },
     onVideoHandle({ videoUrl, orderCode }) {
@@ -137,11 +142,21 @@ export default {
         return;
       }
       const $video = this.$refs[`${orderCode}`][0];
+
       if ($video) {
         $video.parentHandleclick();
       }
-    }
-  }
+    },
+    onStatusChange(status) {
+      this.$router.replace({
+        name: this.$route.name,
+        params: {
+          owner: this.owner,
+          status,
+        },
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

-const initailData = () => ({
-  page: 1,
-  pageSize: 10,
-  pagetotal: 0,
-  orderList: [], // 订单列表
-  // scroll 组件参数，是否触发上拉事件
-  pullUpLoad: true,
-
-  // 当前查询订单状态
-  currentStatus: null,
-  routeParamStatus: null,
-  isShowEmpty: false,
-});
+import {
+  buyerOrderStatusList,
+  sellerOrderStatusList,
+  orderStatusKey,
+  ownType,
+} from "constants/order-constants";
+
+function initialOrderState() {
+  return {
+    page: 1,
+    pageSize: 10,
+    pagetotal: 0,
+    orderList: [], // 订单列表
+    // scroll 组件参数，是否触发上拉事件
+    pullUpLoad: true,
+    isShowEmpty: false,
+  };
+}
+
+const initialState = () => {
+  const orderListByType = {};
+
+  [[ownType.BUY, buyerOrderStatusList], [ownType.SELL, sellerOrderStatusList]].forEach(statusInfo => {
+    statusInfo[1].forEach(orderStatus => {
+      const key = orderStatusKey(statusInfo[0], orderStatus.value);
+
+      orderListByType[key] = initialOrderState();
+    });
+  });
+
+  return {
+    orderListByType,
+
+    // 当前查询订单状态
+    currentStatus: null,
+    routeParamStatus: null,
+  };
+};
 
 export default function() {
   return {
     namespaced: true,
-    modules: {},
-    state: initailData,
+    state: initialState,
     mutations: {
-      setOrderList(state, res) {
+      setOrderList(state, {res, owner, status}) {
         let { page, pagetotal, data = [] } = res;
+        const orderState = state.orderListByType[orderStatusKey(owner, status)];
 
-        state.isShowEmpty = page === 1 && data.length === 0;
-        state.page = ++page;
-        state.pagetotal = pagetotal;
-        state.orderList = state.orderList.concat(data);
+        orderState.isShowEmpty = page === 1 && data.length === 0;
+        orderState.page = ++page;
+        orderState.pagetotal = pagetotal;
+        orderState.orderList = orderState.orderList.concat(data);
 
         // 分页结束
         if (page > pagetotal) {
-          state.pullUpLoad = false;
+          orderState.pullUpLoad = false;
         }
       },
-      filterOrderList(state, orderCode) {
-        state.orderList = state.orderList.filter(
+      filterOrderList(state, {orderCode, owner, status}) {
+        const orderState = state.orderListByType[orderStatusKey(owner, status)];
+
+        orderState.orderList = orderState.orderList.filter(
           order => order.orderCode !== orderCode,
         );
-        state.isShowEmpty = state.orderList.length === 0;
+        orderState.isShowEmpty = orderState.orderList.length === 0;
       },
       setOrderStatus(state, currentStatus) {
         state.currentStatus = +currentStatus;
@@ -43,22 +70,18 @@ export default function() {
       setRouteParamStatus(state, status = 1) {
         state.routeParamStatus = +status;
       },
-      resetPartialData(state) {
-        state.page = 1;
-        state.orderList = [];
-        state.pagetotal = 0;
-        state.pullUpLoad = true;
+      resetPartialData(state, {owner, status}) {
+        Object.assign(state.orderListByType[orderStatusKey(owner, status)], {
+          page: 1,
+          orderList: [],
+          pagetotal: 0,
+          pullUpLoad: true,
+        });
       },
-      resetData(state) {
-        const s = initailData();
-        const keyList = Object.keys(s);
-        const keyBlackList = ['currentStatus', 'routeParamStatus'];
-
-        for (const key of keyList) {
-          if (!keyBlackList.includes(key)) {
-            state[key] = s[key];
-          }
-        }
+      resetData(state, {owner, status}) {
+        const orderListState = initialOrderState();
+
+        state.orderListByType[orderStatusKey(owner, status)] = orderListState;
       },
     },
     actions: {
@@ -71,22 +94,17 @@ export default function() {
        * }
        * r
        */
-      async fetchOrderList(
-        {
-          commit,
-          state: { page, currentStatus, routeParamStatus },
-        },
-        param = {},
-      ) {
-        const { owner } = param;
+      async fetchOrderList({commit, state}, { owner, status }) {
+        const { page } = state.orderListByType[orderStatusKey(owner, status)];
+
         const res = await this.$api.get('/api/order/list', {
           tabType: owner,
-          type: currentStatus || routeParamStatus || 1, // 1表示我的订单全部
+          type: status,
           page,
         });
 
         if (res.code === 200) {
-          commit('setOrderList', res.data);
+          commit('setOrderList', { res: res.data, owner, status});
         }
       },
 
@@ -97,7 +115,7 @@ export default function() {
        * owner: 订单来源 buy | sell
        * } param1
        */
-      async deleteOrder({ commit }, { orderCode, owner }) {
+      async deleteOrder({ commit }, { orderCode, owner, status }) {
         // owner: ownType
         const res = await this.$api.get(`/api/${owner}/order/delete`, {
           orderCode,
@@ -107,7 +125,7 @@ export default function() {
         // data 为true时删除成功
         if (code === 200) {
           if (data) {
-            commit('filterOrderList', orderCode);
+            commit('filterOrderList', {orderCode, owner, status});
           }
         }
         return data;
@@ -157,8 +175,6 @@ export default function() {
           orderCode,
         });
 
-        console.log(res);
-
         return res.code === 200 ? res.data : null;
       },
 
@@ -172,8 +188,6 @@ export default function() {
           },
         );
 
-        console.log(res);
-
         return res.code === 200 ? res.data : res.message || '';
       },
 
@@ -183,7 +197,6 @@ export default function() {
           orderCode: `${orderCode}`,
           price: +price,
         });
-        console.log(res);
 
         if (res.code === 200) {
           return { errMsg: '', isOk: true , bidData: res.data};
@@ -192,6 +205,5 @@ export default function() {
         }
       },
     },
-    getters: {},
   };
 }