Skip to content

Commit a2c7821

Browse files
YunaiVYunaiV
committed
trade：完成管理后台的订单详情的简单对接
1 parent 4f74de0 commit a2c7821

File tree

3 files changed

+96
-133
lines changed

3 files changed

+96
-133
lines changed

‎src/utils/dict.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export const DICT_TYPE = {
6767
TRADE_AFTER_SALE_TYPE: 'trade_after_sale_type', // 售后 - 类型
6868
TRADE_ORDER_TYPE: 'trade_order_type', // 订单 - 类型
6969
TRADE_ORDER_STATUS: 'trade_order_status', // 订单 - 状态
70+
TRADE_ORDER_ITEM_AFTER_SALE_STATUS: 'trade_order_item_after_sale_status', // 订单项 - 售后状态
7071

7172
// ========== MALL - PROMOTION 模块 ==========
7273
PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型

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

Lines changed: 95 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,104 @@
22
<div class="app-container order-detail-page">
33
<!-- 订单信息 -->
44
<el-descriptions title="订单信息">
5-
<el-descriptions-item label="支付单号">123</el-descriptions-item>
5+
<el-descriptions-item label="订单号">{{ order.no }}</el-descriptions-item>
6+
<el-descriptions-item label="配送方式">物流配送</el-descriptions-item> <!-- TODO 芋艿：待实现 -->
7+
<el-descriptions-item label="营销活动">物流配送</el-descriptions-item> <!-- TODO 芋艿：待实现 -->
8+
<el-descriptions-item label="订单类型">
9+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="order.type" />
10+
</el-descriptions-item>
11+
<el-descriptions-item label="收货人">{{ order.receiverName }}</el-descriptions-item>
12+
<el-descriptions-item label="买家留言">{{ order.userRemark }}</el-descriptions-item>
13+
<el-descriptions-item label="订单来源">
14+
<dict-tag :type="DICT_TYPE.TERMINAL" :value="order.terminal" />
15+
</el-descriptions-item>
16+
<el-descriptions-item label="联系电话">{{ order.receiverMobile }}</el-descriptions-item>
17+
<el-descriptions-item label="商家备注">{{ order.remark }}</el-descriptions-item>
18+
<el-descriptions-item label="支付单号">{{ order.payOrderId }}</el-descriptions-item>
19+
<el-descriptions-item label="付款方式">
20+
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="order.payChannelCode" />
21+
</el-descriptions-item>
22+
<el-descriptions-item label="买家">{{ order.user.nickname }}</el-descriptions-item> <!-- TODO 芋艿：待实现：跳转会员 -->
23+
<el-descriptions-item label="收货地址">
24+
{{ order.receiverAreaName }} &nbsp; {{ order.receiverDetailAddress }} &nbsp;
25+
<el-link v-clipboard:copy="order.receiverAreaName + ' ' + order.receiverDetailAddress"
26+
v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/>
27+
</el-descriptions-item>
28+
</el-descriptions>
29+
30+
<!-- 订单状态 -->
31+
<el-descriptions title="订单状态" :column="1">
32+
<el-descriptions-item label="订单状态">
33+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="order.status" />
34+
</el-descriptions-item>
35+
<el-descriptions-item label-class-name="no-colon">
36+
<el-button type="primary" size="small">调整价格</el-button> <!-- TODO 芋艿：待实现 -->
37+
<el-button type="primary" size="small">备注</el-button> <!-- TODO 芋艿：待实现 -->
38+
<el-button type="primary" size="small">发货</el-button> <!-- TODO 芋艿：待实现 -->
39+
<el-button type="primary" size="small">关闭订单</el-button> <!-- TODO 芋艿：待实现 -->
40+
<el-button type="primary" size="small">修改地址</el-button> <!-- TODO 芋艿：待实现 -->
41+
<el-button type="primary" size="small">打印电子面单</el-button> <!-- TODO 芋艿：待实现 -->
42+
<el-button type="primary" size="small">打印发货单</el-button> <!-- TODO 芋艿：待实现 -->
43+
<el-button type="primary" size="small">确认收货</el-button> <!-- TODO 芋艿：待实现 -->
44+
</el-descriptions-item>
45+
<el-descriptions-item label="提醒" label-style="color: red">
46+
买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
47+
请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
48+
如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
49+
</el-descriptions-item>
50+
</el-descriptions>
51+
52+
<!-- 物流信息 TODO -->
53+
54+
<!-- 商品信息 -->
55+
<el-descriptions title="商品信息" :column="6">
56+
<el-descriptions-item labelClassName="no-colon">
57+
<el-table :data="order.items" border>
58+
<el-table-column prop="spuName" label="商品" width="700">
59+
<template slot-scope="{ row }">
60+
{{row.spuName}}
61+
<el-tag size="medium" v-for="property in row.properties">{{property.propertyName}}：{{property.valueName}}</el-tag>
62+
</template>
63+
</el-table-column>
64+
<el-table-column prop="originalUnitPrice" label="单价(元)" width="180">
65+
<template slot-scope="{ row }">
66+
￥{{ (row.originalUnitPrice / 100.0).toFixed(2) }}
67+
</template>
68+
</el-table-column>
69+
<el-table-column prop="count" label="数量" width="180"/>
70+
<el-table-column prop="originalPrice" label="小计（元）" width="180">
71+
<template slot-scope="{ row }">
72+
￥{{ (row.originalPrice / 100.0).toFixed(2) }}
73+
</template>
74+
</el-table-column>
75+
<el-table-column prop="afterSaleStatus" label="退款状态">
76+
<template slot-scope="{ row }">
77+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :value="row.afterSaleStatus" />
78+
</template>
79+
</el-table-column>
80+
</el-table>
81+
</el-descriptions-item>
82+
<el-descriptions-item v-for="(item,index) in 5" label-class-name="no-colon" /> <!-- 占位 -->
83+
<el-descriptions-item label="商品总额">￥{{ (order.originalPrice / 100.0).toFixed(2) }}</el-descriptions-item>
84+
<el-descriptions-item label="运费金额">￥{{ (order.deliveryPrice / 100.0).toFixed(2) }}</el-descriptions-item>
85+
<el-descriptions-item label="订单调价">￥{{ (order.adjustPrice / 100.0).toFixed(2) }}</el-descriptions-item>
86+
<el-descriptions-item label="商品优惠" label-style="color: red">
87+
￥{{ ((order.originalPrice - order.originalPrice) / 100.0).toFixed(2) }}
88+
</el-descriptions-item>
89+
<el-descriptions-item label="订单优惠" label-style="color: red">
90+
￥{{ (order.discountPrice / 100.0).toFixed(2) }}
91+
</el-descriptions-item>
92+
<el-descriptions-item label="积分抵扣" label-style="color: red">
93+
￥{{ (order.pointPrice / 100.0).toFixed(2) }}
94+
</el-descriptions-item>
95+
<el-descriptions-item v-for="(item,index) in 5" label-class-name="no-colon" /> <!-- 占位 -->
96+
<el-descriptions-item label="应付金额">
97+
￥{{ (order.payPrice / 100.0).toFixed(2) }}
98+
</el-descriptions-item>
699
</el-descriptions>
7100

8101
<template v-for="(group, index) in detailGroups">
9102
<el-descriptions v-bind="group.groupProps" :key="`group_${index}`" :title="group.title">
10-
<!-- 商品信息 -->
11-
<el-descriptions-item v-if="group.key === 'goodsInfo'" labelClassName="no-colon">
12-
<el-table border>
13-
<el-table-column prop="date" label="商品" width="180"/>
14-
<el-table-column prop="jg" label="价格"/>
15-
<el-table-column prop="spbm" label="商品编码"/>
16-
<el-table-column prop="xl" label="数量"/>
17-
<el-table-column prop="xj" label="小计（元）"/>
18-
<el-table-column prop="tkzt" label="退款状态"/>
19-
<el-table-column prop="zt" label="状态"/>
20-
</el-table>
21-
</el-descriptions-item>
22103

23104
<!-- 订单操作日志 -->
24105
<el-descriptions-item v-if="group.key === 'orderLog'" labelClassName="no-colon">
@@ -74,104 +155,36 @@
74155
</el-tab-pane>
75156
</el-tabs>
76157
</el-descriptions-item>
77-
78-
<!--订单详情、订单状态-->
79-
<el-descriptions-item v-else v-for="(child, cIdx) in group.children" v-bind="child.childProps" :key="`child_${cIdx}`" :label="child.label">
80-
81-
<!-- 操作按钮(订单状态)-->
82-
<template v-if="group.key === 'orderStatus' && child.valueKey === 'actions'" slot="label">
83-
<el-button type="primary">备注</el-button>
84-
<el-button type="primary">打印发货单</el-button>
85-
</template>
86-
87-
<!-- 内容 -->
88-
<template v-else>
89-
{{detailInfo[child.valueKey]}}
90-
<!--复制地址(订单详情) -->
91-
<el-link v-if="child.valueKey==='shdz'" v-clipboard:copy="detailInfo[child.valueKey]" v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/>
92-
</template>
93-
</el-descriptions-item>
94158
</el-descriptions>
95159
</template>
96160
</div>
97161
</template>
98162

99163
<script>
100-
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
101164
import { getOrderDetail } from "@/api/mall/trade/order";
102165
103166
export default {
104167
name: "detail",
105168
data () {
106169
return {
107170
detailGroups: [
108-
{
109-
title: '订单详情',
110-
children: [
111-
{ label: '支付单号', valueKey: 'jylsh'},
112-
{ label: '配送方式', valueKey: 'psfs'},
113-
{ label: '营销活动', valueKey: 'yxhd'},
114-
{ label: '订单编号', valueKey: 'ddbh'},
115-
{ label: '收货人', valueKey: 'shr'},
116-
{ label: '买家留言', valueKey: 'mjly'},
117-
{ label: '订单类型', valueKey: 'ddlx'},
118-
{ label: '联系电话', valueKey: 'lxdh'},
119-
{ label: '备注', valueKey: 'bz'},
120-
{ label: '订单来源', valueKey: 'ddly'},
121-
{ label: '付款方式', valueKey: 'fkfs'},
122-
{ label: '买家', valueKey: 'mj'},
123-
{ label: '收货地址', valueKey: 'shdz'}
124-
]
125-
},
126-
{
127-
title: '订单状态',
128-
key: 'orderStatus',
129-
groupProps: {
130-
column: 1
131-
},
132-
children: [
133-
{ label: '订单状态', valueKey: 'ddzt', childProps: { contentStyle: { color: 'red' }}},
134-
{ label: '', valueKey: 'actions', childProps: { labelClassName: 'no-colon'}},
135-
{ label: '提醒', valueKey: 'tx', childProps: { labelStyle: { color: 'red' }}}
136-
]
137-
},
138171
{
139172
title: '物流信息',
140173
key: 'expressInfo',
141174
children: [
142175
{ label: '发货时间', valueKey: 'fhsj'},
143176
{ label: '物流公司', valueKey: 'wlgs'},
144177
{ label: '运单号', valueKey: 'ydh'},
145-
{ label: '商品信息', valueKey: 'goodsList', childProps: { span: 3 }},
146178
{ label: '物流状态', valueKey: 'wlzt', childProps: { span: 3 }},
147179
{ label: '物流详情', valueKey: 'wlxq'}
148180
]
149181
},
150-
{
151-
title: '商品信息',
152-
key: 'goodsInfo'
153-
},
154182
{
155183
title: '订单操作日志',
156184
key: 'orderLog'
157185
}
158186
],
159187
detailInfo: {
160-
jylsh: '16674653573152181000',
161-
psfs: '物流配送',
162-
yxhd: '',
163-
ddbh: '20221103164918001',
164-
shr: '',
165-
mjly: '',
166-
ddlx: '',
167-
lxdh: '',
168-
bz: '',
169-
ddly: '',
170-
shdz: '陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)',
171-
fkfs: '',
172-
mj: '',
173-
ddzt: '已完成',
174-
tx: '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）请及时关注你发出的包裹状态，确保可以配送至买家手中如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商',
175188
expressInfo: [ // 物流信息
176189
{
177190
label: '包裹1',
@@ -201,42 +214,7 @@ export default {
201214
content: '快件已发车',
202215
timestamp: '2018-04-11 12:55:52'
203216
}
204-
],
205-
goodsList: [ // 包裹下的商品列表
206-
{
207-
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
208-
count: 6,
209-
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
210-
},
211-
{
212-
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
213-
count: 6,
214-
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
215-
},
216-
{
217-
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
218-
count: 6,
219-
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
220-
}
221217
]
222-
},
223-
{
224-
label: '包裹2',
225-
name: 'bg1',
226-
fhsj: '',
227-
wlgs: '',
228-
ydh: '',
229-
wlzt: '',
230-
goodsInfo: {}
231-
},
232-
{
233-
label: '包裹3',
234-
name: 'bg1',
235-
fhsj: '',
236-
wlgs: '',
237-
ydh: '',
238-
wlzt: '',
239-
goodsInfo: {}
240218
}
241219
],
242220
orderLog: [ // 订单操作日志
@@ -253,6 +231,7 @@ export default {
253231
},
254232
order: {
255233
items: [],
234+
user: {},
256235
},
257236
}
258237
},

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

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -89,23 +89,6 @@
8989
</el-col>
9090
<el-col :span="6" align="right">
9191
<el-button type="text" @click="goToDetail(row)">详情</el-button>
92-
<el-dropdown style="margin-left: 10px">
93-
<el-button type="text">
94-
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
95-
</el-button>
96-
<el-dropdown-menu slot="dropdown">
97-
<!-- TODO @芋艿：【暂未开发】关闭订单 -->
98-
<el-dropdown-item><el-button type="text">关闭订单</el-button></el-dropdown-item>
99-
<!-- TODO @芋艿：【暂未开发】修改地址 -->
100-
<el-dropdown-item><el-button type="text">修改地址</el-button></el-dropdown-item>
101-
<!-- TODO @芋艿：【暂未开发】调整价格 -->
102-
<el-dropdown-item><el-button type="text">调整价格</el-button></el-dropdown-item>
103-
<!-- TODO @芋艿：【暂未开发】备注 -->
104-
<el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
105-
<!-- TODO @芋艿：【暂未开发】关闭订单 -->
106-
<el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
107-
</el-dropdown-menu>
108-
</el-dropdown>
10992
</el-col>
11093
</el-row>
11194
<!-- 订单下的商品 -->

0 commit comments

Comments
 (0)