mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-15 19:45:06 +08:00
trade:【交易售后】查询分页列表
This commit is contained in:
@ -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>
|
@ -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>
|
||||
|
Reference in New Issue
Block a user