fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 31ec2c3a88f7b54a59f29c42a3372244341b999a 1 parent 86a334d5

订单列表

Inline Side-by-side
Showing 9 changed files with 513 additions and 116 deletions
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <Button 3 <Button
4 v-for="action in actionList" 4 v-for="action in actionList"
5 :key="action.code" 5 :key="action.code"
6 - @click="() => onAction(action)" 6 + @click="() => onActionHandler(action)"
7 > 7 >
8 {{ action.text }} 8 {{ action.text }}
9 </Button> 9 </Button>
@@ -20,6 +20,12 @@ import CancelConfirmInfo from "./order-list/cancel-confirm-info"; @@ -20,6 +20,12 @@ import CancelConfirmInfo from "./order-list/cancel-confirm-info";
20 20
21 const { mapActions, mapState } = createNamespacedHelpers("order/orderList"); 21 const { mapActions, mapState } = createNamespacedHelpers("order/orderList");
22 22
  23 +const { mapMutations: orderMapMutations } = createNamespacedHelpers("order");
  24 +
  25 +const { mapMutations: inSaleOrderMapMutations } = createNamespacedHelpers(
  26 + "order/inSaleOrderList"
  27 +);
  28 +
23 export default { 29 export default {
24 props: { 30 props: {
25 order: { 31 order: {
@@ -40,7 +46,7 @@ export default { @@ -40,7 +46,7 @@ export default {
40 "cancelTrade", 46 "cancelTrade",
41 "confirmReceipt" 47 "confirmReceipt"
42 ]), 48 ]),
43 - async onAction(action) { 49 + onActionHandler(action) {
44 const { owner = ownType.SELL } = this.$route.params; 50 const { owner = ownType.SELL } = this.$route.params;
45 const { 51 const {
46 orderCode, 52 orderCode,
@@ -52,21 +58,6 @@ export default { @@ -52,21 +58,6 @@ export default {
52 const { productId, storageId, skup } = this.order.goodsInfo; 58 const { productId, storageId, skup } = this.order.goodsInfo;
53 59
54 switch (action.name) { 60 switch (action.name) {
55 - // 删除订单  
56 - case orderActionsMap.DEL_ORDER.name:  
57 - this.$createDialog({  
58 - type: "confirm",  
59 - content: "确认删除订单？",  
60 - onConfirm: async () => {  
61 - const isOk = await this.deleteOrder({  
62 - orderCode,  
63 - owner  
64 - });  
65 - const txt = isOk ? "删除成功" : "删除失败";  
66 - this.$createToast({ txt, type: "txt" }).show();  
67 - }  
68 - }).show();  
69 - break;  
70 // 再次购买 61 // 再次购买
71 case orderActionsMap.BUY_AGAIN.name: 62 case orderActionsMap.BUY_AGAIN.name:
72 this.$router.push({ 63 this.$router.push({
@@ -74,6 +65,7 @@ export default { @@ -74,6 +65,7 @@ export default {
74 params: { productId } 65 params: { productId }
75 }); 66 });
76 break; 67 break;
  68 +
77 // 查看详情 69 // 查看详情
78 case orderActionsMap.SHOW_DETAIL.name: 70 case orderActionsMap.SHOW_DETAIL.name:
79 const name = 71 const name =
@@ -83,6 +75,7 @@ export default { @@ -83,6 +75,7 @@ export default {
83 params: { owner, orderCode } 75 params: { owner, orderCode }
84 }); 76 });
85 break; 77 break;
  78 +
86 // 再次出售 79 // 再次出售
87 case orderActionsMap.SOLD_AGAIN.name: 80 case orderActionsMap.SOLD_AGAIN.name:
88 this.$router.push({ 81 this.$router.push({
@@ -90,6 +83,7 @@ export default { @@ -90,6 +83,7 @@ export default {
90 query: { productId, storageId } 83 query: { productId, storageId }
91 }); 84 });
92 break; 85 break;
  86 +
93 // 查看物流 87 // 查看物流
94 case orderActionsMap.SHOW_EXPRESS.name: 88 case orderActionsMap.SHOW_EXPRESS.name:
95 this.$router.push({ 89 this.$router.push({
@@ -121,47 +115,20 @@ export default { @@ -121,47 +115,20 @@ export default {
121 params: { skup, code: orderCode } 115 params: { skup, code: orderCode }
122 }); 116 });
123 break; 117 break;
  118 + // 确认收货
  119 + case orderActionsMap.CONFIRM_DELIVERY.name:
  120 + this.$createDialog({
  121 + type: "confirm",
  122 + onConfirm: async () => {
  123 + const isOk = await this.confirmReceipt({
  124 + orderCode,
  125 + owner
  126 + });
124 127
125 - // 取消订单 | 不卖了  
126 - case orderActionsMap.NOT_SOLD.name:  
127 - case orderActionsMap.CANCEL_ORDER.name:  
128 - const confirmInfo = await this.cancelTradeConfirmInfo({  
129 - orderCode,  
130 - owner  
131 - });  
132 - let dialogConfig = {  
133 - confirmBtn: { text: "取消订单" },  
134 - cancelBtn: { text: "保留订单" }  
135 - };  
136 - if (owner === "sell") {  
137 - dialogConfig = {  
138 - confirmBtn: { text: "不卖了" },  
139 - cancelBtn: { text: "继续出售" }  
140 - };  
141 - }  
142 - this.$createDialog(  
143 - {  
144 - ...dialogConfig,  
145 - type: "confirm",  
146 - onConfirm: async () => {  
147 - const isOk = await this.cancelTrade({  
148 - orderCode,  
149 - owner  
150 - });  
151 -  
152 - const txt = isOk ? "取消成功" : "取消失败";  
153 - this.$createToast({ txt, type: "txt" }).show();  
154 - }  
155 - },  
156 - createElement => {  
157 - return [  
158 - createElement(CancelConfirmInfo, {  
159 - slot: "content",  
160 - props: { confirmInfo }  
161 - })  
162 - ]; 128 + // const txt = isOk ? "收货成功" : "收货失败";
  129 + // this.$createToast({ txt, type: "txt" }).show();
163 } 130 }
164 - ).show(); 131 + });
165 break; 132 break;
166 133
167 case orderActionsMap.PAY_EARNESTMONEY.name: 134 case orderActionsMap.PAY_EARNESTMONEY.name:
@@ -180,23 +147,8 @@ export default { @@ -180,23 +147,8 @@ export default {
180 }).show(); 147 }).show();
181 break; 148 break;
182 149
183 - case orderActionsMap.CONFIRM_DELIVERY.name:  
184 - this.$createDialog({  
185 - type: "confirm",  
186 - onConfirm: async () => {  
187 - const isOk = await this.confirmReceipt({  
188 - orderCode,  
189 - owner  
190 - });  
191 -  
192 - // const txt = isOk ? "收货成功" : "收货失败";  
193 - // this.$createToast({ txt, type: "txt" }).show();  
194 - }  
195 - });  
196 - break;  
197 -  
198 default: 150 default:
199 - return; 151 + this.$emit("on-action", action);
200 } 152 }
201 } 153 }
202 } 154 }
@@ -56,7 +56,7 @@ @@ -56,7 +56,7 @@
56 </div> 56 </div>
57 </div> 57 </div>
58 <!-- 操作 --> 58 <!-- 操作 -->
59 - <detail-footer> 59 + <!-- <detail-footer>
60 <template #tip="{orderDetail, statusDetail}"> 60 <template #tip="{orderDetail, statusDetail}">
61 <div v-if="statusDetail.status === 0"> 61 <div v-if="statusDetail.status === 0">
62 <p class="real-pay-price"> 62 <p class="real-pay-price">
@@ -65,7 +65,21 @@ @@ -65,7 +65,21 @@
65 <p>实付金额</p> 65 <p>实付金额</p>
66 </div> 66 </div>
67 </template> 67 </template>
68 - </detail-footer> 68 + </detail-footer> -->
  69 +
  70 + <div v-if="actionList.length > 0" class="footer-wrapper">
  71 + <div v-if="statusDetail.status === 0">
  72 + <p class="real-pay-price">
  73 + ¥{{ orderDetail.priceInfo.realPayPrice }}
  74 + </p>
  75 + <p>实付金额</p>
  76 + </div>
  77 + <order-actions
  78 + class="detail-actions"
  79 + :order="orderDetail"
  80 + @on-action="action => onAction({ action, order: orderDetail })"
  81 + />
  82 + </div>
69 </div> 83 </div>
70 </layout-app> 84 </layout-app>
71 </template> 85 </template>
@@ -74,16 +88,26 @@ @@ -74,16 +88,26 @@
74 import { createNamespacedHelpers } from "vuex"; 88 import { createNamespacedHelpers } from "vuex";
75 import { Button } from "cube-ui"; 89 import { Button } from "cube-ui";
76 90
77 -import OrderActions from "../components/order-actions";  
78 -  
79 import AddressInfo from "./components/address-info"; 91 import AddressInfo from "./components/address-info";
80 import OrderItemInfo from "./components/order-detail-item"; 92 import OrderItemInfo from "./components/order-detail-item";
81 import DetailHeader from "./components/header"; 93 import DetailHeader from "./components/header";
82 import DetailFooter from "./components//detail-footer"; 94 import DetailFooter from "./components//detail-footer";
83 95
  96 +import OrderActions from "../components/order-actions";
  97 +import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
  98 +
  99 +import {
  100 + orderActionsMap,
  101 + ownType
  102 +} from "../../../../constants/order-constants";
  103 +
84 const { mapActions, mapState, mapGetters } = createNamespacedHelpers( 104 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
85 "order/orderDetail" 105 "order/orderDetail"
86 ); 106 );
  107 +
  108 +const { mapActions: orderListMapActions } = createNamespacedHelpers(
  109 + "order/orderList"
  110 +);
87 export default { 111 export default {
88 components: { 112 components: {
89 AddressInfo, 113 AddressInfo,
@@ -102,10 +126,87 @@ export default { @@ -102,10 +126,87 @@ export default {
102 mounted() {}, 126 mounted() {},
103 computed: { 127 computed: {
104 ...mapState(["orderDetail"]), 128 ...mapState(["orderDetail"]),
105 - ...mapGetters(["lastExpressInfo", "priceInfo", "actionList"]) 129 + ...mapGetters([
  130 + "lastExpressInfo",
  131 + "priceInfo",
  132 + "actionList",
  133 + "statusDetail"
  134 + ])
106 }, 135 },
107 methods: { 136 methods: {
108 - ...mapActions(["fetchOrderDetail"]) 137 + ...mapActions(["fetchOrderDetail"]),
  138 + ...orderListMapActions([
  139 + "deleteOrder",
  140 + "cancelTradeConfirmInfo",
  141 + "cancelTrade"
  142 + ]),
  143 + async onAction({ action, order }) {
  144 + console.log("----------action---------", action);
  145 + const { owner = ownType.SELL } = this.$route.params;
  146 + const {
  147 + orderCode,
  148 + earnestMoney = 0,
  149 + realPrice = "",
  150 + priceInfo = {}
  151 + } = order;
  152 +
  153 + const { productId, storageId, skup } = order.goodsInfo;
  154 +
  155 + switch (action.name) {
  156 + // 删除订单
  157 + case orderActionsMap.DEL_ORDER.name:
  158 + this.$createDialog({
  159 + type: "confirm",
  160 + content: "确认删除订单？",
  161 + onConfirm: async () => {
  162 + const isOk = await this.deleteOrder({
  163 + orderCode,
  164 + owner
  165 + });
  166 + if (isOk) {
  167 + this.$router.back();
  168 + }
  169 + // const txt = isOk ? "删除成功" : "删除失败";
  170 + // this.$createToast({ txt, type: "txt" }).show();
  171 + }
  172 + }).show();
  173 + break;
  174 + case orderActionsMap.CANCEL_ORDER.name:
  175 + const confirmInfo = await this.cancelTradeConfirmInfo({
  176 + orderCode,
  177 + owner
  178 + });
  179 + this.$createDialog(
  180 + {
  181 + type: "confirm",
  182 + confirmBtn: { text: "取消订单" },
  183 + cancelBtn: { text: "保留订单" },
  184 + onConfirm: async () => {
  185 + const isOk = await this.cancelTrade({
  186 + orderCode,
  187 + owner
  188 + });
  189 + if (isOk) {
  190 + this.fetchOrderDetail(this.$route.params);
  191 + }
  192 + const txt = isOk ? "取消成功" : "取消失败";
  193 + this.$createToast({ txt, type: "txt" }).show();
  194 + }
  195 + },
  196 + createElement => {
  197 + return [
  198 + createElement(CancelConfirmInfo, {
  199 + slot: "content",
  200 + props: { confirmInfo }
  201 + })
  202 + ];
  203 + }
  204 + ).show();
  205 + break;
  206 + default:
  207 + return;
  208 + }
  209 + }
109 } 210 }
110 }; 211 };
111 </script> 212 </script>
@@ -120,6 +221,26 @@ export default { @@ -120,6 +221,26 @@ export default {
120 overflow-y: auto; 221 overflow-y: auto;
121 font-size: 24px; 222 font-size: 24px;
122 223
  224 + .footer-wrapper {
  225 + display: flex;
  226 + justify-content: space-between;
  227 + align-items: center;
  228 + position: absolute;
  229 + bottom: 0;
  230 + left: 0;
  231 + right: 0;
  232 + height: 120px;
  233 + background: #fff;
  234 + box-shadow: inset 0 1px 0 0 #eee;
  235 + padding: 20px;
  236 + z-index: 10;
  237 +
  238 + .detail-actions {
  239 + margin-top: 0;
  240 + flex: 1;
  241 + }
  242 + }
  243 +
123 .item-wrapper { 244 .item-wrapper {
124 border-top: 1px solid #eee; 245 border-top: 1px solid #eee;
125 padding: 40px 0; 246 padding: 40px 0;
@@ -67,14 +67,26 @@ @@ -67,14 +67,26 @@
67 </div> 67 </div>
68 </div> 68 </div>
69 <!-- 操作 --> 69 <!-- 操作 -->
70 - <detail-footer> 70 + <!-- <detail-footer>
71 <template #tip="{orderDetail, statusDetail}"> 71 <template #tip="{orderDetail, statusDetail}">
72 <div v-if="statusDetail.status === 0"> 72 <div v-if="statusDetail.status === 0">
73 <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p> 73 <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
74 <p>{{ statusDetail.statuStr }}</p> 74 <p>{{ statusDetail.statuStr }}</p>
75 </div> 75 </div>
76 </template> 76 </template>
77 - </detail-footer> 77 + </detail-footer> -->
  78 +
  79 + <div v-if="actionList.length > 0" class="footer-wrapper">
  80 + <div v-if="statusDetail.status === 0">
  81 + <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
  82 + <p>{{ statusDetail.statuStr }}</p>
  83 + </div>
  84 + <order-actions
  85 + class="detail-actions"
  86 + :order="orderDetail"
  87 + @on-action="action => onAction({ action, order: orderDetail })"
  88 + />
  89 + </div>
78 </div> 90 </div>
79 </layout-app> 91 </layout-app>
80 </template> 92 </template>
@@ -88,16 +100,29 @@ import OrderItemInfo from "./components/order-detail-item"; @@ -88,16 +100,29 @@ import OrderItemInfo from "./components/order-detail-item";
88 import DetailHeader from "./components/header"; 100 import DetailHeader from "./components/header";
89 import DetailFooter from "./components//detail-footer"; 101 import DetailFooter from "./components//detail-footer";
90 102
  103 +import OrderActions from "../components/order-actions";
  104 +import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
  105 +
  106 +import {
  107 + orderActionsMap,
  108 + ownType
  109 +} from "../../../../constants/order-constants";
  110 +
91 const { mapActions, mapState, mapGetters } = createNamespacedHelpers( 111 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
92 "order/orderDetail" 112 "order/orderDetail"
93 ); 113 );
  114 +
  115 +const { mapActions: orderListMapActions } = createNamespacedHelpers(
  116 + "order/orderList"
  117 +);
94 export default { 118 export default {
95 components: { 119 components: {
96 AddressInfo, 120 AddressInfo,
97 OrderItemInfo, 121 OrderItemInfo,
98 Button, 122 Button,
99 DetailHeader, 123 DetailHeader,
100 - DetailFooter 124 + DetailFooter,
  125 + OrderActions
101 }, 126 },
102 asyncData({ store, router }) { 127 asyncData({ store, router }) {
103 // store.dispatch("order/orderDetail/fetchOrderDetail", router.params); 128 // store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
@@ -112,11 +137,84 @@ export default { @@ -112,11 +137,84 @@ export default {
112 "lastExpressInfo", 137 "lastExpressInfo",
113 "priceInfo", 138 "priceInfo",
114 "statusDetail", 139 "statusDetail",
115 - "platformFee" 140 + "platformFee",
  141 + "actionList"
116 ]) 142 ])
117 }, 143 },
118 methods: { 144 methods: {
119 - ...mapActions(["fetchOrderDetail"]) 145 + ...mapActions(["fetchOrderDetail"]),
  146 + ...orderListMapActions([
  147 + "cancelTradeConfirmInfo",
  148 + "cancelTrade",
  149 + "deleteOrder"
  150 + ]),
  151 + async onAction({ action, order }) {
  152 + console.log("----------action---------", action);
  153 + const { owner = ownType.SELL } = this.$route.params;
  154 + const {
  155 + orderCode,
  156 + earnestMoney = 0,
  157 + realPrice = "",
  158 + priceInfo = {}
  159 + } = order;
  160 +
  161 + const { productId, storageId, skup } = order.goodsInfo;
  162 +
  163 + switch (action.name) {
  164 + // 删除订单
  165 + case orderActionsMap.DEL_ORDER.name:
  166 + this.$createDialog({
  167 + type: "confirm",
  168 + content: "确认删除订单？",
  169 + onConfirm: async () => {
  170 + const isOk = await this.deleteOrder({
  171 + orderCode,
  172 + owner
  173 + });
  174 + if (isOk) {
  175 + this.$router.back();
  176 + }
  177 + // const txt = isOk ? "删除成功" : "删除失败";
  178 + // this.$createToast({ txt, type: "txt" }).show();
  179 + }
  180 + }).show();
  181 + break;
  182 + case orderActionsMap.NOT_SOLD.name:
  183 + const confirmInfo = await this.cancelTradeConfirmInfo({
  184 + orderCode,
  185 + owner
  186 + });
  187 + this.$createDialog(
  188 + {
  189 + type: "confirm",
  190 + confirmBtn: { text: "不卖了" },
  191 + cancelBtn: { text: "继续出售" },
  192 + onConfirm: async () => {
  193 + const isOk = await this.cancelTrade({
  194 + orderCode,
  195 + owner
  196 + });
  197 + if (isOk) {
  198 + this.fetchOrderDetail(this.$route.params);
  199 + }
  200 + // const txt = isOk ? "取消成功" : "取消失败";
  201 + // this.$createToast({ txt, type: "txt" }).show();
  202 + }
  203 + },
  204 + createElement => {
  205 + return [
  206 + createElement(CancelConfirmInfo, {
  207 + slot: "content",
  208 + props: { confirmInfo }
  209 + })
  210 + ];
  211 + }
  212 + ).show();
  213 + break;
  214 + default:
  215 + return;
  216 + }
  217 + }
120 } 218 }
121 }; 219 };
122 </script> 220 </script>
@@ -131,6 +229,26 @@ export default { @@ -131,6 +229,26 @@ export default {
131 overflow-y: auto; 229 overflow-y: auto;
132 font-size: 24px; 230 font-size: 24px;
133 231
  232 + .footer-wrapper {
  233 + display: flex;
  234 + justify-content: space-between;
  235 + align-items: center;
  236 + position: absolute;
  237 + bottom: 0;
  238 + left: 0;
  239 + right: 0;
  240 + height: 120px;
  241 + background: #fff;
  242 + box-shadow: inset 0 1px 0 0 #eee;
  243 + padding: 20px;
  244 + z-index: 10;
  245 +
  246 + .detail-actions {
  247 + margin-top: 0;
  248 + flex: 1;
  249 + }
  250 + }
  251 +
134 .item-wrapper { 252 .item-wrapper {
135 border-top: 1px solid #eee; 253 border-top: 1px solid #eee;
136 padding: 40px 0; 254 padding: 40px 0;
1 <template> 1 <template>
2 <div class="footer-wrapper"> 2 <div class="footer-wrapper">
3 <count-down :leftTime="order.leftTime" /> 3 <count-down :leftTime="order.leftTime" />
4 - <order-actions class="actions" :order="order" /> 4 + <order-actions class="actions" :order="order" @on-action="onAction" />
5 </div> 5 </div>
6 </template> 6 </template>
7 7
@@ -13,7 +13,15 @@ @@ -13,7 +13,15 @@
13 <order-info :order="order" /> 13 <order-info :order="order" />
14 <order-list-item :order="order" /> 14 <order-list-item :order="order" />
15 <!-- 订单操作 --> 15 <!-- 订单操作 -->
16 - <order-item-footer :order="order" /> 16 + <!-- <order-item-footer :order="order" @on-action="() => {}" /> -->
  17 + <div class="footer-wrapper">
  18 + <count-down :leftTime="order.leftTime" />
  19 + <order-actions
  20 + class="actions"
  21 + :order="order"
  22 + @on-action="action => onAction({ action, order })"
  23 + />
  24 + </div>
17 </li> 25 </li>
18 </ul> 26 </ul>
19 </scroll> 27 </scroll>
@@ -31,10 +39,25 @@ import OrderInfo from "./components/order-info.vue"; @@ -31,10 +39,25 @@ import OrderInfo from "./components/order-info.vue";
31 import EmptyList from "./components/empty"; 39 import EmptyList from "./components/empty";
32 import OrderItemFooter from "./components/order-footer"; 40 import OrderItemFooter from "./components/order-footer";
33 import { routeNames } from "../order-detail"; 41 import { routeNames } from "../order-detail";
34 -import { ownType } from "../../../../constants/order-constants";  
35 42
36 -const { mapActions, mapState, mapGetters } = createNamespacedHelpers(  
37 - "order/inSaleOrderList" 43 +import OrderActions from "../components/order-actions";
  44 +import CountDown from "../components/count-down";
  45 +import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
  46 +
  47 +import {
  48 + orderActionsMap,
  49 + ownType
  50 +} from "../../../../constants/order-constants";
  51 +
  52 +const {
  53 + mapActions,
  54 + mapState,
  55 + mapGetters,
  56 + mapMutations
  57 +} = createNamespacedHelpers("order/inSaleOrderList");
  58 +
  59 +const { mapActions: orderListMapActions } = createNamespacedHelpers(
  60 + "order/orderList"
38 ); 61 );
39 62
40 export default { 63 export default {
@@ -43,7 +66,9 @@ export default { @@ -43,7 +66,9 @@ export default {
43 OrderListItem, 66 OrderListItem,
44 OrderInfo, 67 OrderInfo,
45 EmptyList, 68 EmptyList,
46 - OrderItemFooter 69 + OrderItemFooter,
  70 + OrderActions,
  71 + CountDown
47 }, 72 },
48 computed: { 73 computed: {
49 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]), 74 ...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
@@ -63,33 +88,68 @@ export default { @@ -63,33 +88,68 @@ export default {
63 // const { owner, status } = router.params; 88 // const { owner, status } = router.params;
64 // store.dispatch("order/orderList/fetchOrderList", { owner, status }); 89 // store.dispatch("order/orderList/fetchOrderList", { owner, status });
65 }, 90 },
66 - mounted() {  
67 - this.fetchData();  
68 - const { code } = this.$route.params;  
69 - // 调价跳转  
70 - if (!!code) {  
71 - this.$nextTick(() => {  
72 - this.$router.push({  
73 - name: routeNames.SELL_ORDER_DETAIL,  
74 - params: {  
75 - owner: ownType.SELL,  
76 - code  
77 - }  
78 - });  
79 - });  
80 - }  
81 - },  
82 activated() { 91 activated() {
83 this.fetchData(); 92 this.fetchData();
84 }, 93 },
85 methods: { 94 methods: {
86 ...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]), 95 ...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
  96 + ...orderListMapActions(["cancelTradeConfirmInfo", "cancelTrade"]),
  97 + ...mapMutations(["filterOrderList"]),
87 fetchData() { 98 fetchData() {
88 if (this.isFetchEntryOrder) { 99 if (this.isFetchEntryOrder) {
89 this.fetchEntryOrderList(); 100 this.fetchEntryOrderList();
90 } else { 101 } else {
91 this.fetchNotEntryOrderList(); 102 this.fetchNotEntryOrderList();
92 } 103 }
  104 + },
  105 + async onAction({ action, order }) {
  106 + console.log("----------action---------", action);
  107 + const { owner = ownType.SELL } = this.$route.params;
  108 + const {
  109 + orderCode,
  110 + earnestMoney = 0,
  111 + realPrice = "",
  112 + priceInfo = {}
  113 + } = order;
  114 +
  115 + const { productId, storageId, skup } = order.goodsInfo;
  116 +
  117 + switch (action.name) {
  118 + case orderActionsMap.NOT_SOLD.name:
  119 + const confirmInfo = await this.cancelTradeConfirmInfo({
  120 + orderCode,
  121 + owner
  122 + });
  123 + this.$createDialog(
  124 + {
  125 + type: "confirm",
  126 + confirmBtn: { text: "不卖了" },
  127 + cancelBtn: { text: "继续出售" },
  128 + onConfirm: async () => {
  129 + const isOk = await this.cancelTrade({
  130 + orderCode,
  131 + owner
  132 + });
  133 + if (isOk) {
  134 + this.filterOrderList(orderCode);
  135 + }
  136 + // const txt = isOk ? "取消成功" : "取消失败";
  137 + // this.$createToast({ txt, type: "txt" }).show();
  138 + }
  139 + },
  140 + createElement => {
  141 + return [
  142 + createElement(CancelConfirmInfo, {
  143 + slot: "content",
  144 + props: { confirmInfo }
  145 + })
  146 + ];
  147 + }
  148 + ).show();
  149 + break;
  150 + default:
  151 + return;
  152 + }
93 } 153 }
94 }, 154 },
95 watch: { 155 watch: {
@@ -108,6 +168,15 @@ export default { @@ -108,6 +168,15 @@ export default {
108 overflow-y: auto; 168 overflow-y: auto;
109 -webkit-box-orient: vertical; 169 -webkit-box-orient: vertical;
110 170
  171 + .footer-wrapper {
  172 + display: flex;
  173 + margin-top: 40px;
  174 +
  175 + .actions {
  176 + flex: 1;
  177 + }
  178 + }
  179 +
111 .order-list-scroll-wrap { 180 .order-list-scroll-wrap {
112 .list-wrapper { 181 .list-wrapper {
113 li { 182 li {
@@ -14,7 +14,16 @@ @@ -14,7 +14,16 @@
14 <order-info :order="order" /> 14 <order-info :order="order" />
15 <order-list-item :order="order" /> 15 <order-list-item :order="order" />
16 <!-- 订单操作 --> 16 <!-- 订单操作 -->
17 - <order-item-footer :order="order" /> 17 + <!-- <order-item-footer :order="order" /> -->
  18 +
  19 + <div class="footer-wrapper">
  20 + <count-down :leftTime="order.leftTime" />
  21 + <order-actions
  22 + class="actions"
  23 + :order="order"
  24 + @on-action="action => onAction({ action, order })"
  25 + />
  26 + </div>
18 </li> 27 </li>
19 </ul> 28 </ul>
20 </scroll> 29 </scroll>
@@ -28,16 +37,27 @@ @@ -28,16 +37,27 @@
28 import { Scroll } from "cube-ui"; 37 import { Scroll } from "cube-ui";
29 import { createNamespacedHelpers } from "vuex"; 38 import { createNamespacedHelpers } from "vuex";
30 39
  40 +import {
  41 + orderActionsMap,
  42 + ownType
  43 +} from "../../../../constants/order-constants";
  44 +
31 import OrderListItem from "./components/order-item"; 45 import OrderListItem from "./components/order-item";
32 import StatusNav from "./components/status-nav"; 46 import StatusNav from "./components/status-nav";
33 import OrderInfo from "./components/order-info.vue"; 47 import OrderInfo from "./components/order-info.vue";
34 import EmptyList from "./components/empty"; 48 import EmptyList from "./components/empty";
35 import OrderItemFooter from "./components/order-footer"; 49 import OrderItemFooter from "./components/order-footer";
36 50
  51 +import OrderActions from "../components/order-actions";
  52 +import CountDown from "../components/count-down";
  53 +import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
  54 +
37 const { mapActions, mapState, mapMutations } = createNamespacedHelpers( 55 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
38 "order/orderList" 56 "order/orderList"
39 ); 57 );
40 58
  59 +const { mapMutations: orderMapMutations } = createNamespacedHelpers("order");
  60 +
41 export default { 61 export default {
42 components: { 62 components: {
43 Scroll, 63 Scroll,
@@ -45,7 +65,9 @@ export default { @@ -45,7 +65,9 @@ export default {
45 StatusNav, 65 StatusNav,
46 OrderInfo, 66 OrderInfo,
47 EmptyList, 67 EmptyList,
48 - OrderItemFooter 68 + OrderItemFooter,
  69 + OrderActions,
  70 + CountDown
49 }, 71 },
50 computed: { 72 computed: {
51 ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]), 73 ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
@@ -61,15 +83,14 @@ export default { @@ -61,15 +83,14 @@ export default {
61 // const { owner, status } = router.params; 83 // const { owner, status } = router.params;
62 // store.dispatch("order/orderList/fetchOrderList", { owner, status }); 84 // store.dispatch("order/orderList/fetchOrderList", { owner, status });
63 }, 85 },
64 - mounted() {  
65 - this.fetchData();  
66 - },  
67 activated() { 86 activated() {
  87 + this.reset("orderList");
68 this.fetchData(); 88 this.fetchData();
69 }, 89 },
70 methods: { 90 methods: {
71 - ...mapActions(["fetchOrderList"]), 91 + ...mapActions(["fetchOrderList", "cancelTradeConfirmInfo", "cancelTrade"]),
72 ...mapMutations(["setOrderStatus"]), 92 ...mapMutations(["setOrderStatus"]),
  93 + ...orderMapMutations(["reset"]),
73 fetchMore() { 94 fetchMore() {
74 this.fetchOrderList(this.$route.params); 95 this.fetchOrderList(this.$route.params);
75 }, 96 },
@@ -80,23 +101,93 @@ export default { @@ -80,23 +101,93 @@ export default {
80 this.setOrderStatus(status); 101 this.setOrderStatus(status);
81 } 102 }
82 this.fetchOrderList(params); 103 this.fetchOrderList(params);
  104 + },
  105 + async onAction({ action, order }) {
  106 + console.log("----------action---------", action);
  107 + const { owner = ownType.SELL } = this.$route.params;
  108 + const {
  109 + orderCode,
  110 + earnestMoney = 0,
  111 + realPrice = "",
  112 + priceInfo = {}
  113 + } = order;
  114 +
  115 + const { productId, storageId, skup } = order.goodsInfo;
  116 +
  117 + switch (action.name) {
  118 + // 删除订单
  119 + case orderActionsMap.DEL_ORDER.name:
  120 + this.$createDialog({
  121 + type: "confirm",
  122 + content: "确认删除订单？",
  123 + onConfirm: async () => {
  124 + const isOk = await this.deleteOrder({
  125 + orderCode,
  126 + owner
  127 + });
  128 + const txt = isOk ? "删除成功" : "删除失败";
  129 + this.$createToast({ txt, type: "txt" }).show();
  130 + }
  131 + }).show();
  132 + break;
  133 +
  134 + case orderActionsMap.CANCEL_ORDER.name:
  135 + const confirmInfo = await this.cancelTradeConfirmInfo({
  136 + orderCode,
  137 + owner
  138 + });
  139 + this.$createDialog(
  140 + {
  141 + type: "confirm",
  142 + confirmBtn: { text: "取消订单" },
  143 + cancelBtn: { text: "保留订单" },
  144 + onConfirm: async () => {
  145 + const isOk = await this.cancelTrade({
  146 + orderCode,
  147 + owner
  148 + });
  149 + if (isOk) {
  150 + this.reset("orderList");
  151 + this.fetchData(this.$route.params);
  152 + }
  153 + const txt = isOk ? "取消成功" : "取消失败";
  154 + this.$createToast({ txt, type: "txt" }).show();
  155 + }
  156 + },
  157 + createElement => {
  158 + return [
  159 + createElement(CancelConfirmInfo, {
  160 + slot: "content",
  161 + props: { confirmInfo }
  162 + })
  163 + ];
  164 + }
  165 + ).show();
  166 + break;
  167 + }
83 } 168 }
84 }, 169 },
85 watch: { 170 watch: {
86 - $route() {  
87 - // console.log("---------route change----------");  
88 - // this.fetchOrderList(this.$route.params);  
89 - } 171 + $route() {}
90 } 172 }
91 }; 173 };
92 </script> 174 </script>
93 <style lang="scss" scoped> 175 <style lang="scss" scoped>
94 .content-wrapper { 176 .content-wrapper {
95 - height: calc(100vh - 300px); 177 + height: calc(100vh - 200px);
96 overflow-x: hidden; 178 overflow-x: hidden;
97 overflow-y: auto; 179 overflow-y: auto;
98 -webkit-box-orient: vertical; 180 -webkit-box-orient: vertical;
99 181
  182 + .footer-wrapper {
  183 + display: flex;
  184 + margin-top: 40px;
  185 +
  186 + .actions {
  187 + flex: 1;
  188 + }
  189 + }
  190 +
100 .order-list-scroll-wrap { 191 .order-list-scroll-wrap {
101 .list-wrapper { 192 .list-wrapper {
102 li { 193 li {
@@ -46,6 +46,18 @@ export default function() { @@ -46,6 +46,18 @@ export default function() {
46 state.notEntryOrder.pullUpload = false; 46 state.notEntryOrder.pullUpload = false;
47 } 47 }
48 }, 48 },
  49 + filterOrderList(state, orderCode) {
  50 + state.entryOrder.list = state.entryOrder.list.filter(
  51 + order => order.orderCode !== orderCode,
  52 + );
  53 + state.notEntryOrder.list = state.notEntryOrder.list.filter(
  54 + order => order.orderCode !== orderCode,
  55 + );
  56 +
  57 + state.isShowEmpty =
  58 + state.entryOrder.list.length === 0 &&
  59 + state.notEntryOrder.list.length === 0;
  60 + },
49 }, 61 },
50 getters: { 62 getters: {
51 // scroll 组件参数，是否触发上拉事件 63 // scroll 组件参数，是否触发上拉事件
@@ -6,6 +6,16 @@ import orderLogistics from './order-logistics'; @@ -6,6 +6,16 @@ import orderLogistics from './order-logistics';
6 import orderDeliver from './order-deliver'; 6 import orderDeliver from './order-deliver';
7 import inSaleOrderList from './in-sale-order-list'; 7 import inSaleOrderList from './in-sale-order-list';
8 8
  9 +const initialState = {
  10 + priceChange: priceChange().state,
  11 + orderList: orderList().state,
  12 + orderConfirm: orderConfirm().state,
  13 + orderDetail: orderDetail().state,
  14 + logisticsInfo: orderLogistics().state,
  15 + orderDeliver: orderDeliver().state,
  16 + inSaleOrderList: inSaleOrderList().state,
  17 +};
  18 +
9 export default function() { 19 export default function() {
10 return { 20 return {
11 namespaced: true, 21 namespaced: true,
@@ -18,5 +28,27 @@ export default function() { @@ -18,5 +28,27 @@ export default function() {
18 orderDeliver: orderDeliver(), 28 orderDeliver: orderDeliver(),
19 inSaleOrderList: inSaleOrderList(), 29 inSaleOrderList: inSaleOrderList(),
20 }, 30 },
  31 + state: {
  32 + resetFlag: false,
  33 + },
  34 + mutations: {
  35 + /**
  36 + * reset module state
  37 + * @param {*} state
  38 + * @param { Array | String} moduleNames 模块名
  39 + */
  40 + reset(state, moduleNames = []) {
  41 + if (typeof moduleNames === 'string') {
  42 + moduleNames = [moduleNames];
  43 + }
  44 + console.log('------reset module name------------', moduleNames);
  45 +
  46 + // 修改flag,监听后reload
  47 + state.resetFlag = !state.resetFlag;
  48 + for (const name of moduleNames) {
  49 + Object.assign(state[name], initialState[name]);
  50 + }
  51 + },
  52 + },
21 }; 53 };
22 } 54 }
1 export default function() { 1 export default function() {
2 return { 2 return {
3 namespaced: true, 3 namespaced: true,
  4 + modules: {},
4 state: { 5 state: {
5 page: 1, 6 page: 1,
6 pageSize: 10, 7 pageSize: 10,
@@ -33,6 +34,7 @@ export default function() { @@ -33,6 +34,7 @@ export default function() {
33 state.orderList = state.orderList.filter( 34 state.orderList = state.orderList.filter(
34 order => order.orderCode !== orderCode, 35 order => order.orderCode !== orderCode,
35 ); 36 );
  37 + state.isShowEmpty = state.orderList.length === 0;
36 }, 38 },
37 setOrderStatus(state, currentStatus) { 39 setOrderStatus(state, currentStatus) {
38 state.currentStatus = +currentStatus; 40 state.currentStatus = +currentStatus;