Showing
7 changed files
with
171 additions
and
27 deletions
apps/pages/order/delivery-back-address.vue
0 → 100644
1 | +<template> | ||
2 | + <layout-app class="address-wrapper" title="商品回寄地址"> | ||
3 | + <SellOrderAddress :isOnlyShowBack="true" /> | ||
4 | + </layout-app> | ||
5 | +</template> | ||
6 | + | ||
7 | +<script> | ||
8 | +import SellOrderAddress from "./order-detail/components/sell-order-address-info"; | ||
9 | +import { createNamespacedHelpers } from "vuex"; | ||
10 | +const { mapActions } = createNamespacedHelpers("order/orderDetail"); | ||
11 | + | ||
12 | +export default { | ||
13 | + components: { | ||
14 | + SellOrderAddress | ||
15 | + }, | ||
16 | + activated() { | ||
17 | + const { code } = this.$route.params; | ||
18 | + this.fetchOrderDetail({ code, owner: "sell" }); | ||
19 | + }, | ||
20 | + methods: { | ||
21 | + ...mapActions(["fetchOrderDetail"]) | ||
22 | + } | ||
23 | +}; | ||
24 | +</script> | ||
25 | + | ||
26 | +<style lang="scss" scoped> | ||
27 | +.address-wrapper { | ||
28 | + padding: 40px; | ||
29 | +} | ||
30 | +</style> |
@@ -9,8 +9,8 @@ export default [ | @@ -9,8 +9,8 @@ export default [ | ||
9 | component: () => import(/* webpackChunkName: "order" */ './seller-confirm'), | 9 | component: () => import(/* webpackChunkName: "order" */ './seller-confirm'), |
10 | props: route => ({ | 10 | props: route => ({ |
11 | productId: route.query.productId, | 11 | productId: route.query.productId, |
12 | - storageId: route.query.storageId | ||
13 | - }) | 12 | + storageId: route.query.storageId, |
13 | + }), | ||
14 | }, | 14 | }, |
15 | { | 15 | { |
16 | name: 'OrderPay', | 16 | name: 'OrderPay', |
@@ -19,7 +19,7 @@ export default [ | @@ -19,7 +19,7 @@ export default [ | ||
19 | props: route => ({ | 19 | props: route => ({ |
20 | orderCode: route.query.orderCode, | 20 | orderCode: route.query.orderCode, |
21 | payParams: route.query.payParams, | 21 | payParams: route.query.payParams, |
22 | - extra: route.query.extra | 22 | + extra: route.query.extra, |
23 | }), | 23 | }), |
24 | }, | 24 | }, |
25 | { | 25 | { |
@@ -28,8 +28,8 @@ export default [ | @@ -28,8 +28,8 @@ export default [ | ||
28 | component: () => import(/* webpackChunkName: "order" */ './buyer-confirm'), | 28 | component: () => import(/* webpackChunkName: "order" */ './buyer-confirm'), |
29 | props: route => ({ | 29 | props: route => ({ |
30 | productId: route.query.productId, | 30 | productId: route.query.productId, |
31 | - storageId: route.query.storageId | ||
32 | - }) | 31 | + storageId: route.query.storageId, |
32 | + }), | ||
33 | }, | 33 | }, |
34 | { | 34 | { |
35 | name: 'SellPayOk', | 35 | name: 'SellPayOk', |
@@ -37,7 +37,7 @@ export default [ | @@ -37,7 +37,7 @@ export default [ | ||
37 | component: () => import(/* webpackChunkName: "order" */ './sell-pay-ok'), | 37 | component: () => import(/* webpackChunkName: "order" */ './sell-pay-ok'), |
38 | props: route => ({ | 38 | props: route => ({ |
39 | orderCode: route.query.orderCode, | 39 | orderCode: route.query.orderCode, |
40 | - }) | 40 | + }), |
41 | }, | 41 | }, |
42 | { | 42 | { |
43 | name: 'BuyPayOk', | 43 | name: 'BuyPayOk', |
@@ -45,16 +45,16 @@ export default [ | @@ -45,16 +45,16 @@ export default [ | ||
45 | component: () => import(/* webpackChunkName: "order" */ './buy-pay-ok'), | 45 | component: () => import(/* webpackChunkName: "order" */ './buy-pay-ok'), |
46 | props: route => ({ | 46 | props: route => ({ |
47 | orderCode: route.query.orderCode, | 47 | orderCode: route.query.orderCode, |
48 | - productId: route.query.productId | ||
49 | - }) | 48 | + productId: route.query.productId, |
49 | + }), | ||
50 | }, | 50 | }, |
51 | { | 51 | { |
52 | name: 'buyerAskOrder', // 买家求购确认 | 52 | name: 'buyerAskOrder', // 买家求购确认 |
53 | path: '/xianyu/order/buyeraskorder.html', | 53 | path: '/xianyu/order/buyeraskorder.html', |
54 | component: () => import('./buyer-ask-order'), | 54 | component: () => import('./buyer-ask-order'), |
55 | props: route => ({ | 55 | props: route => ({ |
56 | - storageId: route.query.storageId | ||
57 | - }) | 56 | + storageId: route.query.storageId, |
57 | + }), | ||
58 | }, | 58 | }, |
59 | 59 | ||
60 | { | 60 | { |
@@ -64,7 +64,7 @@ export default [ | @@ -64,7 +64,7 @@ export default [ | ||
64 | props: route => ({ | 64 | props: route => ({ |
65 | skup: route.query.skup, | 65 | skup: route.query.skup, |
66 | price: route.query.price, | 66 | price: route.query.price, |
67 | - }) | 67 | + }), |
68 | }, | 68 | }, |
69 | 69 | ||
70 | // 物流信息 | 70 | // 物流信息 |
@@ -80,6 +80,14 @@ export default [ | @@ -80,6 +80,14 @@ export default [ | ||
80 | component: () => | 80 | component: () => |
81 | import(/* webpackChunkName: "order.deliver" */ './deliver'), | 81 | import(/* webpackChunkName: "order.deliver" */ './deliver'), |
82 | }, | 82 | }, |
83 | + { | ||
84 | + name: 'deliverBackAddress', | ||
85 | + path: '/xianyu/detail/deliver/back/address/:code', | ||
86 | + component: () => | ||
87 | + import( | ||
88 | + /* webpackChunkName: "deliverBackAddress" */ './delivery-back-address.vue' | ||
89 | + ), | ||
90 | + }, | ||
83 | ...PriceChange, | 91 | ...PriceChange, |
84 | ...OrderList, | 92 | ...OrderList, |
85 | ...OrderDetail, | 93 | ...OrderDetail, |
1 | <template> | 1 | <template> |
2 | <div class="address-wrapper"> | 2 | <div class="address-wrapper"> |
3 | - <i | ||
4 | - v-if="$route.params.owner === 'sell'" | ||
5 | - class="address-icon back-address-icon" | ||
6 | - ></i> | ||
7 | - <i v-else class="address-icon"></i> | 3 | + <i class="address-icon"></i> |
8 | <div> | 4 | <div> |
9 | - <p class="consignee"> | ||
10 | - {{ | ||
11 | - isSell ? `回寄地址: ${userAddress.consignee}` : userAddress.consignee | ||
12 | - }} | ||
13 | - </p> | 5 | + <p class="consignee">{{ userAddress.consignee }}</p> |
14 | <p class="area">{{ userAddress.area }}</p> | 6 | <p class="area">{{ userAddress.area }}</p> |
15 | <p class="mobile">{{ userAddress.mobile }}</p> | 7 | <p class="mobile">{{ userAddress.mobile }}</p> |
16 | </div> | 8 | </div> |
@@ -23,11 +15,7 @@ const { mapGetters } = createNamespacedHelpers("order/orderDetail"); | @@ -23,11 +15,7 @@ const { mapGetters } = createNamespacedHelpers("order/orderDetail"); | ||
23 | 15 | ||
24 | export default { | 16 | export default { |
25 | computed: { | 17 | computed: { |
26 | - ...mapGetters(["userAddress"]), | ||
27 | - isSell() { | ||
28 | - const { owner } = this.$route.params; | ||
29 | - return owner === "sell"; | ||
30 | - } | 18 | + ...mapGetters(["userAddress"]) |
31 | } | 19 | } |
32 | }; | 20 | }; |
33 | </script> | 21 | </script> |
@@ -57,6 +45,7 @@ export default { | @@ -57,6 +45,7 @@ export default { | ||
57 | height: 48px; | 45 | height: 48px; |
58 | display: block; | 46 | display: block; |
59 | background-size: contain; | 47 | background-size: contain; |
48 | + background-repeat: no-repeat; | ||
60 | margin-right: 40px; | 49 | margin-right: 40px; |
61 | background-image: url("~statics/image/order/addr-icon@3x.png"); | 50 | background-image: url("~statics/image/order/addr-icon@3x.png"); |
62 | } | 51 | } |
1 | +<template> | ||
2 | + <div class="sell-order-address-wrapper"> | ||
3 | + <!-- 鉴定平台地址 --> | ||
4 | + <div v-if="appraiseAddress && !isOnlyShowBack"> | ||
5 | + <div class="address-wrapper"> | ||
6 | + <i class="address-icon"></i> | ||
7 | + <div> | ||
8 | + <p class="consignee">{{ appraiseAddress.addressName }}</p> | ||
9 | + <p class="area">{{ appraiseAddress.address }}</p> | ||
10 | + <p class="mobile">{{ appraiseAddress.mobile }}</p> | ||
11 | + </div> | ||
12 | + </div> | ||
13 | + <router-link | ||
14 | + :to="{ name: 'deliverBackAddress', params: $route.params }" | ||
15 | + class="to-back-address" | ||
16 | + > | ||
17 | + <div class="back-address"> | ||
18 | + <span>商品回寄地址</span> | ||
19 | + <i class="right-icon"></i> | ||
20 | + </div> | ||
21 | + </router-link> | ||
22 | + </div> | ||
23 | + <div class="address-wrapper" v-else> | ||
24 | + <i class="address-icon back-address-icon"></i> | ||
25 | + <div> | ||
26 | + <p class="consignee"> | ||
27 | + {{ `回寄地址: ${userAddress.consignee || ""}` }} | ||
28 | + </p> | ||
29 | + <p class="area">{{ userAddress.area }}</p> | ||
30 | + <p class="mobile">{{ userAddress.mobile }}</p> | ||
31 | + </div> | ||
32 | + </div> | ||
33 | + </div> | ||
34 | +</template> | ||
35 | + | ||
36 | +<script> | ||
37 | +import { createNamespacedHelpers } from "vuex"; | ||
38 | +const { mapGetters } = createNamespacedHelpers("order/orderDetail"); | ||
39 | + | ||
40 | +export default { | ||
41 | + props: { | ||
42 | + isOnlyShowBack: { | ||
43 | + type: Boolean, | ||
44 | + default: false | ||
45 | + } | ||
46 | + }, | ||
47 | + computed: { | ||
48 | + ...mapGetters(["userAddress", "appraiseAddress"]) | ||
49 | + } | ||
50 | +}; | ||
51 | +</script> | ||
52 | + | ||
53 | +<style lang="scss" scoped> | ||
54 | +.sell-order-address-wrapper { | ||
55 | + .to-back-address { | ||
56 | + display: block; | ||
57 | + } | ||
58 | + | ||
59 | + .back-address { | ||
60 | + display: flex; | ||
61 | + justify-content: space-between; | ||
62 | + align-items: center; | ||
63 | + font-size: 28px; | ||
64 | + padding-top: 40px; | ||
65 | + border-top: 1px solid #eee; | ||
66 | + margin-top: 40px; | ||
67 | + | ||
68 | + .right-icon { | ||
69 | + width: 48px; | ||
70 | + height: 48px; | ||
71 | + display: block; | ||
72 | + background-size: contain; | ||
73 | + background-repeat: no-repeat; | ||
74 | + background-image: url("~statics/image/order/right-arrow-icon@3x.png"); | ||
75 | + } | ||
76 | + } | ||
77 | + | ||
78 | + .address-wrapper { | ||
79 | + display: flex; | ||
80 | + align-items: center; | ||
81 | + | ||
82 | + .consignee { | ||
83 | + font-size: 32px; | ||
84 | + font-weight: bold; | ||
85 | + } | ||
86 | + | ||
87 | + .area { | ||
88 | + color: #999; | ||
89 | + margin: 12px 0; | ||
90 | + } | ||
91 | + | ||
92 | + .mobile { | ||
93 | + font-size: 28px; | ||
94 | + font-weight: bold; | ||
95 | + } | ||
96 | + | ||
97 | + .address-icon { | ||
98 | + width: 48px; | ||
99 | + height: 48px; | ||
100 | + display: block; | ||
101 | + background-repeat: no-repeat; | ||
102 | + background-size: contain; | ||
103 | + margin-right: 40px; | ||
104 | + background-image: url("~statics/image/order/addr-icon@3x.png"); | ||
105 | + } | ||
106 | + | ||
107 | + .back-address-icon { | ||
108 | + background-image: url("~statics/image/order/blackAddress@3x.png"); | ||
109 | + } | ||
110 | + } | ||
111 | +} | ||
112 | +</style> |
@@ -101,7 +101,7 @@ import { createNamespacedHelpers } from "vuex"; | @@ -101,7 +101,7 @@ import { createNamespacedHelpers } from "vuex"; | ||
101 | import { Button } from "cube-ui"; | 101 | import { Button } from "cube-ui"; |
102 | import Clipboard from "clipboard"; | 102 | import Clipboard from "clipboard"; |
103 | 103 | ||
104 | -import AddressInfo from "./components/address-info"; | 104 | +import AddressInfo from "./components/sell-order-address-info"; |
105 | import OrderItemInfo from "./components/order-detail-item"; | 105 | import OrderItemInfo from "./components/order-detail-item"; |
106 | import DetailHeader from "./components/header"; | 106 | import DetailHeader from "./components/header"; |
107 | import DetailFooter from "./components//detail-footer"; | 107 | import DetailFooter from "./components//detail-footer"; |
@@ -247,6 +247,7 @@ export default { | @@ -247,6 +247,7 @@ export default { | ||
247 | width: 48px; | 247 | width: 48px; |
248 | height: 48px; | 248 | height: 48px; |
249 | display: block; | 249 | display: block; |
250 | + background-repeat: no-repeat; | ||
250 | background-size: contain; | 251 | background-size: contain; |
251 | } | 252 | } |
252 | 253 |
@@ -18,6 +18,9 @@ export default function() { | @@ -18,6 +18,9 @@ export default function() { | ||
18 | actionList: state => state.orderDetail.buttons || {}, // 允许操作 | 18 | actionList: state => state.orderDetail.buttons || {}, // 允许操作 |
19 | // 卖家订单价格字段 | 19 | // 卖家订单价格字段 |
20 | platformFee: state => state.orderDetail.platformFee || {}, | 20 | platformFee: state => state.orderDetail.platformFee || {}, |
21 | + | ||
22 | + // 鉴定平台地址 | ||
23 | + appraiseAddress: state => state.orderDetail.appraiseAddress || null, | ||
21 | }, | 24 | }, |
22 | actions: { | 25 | actions: { |
23 | /** | 26 | /** |
-
Please register or login to post a comment