Skip to content

Commit 684f66e

Browse files
author
LAPTOP-CNV4CMCJ\cheng
committed
新增退款列表页 调整商品列表页的tab切换
1 parent 5373b44 commit 684f66e

File tree

4 files changed

+378
-73
lines changed

4 files changed

+378
-73
lines changed

‎src/router/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,12 @@ export const constantRoutes = [
216216
hidden: true,
217217
meta: { title: '订单详情' },
218218
component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve)
219+
},
220+
{
221+
path: '/mall/trade/orderrefund',
222+
name: '退款维权',
223+
meta: { title: '退款维权' },
224+
component: (resolve) => require(['@/views/mall/trade/orderrefund'], resolve)
219225
}
220226
]
221227
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,16 @@ export default {
195195
}
196196
],
197197
goodsList: [ // 包裹下的商品列表
198+
{
199+
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
200+
count: 6,
201+
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
202+
},
203+
{
204+
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
205+
count: 6,
206+
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
207+
},
198208
{
199209
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
200210
count: 6,

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

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -63,70 +63,71 @@
6363
</el-row>
6464

6565
<!-- 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" @click="goToDetail(row)">详情</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>
66+
<el-tabs v-model="activeTabName" type="card">
67+
<el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
68+
<!-- table -->
69+
<el-table :data="tableData" :show-header="false" class="order-table">
70+
<el-table-column>
71+
<template slot-scope="{ row }">
72+
<el-row type="flex" align="middle">
73+
<el-col :span="5">
74+
订单号：{{row.orderNo}}
75+
<el-popover title="支付流水号：" :content="row.orderNo" placement="right" width="200" trigger="click">
76+
<el-button slot="reference" type="text">更多</el-button>
77+
</el-popover>
78+
</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>
82+
<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>
86+
<el-dropdown style="margin-left: 10px">
87+
<el-button type="text">
88+
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
89+
</el-button>
90+
<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>
93+
<el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
94+
</el-dropdown-menu>
95+
</el-dropdown>
96+
</el-col>
97+
</el-row>
98+
<!-- 订单下的商品 -->
99+
<el-table :data="row.goods" border :show-header="true">
100+
<el-table-column label="商品" prop="goods" header-align="center" width="auto" min-width="300">
101+
<template slot-scope="{ row, $index }">
102+
<div class="goods-info">
103+
<img :src="row.picture"/>
104+
<span class="ellipsis-2" :title="row.name">{{row.name}}</span>
105+
</div>
106+
</template>
107+
</el-table-column>
108+
<el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
109+
<template slot-scope="{ row }">
110+
<div>{{row.price}}</div>
111+
<div>{{row.count}}</div>
112+
</template>
113+
</el-table-column>
114+
<el-table-column label="维权" prop="safeguard" align="center" width="100"/>
115+
<el-table-column label="实付金额(元)" prop="amount" align="center" width="100"/>
116+
<el-table-column label="买家/收货人" prop="buyer" header-align="center" width="auto" min-width="300">
117+
<template slot-scope="{ row }">
118+
<div>{{row.buyer}}</div>
119+
<div>{{row.receiver}}{{row.tel}}</div>
120+
<div class="ellipsis-2" :title="row.address">{{row.address}}</div>
121+
</template>
122+
</el-table-column>
123+
<el-table-column label="配送方式" prop="sendWay" align="center" width="100"/>
124+
<el-table-column label="交易状态" prop="status" align="center" width="100"/>
125+
</el-table>
126+
</template>
127+
</el-table-column>
128+
</el-table>
129+
</el-tab-pane>
130+
</el-tabs>
130131
</div>
131132
</template>
132133

@@ -234,14 +235,14 @@
234235
},
235236
activeTabName: 'all',
236237
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' }
238+
{ text: '全部', name: 'all' },
239+
{ text: '待支付', name: 'toBePay' },
240+
{ text: '待发货', name: 'toBeSend' },
241+
{ text: '已发货', name: 'send' },
242+
{ text: '已收货', name: 'received' },
243+
{ text: '已完成', name: 'finished' },
244+
{ text: '已关闭', name: 'closed' },
245+
{ text: '退款中', name: 'refund' }
245246
],
246247
tableData: [
247248
{
@@ -333,7 +334,6 @@
333334

334335
<style lang="scss" scoped>
335336
::v-deep .order-table{
336-
margin-top: 20px;
337337
border-bottom: none;
338338
&::before{
339339
height: 0;

0 commit comments

Comments
 (0)