code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-07 17:38:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

manager 升级到vue3

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-05-25 10:49:09 +08:00
parent e7350899bf
commit 615ee91511
239 changed files with 22907 additions and 30841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

526
manager/src/views/order/after-order/afterSale.vue
View File

@@ -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>

623
manager/src/views/order/after-order/afterSaleOrder.vue
View File

@@ -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>

60
manager/src/views/order/after-order/afterSaleOrderDetail.vue
View File

@@ -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) => {

423
manager/src/views/order/after-order/orderComplaint.vue
View File

@@ -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>

365
manager/src/views/order/after-order/orderComplaintDetail.vue
View File

@@ -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>

282
manager/src/views/order/flow/paymentLog.vue
View File

@@ -1,38 +1,113 @@
<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="sn">
<Input type="text" v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
</Form-item>
<Form-item label="付款状态" prop="orderStatus">
<Select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
<Option value="UNPAID">未付款</Option>
<Option value="PAID">已付款</Option>
</Select>
</Form-item>
<Form-item label="支付方式" prop="orderStatus">
<Select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
<Option value="">全部</Option>
<Option value="WECHAT">微信</Option>
<Option value="ALIPAY">支付宝</Option>
<Option value="WALLET">余额</Option>
<Option value="BANK_TRANSFER">银行转账</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"></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>
</Card>
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<el-form-item label="订单号" prop="sn">
<el-input
v-model="searchForm.sn"
placeholder="订单/交易号"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="付款状态" prop="orderStatus">
<el-select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
<el-option label="未付款" value="UNPAID" />
<el-option label="已付款" value="PAID" />
</el-select>
</el-form-item>
<el-form-item label="支付方式" prop="orderStatus">
<el-select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
<el-option label="全部" value="" />
<el-option label="微信" value="WECHAT" />
<el-option label="支付宝" value="ALIPAY" />
<el-option label="余额" value="WALLET" />
<el-option label="银行转账" value="BANK_TRANSFER" />
</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
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<el-table-column prop="sn" label="订单/交易编号" min-width="180" show-overflow-tooltip />
<el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
<el-table-column label="支付方式" width="120" align="center">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.paymentMethod === 'WECHAT'" type="success">微信</el-tag>
<el-tag v-else-if="row.paymentMethod === 'ALIPAY'" type="primary">支付宝</el-tag>
<el-tag v-else-if="row.paymentMethod === 'WALLET'" type="info">余额支付</el-tag>
<el-tag v-else-if="row.paymentMethod === 'BANK_TRANSFER'" type="warning">银行转帐</el-tag>
<el-tag v-else>暂未付款</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="第三方流水" min-width="130">
<template #default="{ row }">
<span v-if="row">{{ row.receivableNo || "暂无流水号" }}</span>
</template>
</el-table-column>
<el-table-column label="客户端" width="130">
<template #default="{ row }">
<span v-if="row">
<span v-if="row.clientType === 'WECHAT_MP' || row.clientType === '小程序'">小程序</span>
<span v-else-if="row.clientType === 'APP'">APP</span>
<span v-else-if="row.clientType === 'PC'">PC网页</span>
<span v-else-if="row.clientType === 'H5' || row.clientType === 'wap'">移动端</span>
</span>
</template>
</el-table-column>
<el-table-column label="支付时间" width="200">
<template #default="{ row }">
<span v-if="row">{{ row.paymentTime || "暂无支付时间" }}</span>
</template>
</el-table-column>
<el-table-column label="订单金额" min-width="80" fixed="right">
<template #default="{ row }">
<priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
</template>
</el-table-column>
<el-table-column label="支付状态" width="95" fixed="right">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.payStatus == 'PAID'" type="success">已付款</el-tag>
<el-tag v-else type="danger">未付款</el-tag>
</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>
</el-card>
</div>
</template>
@@ -43,156 +118,42 @@ export default {
name: "paymentLog",
data() {
return {
loading: true, // 表单加载状态
loading: true,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
sn: "",
payStatus: "",
startDate: "", //订单创建时间
endDate: "", //订单结束时间
startDate: "",
endDate: "",
},
times: [], //订单创建时间
columns: [
{
title: "订单/交易编号",
key: "sn",
minWidth: 180,
tooltip: true,
},
{
title: "店铺名称",
key: "storeName",
minWidth: 100,
tooltip: true,
},
{
title: "支付方式",
key: "paymentMethod",
width: 120,
align: "center",
render: (h, params) => {
if (params.row.paymentMethod === "WECHAT") {
return h("div", [
h("Tag", { props: { color: "green" } }, "微信"),
]);
} else if (params.row.paymentMethod === "ALIPAY") {
return h("div", [
h("Tag", { props: { color: "blue" } }, "支付宝"),
]);
} else if (params.row.paymentMethod === "WALLET") {
return h("div", [
h("Tag", { props: { color: "geekblue" } }, "余额支付"),
]);
} else if (params.row.paymentMethod === "BANK_TRANSFER") {
return h("div", [
h("Tag", { props: { color: "orange" } }, "银行转帐"),
]);
} else {
return h("div", [h("Tag", {}, "暂未付款")]);
}
},
},
{
title: "第三方流水",
key: "receivableNo",
minWidth: 130,
render: (h, params) => {
return h("div", [
h("span", {}, params.row.receivableNo || "暂无流水号"),
]);
},
},
{
title: "客户端",
key: "clientType",
width: 130,
render: (h, params) => {
if (
params.row.clientType === "WECHAT_MP" ||
params.row.clientType === "小程序"
) {
return h("div", [h("span", {}, "小程序")]);
} else if (params.row.clientType === "APP") {
return h("div", [h("span", {}, "APP")]);
} else if (params.row.clientType === "PC") {
return h("div", [h("span", {}, "PC网页")]);
} else if (
params.row.clientType === "H5" ||
params.row.clientType === "wap"
) {
return h("div", [h("span", {}, "移动端")]);
}
},
},
{
title: "支付时间",
key: "paymentTime",
width: 200,
render: (h, params) => {
return h("div", [
h("span", {}, params.row.paymentTime || "暂无支付时间"),
]);
},
},
{
title: "订单金额",
fixed: "right",
key: "flowPrice",
minWidth: 80,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
},
},
{
title: "支付状态",
key: "payStatus",
width: 95,
fixed: "right",
render: (h, params) => {
if (params.row.payStatus == "PAID") {
return h("div", [h("Tag", {props:{color:'green'}}, "已付款")]);
} else {
return h("div", [h("Tag", {props:{color:'red'}}, "未付款")]);
}
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
times: [],
data: [],
total: 0,
};
},
methods: {
// 初始化数据
init() {
this.getDataList();
},
// 改变页码
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();
},
changeDate(val) {
// 改变日期格式
this.searchForm.startDate = val[0];
this.searchForm.endDate = val[1];
},
// 获取列表
getDataList() {
this.loading = true;
API_Order.paymentLog(this.searchForm).then((res) => {
@@ -202,8 +163,6 @@ export default {
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
},
mounted() {
@@ -211,4 +170,3 @@ export default {
},
};
</script>

278
manager/src/views/order/flow/refundLog.vue
View File

@@ -1,106 +1,110 @@
<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="退款状态">
<Select
v-model="searchForm.isRefund"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="false">未退款</Option>
<Option value="true">已退款</Option>
</Select>
</Form-item>
<Form-item label="退款时间">
<DatePicker
v-model="selectDate"
type="datetimerange"
format="yyyy-MM-dd"
clearable
@on-change="selectDateRange"
placeholder="选择起始时间"
style="width: 240px"
></DatePicker>
</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, index }" slot="actions">
<Tag color="green" v-if="row.isRefund">已退款</Tag>
<div v-if="!row.isRefund">
<Tag v-if="!row.errorMessage" color="red">未退款</Tag>
<Tooltip v-else placement="left">
<Tag color="red">未退款<Icon type="md-help" /></Tag>
<div
slot="content"
style="white-space: normal"
v-if="row.paymentName == 'WECHAT'"
>
{{
row.errorMessage ? JSON.parse(row.errorMessage).message : ""
}}
<el-form-item label="订单号" prop="orderSn">
<el-input
v-model="searchForm.orderSn"
placeholder="订单/交易号"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="退款状态">
<el-select
v-model="searchForm.isRefund"
placeholder="请选择"
clearable
style="width: 240px"
>
<el-option label="未退款" value="false" />
<el-option label="已退款" value="true" />
</el-select>
</el-form-item>
<el-form-item label="退款时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
@change="selectDateRange"
/>
</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
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<el-table-column prop="afterSaleNo" label="售后单号" min-width="150" show-overflow-tooltip />
<el-table-column prop="orderSn" label="订单号" min-width="150" show-overflow-tooltip />
<el-table-column prop="paymentReceivableNo" label="第三方付款流水" min-width="150" show-overflow-tooltip />
<el-table-column prop="receivableNo" label="第三方退款流水" min-width="130" show-overflow-tooltip />
<el-table-column label="退款金额" min-width="120">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.totalAmount, "￥") }}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="申请时间" min-width="120" show-overflow-tooltip />
<el-table-column label="退款状态" width="200" align="center">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.isRefund" type="success">已退款</el-tag>
<div v-else>
<el-tag v-if="!row.errorMessage" type="danger">未退款</el-tag>
<el-tooltip v-else placement="left">
<template #content>
<div
v-if="row.paymentName == 'WECHAT'"
style="white-space: normal"
>
{{ row.errorMessage ? JSON.parse(row.errorMessage).message : "" }}
</div>
<div
v-if="row.paymentName == 'ALIPAY'"
style="white-space: normal"
>
{{ row.errorMessage || "" }}
</div>
</template>
<el-tag type="danger">未退款</el-tag>
</el-tooltip>
</div>
<div
slot="content"
style="white-space: normal"
v-if="row.paymentName == 'ALIPAY'"
>
{{ row.errorMessage || "" }}
</div>
</Tooltip>
</div>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
</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"
: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>
@@ -111,102 +115,49 @@ export default {
name: "refundLog",
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: "",
isRefund: "",
},
// 退款起止时间
selectDate: null,
columns: [
{
title: "售后单号",
key: "afterSaleNo",
minWidth: 150,
tooltip: true,
},
{
title: "订单号",
key: "orderSn",
minWidth: 150,
tooltip: true,
},
{
title: "第三方付款流水",
key: "paymentReceivableNo",
minWidth: 150,
tooltip: true,
},
{
title: "第三方退款流水",
key: "receivableNo",
minWidth: 130,
tooltip: true,
},
{
title: "退款金额",
key: "totalAmount",
minWidth: 120,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.totalAmount,color:this.$mainColor}} );
},
},
{
title: "申请时间",
key: "createTime",
minWidth: 120,
tooltip: true,
},
{
title: "退款状态",
key: "isRefund",
align:"center",
width: 200,
slot: "actions",
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
data: [],
total: 0,
};
},
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();
},
// 起止时间从新赋值
selectDateRange(v) {
if (v) {
if (v && v[0] && v[1]) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
} else {
this.searchForm.startDate = "";
this.searchForm.endDate = "";
}
},
// 获取列表数据
getDataList() {
this.loading = true;
API_Order.refundLog(this.searchForm).then((res) => {
@@ -216,7 +167,6 @@ export default {
this.total = res.result.total;
}
});
this.loading = false;
},
},
mounted() {

370
manager/src/views/order/order/fictitiousOrderList.vue
View File

@@ -1,39 +1,128 @@
<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="buyerName">
<Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 240px" />
</Form-item>
<Form-item label="下单时间">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
@on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
</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="orderSn">
<el-input
v-model="searchForm.orderSn"
placeholder="请输入订单号"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="会员名称" prop="buyerName">
<el-input
v-model="searchForm.buyerName"
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"
clearable
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择起始时间"
style="width: 240px"
@change="selectDateRange"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
</Form>
</Row>
</Card>
<Card>
<el-card>
<div class="order-tab">
<Tabs v-model="currentStatus" @on-click="orderStatusClick">
<TabPane v-for="(item,index) in orderStatus" :key="index" :label="item.title" :name="item.value">
</TabPane>
</Tabs>
<el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
<el-tab-pane
v-for="(item, index) in orderStatus"
:key="index"
:label="item.title"
:name="item.value"
/>
</el-tabs>
</div>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
@on-sort-change="changeSort"></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>
</Card>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
@sort-change="changeSort"
>
<el-table-column prop="sn" label="订单号" min-width="230" show-overflow-tooltip />
<el-table-column prop="createTime" label="下单时间" width="200" />
<el-table-column label="订单来源" width="95">
<template #default="{ row }">
<span v-if="row">
<span v-if="row.clientType == 'H5'">移动端</span>
<span v-else-if="row.clientType == 'PC'">PC端</span>
<span v-else-if="row.clientType == 'WECHAT_MP'">小程序端</span>
<span v-else-if="row.clientType == 'APP'">移动应用端</span>
<span v-else>{{ row.clientType }}</span>
</span>
</template>
</el-table-column>
<el-table-column prop="memberName" label="买家名称" width="130" />
<el-table-column label="订单金额" prop="flowPrice" min-width="120" sortable="custom">
<template #default="{ row }">
<priceColorScheme v-if="row" :value="row.flowPrice" :color="$mainColor" />
</template>
</el-table-column>
<el-table-column label="订单状态" width="95">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.orderStatus == 'UNPAID'" type="danger">未付款</el-tag>
<el-tag v-else-if="row.orderStatus == 'PAID'" type="primary">已付款</el-tag>
<el-tag v-else-if="row.orderStatus == 'COMPLETED'" type="success">已完成</el-tag>
<el-tag v-else-if="row.orderStatus == 'TAKE'" type="warning">待核验</el-tag>
<el-tag v-else-if="row.orderStatus == 'CANCELLED'" type="info">已关闭</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="{ row }">
<template v-if="row">
<a
class="link-text"
:class="{ disabled: row.orderStatus != 'UNPAID' }"
@click="row.orderStatus == 'UNPAID' && confirmPrice(row)"
>收款</a>
<span class="op-split">|</span>
<a class="link-text" @click="detail(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>
</el-card>
</div>
</template>
@@ -42,192 +131,63 @@ import * as API_Order from "@/api/order";
export default {
name: "fictitiousOrderList",
data () {
data() {
return {
loading: true, // 表单加载状态
loading: true,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "", // 默认排序字段
order: "", // 默认排序方式
startDate: "", // 起始时间
endDate: "", // 终止时间
pageNumber: 1,
pageSize: 20,
sort: "",
order: "",
startDate: "",
endDate: "",
orderType: "VIRTUAL",
orderSn: "",
buyerName: "",
orderStatus: ""
orderStatus: "",
},
selectDate: null, // 下单时间
columns: [
{
title: "订单号",
key: "sn",
minWidth: 230,
tooltip: true
},
{
title: "下单时间",
key: "createTime",
width: 200,
},
{
title: "订单来源",
key: "clientType",
width: 95,
render: (h, params) => {
if (params.row.clientType == "H5") {
return h("div", {}, "移动端");
} else if (params.row.clientType == "PC") {
return h("div", {}, "PC端");
} else if (params.row.clientType == "WECHAT_MP") {
return h("div", {}, "小程序端");
} else if (params.row.clientType == "APP") {
return h("div", {}, "移动应用端");
} else {
return h("div", {}, params.row.clientType);
}
},
},
{
title: "买家名称",
key: "memberName",
width: 130,
},
{
title: "订单金额",
key: "flowPrice",
minWidth: 120,
sortable: true,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
},
},
{
title: "订单状态",
key: "orderStatus",
width: 95,
render: (h, params) => {
if (params.row.orderStatus == "UNPAID") {
return h("div", [h("tag", { props: { color: "magenta" } }, "未付款")]);
} else if (params.row.orderStatus == "PAID") {
return h("div", [h("tag", { props: { color: "blue" } }, "已付款")]);
} else if (params.row.orderStatus == "COMPLETED") {
return h("div", [h("tag", { props: { color: "green" } }, "已完成")]);
} else if (params.row.orderStatus == "TAKE") {
return h("div", [h("tag", { props: { color: "volcano" } }, "待核验")]);
} else if (params.row.orderStatus == "CANCELLED") {
return h("div", [h("tag", { props: { color: "red" } }, "已关闭")]);
}
}
},
{
title: "操作",
key: "action",
align: "center",
width: 200,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
attrs: {
disabled: params.row.orderStatus == "UNPAID" ? false : true,
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.confirmPrice(params.row);
},
},
},
"收款"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
"查看"
),
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectDate: null,
data: [],
total: 0,
orderStatus: [
{title: '全部', value: ''},
{title: '未付款', value: 'UNPAID'},
{title: '已付款', value: 'PAID'},
{title: '待核验', value: 'TAKE'},
{title: '已完成', value: 'COMPLETED'},
{title: '已关闭', value: 'CANCELLED'},
{ title: "全部", value: "" },
{ title: "未付款", value: "UNPAID" },
{ title: "已付款", value: "PAID" },
{ title: "待核验", value: "TAKE" },
{ title: "已完成", value: "COMPLETED" },
{ title: "已关闭", value: "CANCELLED" },
],
currentStatus: ''
currentStatus: "",
};
},
methods: {
// 初始化数据
init () {
init() {
this.getDataList();
},
// 分页 改变页码
changePage (v) {
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
},
// 分页 改变页数
changePageSize (v) {
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch () {
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 列表排序
changeSort (e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
changeSort(e) {
this.searchForm.sort = e.prop;
this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
this.getDataList();
},
// 起止时间从新赋值
selectDateRange (v) {
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
// 获取列表数据
getDataList () {
getDataList() {
this.loading = true;
API_Order.getOrderList(this.searchForm).then((res) => {
this.loading = false;
@@ -236,55 +196,45 @@ export default {
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
//确认收款
confirmPrice (v) {
confirmPrice(v) {
this.$Modal.confirm({
title: "确认收款",
content: "您确定要收款吗？",
loading: true,
onOk: () => {
API_Order.orderPay(v.sn).then(res => {
API_Order.orderPay(v.sn).then((res) => {
if (res.success) {
this.$Message.success("收款成功")
this.getDataList()
this.$Message.success("收款成功");
this.getDataList();
}
this.$Modal.remove();
})
});
},
});
},
// 订单详情
detail (v) {
detail(v) {
let sn = v.sn;
this.$options.filters.customRouterPush({
this.$filters.customRouterPush({
name: "order-detail",
query: { sn: sn, orderType: v.orderType },
})
});
},
// 订单筛选
orderStatusClick(item) {
this.currentStatus = item; // 使用参数 item
this.searchForm.orderStatus = item; // 使用参数 item
onStatusTabClick(tab) {
const item = tab.paneName;
this.currentStatus = item;
this.searchForm.orderStatus = item;
this.getDataList();
},
},
mounted () {
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
// Tab组件样式
.order-tab {
margin-top: 20px;
::v-deep .ivu-tabs-tab {
font-size: 14px;
}
}
</style>

482
manager/src/views/order/order/orderDetail.vue
View File

@@ -1,18 +1,17 @@
<template>
<div class="search">
<div>
<Card style="height: 60px">
<el-card style="height: 60px">
<div style="">
<Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
<Button @click="orderLog" type="info" ghost>订单日志</Button>
<Button @click="printOrder" type="primary" ghost style="float:right;"
v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button>
<el-button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</el-button>
<el-button v-if="allowOperation.editConsignee" plain type="primary" @click="editAddress">修改收货地址</el-button>
<el-button v-if="allowOperation.cancel" plain type="warning" @click="orderCancel">订单取消</el-button>
<el-button v-if="orderInfo.order.orderStatus === 'UNPAID'" type="primary" @click="confirmPrice">收款</el-button>
<el-button plain @click="orderLog">订单日志</el-button>
<el-button v-if="$route.query.orderType != 'VIRTUAL'" plain type="primary" style="float:right;" @click="printOrder">打印发货单</el-button>
</div>
</Card>
<Card class="mt_10 clearfix">
</el-card>
<el-card class="mt_10 clearfix">
<div style="width: 30%; float: left; margin-left: 20px">
<div class="div-item">
<div class="div-item-left">订单号：</div>
@@ -21,7 +20,7 @@
<div class="div-item">
<div class="div-item-left">订单来源：</div>
<div class="div-item-right">
{{ orderInfo.order.clientType | clientTypeWay }}
{{ $filters.clientTypeWay(orderInfo.order.clientType) }}
</div>
</div>
@@ -149,9 +148,12 @@
<div class="div-item-left">发票金额：</div>
<div class="div-item-right">
{{
orderInfo.receipt && orderInfo.receipt.receiptPrice
? orderInfo.receipt.receiptPrice
: "暂无" | unitPrice("￥")
$filters.unitPrice(
orderInfo.receipt && orderInfo.receipt.receiptPrice
? orderInfo.receipt.receiptPrice
: "暂无",
"￥"
)
}}
</div>
</div>
@@ -170,42 +172,57 @@
</div>
</div>
</div>
</Card>
<Card class="mt_10">
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
<!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="{ row }">
<div style="margin-top: 5px; height: 80px; display: flex">
<div style="">
<img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
</div>
<div style="margin-left: 13px">
<div class="div-zoom">
<a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
</el-card>
<el-card class="mt_10">
<el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
<el-table-column label="商品" min-width="200">
<template #default="{ row }">
<div v-if="row" style="margin-top: 5px; height: 80px; display: flex">
<div>
<img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
</div>
<span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
<span v-show="key != 'images'" style="font-size: 12px; color: #999999">
{{ key }} : {{ item }}
</span>
</span>
<Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
<div slot="content">
<vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
:size="150"></vue-qr>
<div style="margin-left: 13px">
<div class="div-zoom">
<a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
</div>
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
</Poptip>
<span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
<span v-show="key != 'images'" style="font-size: 12px; color: #999999">
{{ key }} : {{ item }}</span>
</span>
<el-popover trigger="hover" title="扫码在手机中查看" width="180">
<template #reference>
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" style="display: block" />
</template>
<vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150" />
</el-popover>
</div>
</div>
</div>
</template>
</Table>
</template>
</el-table-column>
<el-table-column label="优惠" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ getPromotionText(row) }}</span>
</template>
</el-table-column>
<el-table-column label="单价" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ $filters.unitPrice(row.unitPrice || 0, "￥") }}</span>
</template>
</el-table-column>
<el-table-column prop="num" label="数量" min-width="80" />
<el-table-column prop="returnGoodsNumber" label="退款数量" min-width="80" />
<el-table-column label="小计" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ $filters.unitPrice(row.flowPrice, "￥") }}</span>
</template>
</el-table-column>
</el-table>
<div class="goods-total">
<ul>
<li>
<span class="label">商品总额：</span>
<span class="txt">{{
orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("￥")
$filters.unitPrice(orderInfo.order.priceDetailDTO.goodsPrice, "￥")
}}</span>
</li>
<li v-if="
@@ -214,8 +231,7 @@
">
<span class="label">优惠金额：</span>
<span class="txt">
{{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("￥") }}
</span>
{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.discountPrice, "￥") }}</span>
</li>
<li v-if="
@@ -225,33 +241,31 @@
<span class="label">优惠券金额：</span>
<span class="txt">
<priceColorScheme :value="orderInfo.order.priceDetailDTO.couponPrice" :color="$mainColor"></priceColorScheme>
</span>
</li>
<li
v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
<div class="label">
<Poptip trigger="hover" placement="left" width="200">
<Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
color="#cc0000" />
<template #content>
<div class="api" style="text-align:left;">
<table>
<thead>
<tr>
<th>优惠详情：</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in typeList" :key="index">
<td>{{ item.promotionName }}：</td>
<td>¥{{ item.discountPrice | unitPrice }}</td>
</tr>
</tbody>
</table>
</div>
<el-popover v-if="typeList.length > 0" trigger="hover" placement="left" width="220">
<template #reference>
<span class="hover-pointer" style="color: #cc0000" @click="getOrderPrice">ⓘ</span>
</template>
</Poptip>
<div class="api" style="text-align:left;">
<table>
<thead>
<tr>
<th>优惠详情：</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in typeList" :key="index">
<td>{{ item.promotionName }}：</td>
<td>¥{{ $filters.unitPrice(item.discountPrice) }}</td>
</tr>
</tbody>
</table>
</div>
</el-popover>
<span>优惠详情：</span>
</div>
</li>
@@ -259,22 +273,22 @@
<span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情：</span>
</li> -->
<!-- <li v-if="showPrices" v-for="(item,index) in typeList" :key="index">
<span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
<span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
<span class="label" v-if="index == 0 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
<span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
<span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
<span class="txt" v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ item.discountPrice | unitPrice }}</span>
<span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
<span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 && typeList.length > 1">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
<span class="label" v-if="index == 0 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
<span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
<span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a><span class="op-split">|</span>
<span class="txt" v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ $filters.unitPrice(item.discountPrice) }}</span>
</li> -->
<li>
<span class="label">运费：</span>
<span class="txt">{{
orderInfo.order.freightPrice | unitPrice("￥")
$filters.unitPrice(orderInfo.order.freightPrice, "￥")
}}</span>
</li>
<li v-if="orderInfo.order.priceDetailDTO.updatePrice">
<span class="label">修改金额：</span>
<span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
<span class="txt theme_color">¥{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.updatePrice) }}</span>
</li>
<li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
<span class="label">使用积分：</span>
@@ -284,126 +298,108 @@
</li>
<li>
<span class="label">应付金额：</span>
<span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span>
<span class="txt flowPrice">¥{{ $filters.unitPrice(orderInfo.order.priceDetailDTO.flowPrice) }}</span>
</li>
</ul>
</div>
</Card>
</el-card>
</div>
<Modal v-model="modal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
<span>修改金额</span>
</p>
<div>
<Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70"
:rules="modifyPriceValidate" @submit.native.prevent>
<FormItem label="订单金额" prop="price">
<InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber>
<span class="ml_10">元</span>
</FormItem>
</Form>
</div>
<div slot="footer" style="text-align: right">
<Button @click="modal = false">关闭</Button>
<Button type="primary" @click="modifyPriceSubmit">调整</Button>
</div>
</Modal>
<!-- 订单取消模态框 -->
<Modal v-model="orderCancelModal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
<span>订单取消</span>
</p>
<div>
<Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100"
:rules="orderCancelValidate">
<FormItem label="取消原因" prop="reason">
<Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
placeholder="请输入取消原因"></Input>
</FormItem>
</Form>
</div>
<div slot="footer" style="text-align: right">
<Button @click="orderCancelModal = false">关闭</Button>
<Button type="primary" @click="orderCancelSubmit">确认</Button>
</div>
</Modal>
<!--收件地址弹出框-->
<Modal v-model="addressModal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
<span>修改收件信息</span>
</p>
<div>
<Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
<FormItem label="收件人" prop="consigneeName">
<Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
</FormItem>
<FormItem label="联系方式" prop="consigneeMobile">
<Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
</FormItem>
<FormItem label="地址信息" prop="consigneeAddressPath">
{{ addr }}
<Button type="default" @click="$refs.map.open()">选择</Button>
</FormItem>
<FormItem label="详细地址" prop="consigneeDetail">
<Input v-model="addressForm.consigneeDetail" size="large" ></Input>
</FormItem>
</Form>
</div>
<div slot="footer" style="text-align: right">
<Button @click="addressModal = false">关闭</Button>
<Button type="primary" @click="editAddressSubmit">修改</Button>
</div>
</Modal>
<!-- 订单日志 -->
<Modal v-model="orderLogModal" width="60">
<p slot="header">
<span>订单日志</span>
</p>
<div class="order-log-div">
<Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table"
sortable="custom"></Table>
</div>
<el-dialog v-model="modal" title="修改金额" width="530px">
<el-form ref="modifyPriceForm" :model="modifyPriceForm" label-width="70px" :rules="modifyPriceValidate" @submit.prevent>
<el-form-item label="订单金额" prop="price">
<el-input-number v-model="modifyPriceForm.price" :min="0" :max="999999" style="width: 120px" />
<span class="ml_10">元</span>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="modal = false">关闭</el-button>
<el-button type="primary" @click="modifyPriceSubmit">调整</el-button>
</template>
</el-dialog>
<div slot="footer" style="text-align: right">
<Button @click="handelCancel">取消</Button>
<el-dialog v-model="orderCancelModal" title="订单取消" width="530px">
<el-form ref="orderCancelForm" :model="orderCancelForm" label-width="100px" :rules="orderCancelValidate">
<el-form-item label="取消原因" prop="reason">
<el-input v-model="orderCancelForm.reason" type="textarea" :rows="3" placeholder="请输入取消原因" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="orderCancelModal = false">关闭</el-button>
<el-button type="primary" @click="orderCancelSubmit">确认</el-button>
</template>
</el-dialog>
<el-dialog v-model="addressModal" title="修改收件信息" width="530px">
<el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressRule">
<el-form-item label="收件人" prop="consigneeName">
<el-input v-model="addressForm.consigneeName" maxlength="20" />
</el-form-item>
<el-form-item label="联系方式" prop="consigneeMobile">
<el-input v-model="addressForm.consigneeMobile" maxlength="11" />
</el-form-item>
<el-form-item label="地址信息" prop="consigneeAddressPath">
{{ addr }}
<el-button @click="$refs.map.open()">选择</el-button>
</el-form-item>
<el-form-item label="详细地址" prop="consigneeDetail">
<el-input v-model="addressForm.consigneeDetail" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="addressModal = false">关闭</el-button>
<el-button type="primary" @click="editAddressSubmit">修改</el-button>
</template>
</el-dialog>
<el-dialog v-model="orderLogModal" title="订单日志" width="60%">
<div class="order-log-div">
<el-table v-loading="loading" border :data="orderInfo.orderLogs || []" style="width: 100%">
<el-table-column prop="operatorName" label="操作者" min-width="120" />
<el-table-column prop="operatorType" label="操作类型" min-width="100" />
<el-table-column prop="createTime" label="时间" width="180" />
<el-table-column prop="message" label="日志" min-width="200" show-overflow-tooltip />
</el-table>
</div>
</Modal>
<Modal v-model="printModal" width="530" @on-cancel="printCancel">
<p slot="header" style="line-height:26px;height:26px;">
<span style="float: left;">打印发货单</span>
<Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;"
@click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template
v-else>隐藏</template>敏感信息</Button>
</p>
<template #footer>
<el-button @click="handelCancel">取消</el-button>
</template>
</el-dialog>
<el-dialog v-model="printModal" width="530px" @close="printCancel">
<template #header>
<div style="line-height:26px;height:26px;">
<span style="float: left;">打印发货单</span>
<el-button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" @click="printHiddenInfo">
{{ printHiddenFlag ? "显示" : "隐藏" }}敏感信息
</el-button>
</div>
</template>
<div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
<div id="printInfo">
<Row v-if="orderInfo.order.remark !== ''">
<Col span="24">
<el-row v-if="orderInfo.order.remark !== ''">
<el-col :span="24">
<p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
</Col>
</Row>
<Row>
<Col span="12">
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
</Col>
<Col span="12" v-if="orderInfo.order.consigneeMobile">
<p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{
</el-col>
<el-col v-if="orderInfo.order.consigneeMobile" :span="12">
<p v-if="printHiddenFlag" class="lineH30 f14">手机号：{{
orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
<p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile }}</p>
</Col>
</Row>
<Row>
<Col span="24">
<p v-else class="lineH30 f14">手机号：{{ orderInfo.order.consigneeMobile }}</p>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
</p>
</Col>
</Row>
<Row>
<Col span="24">
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<p class="printgoodtitle">商品信息</p>
<div class="printgoodinfo">
<div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem">
@@ -412,24 +408,23 @@
<div class="printgoodguid">
<span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
<span class="printgoodguiditem" v-if="keychild != 'images'">
{{ keychild }} : {{ itemchild }}
</span>
{{ keychild }} : {{ itemchild }}</span>
</span>
</div>
</div>
<span class="printgoodnumber">数量：{{ item.num }}</span>
</div>
</div>
</Col>
</Row>
</el-col>
</el-row>
</div>
</div>
<div slot="footer" style="text-align: right">
<Button @click="printModal = false">关闭</Button>
<Button type="primary" v-print="printInfoObj">打印发货单</Button>
</div>
</Modal>
<template #footer>
<el-button @click="printModal = false">关闭</el-button>
<el-button type="primary" v-print="printInfoObj">打印发货单</el-button>
</template>
</el-dialog>
<multipleMap ref="map" @callback="selectedRegion" />
@@ -542,98 +537,7 @@ export default {
],
},
columns: [
{
title: "商品",
key: "goodsName",
minWidth: 200,
slot: "goodsSlot",
},
{
title: "优惠",
key: "num",
minWidth: 100,
render: (h, params) => {
let resultText = "";
if (params.row.promotionType) {
let type = params.row.promotionType.split(",");
if (type.indexOf("PINTUAN") != -1) {
resultText += "拼团 ";
}
if (type.indexOf("SECKILL") != -1) {
resultText += "秒杀 ";
}
if (type.indexOf("COUPON") != -1) {
resultText += "优惠券 ";
}
if (type.indexOf("FULL_DISCOUNT") != -1) {
resultText += "满减 ";
}
if (type.indexOf("POINTS_GOODS") != -1) {
resultText += "积分商品 ";
}
}
if (resultText === "") {
resultText = "暂无未参与任何促销";
}
return h("div", resultText);
},
},
{
title: "单价",
key: "goodsPrice",
minWidth: 100,
render: (h, params) => {
if (!params.row.goodsPrice) {
return h("div", this.$options.filters.unitPrice(0, "￥"));
}
return h("div", this.$options.filters.unitPrice(params.row.unitPrice, "￥"));
},
},
{
title: "数量",
key: "num",
minWidth: 80,
},
{
title: "退款数量",
key: "returnGoodsNumber",
minWidth: 80,
},
{
title: "小计",
key: "subTotal",
minWidth: 100,
render: (h, params) => {
return h("div", this.$options.filters.unitPrice(params.row.flowPrice, "￥"));
},
},
],
data: [], // 表单数据
orderLogColumns: [
{
title: "操作者",
key: "operatorName",
minWidth: 120,
},
{
title: "操作类型",
key: "operatorType",
minWidth: 100,
},
{
title: "时间",
key: "createTime",
width: 180,
},
{
title: "日志",
key: "message",
tooltip: true,
minWidth: 200,
},
],
};
},
watch: {
@@ -642,6 +546,18 @@ export default {
},
},
methods: {
getPromotionText(row) {
let resultText = "";
if (row && row.promotionType) {
const type = row.promotionType.split(",");
if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
}
return resultText === "" ? "暂无未参与任何促销" : resultText;
},
gotoHomes () {
return false
},
@@ -725,12 +641,12 @@ export default {
if(val.type === 'select'){
const paths = val.data.map(item => item.name).join(',')
const ids = val.data.map(item => item.id).join(',')
this.$set(this,'addr',paths)
this.$set(this,'regionId',ids)
this.addr = paths;
this.regionId = ids;
}
else{
this.$set(this,'addr',val.data.addr)
this.$set(this,'regionId',val.data.addrId)
this.addr = val.data.addr;
this.regionId = val.data.addrId;
}
},

737
manager/src/views/order/order/orderList.vue
View File

@@ -1,153 +1,143 @@
<template>
<div>
<Card>
<Form
<div class="search">
<el-card>
<el-form
ref="searchForm"
@keydown.enter.native="handleSearch"
:model="searchForm"
inline
:label-width="70"
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<Form-item label="关键字" prop="keywords" style="display: block; width: 100%;">
<Input
type="text"
<el-form-item label="关键字" prop="keywords" style="display: block; width: 100%">
<el-input
v-model="searchForm.keywords"
placeholder="请输入商品名称/收货人/收货人手机号/店铺名称"
clearable
style="width: 500px"
/>
</Form-item>
<Form-item label="订单号" prop="orderSn">
<Input
type="text"
v-model="searchForm.orderSn"
placeholder="请输入订单号"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="会员名称" prop="buyerName">
<Input
type="text"
v-model="searchForm.buyerName"
placeholder="请输入会员名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="商品名称" prop="goodsName">
<Input
type="text"
v-model="searchForm.goodsName"
placeholder="请输入商品名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="收货人" prop="shipName">
<Input
type="text"
v-model="searchForm.shipName"
placeholder="请输入收货人姓名"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="订单类型" prop="orderType">
<Select
v-model="searchForm.orderPromotionType"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NORMAL">普通订单</Option>
<Option value="PINTUAN">拼团订单</Option>
<Option value="GIFT">赠品订单</Option>
<Option value="POINTS">积分订单</Option>
<Option value="KANJIA">砍价订单</Option>
</Select>
</Form-item>
<Form-item label="支付方式" prop="paymentMethod">
<Select
v-model="searchForm.paymentMethod"
placeholder="请选择支付方式"
clearable
style="width: 240px"
>
<Option value="WECHAT">微信支付</Option>
<Option value="ALIPAY">支付宝</Option>
<Option value="WALLET">余额支付</Option>
<Option value="BANK_TRANSFER">线下转账</Option>
</Select>
</Form-item>
<Form-item label="下单时间">
<DatePicker
</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="buyerName">
<el-input v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="收货人" prop="shipName">
<el-input v-model="searchForm.shipName" placeholder="请输入收货人姓名" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="订单类型" prop="orderType">
<el-select v-model="searchForm.orderPromotionType" placeholder="请选择" clearable style="width: 240px">
<el-option label="普通订单" value="NORMAL" />
<el-option label="拼团订单" value="PINTUAN" />
<el-option label="赠品订单" value="GIFT" />
<el-option label="积分订单" value="POINTS" />
<el-option label="砍价订单" value="KANJIA" />
</el-select>
</el-form-item>
<el-form-item label="支付方式" prop="paymentMethod">
<el-select v-model="searchForm.paymentMethod" placeholder="请选择支付方式" clearable style="width: 240px">
<el-option label="微信支付" value="WECHAT" />
<el-option label="支付宝" value="ALIPAY" />
<el-option label="余额支付" value="WALLET" />
<el-option label="线下转账" value="BANK_TRANSFER" />
</el-select>
</el-form-item>
<el-form-item label="下单时间">
<el-date-picker
v-model="selectDate"
type="datetimerange"
format="yyyy-MM-dd"
value-format="YYYY-MM-DD HH:mm:ss"
clearable
@on-change="selectDateRange"
placeholder="选择起始时间"
style="width: 240px"
></DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Card>
<Card>
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 360px"
@change="selectDateRange"
/>
</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="orderStatusClick">
<TabPane v-for="(item,index) in orderStatusWithCount" :key="index" :label="item.title" :name="item.value">
</TabPane>
</Tabs>
<el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
<el-tab-pane
v-for="(item, index) in orderStatusWithCount"
:key="index"
:label="item.title"
:name="item.value"
/>
</el-tabs>
</div>
<div>
<Button @click="exportOrder" type="info" class="export">导出订单</Button>
<el-button type="info" class="export" @click="exportOrder">导出订单</el-button>
</div>
<Table
:loading="loading"
:columns="columns"
:data="data"
ref="table"
sortable="custom"
></Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table v-loading="loading" :data="data" ref="table" class="mt_10" style="width: 100%">
<el-table-column prop="sn" label="订单号" min-width="240" show-overflow-tooltip />
<el-table-column label="订单来源" width="120">
<template #default="{ row }">{{ clientTypeText(row.clientType) }}</template>
</el-table-column>
<el-table-column label="订单类型" width="120">
<template #default="{ row }">
<el-tag :type="orderPromotionTagType(row.orderPromotionType)">
{{ orderPromotionText(row.orderPromotionType) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="memberName" label="买家名称" min-width="130" show-overflow-tooltip />
<el-table-column prop="memberId" label="会员ID" min-width="120" show-overflow-tooltip />
<el-table-column prop="storeName" label="店铺名称" min-width="150" show-overflow-tooltip />
<el-table-column label="订单金额" min-width="100">
<template #default="{ row }">
<span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.flowPrice, '￥') }}</span>
</template>
</el-table-column>
<el-table-column label="支付方式" width="120">
<template #default="{ row }">{{ paymentMethodText(row.paymentMethod) }}</template>
</el-table-column>
<el-table-column label="订单状态" min-width="100">
<template #default="{ row }">
<el-tag :type="orderStatusTagType(row.orderStatus)">{{ orderStatusText(row.orderStatus) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="下单时间" width="170" />
<el-table-column label="操作" width="100" align="center" fixed="right">
<template #default="{ row }">
<a class="link-text" @click="detail(row)">查看</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 JsonExcel from "vue-json-excel";
export default {
name: "orderList",
components: {
"download-excel": JsonExcel,
},
data() {
return {
// 表格的表头以及内容
fields: {
订单编号: "sn",
下单时间: "createTime",
@@ -155,377 +145,251 @@ export default {
支付方式: {
field: "clientType",
callback: (value) => {
if (value == "H5") {
return "移动端";
} else if (value == "PC") {
return "PC端";
} else if (value == "WECHAT_MP") {
return "小程序端";
} else if (value == "APP") {
return "移动应用端";
} else {
return value;
}
if (value == "H5") return "移动端";
if (value == "PC") return "PC端";
if (value == "WECHAT_MP") return "小程序端";
if (value == "APP") return "移动应用端";
return value;
},
},
商品数量: "groupNum",
付款状态: {
field: "payStatus",
callback: (value) => {
return value == "UNPAID"
? "未付款"
: value == "PAID"
? "已付款"
: "";
},
callback: (value) =>
value == "UNPAID" ? "未付款" : value == "PAID" ? "已付款" : "",
},
店铺: "storeName",
},
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: "",
orderType: "",
orderSn: "",
keywords: "", // 新增关键字搜索字段
keywords: "",
buyerName: "",
goodsName: "", // 新增商品名称筛选字段
shipName: "", // 新增收货人筛选字段
goodsName: "",
shipName: "",
orderStatus: "",
paymentMethod: "", // 新增支付方式筛选字段
paymentMethod: "",
orderPromotionType: "",
},
selectDate: null,
columns: [
{
title: "订单号",
key: "sn",
minWidth: 240,
tooltip: true,
},
{
title: "订单来源",
key: "clientType",
width: 120,
render: (h, params) => {
if (params.row.clientType == "H5") {
return h("div", {}, "移动端");
} else if (params.row.clientType == "PC") {
return h("div", {}, "PC端");
} else if (params.row.clientType == "WECHAT_MP") {
return h("div", {}, "小程序端");
} else if (params.row.clientType == "APP") {
return h("div", {}, "移动应用端");
} else {
return h("div", {}, params.row.clientType);
}
},
},
{
title: "订单类型",
key: "orderPromotionType",
width: 120,
render: (h, params) => {
if (params.row.orderPromotionType == "NORMAL") {
return h("div", [
h("tag", { props: { color: "blue" } }, "普通订单"),
]);
} else if (params.row.orderPromotionType == "PINTUAN") {
return h("div", [
h("tag", { props: { color: "volcano" } }, "拼团订单"),
]);
} else if (params.row.orderPromotionType == "GIFT") {
return h("div", [
h("tag", { props: { color: "green" } }, "赠品订单"),
]);
} else if (params.row.orderPromotionType == "POINTS") {
return h("div", [
h("tag", { props: { color: "geekblue" } }, "积分订单"),
]);
} else if (params.row.orderPromotionType == "KANJIA") {
return h("div", [
h("tag", { props: { color: "pink" } }, "砍价订单"),
]);
}
},
},
{
title: "买家名称",
key: "memberName",
minWidth: 130,
tooltip: true,
},
{
title: "会员ID",
key: "memberId",
minWidth: 120,
tooltip: true,
},
{
title: "店铺名称",
key: "storeName",
minWidth: 150,
tooltip: true,
},
{
title: "订单金额",
key: "flowPrice",
minWidth: 100,
tooltip: true,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
},
},
{
title: "支付方式",
key: "paymentMethod",
width: 120,
render: (h, params) => {
if (params.row.paymentMethod == "NOT_ACTUALLY_PAID") {
return h("div", {}, "-");
} else if (params.row.paymentMethod == "WECHAT") {
return h("div", {}, "微信支付");
} else if (params.row.paymentMethod == "ALIPAY") {
return h("div", {}, "支付宝");
} else if (params.row.paymentMethod == "WALLET") {
return h("div", {}, "余额支付");
} else if (params.row.paymentMethod == "BANK_TRANSFER") {
return h("div", {}, "线下转账");
} else {
return h("div", {}, params.row.paymentMethod || "-");
}
},
},
{
title: "订单状态",
key: "orderStatus",
minWidth: 100,
render: (h, params) => {
if (params.row.orderStatus == "UNPAID") {
return h("div", [
h("tag", { props: { color: "magenta" } }, "未付款"),
]);
} else if (params.row.orderStatus == "PAID") {
return h("div", [
h("tag", { props: { color: "blue" } }, "已付款"),
]);
} else if (params.row.orderStatus == "UNDELIVERED") {
return h("div", [
h("tag", { props: { color: "geekblue" } }, "待发货"),
]);
} else if (params.row.orderStatus == "STAY_PICKED_UP") {
return h("div", [
h("tag", { props: { color: "geekblue" } }, "待自提"),
]);
} else if (params.row.orderStatus == "PARTS_DELIVERED") {
return h("div", [
h("tag", { props: { color: "cyan" } }, "部分发货"),
]);
} else if (params.row.orderStatus == "DELIVERED") {
return h("div", [
h("tag", { props: { color: "cyan" } }, "已发货"),
]);
} else if (params.row.orderStatus == "COMPLETED") {
return h("div", [
h("tag", { props: { color: "green" } }, "已完成"),
]);
} else if (params.row.orderStatus == "TAKE") {
return h("div", [
h("tag", { props: { color: "volcano" } }, "待核验"),
]);
} else if (params.row.orderStatus == "CANCELLED") {
return h("div", [
h("tag", { props: { color: "red" } }, "已关闭"),
]);
}
},
},
{
title: "下单时间",
key: "createTime",
width: 170,
},
{
title: "操作",
key: "action",
align: "center",
width: 100,
render: (h, params) => {
return h(
"div",
{ class: "ops" },
[
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
"查看"
),
]
);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
orderNumData: {}, // 新增：订单数量统计数据
orderStatus: [
{title: '全部', value: ''},
{title: '未付款', value: 'UNPAID'},
{title: '已付款', value: 'PAID'},
{title: '待发货', value: 'UNDELIVERED'},
{title: '部分发货', value: 'PARTS_DELIVERED'},
{title: '已发货', value: 'DELIVERED'},
{title: '待核验', value: 'TAKE'},
{title: '待自提', value: 'STAY_PICKED_UP'},
{title: '已完成', value: 'COMPLETED'},
{title: '已关闭', value: 'CANCELLED'},
],
currentStatus: ''
data: [],
total: 0,
orderNumData: {},
currentStatus: "ALL",
};
},
computed: {
// 新增：带数量的订单状态选项
orderStatusWithCount() {
return [
{title: '全部', value: ''},
{title: `未付款${this.orderNumData.waitPayNum ? '(' + this.orderNumData.waitPayNum + ')' : ''}`, value: 'UNPAID'},
{title: `已付款${this.orderNumData.waitDeliveryNum ? '(' + this.orderNumData.waitDeliveryNum + ')' : ''}`, value: 'PAID'},
{title: `待发货${this.orderNumData.waitShipNum ? '(' + this.orderNumData.waitShipNum + ')' : ''}`, value: 'UNDELIVERED'},
{title: `部分发货${this.orderNumData.partsDeliveredNumNum ? '(' + this.orderNumData.partsDeliveredNumNum + ')' : ''}`, value: 'PARTS_DELIVERED'},
{title: `待收货${this.orderNumData.deliveredNum ? '(' + this.orderNumData.deliveredNum + ')' : ''}`, value: 'DELIVERED'},
{title: `待核验${this.orderNumData.waitCheckNum ? '(' + this.orderNumData.waitCheckNum + ')' : ''}`, value: 'TAKE'},
{title: `待自提${this.orderNumData.waitSelfPickNum ? '(' + this.orderNumData.waitSelfPickNum + ')' : ''}`, value: 'STAY_PICKED_UP'},
{title: `已完成${this.orderNumData.finishNum ? '(' + this.orderNumData.finishNum + ')' : ''}`, value: 'COMPLETED'},
{title: `已关闭${this.orderNumData.closeNum ? '(' + this.orderNumData.closeNum + ')' : ''}`, value: 'CANCELLED'},
{ title: "全部", value: "ALL" },
{
title: `未付款${this.orderNumData.waitPayNum ? "(" + this.orderNumData.waitPayNum + ")" : ""}`,
value: "UNPAID",
},
{
title: `已付款${this.orderNumData.waitDeliveryNum ? "(" + this.orderNumData.waitDeliveryNum + ")" : ""}`,
value: "PAID",
},
{
title: `待发货${this.orderNumData.waitShipNum ? "(" + this.orderNumData.waitShipNum + ")" : ""}`,
value: "UNDELIVERED",
},
{
title: `部分发货${this.orderNumData.partsDeliveredNumNum ? "(" + this.orderNumData.partsDeliveredNumNum + ")" : ""}`,
value: "PARTS_DELIVERED",
},
{
title: `待收货${this.orderNumData.deliveredNum ? "(" + this.orderNumData.deliveredNum + ")" : ""}`,
value: "DELIVERED",
},
{
title: `待核验${this.orderNumData.waitCheckNum ? "(" + this.orderNumData.waitCheckNum + ")" : ""}`,
value: "TAKE",
},
{
title: `待自提${this.orderNumData.waitSelfPickNum ? "(" + this.orderNumData.waitSelfPickNum + ")" : ""}`,
value: "STAY_PICKED_UP",
},
{
title: `已完成${this.orderNumData.finishNum ? "(" + this.orderNumData.finishNum + ")" : ""}`,
value: "COMPLETED",
},
{
title: `已关闭${this.orderNumData.closeNum ? "(" + this.orderNumData.closeNum + ")" : ""}`,
value: "CANCELLED",
},
];
}
},
},
methods: {
// 初始化数据
onStatusTabClick(tab) {
this.orderStatusClick(tab.paneName);
},
clientTypeText(v) {
const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
return map[v] || v || "-";
},
orderPromotionText(v) {
const map = {
NORMAL: "普通订单",
PINTUAN: "拼团订单",
GIFT: "赠品订单",
POINTS: "积分订单",
KANJIA: "砍价订单",
};
return map[v] || v || "-";
},
orderPromotionTagType(v) {
const map = {
NORMAL: "primary",
PINTUAN: "danger",
GIFT: "success",
POINTS: "info",
KANJIA: "warning",
};
return map[v] || "info";
},
paymentMethodText(v) {
const map = {
NOT_ACTUALLY_PAID: "-",
WECHAT: "微信支付",
ALIPAY: "支付宝",
WALLET: "余额支付",
BANK_TRANSFER: "线下转账",
};
return map[v] || v || "-";
},
orderStatusText(v) {
const map = {
UNPAID: "未付款",
PAID: "已付款",
UNDELIVERED: "待发货",
STAY_PICKED_UP: "待自提",
PARTS_DELIVERED: "部分发货",
DELIVERED: "已发货",
COMPLETED: "已完成",
TAKE: "待核验",
CANCELLED: "已关闭",
};
return map[v] || v || "-";
},
orderStatusTagType(v) {
const map = {
UNPAID: "danger",
PAID: "primary",
UNDELIVERED: "info",
STAY_PICKED_UP: "info",
PARTS_DELIVERED: "warning",
DELIVERED: "warning",
COMPLETED: "success",
TAKE: "warning",
CANCELLED: "danger",
};
return map[v] || "info";
},
init() {
this.getDataList();
this.getOrderNumData(); // 新增：获取订单数量统计
this.getOrderNumData();
},
// 分页 改变页码
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();
this.getOrderNumData(); // 新增：搜索时也更新数量统计
this.getOrderNumData();
},
// 起止时间从新赋值
selectDateRange(v) {
if (v) {
if (v && v.length === 2) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
} else {
this.searchForm.startDate = "";
this.searchForm.endDate = "";
}
},
// 获取列表数据
getDataList() {
this.loading = true;
API_Order.getOrderList(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;
API_Order.getOrderList(this.searchForm)
.then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.catch(() => {
this.loading = false;
});
},
// 跳转详情页面
detail(v) {
let sn = v.sn;
this.$options.filters.customRouterPush({
this.$filters.customRouterPush({
name: "order-detail",
query: { sn: sn },
})
query: { sn: v.sn },
});
},
// 导出订单
async exportOrder() {
if(this.searchForm.startDate==""||this.searchForm.endDate==""){
if (!this.searchForm.startDate || !this.searchForm.endDate) {
this.$Message.error("必须选择时间范围，搜索后进行导出！");
}else{
API_Order.exportOrder(this.searchForm)
.then((res) => {
const blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=utf-8",
});
//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ("download" in document.createElement("a")) {
//支持a标签download的浏览器
const link = document.createElement("a"); //创建a标签
link.download = "订单列表.xlsx"; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
navigator.msSaveBlob(blob, fileName);
}
})
.catch((err) => {
console.log(err);
return;
}
API_Order.exportOrder(this.searchForm)
.then((res) => {
const blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=utf-8",
});
}
if ("download" in document.createElement("a")) {
const link = document.createElement("a");
link.download = "订单列表.xlsx";
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
} else {
navigator.msSaveBlob(blob, "订单列表.xlsx");
}
})
.catch((err) => {
console.log(err);
});
},
// 订单筛选
orderStatusClick(name) {
if (name === 0) {
// 点击"全部"时，设置为空字符串，在getDataList中会被过滤掉
this.searchForm.orderStatus = '';
if (name === "ALL" || name === "" || name === undefined) {
this.searchForm.orderStatus = "";
this.currentStatus = "ALL";
} else {
// 其他状态正常赋值
this.searchForm.orderStatus = name;
this.currentStatus = name;
}
this.currentStatus = name;
this.getDataList();
},
getOrderNumData() {
// 创建一个不包含orderStatus字段的搜索参数
const { orderStatus, ...searchParams } = this.searchForm;
API_Order.getOrderNum(searchParams).then((res) => {
if (res.success) {
this.orderNumData = res.result;
}
}).catch((err) => {
console.error('获取订单数量统计失败:', err);
});
API_Order.getOrderNum(searchParams)
.then((res) => {
if (res.success) {
this.orderNumData = res.result;
}
})
.catch((err) => {
console.error("获取订单数量统计失败:", err);
});
},
},
mounted() {
@@ -533,28 +397,19 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.export {
margin: 10px 20px 10px 0;
}
.export-excel-wrapper {
display: inline;
}
// Tab组件样式
.order-tab {
::v-deep .ivu-tabs-tab {
:deep(.el-tabs__item) {
font-size: 14px;
}
}
.ops a {
color: #2d8cf0;
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.ops span {
display: inline-block;
margin: 0 8px;
color: #dcdee2;
}
</style>