trade:【交易售后】查询分页列表

This commit is contained in:
YunaiV
2022-11-20 09:35:06 +08:00
parent 8f6c37755c
commit d884303df6
15 changed files with 126 additions and 184 deletions

View File

@ -1,149 +0,0 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<el-form :model="queryParams" label-width="68px" size="small">
<el-col :span="6" :xs="24">
<el-form-item label="下单时间">
<el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="rangePickerOptions" style="width: 240px"/>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24" style="line-height: 32px">
<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini">重置</el-button>
<el-button icon="el-icon-document" size="mini">导出订单</el-button>
</el-col>
</el-form>
</el-row>
<!-- tab切换-->
<el-tabs v-model="activeTabName" type="card">
<el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
<!-- table -->
<el-table :data="tableData" :show-header="false" class="table-wrapper">
<el-table-column>
<template slot-scope="{ row }">
<!-- 订单下的商品 -->
<el-table :data="row.goods" border>
<el-table-column label="商品信息" prop="spxx" header-align="center" width="auto" min-width="300">
<div slot-scope="{ row, $index }" class="goods-info">
<img :src="row.img"/>
<span class="ellipsis-2" :title="row.name">{{row.name}}</span>
</div>
</el-table-column>
<el-table-column label="订单金额" prop="ddje" align="center" width="100"/>
<el-table-column label="买家" prop="mj" align="center" width="100"/>
<el-table-column label="退款金额" prop="tkje" align="center" width="100"/>
<el-table-column label="申请时间" prop="sqsj" align="center" width="180"/>
<el-table-column label="退款状态" prop="tkzt" align="center" width="100"/>
<el-table-column label="操作" align="center" width="100" fixed="right" >
<el-button slot-scope="{row}" type="text">详情</el-button>
</el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
const dicData = {
refundStatus: [
{ label: '全部', value: 'qb' },
{ label: '申请维权', value: 'sqwq' },
{ label: '待转账', value: 'dzz' },
{ label: '维权结束', value: 'wqjs' },
{ label: '买家待退货', value: 'mjdth' },
{ label: '卖家待收货', value: 'mjdsh' },
{ label: '卖家已收货', value: 'mjysh' },
{ label: '卖家拒绝', value: 'mjjj' }
],
refundWay: [
{ label: '全部', value: 'qb' },
{ label: '仅退款', value: 'jtk' },
{ label: '退货退款', value: 'thtk' }
],
refundType: [
{ label: '全部', value: 'qb' },
{ label: '订单退款', value: 'ddtk' },
{ label: '售后退款', value: 'shtk' }
]
}
export default {
name: "index",
data () {
return {
dicData,
rangePickerOptions,
queryParams: {},
activeTabName: 'all',
tabPanes: [
{ text: '全部', name: 'all' },
{ text: '申请维权', name: 'sqwq' },
{ text: '待转账', name: 'dzz' },
{ text: '维权结束', name: 'wqjs' },
{ text: '买家待退货', name: 'mjdth' },
{ text: '卖家待收货', name: 'mjdsh' },
{ text: '卖家已收货', name: 'mjysh' },
{ text: '卖家拒绝', name: 'mjjj' }
],
tableData: [
{
tkbh: '20221026220424001',
ddbh: '20221026220424001',
goods: [
{
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
ddje: '199',
mj: '张三',
tkje: 460,
sqsj: '2022-11-19',
tkzt: '申请维权(仅退款)'
}
]
},
{
tkbh: '20221026220424001',
ddbh: '20221026220424001',
goods: [
{
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
ddje: '199',
mj: '张三',
tkje: 460,
sqsj: '2022-11-19',
tkzt: '申请维权(仅退款)'
}
]
},
{
tkbh: '20221026220424001',
ddbh: '20221026220424001',
goods: [
{
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
ddje: '199',
mj: '张三',
tkje: 460,
sqsj: '2022-11-19',
tkzt: '申请维权(仅退款)'
}
]
}
]
}
},
methods: {
goToDetail (row) {
this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
}
}
}
</script>

View File

@ -46,20 +46,28 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- Tab 选项真正的内容在 Lab -->
<el-tabs v-model="activeTab" type="card" @tab-click="tabClick" style="margin-top: -40px;">
<el-tab-pane v-for="tab in statusTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
</el-tabs>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="退款编号" align="center" prop="no" />
<el-table-column label="订单编号" align="center" prop="orderNo" />
<el-table-column label="订单编号" align="center" prop="orderNo" />
<el-table-column label="商品信息" align="center" prop="status" width="auto" min-width="300">
<el-table-column label="订单编号" align="center" prop="orderNo" /> <!-- TODO 芋艿未来要加个订单链接 -->
<el-table-column label="商品信息" align="center" prop="spuName" width="auto" min-width="300">
<!-- TODO @小红样式不太对辛苦改改 -->
<!-- <div slot-scope="{ row }" class="goods-info">-->
<!-- <img :src="row.picUrl"/>-->
<!-- <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
<!-- </div>-->
</el-table-column>
<el-table-column label="订单金额" align="center" prop="refundPrice" />
<el-table-column label="买家" align="center" prop="userId" />
<el-table-column label="订单金额" align="center" prop="refundPrice">
<template v-slot="scope">
<span>{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="买家" align="center" prop="user.nickname" /> <!-- TODO 芋艿未来要加个会员链接 -->
<el-table-column label="申请时间" align="center" prop="createTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
@ -77,8 +85,9 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template v-slot="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['trade:after-sale:update']">修改</el-button>-->
<el-button size="mini" type="text" icon="el-icon-thumb"
>处理退款</el-button>
<!-- @click="handleUpdate(scope.row)" v-hasPermi="['trade:after-sale:update']"-->
</template>
</el-table-column>
</el-table>
@ -91,6 +100,7 @@
<script>
import { getAfterSalePage } from "@/api/mall/trade/afterSale";
import { datePickerOptions } from "@/utils/constants";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
export default {
name: "AfterSale",
@ -124,12 +134,25 @@ export default {
way: null,
type: null,
},
// Tab 筛选
activeTab: 'all',
statusTabs: [{
label: '全部',
value: 'all'
}],
// 静态变量
datePickerOptions: datePickerOptions
};
},
created() {
this.getList();
// 设置 statuses 过滤
for (const dict of getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
this.statusTabs.push({
label: dict.label,
value: dict.value
})
}
},
methods: {
/** 查询列表 */
@ -145,13 +168,23 @@ export default {
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.activeTab = this.queryParams.status ? this.queryParams.status : 'all'; // 处理 tab
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.activeTab = 'all'; // 处理 tab
this.handleQuery();
},
/** tab 切换 */
tabClick(tab) {
this.queryParams.status = tab.name === 'all' ? undefined : tab.name;
this.getList();
},
goToDetail (row) {
this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
}
}
};
</script>