fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit da2a56033f12f2640b00096b04ebe6408d5ec8ec 1 parent 960413dd

订单类表

Inline Side-by-side
Showing 5 changed files with 188 additions and 173 deletions
1 <template> 1 <template>
2 - <div class="order-detail-wrapper">  
3 - <div class="content">  
4 - <!-- 状态信息 -->  
5 - <detail-header />  
6 - <!-- 物流信息 -->  
7 - <router-link  
8 - v-if="lastExpressInfo"  
9 - :to="{ name: 'orderLogisticsInfo', params: $route.params }"  
10 - >  
11 - <div class="logistics-info item-wrapper">  
12 - <div class="content">  
13 - <i class="logistics-icon"></i>  
14 - <div class="info">  
15 - <p>{{ lastExpressInfo.acceptRemark }}</p>  
16 - <p>{{ lastExpressInfo.createTimeStr }}</p> 2 + <layout-app>
  3 + <div class="order-detail-wrapper">
  4 + <div class="content">
  5 + <!-- 状态信息 -->
  6 + <detail-header />
  7 + <!-- 物流信息 -->
  8 + <router-link
  9 + v-if="lastExpressInfo"
  10 + :to="{ name: 'orderLogisticsInfo', params: $route.params }"
  11 + >
  12 + <div class="logistics-info item-wrapper">
  13 + <div class="content">
  14 + <i class="logistics-icon"></i>
  15 + <div class="info">
  16 + <p>{{ lastExpressInfo.acceptRemark }}</p>
  17 + <p>{{ lastExpressInfo.createTimeStr }}</p>
  18 + </div>
17 </div> 19 </div>
  20 + <i class="right-icon"></i>
18 </div> 21 </div>
19 - <i class="right-icon"></i> 22 + </router-link>
  23 + <!-- 地址信息 -->
  24 + <address-info class="item-wrapper" />
  25 + <!-- 商品信息 -->
  26 + <order-item-info class="item-wrapper" />
  27 + <!-- 价格信息 -->
  28 + <div class="price-info item-wrapper">
  29 + <p>
  30 + <span class="label">商品金额:</span>
  31 + <span>¥{{ priceInfo.goodPrice }}</span>
  32 + </p>
  33 + <p class="delivery-fee">
  34 + <span class="label">运费:</span>
  35 + <span>¥{{ priceInfo.feePrice }}</span>
  36 + </p>
  37 + <p>
  38 + <span class="label">实际金额:</span>
  39 + <span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>
  40 + </p>
20 </div> 41 </div>
21 - </router-link>  
22 - <!-- 地址信息 -->  
23 - <address-info class="item-wrapper" />  
24 - <!-- 商品信息 -->  
25 - <order-item-info class="item-wrapper" />  
26 - <!-- 价格信息 -->  
27 - <div class="price-info item-wrapper">  
28 - <p>  
29 - <span class="label">商品金额:</span>  
30 - <span>¥{{ priceInfo.goodPrice }}</span>  
31 - </p>  
32 - <p class="delivery-fee">  
33 - <span class="label">运费:</span>  
34 - <span>¥{{ priceInfo.feePrice }}</span>  
35 - </p>  
36 - <p>  
37 - <span class="label">实际金额:</span>  
38 - <span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>  
39 - </p>  
40 - </div>  
41 - <!-- 交易信息 -->  
42 - <div class="trade-info item-wrapper">  
43 - <p>  
44 - <span class="label">创建时间:</span>  
45 - <span>{{ orderDetail.createTime }}</span>  
46 - </p>  
47 - <p>  
48 - <span class="label">订单编号:</span>  
49 - <span>{{ orderDetail.orderCode }}</span>  
50 - </p>  
51 - <p v-if="orderDetail.paymentStr">  
52 - <span class="label">支付方式:</span>  
53 - <span>{{ orderDetail.paymentStr }}</span>  
54 - </p>  
55 - </div>  
56 - </div>  
57 - <!-- 操作 -->  
58 - <detail-footer>  
59 - <template #tip="{orderDetail, statusDetail}">  
60 - <div v-if="statusDetail.status === 0">  
61 - <p class="real-pay-price">  
62 - ¥{{ orderDetail.priceInfo.realPayPrice }} 42 + <!-- 交易信息 -->
  43 + <div class="trade-info item-wrapper">
  44 + <p>
  45 + <span class="label">创建时间:</span>
  46 + <span>{{ orderDetail.createTime }}</span>
  47 + </p>
  48 + <p>
  49 + <span class="label">订单编号:</span>
  50 + <span>{{ orderDetail.orderCode }}</span>
  51 + </p>
  52 + <p v-if="orderDetail.paymentStr">
  53 + <span class="label">支付方式:</span>
  54 + <span>{{ orderDetail.paymentStr }}</span>
63 </p> 55 </p>
64 - <p>实付金额</p>  
65 </div> 56 </div>
66 - </template>  
67 - </detail-footer>  
68 - </div> 57 + </div>
  58 + <!-- 操作 -->
  59 + <detail-footer>
  60 + <template #tip="{orderDetail, statusDetail}">
  61 + <div v-if="statusDetail.status === 0">
  62 + <p class="real-pay-price">
  63 + ¥{{ orderDetail.priceInfo.realPayPrice }}
  64 + </p>
  65 + <p>实付金额</p>
  66 + </div>
  67 + </template>
  68 + </detail-footer>
  69 + </div>
  70 + </layout-app>
69 </template> 71 </template>
70 72
71 <script> 73 <script>
1 <template> 1 <template>
2 - <div class="order-detail-wrapper">  
3 - <div class="content">  
4 - <!-- 状态信息 -->  
5 - <detail-header />  
6 - <!-- 物流信息 -->  
7 - <router-link  
8 - v-if="lastExpressInfo"  
9 - :to="{ name: 'orderLogisticsInfo', params: $route.params }"  
10 - >  
11 - <div class="logistics-info item-wrapper">  
12 - <div class="content">  
13 - <i class="logistics-icon"></i>  
14 - <div class="info">  
15 - <p>{{ lastExpressInfo.acceptRemark }}</p>  
16 - <p>{{ lastExpressInfo.createTimeStr }}</p> 2 + <layout-app>
  3 + <div class="order-detail-wrapper">
  4 + <div class="content">
  5 + <!-- 状态信息 -->
  6 + <detail-header />
  7 + <!-- 物流信息 -->
  8 + <router-link
  9 + v-if="lastExpressInfo"
  10 + :to="{ name: 'orderLogisticsInfo', params: $route.params }"
  11 + >
  12 + <div class="logistics-info item-wrapper">
  13 + <div class="content">
  14 + <i class="logistics-icon"></i>
  15 + <div class="info">
  16 + <p>{{ lastExpressInfo.acceptRemark }}</p>
  17 + <p>{{ lastExpressInfo.createTimeStr }}</p>
  18 + </div>
17 </div> 19 </div>
  20 + <i class="right-icon"></i>
18 </div> 21 </div>
19 - <i class="right-icon"></i> 22 + </router-link>
  23 + <!-- 地址信息 -->
  24 + <address-info class="item-wrapper" />
  25 + <!-- 商品信息 -->
  26 + <order-item-info class="item-wrapper" />
  27 + <!-- 价格信息 -->
  28 + <div class="price-info item-wrapper">
  29 + <p>
  30 + <span class="label">平台费用:</span>
  31 + <span>{{ platformFee.amount }}</span>
  32 + </p>
  33 + <p class="delivery-fee">
  34 + <span class="label"
  35 + >银行转账费({{
  36 + parseInt(platformFee.payChannelPercentage)
  37 + }}%):</span
  38 + >
  39 + <span>{{ orderDetail.bankTransferFee }}</span>
  40 + </p>
  41 + <p>
  42 + <span class="label">实际收入:</span>
  43 + <span class="pay-price">{{ orderDetail.income }}</span>
  44 + </p>
  45 + </div>
  46 + <!-- 交易信息 -->
  47 + <div class="trade-info item-wrapper">
  48 + <p>
  49 + <span class="label">创建时间:</span>
  50 + <span>{{ orderDetail.createTime }}</span>
  51 + </p>
  52 + <p>
  53 + <span class="label">订单编号:</span>
  54 + <span>{{ orderDetail.orderCode }}</span>
  55 + </p>
  56 + <p v-if="orderDetail.paymentStr">
  57 + <span class="label">支付方式:</span>
  58 + <span>{{ orderDetail.paymentStr }}</span>
  59 + </p>
  60 + <p v-if="orderDetail.earnestMoneyStr">
  61 + <span class="label">保证金:</span>
  62 + <span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span>
  63 + </p>
  64 + <p v-if="statusDetail.paymentTips">
  65 + <span class="payment-tip">{{ statusDetail.paymentTips }}</span>
  66 + </p>
20 </div> 67 </div>
21 - </router-link>  
22 - <!-- 地址信息 -->  
23 - <address-info class="item-wrapper" />  
24 - <!-- 商品信息 -->  
25 - <order-item-info class="item-wrapper" />  
26 - <!-- 价格信息 -->  
27 - <div class="price-info item-wrapper">  
28 - <p>  
29 - <span class="label">平台费用:</span>  
30 - <span>{{ orderDetail.platformFee.amount }}</span>  
31 - </p>  
32 - <p class="delivery-fee">  
33 - <span class="label"  
34 - >银行转账费({{  
35 - parseInt(orderDetail.platformFee.payChannelPercentage)  
36 - }}%):</span  
37 - >  
38 - <span>{{ orderDetail.bankTransferFee }}</span>  
39 - </p>  
40 - <p>  
41 - <span class="label">实际收入:</span>  
42 - <span class="pay-price">{{ orderDetail.income }}</span>  
43 - </p>  
44 - </div>  
45 - <!-- 交易信息 -->  
46 - <div class="trade-info item-wrapper">  
47 - <p>  
48 - <span class="label">创建时间:</span>  
49 - <span>{{ orderDetail.createTime }}</span>  
50 - </p>  
51 - <p>  
52 - <span class="label">订单编号:</span>  
53 - <span>{{ orderDetail.orderCode }}</span>  
54 - </p>  
55 - <p v-if="orderDetail.paymentStr">  
56 - <span class="label">支付方式:</span>  
57 - <span>{{ orderDetail.paymentStr }}</span>  
58 - </p>  
59 - <p v-if="orderDetail.earnestMoneyStr">  
60 - <span class="label">保证金:</span>  
61 - <span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span>  
62 - </p>  
63 - <p v-if="statusDetail.paymentTips">  
64 - <span class="payment-tip">{{ statusDetail.paymentTips }}</span>  
65 - </p>  
66 </div> 68 </div>
  69 + <!-- 操作 -->
  70 + <detail-footer>
  71 + <template #tip="{orderDetail, statusDetail}">
  72 + <div v-if="statusDetail.status === 0">
  73 + <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
  74 + <p>{{ statusDetail.statuStr }}</p>
  75 + </div>
  76 + </template>
  77 + </detail-footer>
67 </div> 78 </div>
68 - <!-- 操作 -->  
69 - <detail-footer>  
70 - <template #tip="{orderDetail, statusDetail}">  
71 - <div v-if="statusDetail.status === 0">  
72 - <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>  
73 - <p>{{ statusDetail.statuStr }}</p>  
74 - </div>  
75 - </template>  
76 - </detail-footer>  
77 - </div> 79 + </layout-app>
78 </template> 80 </template>
79 81
80 <script> 82 <script>
@@ -105,7 +107,12 @@ export default { @@ -105,7 +107,12 @@ export default {
105 }, 107 },
106 computed: { 108 computed: {
107 ...mapState(["orderDetail"]), 109 ...mapState(["orderDetail"]),
108 - ...mapGetters(["lastExpressInfo", "priceInfo", "statusDetail"]) 110 + ...mapGetters([
  111 + "lastExpressInfo",
  112 + "priceInfo",
  113 + "statusDetail",
  114 + "platformFee"
  115 + ])
109 }, 116 },
110 methods: { 117 methods: {
111 ...mapActions(["fetchOrderDetail"]) 118 ...mapActions(["fetchOrderDetail"])
1 <template> 1 <template>
2 - <div class="content-wrapper">  
3 - <scroll  
4 - @pulling-up="fetchData"  
5 - :options="options"  
6 - :data="orderList"  
7 - class="order-list-scroll-wrap"  
8 - v-show="!isShowEmpty"  
9 - >  
10 - <ul class="list-wrapper">  
11 - <li v-for="order in orderList" :key="order.orderCode">  
12 - <order-info :order="order" />  
13 - <order-list-item :order="order" />  
14 - <!-- 订单操作 -->  
15 - <order-item-footer :order="order" />  
16 - </li>  
17 - </ul>  
18 - </scroll>  
19 - <empty-list v-show="isShowEmpty" />  
20 - </div> 2 + <layout-app>
  3 + <div class="content-wrapper">
  4 + <scroll
  5 + @pulling-up="fetchData"
  6 + :options="options"
  7 + :data="orderList"
  8 + class="order-list-scroll-wrap"
  9 + v-show="!isShowEmpty"
  10 + >
  11 + <ul class="list-wrapper">
  12 + <li v-for="order in orderList" :key="order.orderCode">
  13 + <order-info :order="order" />
  14 + <order-list-item :order="order" />
  15 + <!-- 订单操作 -->
  16 + <order-item-footer :order="order" />
  17 + </li>
  18 + </ul>
  19 + </scroll>
  20 + <empty-list v-show="isShowEmpty" />
  21 + </div>
  22 + </layout-app>
21 </template> 23 </template>
22 24
23 <script> 25 <script>
1 <template> 1 <template>
2 - <div class="content-wrapper">  
3 - <status-nav /> 2 + <layout-app>
  3 + <div class="content-wrapper">
  4 + <status-nav />
4 5
5 - <scroll  
6 - @pulling-up="fetchMore"  
7 - :options="options"  
8 - :data="orderList"  
9 - class="order-list-scroll-wrap"  
10 - v-show="!isShowEmpty"  
11 - >  
12 - <ul class="list-wrapper">  
13 - <li v-for="order in orderList" :key="order.orderCode">  
14 - <order-info :order="order" />  
15 - <order-list-item :order="order" />  
16 - <!-- 订单操作 -->  
17 - <order-item-footer :order="order" />  
18 - </li>  
19 - </ul>  
20 - </scroll> 6 + <scroll
  7 + @pulling-up="fetchMore"
  8 + :options="options"
  9 + :data="orderList"
  10 + class="order-list-scroll-wrap"
  11 + v-show="!isShowEmpty"
  12 + >
  13 + <ul class="list-wrapper">
  14 + <li v-for="order in orderList" :key="order.orderCode">
  15 + <order-info :order="order" />
  16 + <order-list-item :order="order" />
  17 + <!-- 订单操作 -->
  18 + <order-item-footer :order="order" />
  19 + </li>
  20 + </ul>
  21 + </scroll>
21 22
22 - <empty-list v-show="isShowEmpty" />  
23 - </div> 23 + <empty-list v-show="isShowEmpty" />
  24 + </div>
  25 + </layout-app>
24 </template> 26 </template>
25 27
26 <script> 28 <script>
@@ -16,6 +16,8 @@ export default function() { @@ -16,6 +16,8 @@ export default function() {
16 goodsInfo: state => state.orderDetail.goodsInfo || {}, // 商品信息 16 goodsInfo: state => state.orderDetail.goodsInfo || {}, // 商品信息
17 priceInfo: state => state.orderDetail.priceInfo || {}, // 价格信息 17 priceInfo: state => state.orderDetail.priceInfo || {}, // 价格信息
18 actionList: state => state.orderDetail.buttons || {}, // 允许操作 18 actionList: state => state.orderDetail.buttons || {}, // 允许操作
  19 + // 卖家订单价格字段
  20 + platformFee: state => state.orderDetail.platformFee || {},
19 }, 21 },
20 actions: { 22 actions: {
21 /** 23 /**