Skip to content

Commit 138aef5

Browse files
YunaiVYunaiV
committed
trade：前端订单管理，联调接口
1 parent 4206c75 commit 138aef5

File tree

2 files changed

+79
-181
lines changed

2 files changed

+79
-181
lines changed

‎src/utils/dict.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import store from '@/store'
88
export const DICT_TYPE = {
99
USER_TYPE: 'user_type',
1010
COMMON_STATUS: 'common_status',
11+
TERMINAL: 'terminal',
1112

1213
// ========== SYSTEM 模块 ==========
1314
SYSTEM_USER_SEX: 'system_user_sex',

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

Lines changed: 78 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -29,35 +29,29 @@
2929
</el-col>
3030
<el-col :span="6" :xs="24">
3131
<el-form-item label="订单来源">
32-
<el-select v-model="queryParams.orderSource" clearable style="width: 240px">
33-
<el-option v-for="dict in dicData.orderSource" v-bind="dict" :key="dict.value"/>
32+
<el-select v-model="queryParams.terminal" clearable style="width: 240px">
33+
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.TERMINAL)"
34+
:key="dict.value" :label="dict.label" :value="dict.value"/>
3435
</el-select>
3536
</el-form-item>
3637
</el-col>
3738
<el-col :span="6" :xs="24">
38-
<el-form-item label="付款方式">
39-
<el-select v-model="queryParams.payWay" clearable style="width: 240px">
40-
<el-option v-for="dict in dicData.payWay" v-bind="dict" :key="dict.value"/>
41-
</el-select>
42-
</el-form-item>
43-
</el-col>
44-
<el-col :span="6" :xs="24">
45-
<el-form-item label="营销类型">
46-
<el-select v-model="queryParams.marketingType" clearable style="width: 240px">
47-
<el-option v-for="dict in dicData.marketingType" v-bind="dict" :key="dict.value"/>
39+
<el-form-item label="支付方式">
40+
<el-select v-model="queryParams.payChannelCode" clearable style="width: 240px">
41+
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
42+
:key="dict.value" :label="dict.label" :value="dict.value"/>
4843
</el-select>
4944
</el-form-item>
5045
</el-col>
5146
<el-col :span="6" :xs="24">
5247
<el-form-item label="下单时间">
5348
<el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
54-
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="rangePickerOptions" style="width: 240px"/>
49+
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="datePickerOptions" style="width: 240px"/>
5550
</el-form-item>
5651
</el-col>
5752
<el-col :span="6" :xs="24" style="line-height: 32px">
5853
<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
5954
<el-button icon="el-icon-refresh" size="mini">重置</el-button>
60-
<el-button icon="el-icon-document" size="mini">导出订单</el-button>
6155
</el-col>
6256
</el-form>
6357
</el-row>
@@ -66,61 +60,75 @@
6660
<el-tabs v-model="activeTabName" type="card">
6761
<el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
6862
<!-- table -->
69-
<el-table :data="tableData" :show-header="false" class="order-table">
63+
<el-table :data="list" :show-header="false" class="order-table">
7064
<el-table-column>
7165
<template slot-scope="{ row }">
7266
<el-row type="flex" align="middle">
7367
<el-col :span="5">
74-
订单号：{{row.orderNo}}
75-
<el-popover title="支付流水号：" :content="row.orderNo" placement="right" width="200" trigger="click">
68+
订单号：{{row.no}}
69+
<el-popover title="支付单号：" :content="row.payOrderId + ''" placement="right" width="200" trigger="click">
7670
<el-button slot="reference" type="text">更多</el-button>
7771
</el-popover>
7872
</el-col>
79-
<el-col :span="5">下单时间：{{row.time}}</el-col>
80-
<el-col :span="4">订单来源：{{row.orderSource}}</el-col>
81-
<el-col :span="4">支付方式：{{row.payWay}}</el-col>
73+
<el-col :span="5">下单时间：{{ parseTime(row.createTime) }}</el-col>
74+
<el-col :span="4">订单来源：
75+
<dict-tag :type="DICT_TYPE.TERMINAL" :value="row.terminal" />
76+
</el-col>
77+
<el-col :span="4">支付方式：
78+
<dict-tag v-if="row.payChannelCode" :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="row.payChannelCode" />
79+
<span v-else>未支付</span>
80+
</el-col>
8281
<el-col :span="6" align="right">
83-
<el-button type="text">关闭订单</el-button>
84-
<el-button type="text">修改地址</el-button>
85-
<el-button type="text">调整价格</el-button>
82+
<el-button type="text" @click="goToDetail(row)">详情</el-button>
8683
<el-dropdown style="margin-left: 10px">
8784
<el-button type="text">
8885
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
8986
</el-button>
9087
<el-dropdown-menu slot="dropdown">
91-
<el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
92-
<el-dropdown-item><el-button type="text" @click="goToDetail(row)">详情</el-button></el-dropdown-item>
88+
<!-- TODO @芋艿：【暂未开发】关闭订单 -->
89+
<el-dropdown-item><el-button type="text">关闭订单</el-button></el-dropdown-item>
90+
<!-- TODO @芋艿：【暂未开发】修改地址 -->
91+
<el-dropdown-item><el-button type="text">修改地址</el-button></el-dropdown-item>
92+
<!-- TODO @芋艿：【暂未开发】调整价格 -->
93+
<el-dropdown-item><el-button type="text">调整价格</el-button></el-dropdown-item>
94+
<!-- TODO @芋艿：【暂未开发】备注 -->
9395
<el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
96+
<!-- TODO @芋艿：【暂未开发】关闭订单 -->
97+
<el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
9498
</el-dropdown-menu>
9599
</el-dropdown>
96100
</el-col>
97101
</el-row>
98102
<!-- 订单下的商品 -->
99-
<el-table :data="row.goods" border :show-header="true">
103+
<el-table :data="row.items" border :show-header="true">
100104
<el-table-column label="商品" prop="goods" header-align="center" width="auto" min-width="300">
101105
<template slot-scope="{ row, $index }">
102106
<div class="goods-info">
103-
<img :src="row.picture"/>
104-
<span class="ellipsis-2" :title="row.name">{{row.name}}</span>
107+
<img :src="row.picUrl"/>
108+
<span class="ellipsis-2" :title="row.spuName">{{row.spuName}}</span>
109+
<!-- TODO @小程：下面是商品属性，想当度一行，放在商品名下面 -->
110+
<el-tag size="medium" v-for="property in row.properties">{{property.propertyName}}：{{property.valueName}}</el-tag>
105111
</div>
106112
</template>
107113
</el-table-column>
108114
<el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
109115
<template slot-scope="{ row }">
110-
<div>{{row.price}}</div>
111-
<div>{{row.count}}</div>
116+
<div>￥{{ (row.originalUnitPrice / 100.0).toFixed(2) }}</div>
117+
<div>{{row.count}} 件</div>
112118
</template>
113119
</el-table-column>
114-
<el-table-column label="维权" prop="safeguard" align="center" width="100"/>
120+
<!-- TODO @小程：这里应该是一个订单下，多个商品，只展示订单上的总金额，就是 order.payPrice -->
115121
<el-table-column label="实付金额(元)" prop="amount" align="center" width="100"/>
122+
<!-- TODO @小程：这里应该是一个订单下，多个商品，只展示订单上的收件信息；使用 order.receiverXXX 开头的字段 -->
116123
<el-table-column label="买家/收货人" prop="buyer" header-align="center" width="auto" min-width="300">
117124
<template slot-scope="{ row }">
125+
<!-- TODO @芋艿：以后增加一个会员详情界面 -->
118126
<div>{{row.buyer}}</div>
119127
<div>{{row.receiver}}{{row.tel}}</div>
120128
<div class="ellipsis-2" :title="row.address">{{row.address}}</div>
121129
</template>
122130
</el-table-column>
123-
<el-table-column label="配送方式" prop="sendWay" align="center" width="100"/>
131+
<!-- TODO @小程：这里应该是一个订单下，多个商品，交易状态是统一的；使用 order.status 字段 -->
124132
<el-table-column label="交易状态" prop="status" align="center" width="100"/>
125133
</el-table>
126134
</template>
@@ -132,7 +140,10 @@
132140
</template>
133141

134142
<script>
135-
const dicData = {
143+
import { getOrderPage } from "@/api/mall/trade/order";
144+
import { datePickerOptions } from "@/utils/constants";
145+
146+
const dicData = {
136147
searchType: [
137148
{ label: '订单号', value: 'ddh' },
138149
{ label: '交易流水号', value: 'jylsh' },
@@ -143,14 +154,6 @@
143154
{ label: '会员昵称', value: 'hync' },
144155
{ label: '商品编号', value: 'spbh' }
145156
],
146-
orderType: [
147-
{ label: '全部', value: 'qb' },
148-
{ label: '物流订单', value: 'wldd' },
149-
{ label: '自提订单', value: 'ztdd' },
150-
{ label: '外卖订单', value: 'wmdd' },
151-
{ label: '虚拟订单', value: 'xndd' },
152-
{ label: '收银订单', value: 'sydd' }
153-
],
154157
orderStatus: [
155158
{ label: '全部', value: 'qb' },
156159
{ label: '待支付', value: 'dzf' },
@@ -161,75 +164,25 @@
161164
{ label: '已关闭', value: 'ygb' },
162165
{ label: '退款中', value: 'tkz' }
163166
],
164-
orderSource: [
165-
{ label: '全部', value: 'qb' },
166-
{ label: '微信公众号', value: 'wxgzh' },
167-
{ label: '微信小程序', value: 'wxxcx' },
168-
{ label: 'PC', value: 'pc' },
169-
{ label: 'H5', value: 'h5' },
170-
{ label: 'APP', value: 'app' },
171-
{ label: '收银台', value: 'syt' },
172-
{ label: '代客下单', value: 'dkxd' }
173-
],
174-
payWay: [
175-
{ label: '全部', value: 'qb' },
176-
{ label: '在线支付', value: 'zxzf' },
177-
{ label: '余额支付', value: 'yezf' },
178-
{ label: '线下支付', value: 'xxzf' },
179-
{ label: '积分兑换', value: 'jfdh' },
180-
{ label: '支付宝支付', value: 'zfbzf' },
181-
{ label: '微信支付', value: 'wxzf' }
182-
],
183-
marketingType: [
184-
{ label: '全部', value: 'qb' },
185-
{ label: '一口价', value: 'ykj' },
186-
{ label: '专题', value: 'zt' },
187-
{ label: '团购', value: 'tg' },
188-
{ label: '拼团', value: 'pt' },
189-
{ label: '拼团返利', value: 'ptfl' },
190-
{ label: '盲盒', value: 'mh' },
191-
{ label: '砍价', value: 'kj' },
192-
{ label: '礼品卡优惠', value: 'lpkyh' },
193-
{ label: '秒杀', value: 'ms' },
194-
{ label: '积分兑换', value: 'jfdh' },
195-
{ label: '组合套餐', value: 'zhtc' },
196-
{ label: '预售', value: 'ys' }
197-
]
198-
}
199-
const rangePickerOptions = {
200-
shortcuts: [{
201-
text: '最近一周',
202-
onClick(picker) {
203-
const end = new Date();
204-
const start = new Date();
205-
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
206-
picker.$emit('pick', [start, end]);
207-
}
208-
}, {
209-
text: '最近一个月',
210-
onClick(picker) {
211-
const end = new Date();
212-
const start = new Date();
213-
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
214-
picker.$emit('pick', [start, end]);
215-
}
216-
}, {
217-
text: '最近三个月',
218-
onClick(picker) {
219-
const end = new Date();
220-
const start = new Date();
221-
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
222-
picker.$emit('pick', [start, end]);
223-
}
224-
}]
225167
}
226168
export default {
227169
name: "index",
228170
data () {
229171
return {
230172
dicData,
231-
rangePickerOptions,
173+
// 遮罩层
174+
loading: true,
175+
// 导出遮罩层
176+
exportLoading: false,
177+
// 显示搜索条件
178+
showSearch: true,
179+
// 总条数
180+
total: 0,
181+
// 交易售后列表
182+
list: [],
232183
queryParams: {
184+
pageNo: 1,
185+
pageSize: 10,
233186
searchType: 'ddh',
234187
orderType: ''
235188
},
@@ -244,87 +197,31 @@
244197
{ text: '已关闭', name: 'closed' },
245198
{ text: '退款中', name: 'refund' }
246199
],
247-
tableData: [
248-
{
249-
orderInfo: '',
250-
orderNo: '20221026220424001',
251-
payNo: '20221026220424001',
252-
time: '2022-10-26 22:04:20',
253-
orderSource: 'PC',
254-
payWay: '微信支付',
255-
goods: [
256-
{
257-
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
258-
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
259-
price: '199',
260-
count: '5件',
261-
amount: 460,
262-
safeguard: '主动退款',
263-
buyer: '小明',
264-
receiver: '小花',
265-
tel: '15823655095',
266-
address: '北京市-北京市-东城区 观音桥',
267-
sendWay: '物流配送',
268-
status: '已完成'
269-
},
270-
{
271-
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
272-
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
273-
price: '199',
274-
count: '5件',
275-
amount: 460,
276-
safeguard: '主动退款',
277-
buyer: '小明',
278-
receiver: '小花',
279-
tel: '15823655095',
280-
address: '北京市-北京市-东城区 观音桥',
281-
sendWay: '物流配送',
282-
status: '已完成'
283-
}
284-
]
285-
},
286-
{
287-
orderInfo: '',
288-
orderNo: '20221026220424001',
289-
payNo: '20221026220424001',
290-
time: '2022-10-26 22:04:20',
291-
orderSource: 'PC',
292-
payWay: '微信支付',
293-
goods: [
294-
{
295-
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
296-
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
297-
price: '199',
298-
count: '5件',
299-
amount: 460,
300-
safeguard: '主动退款',
301-
buyer: '小明',
302-
receiver: '小花',
303-
tel: '15823655095',
304-
address: '北京市-北京市-东城区 观音桥',
305-
sendWay: '物流配送',
306-
status: '已完成'
307-
},
308-
{
309-
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
310-
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
311-
price: '199',
312-
count: '5件',
313-
amount: 460,
314-
safeguard: '主动退款',
315-
buyer: '小明',
316-
receiver: '小花',
317-
tel: '15823655095',
318-
address: '北京市-北京市-东城区 观音桥',
319-
sendWay: '物流配送',
320-
status: '已完成'
321-
}
322-
]
323-
}
324-
]
200+
// 静态变量
201+
datePickerOptions: datePickerOptions
325202
}
326203
},
204+
created() {
205+
this.getList();
206+
// 设置 statuses 过滤
207+
// for (const dict of getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
208+
// this.statusTabs.push({
209+
// label: dict.label,
210+
// value: dict.value
211+
// })
212+
// }
213+
},
327214
methods: {
215+
/** 查询列表 */
216+
getList() {
217+
this.loading = true;
218+
// 执行查询
219+
getOrderPage(this.queryParams).then(response => {
220+
this.list = response.data.list;
221+
this.total = response.data.total;
222+
this.loading = false;
223+
});
224+
},
328225
goToDetail (row) {
329226
this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
330227
}

0 commit comments

Comments
 (0)