Showing
17 changed files
with
406 additions
and
77 deletions
apps/components/order-coupon-list/api.js
0 → 100644
1 | +<template> | ||
2 | + <YohoActionSheet ref="actionSheet" @cancel="close"> | ||
3 | + <div class="pay-type-wrapper"> | ||
4 | + <div class="header"> | ||
5 | + <div class="title">选择优惠券</div> | ||
6 | + <span><i class="iconfont iconweibiao45133 close" @click="close"></i></span> | ||
7 | + </div> | ||
8 | + <slot name="content"> | ||
9 | + <div class="pay-list-wrapper"> | ||
10 | + <div class="pay-list-item" v-for="item in data" :key="item.coupon_code"> | ||
11 | + <div class="pay-info"> | ||
12 | + <div class="price">{{item.coupon_value_str}}</div> | ||
13 | + <div class="price-desc">{{item.use_rule_str}}</div> | ||
14 | + </div> | ||
15 | + | ||
16 | + <div class="coupon-info"> | ||
17 | + <div class="coupon-name">[{{item.coupon_type_name}}]{{item.coupon_name}}</div> | ||
18 | + | ||
19 | + <div class="coupon-time">{{item.coupon_validity}}</div> | ||
20 | + </div> | ||
21 | + <Check class="check" :value="item.selected === 'Y'"></Check> | ||
22 | + </div> | ||
23 | + </div> | ||
24 | + </slot> | ||
25 | + <div name="footer"> | ||
26 | + <YohoButton txt="确定" class="footer" @click="pay"></YohoButton> | ||
27 | + </div> | ||
28 | + </div> | ||
29 | + </YohoActionSheet> | ||
30 | +</template> | ||
31 | + | ||
32 | +<script> | ||
33 | +import YohoActionSheet from '../action-sheet'; | ||
34 | +import Check from '../order-pay-type/check2'; | ||
35 | +import YohoButton from '../button'; | ||
36 | + | ||
37 | +export default { | ||
38 | + name: 'OrderCouponList', | ||
39 | + props: { | ||
40 | + data: { | ||
41 | + type: Array, | ||
42 | + default() { | ||
43 | + return []; | ||
44 | + } | ||
45 | + }, | ||
46 | + }, | ||
47 | + components: { | ||
48 | + YohoButton, | ||
49 | + YohoActionSheet, | ||
50 | + Check | ||
51 | + }, | ||
52 | + data() { | ||
53 | + return {}; | ||
54 | + }, | ||
55 | + methods: { | ||
56 | + show() { | ||
57 | + this.$refs.actionSheet.show(); | ||
58 | + }, | ||
59 | + hide() { | ||
60 | + this.$refs.actionSheet.hide(); | ||
61 | + }, | ||
62 | + close() { | ||
63 | + this.hide(); | ||
64 | + this.$emit('closeAction'); | ||
65 | + }, | ||
66 | + pay() { | ||
67 | + this.$emit('payAction'); | ||
68 | + } | ||
69 | + } | ||
70 | +}; | ||
71 | +</script> | ||
72 | + | ||
73 | +<style lang="scss" scoped> | ||
74 | +.pay-type-wrapper { | ||
75 | + height: 960px; | ||
76 | + background: white; | ||
77 | + position: relative; | ||
78 | + display: flex; | ||
79 | + flex-direction: column; | ||
80 | +} | ||
81 | + | ||
82 | +.header { | ||
83 | + display: flex; | ||
84 | + justify-content: space-between; | ||
85 | + padding: 40px; | ||
86 | +} | ||
87 | + | ||
88 | +.title { | ||
89 | + font-weight: bold; | ||
90 | + font-size: 32px; | ||
91 | + color: #222; | ||
92 | +} | ||
93 | + | ||
94 | +.close { | ||
95 | + font-size: 32px; | ||
96 | +} | ||
97 | + | ||
98 | +.pay-list-wrapper { | ||
99 | + flex: 1; | ||
100 | + overflow-y: auto; | ||
101 | + background-color: #f5f5f5; | ||
102 | +} | ||
103 | + | ||
104 | +.pay-list-item { | ||
105 | + height: 200px; | ||
106 | + font-size: 28px; | ||
107 | + margin: 20px 20px; | ||
108 | + display: flex; | ||
109 | + justify-content: space-between; | ||
110 | + align-items: center; | ||
111 | + background: url(~statics/image/order/bg@3x.png) no-repeat; | ||
112 | + background-size: cover; | ||
113 | +} | ||
114 | + | ||
115 | +.check { | ||
116 | + font-size: 48px; | ||
117 | + margin-left: 40px; | ||
118 | + margin-right: 40px; | ||
119 | +} | ||
120 | + | ||
121 | +.pay-info { | ||
122 | + width: 210px; | ||
123 | +} | ||
124 | + | ||
125 | +.footer { | ||
126 | + font-size: 32px; | ||
127 | +} | ||
128 | + | ||
129 | +.price-info { | ||
130 | + margin-top: 40px; | ||
131 | + margin-bottom: 60px; | ||
132 | +} | ||
133 | + | ||
134 | +.price { | ||
135 | + font-size: 72px; | ||
136 | + color: #002b47; | ||
137 | + text-align: center; | ||
138 | + font-weight: bolder; | ||
139 | +} | ||
140 | + | ||
141 | +.price-desc { | ||
142 | + font-size: 24px; | ||
143 | + color: #002b47; | ||
144 | + text-align: center; | ||
145 | +} | ||
146 | + | ||
147 | +.coupon-info { | ||
148 | + flex: 1; | ||
149 | + height: 160px; | ||
150 | + padding-left: 20px; | ||
151 | +} | ||
152 | + | ||
153 | +.coupon-name { | ||
154 | + font-size: 24px; | ||
155 | + color: #002b47; | ||
156 | + margin-bottom: 40px; | ||
157 | +} | ||
158 | + | ||
159 | +.coupon-time { | ||
160 | + font-size: 22px; | ||
161 | + color: #999; | ||
162 | +} | ||
163 | +</style> |
apps/components/order-coupon-list/index.js
0 → 100644
@@ -10,6 +10,7 @@ import Lazy from 'vue-lazyload'; | @@ -10,6 +10,7 @@ import Lazy from 'vue-lazyload'; | ||
10 | import cookie from 'yoho-cookie'; | 10 | import cookie from 'yoho-cookie'; |
11 | import yoho from 'common/yoho'; | 11 | import yoho from 'common/yoho'; |
12 | import OrderPayType from 'components/order-pay-type'; | 12 | import OrderPayType from 'components/order-pay-type'; |
13 | +import OrderCouponList from 'components/order-coupon-list'; | ||
13 | import Bind from 'components/bind'; | 14 | import Bind from 'components/bind'; |
14 | 15 | ||
15 | import sdk from 'yoho-activity-sdk'; | 16 | import sdk from 'yoho-activity-sdk'; |
@@ -39,6 +40,7 @@ Vue.use(ImagePreview); | @@ -39,6 +40,7 @@ Vue.use(ImagePreview); | ||
39 | Vue.prop('api', api); | 40 | Vue.prop('api', api); |
40 | Vue.use(Lazy, { error: '' }); | 41 | Vue.use(Lazy, { error: '' }); |
41 | Vue.use(OrderPayType); | 42 | Vue.use(OrderPayType); |
43 | +Vue.use(OrderCouponList); | ||
42 | Vue.use(Bind); | 44 | Vue.use(Bind); |
43 | 45 | ||
44 | 46 |
@@ -2,13 +2,16 @@ | @@ -2,13 +2,16 @@ | ||
2 | <LayoutApp :show-back="true"> | 2 | <LayoutApp :show-back="true"> |
3 | <div class="body"> | 3 | <div class="body"> |
4 | <TitleComp txt="确认订单" class="title-class"></TitleComp> | 4 | <TitleComp txt="确认订单" class="title-class"></TitleComp> |
5 | - <AddressInfo :data="orderDetail.userAddress" class="order-item" :show-tip="false"></AddressInfo> | ||
6 | - <ProductInfo :data="orderDetail.goodsInfo" class="product-info order-item"></ProductInfo> | ||
7 | - <BuyerFeeInfo :data="price" class="order-item"></BuyerFeeInfo> | ||
8 | - <OrderInfo class="order-item"></OrderInfo> | 5 | + <AddressInfo :data="address" class="order-item" :show-tip="false"></AddressInfo> |
6 | + <ProductInfo :data="orderDetail.good" class="product-info order-item"></ProductInfo> | ||
7 | + <Coupon class="order-item" :data="orderDetail.recommendedCouponInfo" @click="onCouponClick"></Coupon> | ||
8 | + <BuyerFeeInfo :data="orderDetail.promotionFormulaList" class="order-item"></BuyerFeeInfo> | ||
9 | + <div class="tip2 order-item">{{orderDetail.specialTips}}</div> | ||
10 | + <div class="tip order-item" v-html="replaceBr(orderDetail.damagesDesc)"></div> | ||
11 | + <OrderInfo class="order-item" :pay-way="orderDetail.paymentWay" :delivery-way="orderDetail.deliveryWay"></OrderInfo> | ||
9 | </div> | 12 | </div> |
10 | 13 | ||
11 | - <OrderFooter class="footer"></OrderFooter> | 14 | + <OrderFooter class="footer" :amount="orderDetail.amount"></OrderFooter> |
12 | </LayoutApp> | 15 | </LayoutApp> |
13 | </template> | 16 | </template> |
14 | 17 | ||
@@ -20,23 +23,19 @@ import TitleComp from './components/confirm/title'; | @@ -20,23 +23,19 @@ import TitleComp from './components/confirm/title'; | ||
20 | import BuyerFeeInfo from './components/confirm/buyer-fee'; | 23 | import BuyerFeeInfo from './components/confirm/buyer-fee'; |
21 | import OrderInfo from './components/confirm/order-info'; | 24 | import OrderInfo from './components/confirm/order-info'; |
22 | import OrderFooter from './components/confirm/buyer-order-footer'; | 25 | import OrderFooter from './components/confirm/buyer-order-footer'; |
26 | +import Coupon from './components/confirm/coupon'; | ||
27 | +import { Types, UserType } from 'store/order/order-confirm'; | ||
28 | +import { get } from 'lodash'; | ||
23 | 29 | ||
24 | -import { createNamespacedHelpers } from 'vuex'; | 30 | +import { createNamespacedHelpers, mapState } from 'vuex'; |
25 | 31 | ||
26 | -const { mapState, mapActions, mapMutations } = createNamespacedHelpers('order/orderConfirm'); | 32 | +const { mapState: mapOrderState, mapActions: mapOrderAction, mapMutations: mapOrderMutations } = createNamespacedHelpers('order/orderConfirm'); |
27 | 33 | ||
28 | export default { | 34 | export default { |
29 | name: 'OrderConfirm', | 35 | name: 'OrderConfirm', |
30 | - props: { | ||
31 | - orderCode: { | ||
32 | - type: String, | ||
33 | - default: '' | ||
34 | - } | ||
35 | - }, | 36 | + props: ['productId', 'sizeId', 'tradeTypeId'], |
36 | data() { | 37 | data() { |
37 | - return { | ||
38 | - price: {} | ||
39 | - }; | 38 | + return {}; |
40 | }, | 39 | }, |
41 | components: { | 40 | components: { |
42 | ProductInfo, | 41 | ProductInfo, |
@@ -44,16 +43,39 @@ export default { | @@ -44,16 +43,39 @@ export default { | ||
44 | TitleComp, | 43 | TitleComp, |
45 | BuyerFeeInfo, | 44 | BuyerFeeInfo, |
46 | OrderInfo, | 45 | OrderInfo, |
47 | - OrderFooter | 46 | + OrderFooter, |
47 | + Coupon | ||
48 | }, | 48 | }, |
49 | - mounted() { | ||
50 | - this.fetchOrderDetail({ orderCode: this.orderCode }); | 49 | + async mounted() { |
50 | + this.fetchUserStatus(); | ||
51 | + this.fetchOrderAddress({ tabType: UserType.buy }); | ||
52 | + await this.$store.dispatch('product/getSelectedTradeProduct', { | ||
53 | + productId: this.productId, | ||
54 | + sizeId: this.sizeId | ||
55 | + }); | ||
56 | + | ||
57 | + this.fetchPayment({ skup: this.productDetail.skup }); | ||
51 | }, | 58 | }, |
52 | computed: { | 59 | computed: { |
53 | - ...mapState(['orderDetail']) | 60 | + ...mapOrderState(['address', 'orderDetail']), |
61 | + ...mapState({ | ||
62 | + productDetail: state => { | ||
63 | + return { | ||
64 | + skup: get(state.product.selectedProductInfo, 'size.skup', '') | ||
65 | + }; | ||
66 | + } | ||
67 | + }) | ||
54 | }, | 68 | }, |
55 | methods: { | 69 | methods: { |
56 | - ...mapActions(['fetchOrderDetail']) | 70 | + ...mapOrderAction(['fetchOrderAddress', 'fetchUserStatus', 'fetchPayList', 'fetchPayment']), |
71 | + replaceBr(str) { | ||
72 | + return str ? str.replace(/\n/g, '<br />') : ''; | ||
73 | + }, | ||
74 | + onCouponClick() { | ||
75 | + this.$createOrderCouponList({ | ||
76 | + data: this.orderDetail.couponList | ||
77 | + }).show(); | ||
78 | + } | ||
57 | } | 79 | } |
58 | }; | 80 | }; |
59 | </script> | 81 | </script> |
@@ -64,6 +86,8 @@ export default { | @@ -64,6 +86,8 @@ export default { | ||
64 | bottom: 0; | 86 | bottom: 0; |
65 | width: 100%; | 87 | width: 100%; |
66 | z-index: 100; | 88 | z-index: 100; |
89 | + background-color: white; | ||
90 | + border-top: 1px solid #eee; | ||
67 | } | 91 | } |
68 | 92 | ||
69 | .body { | 93 | .body { |
@@ -87,4 +111,13 @@ export default { | @@ -87,4 +111,13 @@ export default { | ||
87 | height: 260px; | 111 | height: 260px; |
88 | } | 112 | } |
89 | 113 | ||
114 | +.tip { | ||
115 | + font-size: 24px; | ||
116 | + color: #999; | ||
117 | +} | ||
118 | + | ||
119 | +.tip2 { | ||
120 | + font-size: 28px; | ||
121 | +} | ||
122 | + | ||
90 | </style> | 123 | </style> |
1 | <template> | 1 | <template> |
2 | <div class="agree"> | 2 | <div class="agree"> |
3 | <span @click="onClick"><Check v-model="val"></Check> 我已阅读并同意</span> <span class="link" | 3 | <span @click="onClick"><Check v-model="val"></Check> 我已阅读并同意</span> <span class="link" |
4 | - @click="onLinkClick">有货卖家协议</span> | 4 | + @click="onLinkClick">{{desc}}</span> |
5 | </div> | 5 | </div> |
6 | </template> | 6 | </template> |
7 | 7 | ||
@@ -15,6 +15,10 @@ export default { | @@ -15,6 +15,10 @@ export default { | ||
15 | value: { | 15 | value: { |
16 | type: Boolean, | 16 | type: Boolean, |
17 | default: true | 17 | default: true |
18 | + }, | ||
19 | + desc: { | ||
20 | + type: String, | ||
21 | + default: '' | ||
18 | } | 22 | } |
19 | }, | 23 | }, |
20 | components: { | 24 | components: { |
1 | <template> | 1 | <template> |
2 | <div class="price-wrapper"> | 2 | <div class="price-wrapper"> |
3 | - <div class="price-item"> | ||
4 | - <div>商品金额</div> | ||
5 | - <div>-¥10.00</div> | 3 | + <div class="price-item" v-for="(item, index) in data" :key="index"> |
4 | + <div>{{item.promotion}}</div> | ||
5 | + <div :class="getClass(index)">{{item.promotionAmount}}</div> | ||
6 | </div> | 6 | </div> |
7 | - | ||
8 | - <div class="price-item"> | ||
9 | - <div>运费</div> | ||
10 | - <div>-¥10.00</div> | ||
11 | - </div> | ||
12 | - | ||
13 | - <div class="price-item"> | ||
14 | - <div>实付金额</div> | ||
15 | - <div class="red">¥799.00</div> | ||
16 | - </div> | ||
17 | - | ||
18 | - <div class="tip">如卖家原因导致交易失败,您将获得赔偿金¥200</div> | ||
19 | </div> | 7 | </div> |
20 | </template> | 8 | </template> |
21 | 9 | ||
@@ -24,14 +12,25 @@ export default { | @@ -24,14 +12,25 @@ export default { | ||
24 | name: 'BuyerFee', | 12 | name: 'BuyerFee', |
25 | props: { | 13 | props: { |
26 | data: { | 14 | data: { |
27 | - type: Object, | 15 | + type: Array, |
28 | default() { | 16 | default() { |
29 | - return {}; | 17 | + return []; |
30 | } | 18 | } |
19 | + }, | ||
20 | + desc: { | ||
21 | + type: String, | ||
22 | + default: '' | ||
31 | } | 23 | } |
32 | }, | 24 | }, |
33 | data() { | 25 | data() { |
34 | return {}; | 26 | return {}; |
27 | + }, | ||
28 | + methods: { | ||
29 | + getClass(index) { | ||
30 | + return { | ||
31 | + red: index === (this.data.length - 1) | ||
32 | + }; | ||
33 | + } | ||
35 | } | 34 | } |
36 | }; | 35 | }; |
37 | </script> | 36 | </script> |
@@ -47,12 +46,6 @@ export default { | @@ -47,12 +46,6 @@ export default { | ||
47 | margin-top: 20px; | 46 | margin-top: 20px; |
48 | } | 47 | } |
49 | 48 | ||
50 | -.tip { | ||
51 | - margin-top: 20px; | ||
52 | - font-size: 24px; | ||
53 | - color: #999; | ||
54 | -} | ||
55 | - | ||
56 | .red { | 49 | .red { |
57 | font-size: 36px; | 50 | font-size: 36px; |
58 | color: red; | 51 | color: red; |
1 | <template> | 1 | <template> |
2 | <div class="order-footer-wrapper"> | 2 | <div class="order-footer-wrapper"> |
3 | <div class="btn1"> | 3 | <div class="btn1"> |
4 | - <span>待支付:<span class="red">¥2149.00</span></span> | 4 | + <span>待支付:<span class="red">¥{{amount}}</span></span> |
5 | </div> | 5 | </div> |
6 | <YohoButton class="btn2" txt="去支付" @click="onClick"></YohoButton> | 6 | <YohoButton class="btn2" txt="去支付" @click="onClick"></YohoButton> |
7 | </div> | 7 | </div> |
@@ -11,11 +11,7 @@ | @@ -11,11 +11,7 @@ | ||
11 | 11 | ||
12 | export default { | 12 | export default { |
13 | name: 'BuyerOrderFooter', | 13 | name: 'BuyerOrderFooter', |
14 | - computed: { | ||
15 | - txt() { | ||
16 | - return ''; | ||
17 | - } | ||
18 | - }, | 14 | + props: ['amount'], |
19 | methods: { | 15 | methods: { |
20 | onClick() { | 16 | onClick() { |
21 | this.$createOrderPayType().show(); | 17 | this.$createOrderPayType().show(); |
@@ -3,8 +3,8 @@ | @@ -3,8 +3,8 @@ | ||
3 | <ImageFormat :src="data.goodImg" width="90" height="90"></ImageFormat> | 3 | <ImageFormat :src="data.goodImg" width="90" height="90"></ImageFormat> |
4 | 4 | ||
5 | <div class="product-price"> | 5 | <div class="product-price"> |
6 | - <div class="red">¥299.00</div> | ||
7 | - <div class="product-name">Air Jordan 1 Retro High Off-whitetro High Off-white球鞋</div> | 6 | + <div class="red">¥{{data.goodPrice}}</div> |
7 | + <div class="product-name">{{data.productName}}</div> | ||
8 | <div class="price">{{data.colorName}},{{data.sizeName}}</div> | 8 | <div class="price">{{data.colorName}},{{data.sizeName}}</div> |
9 | </div> | 9 | </div> |
10 | </div> | 10 | </div> |
1 | +<template> | ||
2 | +<div class="coupon-wrapper" @click="onClick"> | ||
3 | + <div class="title">优惠券<span class="desc">{{data.desc}}</span></div> | ||
4 | + <div><span class="red">{{data.coupon_amount_str}}</span><i class="iconfont iconright"></i></div> | ||
5 | +</div> | ||
6 | +</template> | ||
7 | + | ||
8 | +<script> | ||
9 | +export default { | ||
10 | + name: 'OrderCoupon', | ||
11 | + props: { | ||
12 | + data: { | ||
13 | + type: Object, | ||
14 | + default() { | ||
15 | + return {}; | ||
16 | + } | ||
17 | + } | ||
18 | + }, | ||
19 | + methods: { | ||
20 | + onClick() { | ||
21 | + this.$emit('click'); | ||
22 | + } | ||
23 | + } | ||
24 | +}; | ||
25 | +</script> | ||
26 | + | ||
27 | +<style lang="scss" scoped> | ||
28 | +.coupon-wrapper { | ||
29 | + display: flex; | ||
30 | + justify-content: space-between; | ||
31 | + align-items: center; | ||
32 | +} | ||
33 | + | ||
34 | +.title { | ||
35 | + font-size: 32px; | ||
36 | + display: flex; | ||
37 | + align-items: center; | ||
38 | +} | ||
39 | + | ||
40 | +.desc { | ||
41 | + font-size: 24px; | ||
42 | + color: #3f3f3f; | ||
43 | + margin-left: 10px; | ||
44 | +} | ||
45 | + | ||
46 | +.red { | ||
47 | + color: #d0021b; | ||
48 | + font-size: 28px; | ||
49 | + margin-right: 10px; | ||
50 | +} | ||
51 | + | ||
52 | +</style> |
@@ -2,12 +2,12 @@ | @@ -2,12 +2,12 @@ | ||
2 | <div> | 2 | <div> |
3 | <div class="info"> | 3 | <div class="info"> |
4 | <span>支付方式:</span> | 4 | <span>支付方式:</span> |
5 | - <span>在线支付</span> | 5 | + <span>{{payWay.paymentTypeName}}</span> |
6 | </div> | 6 | </div> |
7 | 7 | ||
8 | <div class="info"> | 8 | <div class="info"> |
9 | <span>配送方式:</span> | 9 | <span>配送方式:</span> |
10 | - <span>顺丰速运</span> | 10 | + <span>{{deliveryWay.deliveryWayName}}</span> |
11 | </div> | 11 | </div> |
12 | </div> | 12 | </div> |
13 | </template> | 13 | </template> |
@@ -15,6 +15,20 @@ | @@ -15,6 +15,20 @@ | ||
15 | <script> | 15 | <script> |
16 | export default { | 16 | export default { |
17 | name: 'OrderInfo', | 17 | name: 'OrderInfo', |
18 | + props: { | ||
19 | + payWay: { | ||
20 | + type: Object, | ||
21 | + default() { | ||
22 | + return {}; | ||
23 | + } | ||
24 | + }, | ||
25 | + deliveryWay: { | ||
26 | + type: Object, | ||
27 | + default() { | ||
28 | + return {}; | ||
29 | + } | ||
30 | + } | ||
31 | + } | ||
18 | }; | 32 | }; |
19 | </script> | 33 | </script> |
20 | 34 |
@@ -5,12 +5,11 @@ import OrderDetail from './order-detail'; | @@ -5,12 +5,11 @@ import OrderDetail from './order-detail'; | ||
5 | export default [ | 5 | export default [ |
6 | { | 6 | { |
7 | name: 'OrderSellConfirm', | 7 | name: 'OrderSellConfirm', |
8 | - path: '/xianyu/order/sellerconfirm.html', | 8 | + path: '/xianyu/order/sellconfirm.html', |
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 | - sizeId: route.query.sizeId, | ||
13 | - tradeTypeId: route.query.tradeTypeId | 12 | + sizeId: route.query.sizeId |
14 | }) | 13 | }) |
15 | }, | 14 | }, |
16 | { | 15 | { |
@@ -24,12 +23,11 @@ export default [ | @@ -24,12 +23,11 @@ export default [ | ||
24 | }, | 23 | }, |
25 | { | 24 | { |
26 | name: 'OrderBuyConfirm', | 25 | name: 'OrderBuyConfirm', |
27 | - path: '/xianyu/order/buyerconfirm.html', | 26 | + path: '/xianyu/order/buyconfirm.html', |
28 | component: () => import(/* webpackChunkName: "order" */ './buyer-confirm'), | 27 | component: () => import(/* webpackChunkName: "order" */ './buyer-confirm'), |
29 | props: (route) => ({ | 28 | props: (route) => ({ |
30 | productId: route.query.productId, | 29 | productId: route.query.productId, |
31 | - sizeId: route.query.sizeId, | ||
32 | - tradeTypeId: route.query.tradeTypeId | 30 | + sizeId: route.query.sizeId |
33 | }) | 31 | }) |
34 | }, | 32 | }, |
35 | { | 33 | { |
@@ -9,7 +9,12 @@ | @@ -9,7 +9,12 @@ | ||
9 | <script> | 9 | <script> |
10 | export default { | 10 | export default { |
11 | name: 'PayPage', | 11 | name: 'PayPage', |
12 | - props: ['orderCode', 'payment'] | 12 | + props: ['orderCode', 'payment'], |
13 | + mounted() { | ||
14 | + }, | ||
15 | + methods: { | ||
16 | + | ||
17 | + } | ||
13 | }; | 18 | }; |
14 | </script> | 19 | </script> |
15 | 20 |
@@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
9 | <AddressInfo :data="address" class="order-item"></AddressInfo> | 9 | <AddressInfo :data="address" class="order-item"></AddressInfo> |
10 | </div> | 10 | </div> |
11 | <div class="footer"> | 11 | <div class="footer"> |
12 | - <OrderAgree :value="agree" @input="changeAgree" class="agree-wrapper"></OrderAgree> | 12 | + <OrderAgree :value="agree" @input="changeAgree" class="agree-wrapper" :desc="agreeDesc"></OrderAgree> |
13 | <YohoButton :txt="txt" @click="onClick" :disable="!agree"></YohoButton> | 13 | <YohoButton :txt="txt" @click="onClick" :disable="!agree"></YohoButton> |
14 | </div> | 14 | </div> |
15 | </LayoutApp> | 15 | </LayoutApp> |
@@ -24,18 +24,13 @@ import TitleComp from './components/confirm/title'; | @@ -24,18 +24,13 @@ import TitleComp from './components/confirm/title'; | ||
24 | import OrderMargin from './components/confirm/order-margin'; | 24 | import OrderMargin from './components/confirm/order-margin'; |
25 | import OrderFee from './components/confirm/order-fee'; | 25 | import OrderFee from './components/confirm/order-fee'; |
26 | import OrderAgree from './components/confirm/agree'; | 26 | import OrderAgree from './components/confirm/agree'; |
27 | -import { Types } from 'store/order/order-confirm'; | 27 | +import { Types, UserType } from 'store/order/order-confirm'; |
28 | import { get } from 'lodash'; | 28 | import { get } from 'lodash'; |
29 | 29 | ||
30 | import { createNamespacedHelpers, mapState } from 'vuex'; | 30 | import { createNamespacedHelpers, mapState } from 'vuex'; |
31 | 31 | ||
32 | const { mapState: mapOrderState, mapActions: mapOrderAction, mapMutations: mapOrderMutations } = createNamespacedHelpers('order/orderConfirm'); | 32 | const { mapState: mapOrderState, mapActions: mapOrderAction, mapMutations: mapOrderMutations } = createNamespacedHelpers('order/orderConfirm'); |
33 | 33 | ||
34 | -const UserType = { | ||
35 | - sell: 'sell', | ||
36 | - buy: 'buy' | ||
37 | -}; | ||
38 | - | ||
39 | export default { | 34 | export default { |
40 | name: 'OrderConfirm', | 35 | name: 'OrderConfirm', |
41 | props: ['productId', 'sizeId', 'tradeTypeId'], | 36 | props: ['productId', 'sizeId', 'tradeTypeId'], |
@@ -52,7 +47,8 @@ export default { | @@ -52,7 +47,8 @@ export default { | ||
52 | return { | 47 | return { |
53 | txt: '提交', | 48 | txt: '提交', |
54 | error: false, | 49 | error: false, |
55 | - num: 1 | 50 | + num: 1, |
51 | + agreeDesc: '有货卖家协议' | ||
56 | }; | 52 | }; |
57 | }, | 53 | }, |
58 | mounted() { | 54 | mounted() { |
@@ -60,8 +56,7 @@ export default { | @@ -60,8 +56,7 @@ export default { | ||
60 | this.fetchOrderAddress({ tabType: UserType.sell }); | 56 | this.fetchOrderAddress({ tabType: UserType.sell }); |
61 | this.$store.dispatch('product/getSelectedTradeProduct', { | 57 | this.$store.dispatch('product/getSelectedTradeProduct', { |
62 | productId: this.productId, | 58 | productId: this.productId, |
63 | - sizeId: this.sizeId, | ||
64 | - tradeTypedId: this.tradeTypeId | 59 | + sizeId: this.sizeId |
65 | }); | 60 | }); |
66 | }, | 61 | }, |
67 | computed: { | 62 | computed: { |
apps/statics/image/order/bg@3x.png
0 → 100644

11.9 KB
@@ -5,7 +5,14 @@ export const Types = { | @@ -5,7 +5,14 @@ export const Types = { | ||
5 | FETCH_ORDER_USER_STATUS: 'FETCH_ORDER_USER_STATUS', | 5 | FETCH_ORDER_USER_STATUS: 'FETCH_ORDER_USER_STATUS', |
6 | FETCH_ORDER_FEE: 'FETCH_ORDER_FEE', | 6 | FETCH_ORDER_FEE: 'FETCH_ORDER_FEE', |
7 | CHANGE_PRICE: 'CHANGE_PRICE', | 7 | CHANGE_PRICE: 'CHANGE_PRICE', |
8 | - CHANGE_AGREE: 'CHANGE_AGREE' | 8 | + CHANGE_AGREE: 'CHANGE_AGREE', |
9 | + FETCH_ORDER_BUY_ORDER: 'FETCH_ODER_BUY_ORDER', | ||
10 | + FETCH_ORDER_COUPON_LIST: 'FETCH_ORDER_COUPON_LIST' | ||
11 | +}; | ||
12 | + | ||
13 | +export const UserType = { | ||
14 | + sell: 'sell', | ||
15 | + buy: 'buy' | ||
9 | }; | 16 | }; |
10 | 17 | ||
11 | export default function() { | 18 | export default function() { |
@@ -28,7 +35,10 @@ export default function() { | @@ -28,7 +35,10 @@ export default function() { | ||
28 | alipayStatus: false, | 35 | alipayStatus: false, |
29 | userStatus: false, | 36 | userStatus: false, |
30 | price: '', | 37 | price: '', |
31 | - agree: false | 38 | + agree: false, |
39 | + | ||
40 | + orderDetail: {}, | ||
41 | + couponList: [] | ||
32 | }, | 42 | }, |
33 | mutations: { | 43 | mutations: { |
34 | [Types.FETCH_ORDER_ADDRESS](state, data) { | 44 | [Types.FETCH_ORDER_ADDRESS](state, data) { |
@@ -42,6 +52,12 @@ export default function() { | @@ -42,6 +52,12 @@ export default function() { | ||
42 | }, | 52 | }, |
43 | [Types.CHANGE_AGREE](state, data) { | 53 | [Types.CHANGE_AGREE](state, data) { |
44 | state.agree = data; | 54 | state.agree = data; |
55 | + }, | ||
56 | + [Types.FETCH_ORDER_BUY_ORDER](state, data) { | ||
57 | + state.orderDetail = data; | ||
58 | + }, | ||
59 | + [Types.FETCH_ORDER_COUPON_LIST](state, data) { | ||
60 | + state.couponList = data; | ||
45 | } | 61 | } |
46 | }, | 62 | }, |
47 | actions: { | 63 | actions: { |
@@ -81,7 +97,19 @@ export default function() { | @@ -81,7 +97,19 @@ export default function() { | ||
81 | 97 | ||
82 | async fetchPayList({ commit }, payload) { | 98 | async fetchPayList({ commit }, payload) { |
83 | return this.$api.post('/api/order/paytype', payload); | 99 | return this.$api.post('/api/order/paytype', payload); |
84 | - } | 100 | + }, |
101 | + | ||
102 | + async fetchPayment({ commit }, { skup }) { | ||
103 | + const orderInfo = await this.$api.post('/api/order/confirm/buypayment', { skup, api_version: 1 }); | ||
104 | + const couponList = await this.$api.get('/api/order/confirm/coupon', { skup, depositRequirement: 'N' }); | ||
105 | + | ||
106 | + if (orderInfo.code !== 200) { | ||
107 | + return; | ||
108 | + } | ||
109 | + | ||
110 | + commit(Types.FETCH_ORDER_BUY_ORDER, orderInfo.data); | ||
111 | + commit(Types.FETCH_ORDER_COUPON_LIST, couponList.data); | ||
112 | + }, | ||
85 | }, | 113 | }, |
86 | getters: {}, | 114 | getters: {}, |
87 | }; | 115 | }; |
@@ -138,7 +138,7 @@ module.exports = { | @@ -138,7 +138,7 @@ module.exports = { | ||
138 | api: 'app.address.gethidden', | 138 | api: 'app.address.gethidden', |
139 | }, | 139 | }, |
140 | 140 | ||
141 | - // 计算订单价格 | 141 | + // 卖家计算订单价格 |
142 | '/api/order/confirm/compute': { | 142 | '/api/order/confirm/compute': { |
143 | auth: true, | 143 | auth: true, |
144 | ufo: true, | 144 | ufo: true, |
@@ -173,6 +173,38 @@ module.exports = { | @@ -173,6 +173,38 @@ module.exports = { | ||
173 | api: 'ufo.payment.findPayListDetail', | 173 | api: 'ufo.payment.findPayListDetail', |
174 | }, | 174 | }, |
175 | 175 | ||
176 | + // 买家计算订单价格 | ||
177 | + '/api/order/confirm/buycompute': { | ||
178 | + ufo: true, | ||
179 | + auth: true, | ||
180 | + api: 'ufo.order.compute', | ||
181 | + params: { | ||
182 | + skup: { type: Number, require: true } | ||
183 | + }, | ||
184 | + }, | ||
185 | + | ||
186 | + // 买家预定单订单价格 | ||
187 | + '/api/order/confirm/buypayment': { | ||
188 | + ufo: true, | ||
189 | + auth: true, | ||
190 | + path: 'shopping', | ||
191 | + api: 'ufo.order.payment', | ||
192 | + params: { | ||
193 | + skup: { type: Number, require: true } | ||
194 | + }, | ||
195 | + }, | ||
196 | + | ||
197 | + // 买家获得优惠券 | ||
198 | + '/api/order/confirm/coupon': { | ||
199 | + ufo: true, | ||
200 | + auth: true, | ||
201 | + path: 'shopping', | ||
202 | + api: 'ufo.order.selectCoupon', | ||
203 | + params: { | ||
204 | + skup: { type: Number, require: true } | ||
205 | + }, | ||
206 | + }, | ||
207 | + | ||
176 | // 订单物流信息 | 208 | // 订单物流信息 |
177 | '/api/order/express': { | 209 | '/api/order/express': { |
178 | ufo: true, | 210 | ufo: true, |
@@ -182,5 +214,5 @@ module.exports = { | @@ -182,5 +214,5 @@ module.exports = { | ||
182 | tabType: { type: String, require: true }, // 订单来源 | 214 | tabType: { type: String, require: true }, // 订单来源 |
183 | orderCode: { type: Number, require: true }, // 订单编号 | 215 | orderCode: { type: Number, require: true }, // 订单编号 |
184 | }, | 216 | }, |
185 | - }, | 217 | + } |
186 | }; | 218 | }; |
-
Please register or login to post a comment