mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-10 02:49:03 +08:00
manager 升级到vue3
This commit is contained in:
pikachu1995@126.com
@@ -1,351 +1,197 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Tabs value="RETURN_MONEY" @on-click="handleClickType">
|
||||
<TabPane label="退款" name="RETURN_MONEY">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" >添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="取消" name="CANCEL">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="退货" name="RETURN_GOODS">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="投诉" name="COMPLAIN">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
<Button @click="getDataList" icon="md-refresh">刷新</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="售后原因" prop="reason">
|
||||
<Input v-model="form.reason" maxlength="20" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
|
||||
>提交
|
||||
</Button
|
||||
>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeTab" @tab-click="onTabClick">
|
||||
<el-tab-pane label="退款" name="RETURN_MONEY">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="取消" name="CANCEL">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="退货" name="RETURN_GOODS">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="投诉" name="COMPLAIN">
|
||||
<div class="operation" style="margin-bottom: 10px">
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
<el-button @click="getDataList">刷新</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
|
||||
<el-table-column prop="createBy" label="创建人" min-width="120" />
|
||||
<el-table-column prop="reason" label="原因" min-width="400" />
|
||||
<el-table-column prop="createTime" label="时间" min-width="100" />
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="售后原因" prop="reason">
|
||||
<el-input v-model="form.reason" maxlength="20" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import * as API_Order from "@/api/order";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modalVisible: false,//添加售后原因弹出框
|
||||
modalTitle: "", //添加售后原因弹出框标题
|
||||
loading: true, // 表单加载状态
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
form: {
|
||||
reason: ""
|
||||
},//添加编辑表单
|
||||
formValidate: {
|
||||
reason: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入售后原因",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
serviceType: "RETURN_MONEY"
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "创建人",
|
||||
key: "createBy",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "原因",
|
||||
key: "reason",
|
||||
minWidth: 400,
|
||||
},
|
||||
{
|
||||
title: "时间",
|
||||
key: "createTime",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ style: { margin: "0 8px", color: "#dcdee2" } },
|
||||
"|"
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"删除"
|
||||
)
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0,//条数
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: "RETURN_MONEY",
|
||||
modalVisible: false,
|
||||
modalTitle: "",
|
||||
loading: true,
|
||||
submitLoading: false,
|
||||
form: { reason: "" },
|
||||
formValidate: {
|
||||
reason: [{ required: true, message: "请输入售后原因", trigger: "blur" }],
|
||||
},
|
||||
searchForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
serviceType: "RETURN_MONEY",
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTabClick(tab) {
|
||||
this.handleClickType(tab.paneName);
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
//切换tab
|
||||
handleClickType(v) {
|
||||
this.searchForm.pageNumber = 1 // 当前页数
|
||||
this.searchForm.pageSize = 20 // 页面大小
|
||||
//退款
|
||||
if (v == "RETURN_MONEY") {
|
||||
this.searchForm.serviceType = "RETURN_MONEY"
|
||||
}
|
||||
//退货
|
||||
if (v == "RETURN_GOODS") {
|
||||
this.searchForm.serviceType = "RETURN_GOODS"
|
||||
}
|
||||
//取消
|
||||
if (v == "CANCEL") {
|
||||
this.searchForm.serviceType = "CANCEL"
|
||||
}
|
||||
//取消
|
||||
if (v == "COMPLAIN") {
|
||||
this.searchForm.serviceType = "COMPLAIN"
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
//获取售后原因数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getAfterSaleReasonPage(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
//添加售后原因
|
||||
add() {
|
||||
this.form.reason = ""
|
||||
this.modalVisible = true
|
||||
this.modalTitle = "添加售后原因"
|
||||
},
|
||||
//修改售后原因
|
||||
edit(v) {
|
||||
|
||||
this.form.reason = v.reason
|
||||
this.form.id = v.id
|
||||
|
||||
this.modalVisible = true
|
||||
this.modalTitle = "修改售后原因"
|
||||
},
|
||||
//提交表单
|
||||
handleSubmit() {
|
||||
this.form.serviceType = this.searchForm.serviceType
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalTitle == '添加售后原因') {
|
||||
// 添加
|
||||
delete this.form.id;
|
||||
API_Order.addAfterSaleReason(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
API_Order.editAfterSaleReason(this.form.id, this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除售后原因
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
// 记得确认修改此处
|
||||
content: "确认要删除此售后原因?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
API_Order.delAfterSaleReason(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("售后原因已删除");
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
};
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
handleClickType(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.searchForm.serviceType = v;
|
||||
this.getDataList();
|
||||
},
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getAfterSaleReasonPage(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
this.form.reason = "";
|
||||
this.modalVisible = true;
|
||||
this.modalTitle = "添加售后原因";
|
||||
},
|
||||
edit(v) {
|
||||
this.form.reason = v.reason;
|
||||
this.form.id = v.id;
|
||||
this.modalVisible = true;
|
||||
this.modalTitle = "修改售后原因";
|
||||
},
|
||||
handleSubmit() {
|
||||
this.form.serviceType = this.searchForm.serviceType;
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalTitle == "添加售后原因") {
|
||||
delete this.form.id;
|
||||
API_Order.addAfterSaleReason(this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
API_Order.editAfterSaleReason(this.form.id, this.form).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "确认要删除此售后原因?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Order.delAfterSaleReason(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("售后原因已删除");
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.link-text {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.op-split {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,355 +1,315 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="关键字" prop="keywords" style="display: block; width: 100%;">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.keywords"
|
||||
placeholder="请输入商品名称、订单编号搜索"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<br>
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后单号" prop="sn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.sn"
|
||||
placeholder="请输入售后单号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="申请时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 240px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Form-item label="商家名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入商家名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后类型">
|
||||
<Select
|
||||
v-model="searchForm.serviceType"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<Option value="RETURN_MONEY">退款</Option>
|
||||
<Option value="RETURN_GOODS">退货</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button
|
||||
@click="handleSearch"
|
||||
type="primary"
|
||||
icon="ios-search"
|
||||
class="search-btn"
|
||||
>搜索</Button
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="关键字" prop="keywords" style="display: block; width: 100%">
|
||||
<el-input
|
||||
v-model="searchForm.keywords"
|
||||
placeholder="请输入商品名称、订单编号搜索"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单编号" prop="orderSn">
|
||||
<el-input
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="售后单号" prop="sn">
|
||||
<el-input
|
||||
v-model="searchForm.sn"
|
||||
placeholder="请输入售后单号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
clearable
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
style="width: 360px"
|
||||
@change="selectDateRange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商家名称" prop="storeName">
|
||||
<el-input
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入商家名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会员名称" prop="memberName">
|
||||
<el-input
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="售后类型">
|
||||
<el-select
|
||||
v-model="searchForm.serviceType"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
</Form>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card>
|
||||
<el-option label="退款" value="RETURN_MONEY" />
|
||||
<el-option label="退货" value="RETURN_GOODS" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<div class="order-tab">
|
||||
<Tabs v-model="currentStatus" @on-click="serviceStatusClick">
|
||||
<TabPane v-for="item in serviceStatusWithCount" :key="item.value" :label="item.title" :name="item.value">
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
|
||||
<el-tab-pane
|
||||
v-for="item in serviceStatusWithCount"
|
||||
:key="item.value"
|
||||
:label="item.title"
|
||||
:name="item.value"
|
||||
/>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="{ row }">
|
||||
<div style="margin-top: 5px; height: 80px; display: flex">
|
||||
<div style="">
|
||||
<img :src="row.goodsImage" style="width: 60px; height: 60px; margin-top: 3px; object-fit: cover; border-radius: 4px;" />
|
||||
<el-table-column prop="sn" label="售后服务单号" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="商品" min-width="300">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
|
||||
<div>
|
||||
<img
|
||||
:src="row.goodsImage"
|
||||
style="width: 60px; height: 60px; margin-top: 3px; object-fit: cover; border-radius: 4px"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div style="margin-left: 13px">
|
||||
<div class="div-zoom">
|
||||
<a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
</div>
|
||||
<div style="color: #999; font-size: 12px; margin-top: 5px">
|
||||
商品ID: {{ row.goodsId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="memberId" label="会员ID" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="memberName" label="会员名称" width="140" />
|
||||
<el-table-column prop="storeName" label="店铺名称" width="100" show-overflow-tooltip />
|
||||
<el-table-column label="售后金额" width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">
|
||||
{{ $filters.unitPrice(row.applyRefundPrice, "￥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售后类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row" :type="serviceTypeTagType(row.serviceType)">
|
||||
{{ serviceTypeText(row.serviceType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售后状态" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row" :type="serviceStatusTagType(row.serviceStatus)">
|
||||
{{ serviceStatusText(row.serviceStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="申请时间" width="180" />
|
||||
<el-table-column label="操作" fixed="right" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">查看</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="margin-left: 13px">
|
||||
<div class="div-zoom">
|
||||
<a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
</div>
|
||||
<div style="color: #999; font-size: 12px; margin-top: 5px;">
|
||||
商品ID: {{ row.goodsId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import vueQr from "vue-qr";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"vue-qr": vueQr,
|
||||
},
|
||||
name: "after-sale-order",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
loading: true,
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
startDate: "", // 起始时间
|
||||
endDate: "", // 终止时间
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
orderSn: "",
|
||||
memberName: "",
|
||||
serviceStatus: "",
|
||||
storeName: "",
|
||||
sn: "",
|
||||
keywords: "", // 新增关键字搜索字段
|
||||
keywords: "",
|
||||
},
|
||||
selectDate: null, // 选择时间段
|
||||
form: {
|
||||
// 添加或编辑表单对象初始化数据
|
||||
sn: "",
|
||||
storeName: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
billPrice: "",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "售后服务单号",
|
||||
key: "sn",
|
||||
minWidth: 140,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
key: "orderSn",
|
||||
minWidth: 120,
|
||||
tooltip: true,
|
||||
},
|
||||
// 移除这个独立的商品ID列
|
||||
// {
|
||||
// title: "商品ID",
|
||||
// key: "goodsId",
|
||||
// minWidth: 120,
|
||||
// tooltip: true,
|
||||
// },
|
||||
{
|
||||
title: "商品",
|
||||
key: "goodsName",
|
||||
minWidth: 300,
|
||||
tooltip: true,
|
||||
slot: "goodsSlot",
|
||||
},
|
||||
{
|
||||
title: "会员ID",
|
||||
key: "memberId",
|
||||
minWidth: 120,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "memberName",
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: "店铺名称",
|
||||
key: "storeName",
|
||||
width: 100,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "售后金额",
|
||||
key: "applyRefundPrice",
|
||||
width: 110,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "售后类型",
|
||||
key: "serviceType",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
if (params.row.serviceType == "RETURN_MONEY") {
|
||||
return h("div", [h("tag", { props: { color: "blue" } }, "退款")]);
|
||||
} else if (params.row.serviceType == "RETURN_GOODS") {
|
||||
return h("div", [h("tag", { props: { color: "volcano" } }, "退货")]);
|
||||
} else if (params.row.serviceType == "EXCHANGE_GOODS") {
|
||||
return h("div", [h("tag", { props: { color: "green" } }, "换货")]);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: "售后状态",
|
||||
key: "serviceStatus",
|
||||
width: 180,
|
||||
render: (h, params) => {
|
||||
if (params.row.serviceStatus == "APPLY") {
|
||||
return h("div", [h("tag", { props: { color: "blue" } }, "申请中")]);
|
||||
} else if (params.row.serviceStatus == "PASS") {
|
||||
return h("div", [h("tag", { props: { color: "cyan" } }, "通过售后")]);
|
||||
} else if (params.row.serviceStatus == "REFUSE") {
|
||||
return h("div", [h("tag", { props: { color: "volcano" } }, "拒绝售后")]);
|
||||
} else if (params.row.serviceStatus == "BUYER_RETURN") {
|
||||
return h("div", [
|
||||
h("tag", { props: { color: "orange" } }, "买家退货，待卖家收货"),
|
||||
]);
|
||||
} else if (params.row.serviceStatus == "SELLER_CONFIRM") {
|
||||
return h("div", [h("tag", { props: { color: "gold" } }, "卖家确认收货")]);
|
||||
} else if (params.row.serviceStatus == "SELLER_TERMINATION") {
|
||||
return h("div", [h("tag", { props: { color: "lime" } }, "卖家终止售后")]);
|
||||
} else if (params.row.serviceStatus == "BUYER_CANCEL") {
|
||||
return h("div", [h("tag", { props: { color: "purple" } }, "买家取消售后")]);
|
||||
} else if (params.row.serviceStatus == "COMPLETE") {
|
||||
return h("div", [h("tag", { props: { color: "green" } }, "完成售后")]);
|
||||
} else if (params.row.serviceStatus == "WAIT_REFUND") {
|
||||
return h("div", [h("tag", { props: { color: "geekblue" } }, "待平台退款")]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "申请时间",
|
||||
key: "createTime",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
align: "center",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
serviceStatus: [
|
||||
{title: '全部', value: ''},
|
||||
{title: '申请售后', value: 'APPLY'},
|
||||
{title: '通过售后', value: 'PASS'},
|
||||
{title: '拒绝售后', value: 'REFUSE'},
|
||||
{title: '待收货', value: 'BUYER_RETURN'},
|
||||
{title: '确认收货', value: 'SELLER_CONFIRM'},
|
||||
{title: '完成售后', value: 'COMPLETE'},
|
||||
{title: '卖家终止售后', value: 'SELLER_TERMINATION'},
|
||||
{title: '买家取消售后', value: 'BUYER_CANCEL'}
|
||||
],
|
||||
currentStatus: '',
|
||||
afterSaleNumData: {} // 售后数量统计数据
|
||||
selectDate: null,
|
||||
data: [],
|
||||
total: 0,
|
||||
currentStatus: "",
|
||||
afterSaleNumData: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
serviceStatusWithCount() {
|
||||
return [
|
||||
{ title: "全部", value: "" },
|
||||
{
|
||||
title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
|
||||
value: "APPLY",
|
||||
},
|
||||
{
|
||||
title: `通过售后${this.afterSaleNumData.passNum ? "(" + this.afterSaleNumData.passNum + ")" : ""}`,
|
||||
value: "PASS",
|
||||
},
|
||||
{
|
||||
title: `拒绝售后${this.afterSaleNumData.refuseNum ? "(" + this.afterSaleNumData.refuseNum + ")" : ""}`,
|
||||
value: "REFUSE",
|
||||
},
|
||||
{
|
||||
title: `待收货${this.afterSaleNumData.buyerReturnNum ? "(" + this.afterSaleNumData.buyerReturnNum + ")" : ""}`,
|
||||
value: "BUYER_RETURN",
|
||||
},
|
||||
{
|
||||
title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? "(" + this.afterSaleNumData.sellerConfirmNum + ")" : ""}`,
|
||||
value: "SELLER_CONFIRM",
|
||||
},
|
||||
{
|
||||
title: `完成售后${this.afterSaleNumData.completeNum ? "(" + this.afterSaleNumData.completeNum + ")" : ""}`,
|
||||
value: "COMPLETE",
|
||||
},
|
||||
{
|
||||
title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? "(" + this.afterSaleNumData.sellerTerminationNum + ")" : ""}`,
|
||||
value: "SELLER_TERMINATION",
|
||||
},
|
||||
{
|
||||
title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? "(" + this.afterSaleNumData.buyerCancelNum + ")" : ""}`,
|
||||
value: "BUYER_CANCEL",
|
||||
},
|
||||
{
|
||||
title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? "(" + this.afterSaleNumData.waitRefundNum + ")" : ""}`,
|
||||
value: "WAIT_REFUND",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
serviceTypeText(type) {
|
||||
const map = {
|
||||
RETURN_MONEY: "退款",
|
||||
RETURN_GOODS: "退货",
|
||||
EXCHANGE_GOODS: "换货",
|
||||
};
|
||||
return map[type] || type || "-";
|
||||
},
|
||||
serviceTypeTagType(type) {
|
||||
const map = {
|
||||
RETURN_MONEY: "primary",
|
||||
RETURN_GOODS: "warning",
|
||||
EXCHANGE_GOODS: "success",
|
||||
};
|
||||
return map[type] || "info";
|
||||
},
|
||||
serviceStatusText(status) {
|
||||
const map = {
|
||||
APPLY: "申请中",
|
||||
PASS: "通过售后",
|
||||
REFUSE: "拒绝售后",
|
||||
BUYER_RETURN: "买家退货，待卖家收货",
|
||||
SELLER_CONFIRM: "卖家确认收货",
|
||||
SELLER_TERMINATION: "卖家终止售后",
|
||||
BUYER_CANCEL: "买家取消售后",
|
||||
COMPLETE: "完成售后",
|
||||
WAIT_REFUND: "待平台退款",
|
||||
};
|
||||
return map[status] || status || "-";
|
||||
},
|
||||
serviceStatusTagType(status) {
|
||||
const map = {
|
||||
APPLY: "primary",
|
||||
PASS: "info",
|
||||
REFUSE: "warning",
|
||||
BUYER_RETURN: "warning",
|
||||
SELLER_CONFIRM: "",
|
||||
SELLER_TERMINATION: "success",
|
||||
BUYER_CANCEL: "danger",
|
||||
COMPLETE: "success",
|
||||
WAIT_REFUND: "primary",
|
||||
};
|
||||
return map[status] || "info";
|
||||
},
|
||||
init() {
|
||||
this.getDataList();
|
||||
this.getAfterSaleNumData();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
this.getAfterSaleNumData();
|
||||
},
|
||||
// 开始结束时间分别赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
} else {
|
||||
this.searchForm.startDate = "";
|
||||
this.searchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
|
||||
@@ -359,32 +319,28 @@ export default {
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
// 获取售后状态数量
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
// 获取售后数量统计
|
||||
getAfterSaleNumData() {
|
||||
getAfterSaleNumData() {
|
||||
const { serviceStatus, ...searchParams } = this.searchForm;
|
||||
API_Order.getAfterSaleNumVO(searchParams).then((res) => {
|
||||
if (res.success) {
|
||||
this.afterSaleNumData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转售后详情
|
||||
API_Order.getAfterSaleNumVO(searchParams).then((res) => {
|
||||
if (res.success) {
|
||||
this.afterSaleNumData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
detail(v) {
|
||||
let sn = v.sn;
|
||||
this.$options.filters.customRouterPush({
|
||||
const sn = v.sn;
|
||||
this.$filters.customRouterPush({
|
||||
name: "after-order-detail",
|
||||
query: { sn: sn },
|
||||
})
|
||||
});
|
||||
},
|
||||
onStatusTabClick(tab) {
|
||||
this.serviceStatusClick(tab.paneName);
|
||||
},
|
||||
// 售后筛选
|
||||
serviceStatusClick(item) {
|
||||
this.currentStatus = item;
|
||||
// 如果是全部（空字符串），则删除serviceStatus字段
|
||||
if (item === 0) {
|
||||
if (item === "" || item === undefined) {
|
||||
delete this.searchForm.serviceStatus;
|
||||
} else {
|
||||
this.searchForm.serviceStatus = item;
|
||||
@@ -396,30 +352,23 @@ export default {
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
// 带数量的售后状态
|
||||
serviceStatusWithCount() {
|
||||
return [
|
||||
{title: '全部', value: ''},
|
||||
{title: `申请售后${this.afterSaleNumData.applyNum ? '(' + this.afterSaleNumData.applyNum + ')' : ''}`, value: 'APPLY'},
|
||||
{title: `通过售后${this.afterSaleNumData.passNum ? '(' + this.afterSaleNumData.passNum + ')' : ''}`, value: 'PASS'},
|
||||
{title: `拒绝售后${this.afterSaleNumData.refuseNum ? '(' + this.afterSaleNumData.refuseNum + ')' : ''}`, value: 'REFUSE'},
|
||||
{title: `待收货${this.afterSaleNumData.buyerReturnNum ? '(' + this.afterSaleNumData.buyerReturnNum + ')' : ''}`, value: 'BUYER_RETURN'},
|
||||
{title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? '(' + this.afterSaleNumData.sellerConfirmNum + ')' : ''}`, value: 'SELLER_CONFIRM'},
|
||||
{title: `完成售后${this.afterSaleNumData.completeNum ? '(' + this.afterSaleNumData.completeNum + ')' : ''}`, value: 'COMPLETE'},
|
||||
{title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? '(' + this.afterSaleNumData.sellerTerminationNum + ')' : ''}`, value: 'SELLER_TERMINATION'},
|
||||
{title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? '(' + this.afterSaleNumData.buyerCancelNum + ')' : ''}`, value: 'BUYER_CANCEL'},
|
||||
{title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? '(' + this.afterSaleNumData.waitRefundNum + ')' : ''}`, value: 'WAIT_REFUND'}
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// Tab组件样式
|
||||
.order-tab {
|
||||
::v-deep .ivu-tabs-tab {
|
||||
:deep(.el-tabs__item) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<el-card>
|
||||
<div class="main-content">
|
||||
<div class="div-flow-left">
|
||||
<div class="div-form-default">
|
||||
@@ -79,18 +79,10 @@
|
||||
<dt>是否同意</dt>
|
||||
<dd>
|
||||
<div class="div-content">
|
||||
<RadioGroup
|
||||
type="button"
|
||||
button-style="solid"
|
||||
v-model="params.serviceStatus"
|
||||
>
|
||||
<Radio label="PASS">
|
||||
<span>同意</span>
|
||||
</Radio>
|
||||
<Radio label="REFUSE">
|
||||
<span>拒绝</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
<el-radio-group v-model="params.serviceStatus">
|
||||
<el-radio-button value="PASS">同意</el-radio-button>
|
||||
<el-radio-button value="REFUSE">拒绝</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
@@ -103,13 +95,13 @@
|
||||
<dl>
|
||||
<dt>实际退款金额</dt>
|
||||
<dd>
|
||||
<InputNumber :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
|
||||
<el-input-number :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>备注信息</dt>
|
||||
<dd>
|
||||
<Input
|
||||
<el-input
|
||||
v-model="params.remark"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
@@ -122,14 +114,14 @@
|
||||
<dl>
|
||||
<dd>
|
||||
<div style="text-align: right; width: 45%; margin-top: 10px">
|
||||
<Button
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</el-button>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
@@ -224,7 +216,7 @@
|
||||
<dl>
|
||||
<dt>备注信息</dt>
|
||||
<dd>
|
||||
<Input
|
||||
<el-input
|
||||
v-model="refundPriceForm.remark"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
@@ -237,14 +229,14 @@
|
||||
<dl>
|
||||
<dt>操作</dt>
|
||||
<dd>
|
||||
<Button
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="refundPriceSubmit"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
退款
|
||||
</Button>
|
||||
</el-button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
@@ -283,25 +275,23 @@
|
||||
<dl>
|
||||
<dt>操作</dt>
|
||||
<dd>
|
||||
<Button
|
||||
type="info"
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:loading="submitLoading"
|
||||
@click="logisticsSeller()"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
查询物流
|
||||
</Button>
|
||||
</el-button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</el-card>
|
||||
<!-- 查询物流 -->
|
||||
<Modal v-model="logisticsModal" width="40">
|
||||
<p slot="header">
|
||||
<span>查询物流</span>
|
||||
</p>
|
||||
<el-dialog v-model="logisticsModal" title="查询物流" width="640px" append-to-body>
|
||||
<div class="layui-layer-wrap">
|
||||
<dl>
|
||||
<dt>售后单号：</dt>
|
||||
@@ -335,10 +325,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: right">
|
||||
<Button @click="logisticsClose">取消</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<el-button @click="logisticsClose">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -432,11 +422,7 @@ export default {
|
||||
" "
|
||||
);
|
||||
|
||||
this.$set(
|
||||
this.params,
|
||||
"actualRefundPrice",
|
||||
this.afterSaleInfo.applyRefundPrice
|
||||
);
|
||||
this.params.actualRefundPrice = this.afterSaleInfo.applyRefundPrice;
|
||||
// 如果显示物流信息，展示商家地址
|
||||
if (this.afterSaleInfo.showDelivery) {
|
||||
API_Order.storeAddress(this.sn).then((resu) => {
|
||||
|
||||
@@ -1,255 +1,212 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="状态" prop="status">
|
||||
<Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
|
||||
<Option value="NEW">新投诉</Option>
|
||||
<Option value="CANCEL">已撤销</Option>
|
||||
<Option value="WAIT_APPEAL">待申诉</Option>
|
||||
<Option value="COMMUNICATION">对话中</Option>
|
||||
<Option value="WAIT_ARBITRATION">等待仲裁</Option>
|
||||
<Option value="COMPLETE">已完成</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<template slot-scope="{row}" slot="goodsName">
|
||||
<a class="mr_10" @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
|
||||
</div>
|
||||
<img src="../../../assets/qrcode.svg" style="vertical-align:bottom;" class="hover-pointer" width="20" height="20" alt="">
|
||||
</Poptip>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
<el-form-item label="订单编号" prop="orderSn">
|
||||
<el-input
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会员名称" prop="memberName">
|
||||
<el-input
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
|
||||
<el-option label="新投诉" value="NEW" />
|
||||
<el-option label="已撤销" value="CANCEL" />
|
||||
<el-option label="待申诉" value="WAIT_APPEAL" />
|
||||
<el-option label="对话中" value="COMMUNICATION" />
|
||||
<el-option label="等待仲裁" value="WAIT_ARBITRATION" />
|
||||
<el-option label="已完成" value="COMPLETE" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
|
||||
<el-table-column prop="memberName" label="会员名称" width="200" />
|
||||
<el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../../assets/qrcode.svg"
|
||||
class="hover-pointer"
|
||||
width="20"
|
||||
height="20"
|
||||
alt="qrcode"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="complainTopic" label="投诉主题" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="投诉时间" width="180" />
|
||||
<el-table-column label="投诉状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row" :type="complainStatusTagType(row.complainStatus)">
|
||||
{{ complainStatusText(row.complainStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">
|
||||
{{ row.complainStatus === "COMPLETE" ? "详情" : "处理" }}
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import vueQr from 'vue-qr'
|
||||
export default {
|
||||
name: "orderComplaint",
|
||||
components: {
|
||||
"vue-qr":vueQr
|
||||
import * as API_Order from "@/api/order";
|
||||
import vueQr from "vue-qr";
|
||||
|
||||
export default {
|
||||
name: "orderComplaint",
|
||||
components: { vueQr },
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
searchForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getDataList();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
},
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "memberName",
|
||||
width: 200,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
key: "orderSn",
|
||||
minWidth: 120,
|
||||
tooltip: true
|
||||
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
slot: "goodsName",
|
||||
minWidth: 170,
|
||||
tooltip: true
|
||||
|
||||
},
|
||||
{
|
||||
title: "投诉主题",
|
||||
width: 100,
|
||||
key: "complainTopic",
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: "投诉时间",
|
||||
key: "createTime",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: "投诉状态",
|
||||
key: "complainStatus",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
if (params.row.complainStatus == "NEW") {
|
||||
return h('div', [h('tag',{props: {color: "purple"}}, '新投诉'),]);
|
||||
} else if (params.row.complainStatus == "CANCEL") {
|
||||
return h('div', [h('tag', {props: {color: "cyan"}}, '已撤销'),]);
|
||||
} else if (params.row.complainStatus == "WAIT_APPEAL") {
|
||||
return h('div', [h('tag', {props: {color: "volcano"}}, '待申诉'),]);
|
||||
} else if (params.row.complainStatus == "COMMUNICATION") {
|
||||
return h('div', [h('tag', {props: {color: "orange"}}, '对话中'),]);
|
||||
}else if (params.row.complainStatus == "WAIT_ARBITRATION") {
|
||||
return h('div', [h('tag', {props: {color: "blue"}}, '等待仲裁'),]);
|
||||
}else if (params.row.complainStatus == "COMPLETE") {
|
||||
return h('div', [h('tag', {props: {color: "green"}}, '已完成'),]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 150,
|
||||
render: (h, params) => {
|
||||
if(params.row.complainStatus === "COMPLETE"){
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"详情"
|
||||
),
|
||||
]);
|
||||
}else{
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"处理"
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
},
|
||||
methods: {
|
||||
complainStatusText(v) {
|
||||
const map = {
|
||||
NEW: "新投诉",
|
||||
CANCEL: "已撤销",
|
||||
WAIT_APPEAL: "待申诉",
|
||||
COMMUNICATION: "对话中",
|
||||
WAIT_ARBITRATION: "等待仲裁",
|
||||
COMPLETE: "已完成",
|
||||
};
|
||||
return map[v] || v || "-";
|
||||
},
|
||||
watch: {
|
||||
$route(){
|
||||
this.getDataList();
|
||||
}
|
||||
complainStatusTagType(v) {
|
||||
const map = {
|
||||
NEW: "primary",
|
||||
CANCEL: "info",
|
||||
WAIT_APPEAL: "warning",
|
||||
COMMUNICATION: "warning",
|
||||
WAIT_ARBITRATION: "",
|
||||
COMPLETE: "success",
|
||||
};
|
||||
return map[v] || "info";
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderComplain(this.searchForm).then((res) => {
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderComplain(this.searchForm)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//投诉详情
|
||||
detail(v) {
|
||||
let id = v.id;
|
||||
this.$options.filters.customRouterPush({
|
||||
name: "order-complaint-detail",
|
||||
query: { id: id },
|
||||
})
|
||||
},
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
detail(v) {
|
||||
this.$filters.customRouterPush({
|
||||
name: "order-complaint-detail",
|
||||
query: { id: v.id },
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.mr_10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hover-pointer {
|
||||
cursor: pointer;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,247 +1,250 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<div class="main-content">
|
||||
<div class="search" v-loading="loading">
|
||||
<el-card>
|
||||
<div class="main-content" v-if="complaintInfo.id">
|
||||
<div class="div-flow-left">
|
||||
<div class="div-form-default">
|
||||
<h3>投诉信息</h3>
|
||||
<dl>
|
||||
<dt>投诉商品</dt>
|
||||
<dd>{{complaintInfo.goodsName}}</dd>
|
||||
<dd>
|
||||
<div>
|
||||
<img :src="complaintInfo.goodsImage" style="height: 60px">
|
||||
<img :src="complaintInfo.goodsImage" style="height: 60px" alt="" />
|
||||
</div>
|
||||
<a>{{ complaintInfo.goodsName }}</a><br>
|
||||
<a class="link-text">{{ complaintInfo.goodsName }}</a><br />
|
||||
<span>{{ complaintInfo.num }}(数量)</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉状态</dt>
|
||||
<dd v-if="complaintInfo.complainStatus =='NEW'">新投诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='CANCEL'">已撤销</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_APPEAL'">待申诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMMUNICATION'">对话中</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_ARBITRATION'">等待仲裁</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMPLETE'">已完成</dd>
|
||||
<dd>{{ complainStatusText(complaintInfo.complainStatus) }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉时间</dt>
|
||||
<dd>{{complaintInfo.createTime}}</dd>
|
||||
<dd>{{ complaintInfo.createTime }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉主题</dt>
|
||||
<dd>{{complaintInfo.complainTopic}}</dd>
|
||||
<dd>{{ complaintInfo.complainTopic }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉内容</dt>
|
||||
<dd>{{complaintInfo.content}}</dd>
|
||||
<dd>{{ complaintInfo.content }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉凭证</dt>
|
||||
<dd v-if="images == ''">
|
||||
暂无投诉凭证
|
||||
</dd>
|
||||
<dd v-if="!images.length">暂无投诉凭证</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in images" :key="index">
|
||||
<img class="complain-img" :src=item>
|
||||
<img class="complain-img" :src="item" alt="" />
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="div-form-default" v-if="complaintInfo.appealContent">
|
||||
<h3>商家申诉信息</h3>
|
||||
<dl>
|
||||
<dt>申诉时间</dt>
|
||||
<dd>{{complaintInfo.appealTime}}</dd>
|
||||
<dd>{{ complaintInfo.appealTime }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉内容</dt>
|
||||
<dd>{{complaintInfo.appealContent}}</dd>
|
||||
<dd>{{ complaintInfo.appealContent }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉凭证</dt>
|
||||
<dd v-if="complaintInfo.appealImagesList.length == 0">
|
||||
暂无申诉凭证
|
||||
</dd>
|
||||
<dd v-if="!appealImages.length">暂无申诉凭证</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in complaintInfo.appealImagesList" :key="index">
|
||||
<img class="complain-img" :src="item">
|
||||
<div class="div-img" v-for="(item, index) in appealImages" :key="index">
|
||||
<img class="complain-img" :src="item" alt="" />
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="div-form-default">
|
||||
<h3>对话详情</h3>
|
||||
<dl>
|
||||
<dt>对话记录</dt>
|
||||
<dd>
|
||||
<div class="div-content">
|
||||
<p
|
||||
v-for="(item, index) in complaintInfo.orderComplaintCommunications || []"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
|
||||
<span v-else-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
|
||||
<span v-else-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
|
||||
{{ item.content }}
|
||||
</p>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<dt>发送对话</dt>
|
||||
<dd>
|
||||
<el-input
|
||||
v-model="params.content"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<dt></dt>
|
||||
<dd>
|
||||
<div style="text-align: right; width: 45%; margin-top: 10px">
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
|
||||
回复
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
|
||||
返回列表
|
||||
</el-button>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>对话详情</h3>
|
||||
<dl>
|
||||
<dt>对话记录</dt>
|
||||
<dd>
|
||||
<div class="div-content">
|
||||
<p v-for="(item, index) in complaintInfo.orderComplaintCommunications" :key="index">
|
||||
<span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
|
||||
{{ item.content }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus!='COMPLETE'">
|
||||
<dt>发送对话</dt>
|
||||
<dd>
|
||||
<Input
|
||||
v-model="params.content"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width:260px"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<dt></dt>
|
||||
<dd>
|
||||
<div style="text-align: right;width: 45%;margin-top: 10px">
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
|
||||
回复
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
|
||||
返回列表
|
||||
</Button>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus == 'COMPLETE'">
|
||||
<h3>仲裁结果</h3>
|
||||
<dl>
|
||||
<dt>仲裁意见</dt>
|
||||
<dd>
|
||||
{{complaintInfo.arbitrationResult}}
|
||||
</dd>
|
||||
<dd>{{ complaintInfo.arbitrationResult }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<h3>平台仲裁</h3>
|
||||
<dl v-if="arbitrationResultShow == true">
|
||||
<dl v-if="arbitrationResultShow">
|
||||
<dt>仲裁</dt>
|
||||
<dd>
|
||||
<Input v-model="arbitrationParams.arbitrationResult" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
|
||||
<el-input
|
||||
v-model="arbitrationParams.arbitrationResult"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt></dt>
|
||||
<dd style="text-align:right;display:flex; justify-content: space-between;">
|
||||
<Button type="primary" ghost :loading="submitLoading" v-if="arbitrationResultShow == false" @click="arbitrationHandle">
|
||||
<dd style="text-align: right; display: flex; justify-content: space-between">
|
||||
<el-button
|
||||
v-if="!arbitrationResultShow"
|
||||
:loading="submitLoading"
|
||||
@click="arbitrationHandle"
|
||||
>
|
||||
直接仲裁结束投诉流程
|
||||
</Button>
|
||||
<Button :loading="submitLoading" v-if="complaintInfo.complainStatus == 'NEW'" @click="handleStoreComplaint">
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="complaintInfo.complainStatus == 'NEW'"
|
||||
:loading="submitLoading"
|
||||
@click="handleStoreComplaint"
|
||||
>
|
||||
交由商家申诉
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" v-if="arbitrationResultShow == true" @click="arbitrationHandleSubmit">
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="arbitrationResultShow"
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="arbitrationHandleSubmit"
|
||||
>
|
||||
提交仲裁
|
||||
</Button>
|
||||
</el-button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-flow-center">
|
||||
|
||||
</div>
|
||||
<div class="div-flow-center"></div>
|
||||
|
||||
<div class="div-flow-right">
|
||||
<div class="div-form-default">
|
||||
<h3>订单相关信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
订单编号
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.orderSn}}
|
||||
</dd>
|
||||
<dt>订单编号</dt>
|
||||
<dd>{{ complaintInfo.orderSn }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
下单时间
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.createTime}}
|
||||
</dd>
|
||||
<dt>下单时间</dt>
|
||||
<dd>{{ complaintInfo.createTime }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
订单金额
|
||||
</dt>
|
||||
<dt>订单金额</dt>
|
||||
<dd>
|
||||
<priceColorScheme :value="complaintInfo.orderPrice" :color="$mainColor"></priceColorScheme>
|
||||
<span class="price-text">{{ $filters.unitPrice(complaintInfo.orderPrice, "￥") }}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>收件人信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeName}}
|
||||
</dd>
|
||||
<dt>收货人</dt>
|
||||
<dd>{{ complaintInfo.consigneeName }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货地址
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeAddressPath}}
|
||||
</dd>
|
||||
<dt>收货地址</dt>
|
||||
<dd>{{ complaintInfo.consigneeAddressPath }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人手机
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeMobile}}
|
||||
</dd>
|
||||
<dt>收货人手机</dt>
|
||||
<dd>{{ complaintInfo.consigneeMobile }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
|
||||
const emptyComplaint = () => ({
|
||||
id: "",
|
||||
orderComplaintCommunications: [],
|
||||
});
|
||||
|
||||
export default {
|
||||
name: "orderComplaintDetail",
|
||||
data() {
|
||||
return {
|
||||
id: 0, // 投诉id
|
||||
complaintInfo: "", // 投诉信息
|
||||
images: [], //会员申诉图片
|
||||
appealImages: [], //商家申诉的图片
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
//管理端回复内容
|
||||
loading: false,
|
||||
id: "",
|
||||
complaintInfo: emptyComplaint(),
|
||||
images: [],
|
||||
appealImages: [],
|
||||
submitLoading: false,
|
||||
params: {
|
||||
content: "",
|
||||
complainId: "",
|
||||
},
|
||||
//仲裁结果
|
||||
arbitrationParams: {
|
||||
arbitrationResult: "",
|
||||
},
|
||||
//是否显示仲裁框
|
||||
arbitrationResultShow: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 交给商家申诉
|
||||
complainStatusText(v) {
|
||||
const map = {
|
||||
NEW: "新投诉",
|
||||
CANCEL: "已撤销",
|
||||
WAIT_APPEAL: "待申诉",
|
||||
COMMUNICATION: "对话中",
|
||||
WAIT_ARBITRATION: "等待仲裁",
|
||||
COMPLETE: "已完成",
|
||||
};
|
||||
return map[v] || v || "-";
|
||||
},
|
||||
handleStoreComplaint() {
|
||||
API_Order.storeComplain({
|
||||
complainStatus: "WAIT_APPEAL",
|
||||
complainStatus: "WAIT_APPEAL",
|
||||
complainId: this.complaintInfo.id,
|
||||
}).then((res) => {
|
||||
@@ -251,73 +254,89 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取投诉详情
|
||||
getDetail() {
|
||||
if (!this.id) return;
|
||||
this.loading = true;
|
||||
API_Order.getOrderComplainDetail(this.id).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.complaintInfo = res.result;
|
||||
this.images = (res.result.images || "").split(",");
|
||||
this.appealImages = (res.result.appealImages || "").split(",");
|
||||
}
|
||||
});
|
||||
API_Order.getOrderComplainDetail(this.id)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.complaintInfo = res.result || emptyComplaint();
|
||||
this.images = (res.result.images || "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
this.appealImages = (res.result.appealImages || "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//返回列表
|
||||
returnDataList() {
|
||||
this.$router.push({
|
||||
name: "orderComplaint",
|
||||
});
|
||||
this.$router.push({ name: "orderComplaint" });
|
||||
},
|
||||
//仲裁
|
||||
arbitrationHandle() {
|
||||
this.arbitrationResultShow = true;
|
||||
},
|
||||
//仲裁结果提交
|
||||
arbitrationHandleSubmit() {
|
||||
if (this.arbitrationParams.arbitrationResult == "") {
|
||||
if (!this.arbitrationParams.arbitrationResult) {
|
||||
this.$Message.error("请填写仲裁内容");
|
||||
return;
|
||||
}
|
||||
API_Order.orderComplete(this.id, this.arbitrationParams).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("仲裁成功");
|
||||
this.arbitrationParams.arbitrationResult = "";
|
||||
this.getDetail();
|
||||
}
|
||||
});
|
||||
this.arbitrationResultShow = true;
|
||||
this.submitLoading = true;
|
||||
API_Order.orderComplete(this.id, this.arbitrationParams)
|
||||
.then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("仲裁成功");
|
||||
this.arbitrationParams.arbitrationResult = "";
|
||||
this.arbitrationResultShow = false;
|
||||
this.getDetail();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
},
|
||||
//回复
|
||||
handleSubmit() {
|
||||
if (this.params.content == "") {
|
||||
if (!this.params.content) {
|
||||
this.$Message.error("请填写对话内容");
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
this.params.complainId = this.id;
|
||||
API_Order.addOrderCommunication(this.params).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("对话成功");
|
||||
this.params.content = "";
|
||||
this.getDetail();
|
||||
}
|
||||
});
|
||||
API_Order.addOrderCommunication(this.params)
|
||||
.then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("对话成功");
|
||||
this.params.content = "";
|
||||
this.getDetail();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.$route.query.id;
|
||||
this.getDetail();
|
||||
},
|
||||
watch: {
|
||||
"$route.query.id"(val) {
|
||||
this.id = val;
|
||||
this.getDetail();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
min-height: 600px;
|
||||
padding: 10px;
|
||||
@@ -442,4 +461,14 @@ export default {
|
||||
overflow-x: auto;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
color: #ff5c58;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user