Skip to content

Commit 4f4e7de

Browse files
author
LAPTOP-CNV4CMCJ\cheng
committed
处理了商品订单的TODO
1 parent 67cc989 commit 4f4e7de

File tree

3 files changed

+372
-468
lines changed

3 files changed

+372
-468
lines changed

‎src/router/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,10 +205,10 @@ export const constantRoutes = [
205205
alwaysShow: true,
206206
children: [
207207
{
208-
path: '/order/goods-order',
208+
path: '/mall/trade/order',
209209
name: '商品订单',
210210
meta: { title: '商品订单' },
211-
component: (resolve) => require(['@/views/order/goodsOrder'], resolve)
211+
component: (resolve) => require(['@/views/mall/trade/order'], resolve)
212212
}
213213
]
214214
}

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

Lines changed: 370 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,370 @@
1+
<template>
2+
<div class="app-container">
3+
<!-- 搜索工作栏 -->
4+
<!-- TODO: inline 看看是不是需要; v-show= 那块逻辑还是要的 -->
5+
<el-row :gutter="20">
6+
<el-form :model="queryParams" label-width="68px" size="small">
7+
<el-col :span="6" :xs="24">
8+
<el-form-item label="搜索方式">
9+
<el-input style="width: 240px">
10+
<el-select v-model="queryParams.searchType" slot="prepend" clearable style="width: 100px">
11+
<el-option v-for="dict in dicData.searchType" v-bind="dict" :key="dict.value"/>
12+
</el-select>
13+
</el-input>
14+
</el-form-item>
15+
</el-col>
16+
<el-col :span="6" :xs="24">
17+
<el-form-item label="订单类型">
18+
<el-select v-model="queryParams.orderType" clearable style="width: 240px">
19+
<el-option v-for="dict in dicData.orderType" v-bind="dict" :key="dict.value"/>
20+
</el-select>
21+
</el-form-item>
22+
</el-col>
23+
<el-col :span="6" :xs="24">
24+
<el-form-item label="订单状态">
25+
<el-select v-model="queryParams.orderStatus" clearable style="width: 240px">
26+
<el-option v-for="dict in dicData.orderStatus" v-bind="dict" :key="dict.value"/>
27+
</el-select>
28+
</el-form-item>
29+
</el-col>
30+
<el-col :span="6" :xs="24">
31+
<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"/>
34+
</el-select>
35+
</el-form-item>
36+
</el-col>
37+
<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"/>
48+
</el-select>
49+
</el-form-item>
50+
</el-col>
51+
<el-col :span="6" :xs="24">
52+
<el-form-item label="下单时间">
53+
<el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
54+
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="rangePickerOptions" style="width: 240px"/>
55+
</el-form-item>
56+
</el-col>
57+
<el-col :span="6" :xs="24" style="line-height: 32px">
58+
<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
59+
<el-button icon="el-icon-refresh" size="mini">重置</el-button>
60+
<el-button icon="el-icon-document" size="mini">导出订单</el-button>
61+
</el-col>
62+
</el-form>
63+
</el-row>
64+
65+
<!-- tab切换-->
66+
<el-radio-group v-model="activeTabName">
67+
<el-radio-button v-for="tabPane in tabPanes" :label="tabPane.label">{{tabPane.text}}</el-radio-button>
68+
</el-radio-group>
69+
70+
<!-- table -->
71+
<el-table :data="tableData" :show-header="false" class="order-table">
72+
<el-table-column label="订单信息">
73+
<template slot-scope="{ row }">
74+
<el-row>
75+
<el-col :span="5">
76+
订单号：{{row.orderNo}}
77+
<el-popover title="支付流水号：" :content="row.payNo" ref="popover" placement="right" width="200" trigger="click"/>
78+
<el-button type="text" v-popover:popover>更多</el-button>
79+
</el-col>
80+
<el-col :span="5">下单时间：{{row.time}}</el-col>
81+
<el-col :span="4">订单来源：{{row.orderSource}}</el-col>
82+
<el-col :span="4">支付方式：{{row.payWay}}</el-col>
83+
<el-col :span="6" align="right" type="flex">
84+
<el-button type="text">关闭订单</el-button>
85+
<el-button type="text">修改地址</el-button>
86+
<el-button type="text">调整价格</el-button>
87+
<el-dropdown style="margin-left: 10px">
88+
<el-button type="text">
89+
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
90+
</el-button>
91+
<el-dropdown-menu slot="dropdown">
92+
<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>
94+
<el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
95+
</el-dropdown-menu>
96+
</el-dropdown>
97+
</el-col>
98+
</el-row>
99+
<!-- 订单下的商品 -->
100+
<el-table :data="row.goods" border>
101+
<el-table-column label="商品" prop="goods" header-align="center" width="360">
102+
<template slot-scope="{ row, $index }">
103+
<div class="goods-info">
104+
<img :src="row.picture"/>
105+
<span class="ellipsis-2" :title="row.name">{{row.name}}</span>
106+
</div>
107+
</template>
108+
</el-table-column>
109+
<el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
110+
<template slot-scope="{ row }">
111+
<div>{{row.price}}</div>
112+
<div>{{row.count}}</div>
113+
</template>
114+
</el-table-column>
115+
<el-table-column label="维权" prop="safeguard" align="center" width="115"/>
116+
<el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
117+
<el-table-column label="买家/收货人" prop="buyer" header-align="center" width="360">
118+
<template slot-scope="{ row }">
119+
<div>{{row.buyer}}</div>
120+
<div>{{row.receiver}}{{row.tel}}</div>
121+
<div class="ellipsis-2" :title="row.address">{{row.address}}</div>
122+
</template>
123+
</el-table-column>
124+
<el-table-column label="配送方式" prop="sendWay" align="center" width="115"/>
125+
<el-table-column label="交易状态" prop="status" align="center"/>
126+
</el-table>
127+
</template>
128+
</el-table-column>
129+
</el-table>
130+
</div>
131+
</template>
132+
133+
<script>
134+
const dicData = {
135+
searchType: [
136+
{ label: '订单号', value: 'ddh' },
137+
{ label: '交易流水号', value: 'jylsh' },
138+
{ label: '订单备注', value: 'ddbz' },
139+
{ label: '收货人姓名', value: 'shrxm' },
140+
{ label: '商品名称', value: 'spmc' },
141+
{ label: '收货人电话', value: 'shrdh' },
142+
{ label: '会员昵称', value: 'hync' },
143+
{ label: '商品编号', value: 'spbh' }
144+
],
145+
orderType: [
146+
{ label: '全部', value: 'qb' },
147+
{ label: '物流订单', value: 'wldd' },
148+
{ label: '自提订单', value: 'ztdd' },
149+
{ label: '外卖订单', value: 'wmdd' },
150+
{ label: '虚拟订单', value: 'xndd' },
151+
{ label: '收银订单', value: 'sydd' }
152+
],
153+
orderStatus: [
154+
{ label: '全部', value: 'qb' },
155+
{ label: '待支付', value: 'dzf' },
156+
{ label: '待发货', value: 'dfh' },
157+
{ label: '已发货', value: 'yfh' },
158+
{ label: '已收货', value: 'ysh' },
159+
{ label: '已完成', value: 'ywc' },
160+
{ label: '已关闭', value: 'ygb' },
161+
{ label: '退款中', value: 'tkz' }
162+
],
163+
orderSource: [
164+
{ label: '全部', value: 'qb' },
165+
{ label: '微信公众号', value: 'wxgzh' },
166+
{ label: '微信小程序', value: 'wxxcx' },
167+
{ label: 'PC', value: 'pc' },
168+
{ label: 'H5', value: 'h5' },
169+
{ label: 'APP', value: 'app' },
170+
{ label: '收银台', value: 'syt' },
171+
{ label: '代客下单', value: 'dkxd' }
172+
],
173+
payWay: [
174+
{ label: '全部', value: 'qb' },
175+
{ label: '在线支付', value: 'zxzf' },
176+
{ label: '余额支付', value: 'yezf' },
177+
{ label: '线下支付', value: 'xxzf' },
178+
{ label: '积分兑换', value: 'jfdh' },
179+
{ label: '支付宝支付', value: 'zfbzf' },
180+
{ label: '微信支付', value: 'wxzf' }
181+
],
182+
marketingType: [
183+
{ label: '全部', value: 'qb' },
184+
{ label: '一口价', value: 'ykj' },
185+
{ label: '专题', value: 'zt' },
186+
{ label: '团购', value: 'tg' },
187+
{ label: '拼团', value: 'pt' },
188+
{ label: '拼团返利', value: 'ptfl' },
189+
{ label: '盲盒', value: 'mh' },
190+
{ label: '砍价', value: 'kj' },
191+
{ label: '礼品卡优惠', value: 'lpkyh' },
192+
{ label: '秒杀', value: 'ms' },
193+
{ label: '积分兑换', value: 'jfdh' },
194+
{ label: '组合套餐', value: 'zhtc' },
195+
{ label: '预售', value: 'ys' }
196+
]
197+
}
198+
const rangePickerOptions = {
199+
shortcuts: [{
200+
text: '最近一周',
201+
onClick(picker) {
202+
const end = new Date();
203+
const start = new Date();
204+
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
205+
picker.$emit('pick', [start, end]);
206+
}
207+
}, {
208+
text: '最近一个月',
209+
onClick(picker) {
210+
const end = new Date();
211+
const start = new Date();
212+
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
213+
picker.$emit('pick', [start, end]);
214+
}
215+
}, {
216+
text: '最近三个月',
217+
onClick(picker) {
218+
const end = new Date();
219+
const start = new Date();
220+
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
221+
picker.$emit('pick', [start, end]);
222+
}
223+
}]
224+
}
225+
export default {
226+
name: "index",
227+
data () {
228+
return {
229+
dicData,
230+
rangePickerOptions,
231+
queryParams: {
232+
searchType: 'ddh',
233+
orderType: ''
234+
},
235+
activeTabName: 'all',
236+
tabPanes: [
237+
{ text: '全部', label: 'all' },
238+
{ text: '待支付', label: 'toBePay' },
239+
{ text: '待发货', label: 'toBeSend' },
240+
{ text: '已发货', label: 'send' },
241+
{ text: '已收货', label: 'received' },
242+
{ text: '已完成', label: 'finished' },
243+
{ text: '已关闭', label: 'closed' },
244+
{ text: '退款中', label: 'refund' }
245+
],
246+
tableData: [
247+
{
248+
orderInfo: '',
249+
orderNo: '20221026220424001',
250+
payNo: '20221026220424001',
251+
time: '2022-10-26 22:04:20',
252+
orderSource: 'PC',
253+
payWay: '微信支付',
254+
goods: [
255+
{
256+
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
257+
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
258+
price: '199',
259+
count: '5件',
260+
amount: 460,
261+
safeguard: '主动退款',
262+
buyer: '小明',
263+
receiver: '小花',
264+
tel: '15823655095',
265+
address: '北京市-北京市-东城区 观音桥',
266+
sendWay: '物流配送',
267+
status: '已完成'
268+
},
269+
{
270+
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
271+
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
272+
price: '199',
273+
count: '5件',
274+
amount: 460,
275+
safeguard: '主动退款',
276+
buyer: '小明',
277+
receiver: '小花',
278+
tel: '15823655095',
279+
address: '北京市-北京市-东城区 观音桥',
280+
sendWay: '物流配送',
281+
status: '已完成'
282+
}
283+
]
284+
},
285+
{
286+
orderInfo: '',
287+
orderNo: '20221026220424001',
288+
payNo: '20221026220424001',
289+
time: '2022-10-26 22:04:20',
290+
orderSource: 'PC',
291+
payWay: '微信支付',
292+
goods: [
293+
{
294+
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
295+
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
296+
price: '199',
297+
count: '5件',
298+
amount: 460,
299+
safeguard: '主动退款',
300+
buyer: '小明',
301+
receiver: '小花',
302+
tel: '15823655095',
303+
address: '北京市-北京市-东城区 观音桥',
304+
sendWay: '物流配送',
305+
status: '已完成'
306+
},
307+
{
308+
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
309+
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
310+
price: '199',
311+
count: '5件',
312+
amount: 460,
313+
safeguard: '主动退款',
314+
buyer: '小明',
315+
receiver: '小花',
316+
tel: '15823655095',
317+
address: '北京市-北京市-东城区 观音桥',
318+
sendWay: '物流配送',
319+
status: '已完成'
320+
}
321+
]
322+
}
323+
]
324+
}
325+
}
326+
}
327+
</script>
328+
329+
<style lang="scss" scoped>
330+
::v-deep .order-table{
331+
margin-top: 20px;
332+
border-bottom: none;
333+
&::before{
334+
height: 0;
335+
}
336+
.el-table__row{
337+
.el-table__cell{
338+
border-bottom: none;
339+
.cell{
340+
.el-table {
341+
.el-table__row{
342+
>.el-table__cell{
343+
.goods-info{
344+
display: flex;
345+
img{
346+
margin-right: 10px;
347+
width: 60px;
348+
height: 60px;
349+
border: 1px solid #e2e2e2;
350+
}
351+
}
352+
.ellipsis-2{
353+
display: -webkit-box;
354+
overflow: hidden;
355+
text-overflow: ellipsis;
356+
white-space: normal;
357+
-webkit-line-clamp: 2; /* 要显示的行数 */
358+
-webkit-box-orient: vertical;
359+
word-break: break-all;
360+
line-height: 22px !important;
361+
max-height: 44px !important;
362+
}
363+
}
364+
}
365+
}
366+
}
367+
}
368+
}
369+
}
370+
</style>

0 commit comments

Comments
 (0)