|
@@ -2,39 +2,51 @@
|
2
|
2
|
<div class="page" v-if="data">
|
3
|
3
|
<div class="order-info">
|
4
|
4
|
<div class="info">
|
5
|
|
- <div class="num">订单号:{{data.orderNo}}</div>
|
6
|
|
- <div class="status">{{data.status | orderStatus}}</div>
|
|
5
|
+ <div class="num">订单号:{{ data.orderNo }}</div>
|
|
6
|
+ <div class="status">{{ data.status | orderStatus }}</div>
|
7
|
7
|
</div>
|
8
|
8
|
<div class="con">
|
9
|
9
|
<my-image :src="data.headIcon" class="img"></my-image>
|
10
|
10
|
<div class="main">
|
11
|
11
|
<div class="line">
|
12
|
12
|
<div class="name">
|
13
|
|
- {{data.nickName}}
|
|
13
|
+ {{ data.nickName }}
|
14
|
14
|
</div>
|
15
|
15
|
<div class="money">
|
16
|
|
- 合计:<span class="red-text">¥{{data.amount / 100}}</span>
|
|
16
|
+ 合计:<span class="red-text"
|
|
17
|
+ >¥{{ data.amount / 100 }}</span
|
|
18
|
+ >
|
17
|
19
|
</div>
|
18
|
20
|
</div>
|
19
|
21
|
<div class="line">
|
20
|
|
- <div class="time"> {{ data.orderTime | dateFormat("hh:mm") }}</div>
|
21
|
|
- <div class="money">预估佣金:¥{{data.estimateComission / 100}}</div>
|
|
22
|
+ <div class="time">
|
|
23
|
+ {{ data.orderTime | dateFormat("hh:mm") }}
|
|
24
|
+ </div>
|
|
25
|
+ <div class="money">
|
|
26
|
+ 预估佣金:¥{{ data.estimateComission / 100 }}
|
|
27
|
+ </div>
|
22
|
28
|
</div>
|
23
|
29
|
</div>
|
24
|
30
|
</div>
|
25
|
31
|
</div>
|
26
|
32
|
<ul class="good-list">
|
27
|
|
- <li v-for="(item,index) of data.orderItems" :key="index">
|
|
33
|
+ <li v-for="(item, index) of data.orderItems" :key="index">
|
28
|
34
|
<my-image class="good-img" :src="item.productImage"></my-image>
|
29
|
35
|
<div class="good-con">
|
30
|
|
- <div class="good-name">{{item.productName}}</div>
|
|
36
|
+ <div class="good-name">{{ item.productName }}</div>
|
31
|
37
|
<div class="info">
|
32
|
|
- <div class="sku">规格:{{item.productSpec}}</div>
|
33
|
|
- <div class="count">数量:{{item.count}}</div>
|
|
38
|
+ <div class="sku">规格:{{ item.productSpec }}</div>
|
|
39
|
+ <div class="count">数量:{{ item.count }}</div>
|
34
|
40
|
</div>
|
35
|
41
|
<div class="money">
|
36
|
|
- <div class="price">金额:¥{{item.amount / 100}}</div>
|
37
|
|
- <div class="commission">佣金:¥{{item.estimateComission / 100}}</div>
|
|
42
|
+ <div class="price">金额:¥{{ item.amount / 100 }}</div>
|
|
43
|
+ <div class="commission">
|
|
44
|
+ 佣金:¥{{ item.estimateComission / 100 }}
|
|
45
|
+ </div>
|
|
46
|
+ </div>
|
|
47
|
+ <div class="status">
|
|
48
|
+ <div></div>
|
|
49
|
+ <div>{{item.status | orderStatus}}</div>
|
38
|
50
|
</div>
|
39
|
51
|
</div>
|
40
|
52
|
</li>
|
|
@@ -43,57 +55,51 @@
|
43
|
55
|
<ul>
|
44
|
56
|
<li>
|
45
|
57
|
<div class="key">总件数:</div>
|
46
|
|
- <div class="value">x{{data.totalCount}}</div>
|
|
58
|
+ <div class="value">x{{ data.totalCount }}</div>
|
47
|
59
|
|
48
|
60
|
<div class="key key-r">总金额:</div>
|
49
|
|
- <div class="value">¥{{data.totalAmount / 100}}</div>
|
|
61
|
+ <div class="value">¥{{ data.totalAmount / 100 }}</div>
|
50
|
62
|
</li>
|
51
|
63
|
<li>
|
52
|
|
- <div class="key">积分抵扣({{data.points}}分):</div>
|
53
|
|
- <div class="value">-¥{{data.pointsPrice / 100}}</div>
|
|
64
|
+ <div class="key">积分抵扣({{ data.points }}分):</div>
|
|
65
|
+ <div class="value">-¥{{ data.pointsPrice / 100 }}</div>
|
54
|
66
|
</li>
|
55
|
67
|
<li>
|
56
|
68
|
<div class="key">优惠券:</div>
|
57
|
|
- <div class="value">-¥{{data.couponAmount}}</div>
|
|
69
|
+ <div class="value">-¥{{ data.couponAmount }}</div>
|
58
|
70
|
</li>
|
59
|
71
|
<li>
|
60
|
72
|
<div class="key">运费/配送费:</div>
|
61
|
|
- <div class="value">¥{{data.postage}}</div>
|
|
73
|
+ <div class="value">¥{{ data.postage }}</div>
|
62
|
74
|
</li>
|
63
|
75
|
<li>
|
64
|
76
|
<div class="key">合计:</div>
|
65
|
|
- <div class="value red">¥{{data.amount / 100}}</div>
|
|
77
|
+ <div class="value red">¥{{ data.amount / 100 }}</div>
|
66
|
78
|
</li>
|
67
|
79
|
<li>
|
68
|
80
|
<div class="key">佣金:</div>
|
69
|
81
|
<div class="value blod">
|
70
|
|
- ¥{{data.commission/100}}(佣金)-¥{{data.pointsPrice / 100}}(积分抵扣)=¥{{data.amount / 100}}
|
|
82
|
+ ¥{{ data.commission / 100 }}(佣金)-¥{{
|
|
83
|
+ data.pointsPrice / 100
|
|
84
|
+ }}(积分抵扣)=¥{{ data.amount / 100 }}
|
71
|
85
|
</div>
|
72
|
86
|
</li>
|
73
|
87
|
</ul>
|
74
|
88
|
</section>
|
75
|
89
|
<section class="info-box">
|
76
|
90
|
<ul>
|
77
|
|
- <li>
|
78
|
|
- <div class="key">下单时间:</div>
|
79
|
|
- <div class="value">{{data.orderTime | dateFormat("yyyy-MM-dd hh:mm")}}</div>
|
80
|
|
- </li>
|
81
|
91
|
<!-- <li>
|
82
|
|
- <div class="key">支付时间:</div>
|
83
|
|
- <div class="value">2021/01/01 11:00</div>
|
84
|
|
- </li>
|
85
|
|
- <li>
|
86
|
|
- <div class="key">发货时间:</div>
|
87
|
|
- <div class="value">2021/01/01 11:00</div>
|
88
|
|
- </li>
|
89
|
|
- <li>
|
90
|
|
- <div class="key">订单完成:</div>
|
91
|
|
- <div class="value">2021/01/01 11:00</div>
|
92
|
|
- </li>
|
93
|
|
- <li>
|
94
|
|
- <div class="key">退款时间:</div>
|
95
|
|
- <div class="value">2021/01/01 11:00</div>
|
|
92
|
+ <div class="key">下单时间:</div>
|
|
93
|
+ <div class="value">
|
|
94
|
+ {{ data.orderTime | dateFormat("yyyy-MM-dd hh:mm") }}
|
|
95
|
+ </div>
|
96
|
96
|
</li> -->
|
|
97
|
+ <li v-for="item of data.logs" :key="item.time">
|
|
98
|
+ <div class="key">{{ item.title }}:</div>
|
|
99
|
+ <div class="value">
|
|
100
|
+ {{ item.time | dateFormat("yyyy-MM-dd hh:mm") }}
|
|
101
|
+ </div>
|
|
102
|
+ </li>
|
97
|
103
|
</ul>
|
98
|
104
|
</section>
|
99
|
105
|
</div>
|
|
@@ -197,14 +203,14 @@ export default {
|
197
|
203
|
justify-content: space-between;
|
198
|
204
|
margin-top: px(30);
|
199
|
205
|
.img {
|
200
|
|
- width: px(200);
|
201
|
|
- height: px(200);
|
|
206
|
+ width: px(230);
|
|
207
|
+ height: px(230);
|
202
|
208
|
flex-shrink: 0;
|
203
|
209
|
margin-right: px(20);
|
204
|
210
|
background-color: #f9f9f9;
|
205
|
211
|
/deep/ img {
|
206
|
|
- width: px(200);
|
207
|
|
- height: px(200);
|
|
212
|
+ width: px(230);
|
|
213
|
+ height: px(230);
|
208
|
214
|
}
|
209
|
215
|
}
|
210
|
216
|
}
|
|
@@ -267,7 +273,8 @@ export default {
|
267
|
273
|
@include omits(2);
|
268
|
274
|
}
|
269
|
275
|
.info,
|
270
|
|
- .money {
|
|
276
|
+ .money,
|
|
277
|
+ .status {
|
271
|
278
|
margin-top: px(10);
|
272
|
279
|
display: flex;
|
273
|
280
|
justify-content: space-between;
|
|
@@ -277,6 +284,11 @@ export default {
|
277
|
284
|
.sku {
|
278
|
285
|
color: #666;
|
279
|
286
|
}
|
|
287
|
+ .status{
|
|
288
|
+
|
|
289
|
+ font-size: px(36);
|
|
290
|
+ color: #f78819;
|
|
291
|
+ }
|
280
|
292
|
}
|
281
|
293
|
}
|
282
|
294
|
}
|
|
@@ -302,7 +314,7 @@ export default {
|
302
|
314
|
margin-left: px(50);
|
303
|
315
|
}
|
304
|
316
|
}
|
305
|
|
-.blod{
|
|
317
|
+.blod {
|
306
|
318
|
font-weight: bold;
|
307
|
319
|
}
|
308
|
320
|
</style>
|