Skip to content

Commit 2618b8b

Browse files
author
LAPTOP-CNV4CMCJ\cheng
committed
新增了订单详情
1 parent fd27386 commit 2618b8b

File tree

3 files changed

+286
-1
lines changed

3 files changed

+286
-1
lines changed

‎src/router/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,13 @@ export const constantRoutes = [
209209
name: '商品订单',
210210
meta: { title: '商品订单' },
211211
component: (resolve) => require(['@/views/mall/trade/order'], resolve)
212+
},
213+
{
214+
path: '/mall/trade/order/detail',
215+
name: '订单详情',
216+
hidden: true,
217+
meta: { title: '订单详情' },
218+
component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve)
212219
}
213220
]
214221
}

‎src/views/mall/trade/order/detail.vue

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
<template>
2+
<div class="app-container order-detail-page">
3+
<template v-for="(group, index) in detailGroups">
4+
<el-descriptions v-bind="group.groupProps" :key="`group_${index}`" :title="group.title">
5+
<!-- 商品信息 -->
6+
<el-descriptions-item v-if="group.key === 'goodsInfo'" labelClassName="no-colon">
7+
<el-table border>
8+
<el-table-column prop="date" label="商品" width="180"/>
9+
<el-table-column prop="jg" label="价格"/>
10+
<el-table-column prop="spbm" label="商品编码"/>
11+
<el-table-column prop="xl" label="数量"/>
12+
<el-table-column prop="xj" label="小计（元）"/>
13+
<el-table-column prop="tkzt" label="退款状态"/>
14+
<el-table-column prop="zt" label="状态"/>
15+
</el-table>
16+
</el-descriptions-item>
17+
18+
<!-- 订单操作日志 -->
19+
<el-descriptions-item v-if="group.key === 'orderLog'" labelClassName="no-colon">
20+
<el-timeline>
21+
<el-timeline-item
22+
v-for="(activity, index) in detailInfo[group.key]"
23+
:key="index"
24+
:timestamp="activity.timestamp"
25+
>
26+
{{activity.content}}
27+
</el-timeline-item>
28+
</el-timeline>
29+
</el-descriptions-item>
30+
31+
<!-- 物流信息 -->
32+
<el-descriptions-item v-if="group.key === 'expressInfo'" labelClassName="no-colon">
33+
<el-tabs type="card">
34+
<!-- 循环包裹物流信息 -->
35+
<el-tab-pane v-for="(pkgInfo, pInIdx) in detailInfo[group.key]" :key="`pkgInfo_${pInIdx}`" :label="pkgInfo.label">
36+
<!-- 包裹详情 -->
37+
<el-descriptions>
38+
<el-descriptions-item v-for="(pkgChild, pkgCIdx) in group.children" v-bind="pkgChild.childProps" :key="`pkgChild_${pkgCIdx}`" :label="pkgChild.label">
39+
<!-- 包裹商品列表 -->
40+
<template v-if="pkgChild.valueKey === 'goodsList' && pkgInfo[pkgChild.valueKey]">
41+
<div v-for="(goodInfo, goodInfoIdx) in pkgInfo[pkgChild.valueKey]" :key="`goodInfo_${goodInfoIdx}`" style="display: flex;">
42+
<el-image
43+
style="width: 100px;height: 100px;flex: none"
44+
:src="goodInfo.imgUrl">
45+
</el-image>
46+
<el-descriptions :column="1">
47+
<el-descriptions-item labelClassName="no-colon">{{goodInfo.name}}</el-descriptions-item>
48+
<el-descriptions-item label="数量">{{goodInfo.count}}</el-descriptions-item>
49+
</el-descriptions>
50+
</div>
51+
</template>
52+
53+
<!-- 包裹物流详情 -->
54+
<el-timeline v-else-if="pkgChild.valueKey==='wlxq'">
55+
<el-timeline-item
56+
v-for="(activity, index) in pkgInfo[pkgChild.valueKey]"
57+
:key="index"
58+
:timestamp="activity.timestamp"
59+
>
60+
{{activity.content}}
61+
</el-timeline-item>
62+
</el-timeline>
63+
64+
<template v-else>
65+
{{pkgInfo[pkgChild.valueKey]}}
66+
</template>
67+
</el-descriptions-item>
68+
</el-descriptions>
69+
</el-tab-pane>
70+
</el-tabs>
71+
</el-descriptions-item>
72+
73+
<!--订单详情、订单状态-->
74+
<el-descriptions-item v-else v-for="(child, cIdx) in group.children" v-bind="child.childProps" :key="`child_${cIdx}`" :label="child.label">
75+
76+
<!-- 操作按钮(订单状态)-->
77+
<template v-if="group.key === 'orderStatus' && child.valueKey === 'actions'" slot="label">
78+
<el-button type="primary">备注</el-button>
79+
<el-button type="primary">打印发货单</el-button>
80+
</template>
81+
82+
<!-- 内容 -->
83+
<template v-else>
84+
{{detailInfo[child.valueKey]}}
85+
<!--复制地址(订单详情) -->
86+
<el-link v-if="child.valueKey==='shdz'" v-clipboard:copy="detailInfo[child.valueKey]" v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/>
87+
</template>
88+
</el-descriptions-item>
89+
</el-descriptions>
90+
</template>
91+
</div>
92+
</template>
93+
94+
<script>
95+
export default {
96+
name: "detail",
97+
data () {
98+
return {
99+
detailGroups: [
100+
{
101+
title: '订单详情',
102+
children: [
103+
{ label: '交易流水号', valueKey: 'jylsh'},
104+
{ label: '配送方式', valueKey: 'psfs'},
105+
{ label: '营销活动', valueKey: 'yxhd'},
106+
{ label: '订单编号', valueKey: 'ddbh'},
107+
{ label: '收货人', valueKey: 'shr'},
108+
{ label: '买家留言', valueKey: 'mjly'},
109+
{ label: '订单类型', valueKey: 'ddlx'},
110+
{ label: '联系电话', valueKey: 'lxdh'},
111+
{ label: '备注', valueKey: 'bz'},
112+
{ label: '订单来源', valueKey: 'ddly'},
113+
{ label: '付款方式', valueKey: 'fkfs'},
114+
{ label: '买家', valueKey: 'mj'},
115+
{ label: '收货地址', valueKey: 'shdz'}
116+
]
117+
},
118+
{
119+
title: '订单状态',
120+
key: 'orderStatus',
121+
groupProps: {
122+
column: 1
123+
},
124+
children: [
125+
{ label: '订单状态', valueKey: 'ddzt', childProps: { contentStyle: { color: 'red' }}},
126+
{ label: '', valueKey: 'actions', childProps: { labelClassName: 'no-colon'}},
127+
{ label: '提醒', valueKey: 'tx', childProps: { labelStyle: { color: 'red' }}}
128+
]
129+
},
130+
{
131+
title: '物流信息',
132+
key: 'expressInfo',
133+
children: [
134+
{ label: '发货时间', valueKey: 'fhsj'},
135+
{ label: '物流公司', valueKey: 'wlgs'},
136+
{ label: '运单号', valueKey: 'ydh'},
137+
{ label: '商品信息', valueKey: 'goodsList', childProps: { span: 3 }},
138+
{ label: '物流状态', valueKey: 'wlzt', childProps: { span: 3 }},
139+
{ label: '物流详情', valueKey: 'wlxq'}
140+
]
141+
},
142+
{
143+
title: '商品信息',
144+
key: 'goodsInfo'
145+
},
146+
{
147+
title: '订单操作日志',
148+
key: 'orderLog'
149+
}
150+
],
151+
detailInfo: {
152+
jylsh: '16674653573152181000',
153+
psfs: '物流配送',
154+
yxhd: '',
155+
ddbh: '20221103164918001',
156+
shr: '',
157+
mjly: '',
158+
ddlx: '',
159+
lxdh: '',
160+
bz: '',
161+
ddly: '',
162+
shdz: '陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)',
163+
fkfs: '',
164+
mj: '',
165+
ddzt: '已完成',
166+
tx: '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）请及时关注你发出的包裹状态，确保可以配送至买家手中如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商',
167+
expressInfo: [ // 物流信息
168+
{
169+
label: '包裹1',
170+
name: 'bg1',
171+
fhsj: '2022-11-03 16:50:45',
172+
wlgs: '极兔',
173+
ydh: '2132123',
174+
wlzt: '不支持此快递公司',
175+
wlxq: [
176+
{
177+
content: '正在派送途中,请您准备签收(派件人:王涛,电话:13854563814)',
178+
timestamp: '2018-04-15 15:00:16'
179+
},
180+
{
181+
content: '快件到达 【烟台龙口东江村委营业点】',
182+
timestamp: '2018-04-13 14:54:19'
183+
},
184+
{
185+
content: '快件已发车',
186+
timestamp: '2018-04-11 12:55:52'
187+
},
188+
{
189+
content: '快件已发车',
190+
timestamp: '2018-04-11 12:55:52'
191+
},
192+
{
193+
content: '快件已发车',
194+
timestamp: '2018-04-11 12:55:52'
195+
}
196+
],
197+
goodsList: [ // 包裹下的商品列表
198+
{
199+
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
200+
count: 6,
201+
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
202+
}
203+
]
204+
},
205+
{
206+
label: '包裹2',
207+
name: 'bg1',
208+
fhsj: '',
209+
wlgs: '',
210+
ydh: '',
211+
wlzt: '',
212+
goodsInfo: {}
213+
},
214+
{
215+
label: '包裹3',
216+
name: 'bg1',
217+
fhsj: '',
218+
wlgs: '',
219+
ydh: '',
220+
wlzt: '',
221+
goodsInfo: {}
222+
}
223+
],
224+
orderLog: [ // 订单操作日志
225+
{
226+
content: '买家【乌鸦】关闭了订单',
227+
timestamp: '2018-04-15 15:00:16'
228+
},
229+
{
230+
content: '买家【乌鸦】下单了',
231+
timestamp: '2018-04-15 15:00:16'
232+
}
233+
],
234+
goodsInfo: [] // 商品详情tableData
235+
}
236+
}
237+
},
238+
methods: {
239+
clipboardSuccess() {
240+
this.$modal.msgSuccess("复制成功");
241+
}
242+
}
243+
}
244+
</script>
245+
246+
<style lang="scss" scoped>
247+
::v-deep .el-descriptions{
248+
&:not(:nth-child(1)) {
249+
margin-top: 20px;
250+
}
251+
.el-descriptions__title{
252+
display: flex;
253+
align-items: center;
254+
&::before{
255+
content: '';
256+
display: inline-block;
257+
margin-right: 10px;
258+
width: 3px;
259+
height: 20px;
260+
background-color: #409EFF;
261+
}
262+
}
263+
.el-descriptions-item__container{
264+
margin: 0 10px;
265+
.no-colon{
266+
margin: 0;
267+
&::after{
268+
content: ''
269+
}
270+
}
271+
}
272+
}
273+
</style>

‎src/views/mall/trade/order/index.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
</el-button>
9191
<el-dropdown-menu slot="dropdown">
9292
<el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
93-
<el-dropdown-item><el-button type="text">详情</el-button></el-dropdown-item>
93+
<el-dropdown-item><el-button type="text" @click="goToDetail(row)">详情</el-button></el-dropdown-item>
9494
<el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
9595
</el-dropdown-menu>
9696
</el-dropdown>
@@ -322,6 +322,11 @@
322322
}
323323
]
324324
}
325+
},
326+
methods: {
327+
goToDetail (row) {
328+
this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
329+
}
325330
}
326331
}
327332
</script>

0 commit comments

Comments
 (0)