修改售后单部分样式以及逻辑

This commit is contained in:
lemon橪
2021-07-22 14:23:31 +08:00
parent 7fbcdafa9b
commit 4809c3839b
8 changed files with 505 additions and 547 deletions

View File

@@ -22,10 +22,7 @@ export default {
buyer: "https://buyer-api.pickmall.cn",
seller: "https://store-api.pickmall.cn",
manager: "https://admin-api.pickmall.cn"
// common: 'http://192.168.0.101:8890',
// buyer: 'http://192.168.0.101:8888',
// seller: 'http://192.168.0.101:8889',
// manager: 'http://192.168.0.101:8887'
},
api_prod: {
common: "https://common-api.pickmall.cn",

View File

@@ -262,6 +262,7 @@
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});

View File

@@ -46,12 +46,14 @@
<Button @click="handleReset" class="search-btn">重置</Button>
</Form>
</Row>
<Table
:loading="loading"
border
class="mt_10"
:columns="columns"
:data="data"
ref="table"
>
@@ -142,7 +144,7 @@
title: "申请退款金额",
key: "applyRefundPrice",
width: 130,
sortType: "desc",
render: (h, params) => {
return h(
"div",
@@ -258,6 +260,7 @@
this.loading = false;
if (res.success) {
this.data = res.result.records;
console.log(this.data)
this.total = res.result.total;
}
});

View File

@@ -2,268 +2,279 @@
<div class="search">
<Row>
<Col>
<Card>
<div class="main-content">
<div class="div-flow-left">
<div class="div-form-default">
<h3>售后申请</h3>
<dl>
<dt>售后状态</dt>
<dd>{{filterStatus(afterSaleInfo.serviceStatus)}}</dd>
</dl>
<dl>
<dt>退货退款编号</dt>
<dd>{{ afterSaleInfo.sn }}</dd>
</dl>
<dl>
<dt>退货退款原因</dt>
<dd>{{ afterSaleInfo.reason }}</dd>
</dl>
<dl>
<dt>申请退款金额</dt>
<dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl v-if="afterSaleInfo.actualRefundPrice">
<dt>实际退款金额</dt>
<dd>{{ afterSaleInfo.actualRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl v-if="afterSaleInfo.refundPoint">
<dt>退还积分</dt>
<dd>{{ afterSaleInfo.refundPoint }}</dd>
</dl>
<dl>
<dt>退货数量</dt>
<dd>{{ afterSaleInfo.num }}</dd>
</dl>
<dl>
<dt>问题描述</dt>
<dd>{{ afterSaleInfo.problemDesc }}</dd>
</dl>
<dl>
<dt>凭证</dt>
<dd v-if="afterSaleImage == ''">
暂无凭证
</dd>
<dd v-else>
<div class="div-img" @click="()=>{picFile=item; picVisible = true}"
v-for="(item, index) in afterSaleImage" :key="index">
<img class="complain-img" :src="item">
<Card>
<div class="main-content">
<div class="div-flow-left">
<div class="div-form-default">
<h3>售后申请</h3>
<dl>
<dt>售后状态</dt>
<dd>{{filterStatus(afterSaleInfo.serviceStatus)}}</dd>
</dl>
</div>
<dl>
<dt>退货退款编号</dt>
<dd>{{ afterSaleInfo.sn }}</dd>
</dl>
<dl>
<dt>退货退款原因</dt>
<dd>{{ afterSaleInfo.reason }}</dd>
</dl>
<dl>
<dt>申请退款金额</dt>
<dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl v-if="afterSaleInfo.actualRefundPrice">
<dt>实际退款金额</dt>
<dd>{{ afterSaleInfo.actualRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl v-if="afterSaleInfo.refundPoint">
<dt>退还积分</dt>
<dd>{{ afterSaleInfo.refundPoint }}</dd>
</dl>
<dl>
<dt>退货数量</dt>
<dd>{{ afterSaleInfo.num }}</dd>
</dl>
<dl>
<dt>问题描述</dt>
<dd>{{ afterSaleInfo.problemDesc }}</dd>
</dl>
<dl>
<dt>凭证</dt>
<dd v-if="afterSaleImage == ''">
暂无凭证
</dd>
<dd v-else>
<div class="div-img" @click="()=>{picFile=item; picVisible = true}" v-for="(item, index) in afterSaleImage" :key="index">
<img class="complain-img" :src="item">
<Modal footer-hide mask-closable v-model="picVisible">
<img :src="picFile" alt="无效的图片链接" style="width: 100%; margin: 0 auto; display: block"/>
</Modal>
</div>
</dd>
</dl>
</div>
<Modal footer-hide mask-closable v-model="picVisible">
<img :src="picFile" alt="无效的图片链接" style="width: 100%; margin: 0 auto; display: block" />
</Modal>
<div class="div-form-default" v-if="afterSaleInfo.serviceStatus=='APPLY'">
<h3>商家处理意见</h3>
<dl>
<dt>商家</dt>
<dd>
<div class="div-content">
{{ afterSaleInfo.storeName }}
</div>
</dd>
</dl>
</div>
</dd>
</dl>
<dl>
<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>
</div>
<div class="div-form-default" v-if="afterSaleInfo.serviceStatus=='APPLY'">
<h3>商家处理意见</h3>
<dl>
<dt>商家</dt>
<dd>
<div class="div-content">
{{ afterSaleInfo.storeName }}
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<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>
</div>
<dl>
<dt>申请退款金额</dt>
<dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl>
<dt>实际退款金额</dt>
<dd>
<Input v-model="params.actualRefundPrice" style="width:260px"/>
</dd>
</dl>
<dl>
<dt>备注信息</dt>
<dd>
<Input v-model="params.remark" type="textarea" maxlength="200" :rows="4" clearable
style="width:260px"/>
</dd>
</dl>
<dl>
<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>
</div>
</dd>
</dl>
</div>
<div class="div-form-default" v-if="afterSaleInfo.serviceStatus !='APPLY'">
<h3>商家处理</h3>
<dl>
<dt>商家</dt>
<dd>
<div class="div-content">
{{ afterSaleInfo.storeName }}
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>审核结果</dt>
<dd>
<div class="div-content">
<dl>
<dt>申请退款金额</dt>
<dd>{{ afterSaleInfo.applyRefundPrice | unitPrice('¥') }}</dd>
</dl>
<dl>
<dt>实际退款金额</dt>
<dd>
<Input v-model="params.actualRefundPrice" style="width:260px" />
</dd>
</dl>
<dl>
<dt>备注信息</dt>
<dd>
<Input v-model="params.remark" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
</dd>
</dl>
<dl>
<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>
</div>
</dd>
</dl>
</div>
<div class="div-form-default" v-if="afterSaleInfo.serviceStatus !='APPLY'">
<h3>商家处理</h3>
<dl>
<dt>商家</dt>
<dd>
<div class="div-content">
{{ afterSaleInfo.storeName }}
</div>
</dd>
</dl>
<dl>
<dt>审核结果</dt>
<dd>
<div class="div-content">
<span v-if="params.serviceStatus=='PASS'">
审核通过
</span>
<span v-else>
<span v-else>
审核拒绝
</span>
</div>
</dd>
</dl>
<dl>
<dt>备注信息</dt>
<dd>
{{ afterSaleInfo.auditRemark }}
</dd>
</dl>
</div>
</div>
<div class="div-flow-center">
</div>
<div class="div-flow-right">
<div class="div-form-default">
<h3>相关商品交易信息</h3>
<dl>
<dt>
<img :src="afterSaleInfo.goodsImage" height="60px">
</dt>
<dd>
<a>{{ afterSaleInfo.goodsName }}</a><br>
<span>{{ afterSaleInfo.num }}(数量)</span><br>
</dd>
</dl>
</div>
<div class="div-form-default">
<h3>订单相关信息</h3>
<dl>
<dt>
订单编号
</dt>
<dd>
{{ afterSaleInfo.orderSn }}
</dd>
</dl>
</div>
<div class="div-form-default"
v-if="afterSaleInfo.serviceStatus =='BUYER_RETURN' || afterSaleInfo.serviceStatus =='COMPLETE' && afterSaleInfo.serviceType !='RETURN_MONEY'">
<h3>回寄物流信息</h3>
<dl>
<dt>
物流公司
</dt>
<dd>
{{ afterSaleInfo.mlogisticsName }}
</dd>
</dl>
<dl>
<dt>
物流单号
</dt>
<dd>
{{ afterSaleInfo.mlogisticsNo }}
</dd>
</dl>
<dl>
<dt>操作</dt>
<dd>
<Button type="info" :loading="submitLoading" @click="sellerConfirmSubmit('PASS')"
style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
确认收货
</Button>
<Button type="primary" :loading="submitLoading" @click="sellerConfirmSubmit('REFUSE')"
style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
拒收
</Button>
<Button type="default" :loading="submitLoading" @click="logisticsBuyer()" style="margin-left: 5px">
查询物流
</Button>
</dd>
</dl>
</div>
<div class="div-form-default"
v-if="afterSaleInfo.afterSaleAllowOperationVO.return_goods && afterSaleInfo.serviceType == 'EXCHANGE_GOODS'">
<h3>换货</h3>
<dl>
<dt>
换货
</dt>
<dd>
<Button type="primary" :loading="submitLoading" @click="exchangeGoods" style="margin-left: 5px">
发货
</Button>
</dd>
</dl>
</div>
<div class="div-form-default"
v-if=" afterSaleInfo.serviceType == 'EXCHANGE_GOODS' && afterSaleInfo.serviceStatus =='SELLER_RE_DELIVERY'">
<h3>物流信息</h3>
<dl>
<dt>
物流公司
</dt>
<dd>
{{ afterSaleInfo.slogisticsName }}
</dd>
</dl>
<dl>
<dt>
物流单号
</dt>
<dd>
{{ afterSaleInfo.slogisticsNo }}
</dd>
</dl>
<dl>
<dt>操作</dt>
<dd>
<Button type="primary" :loading="submitLoading" @click="logisticsSeller()" style="margin-left: 5px">
查询物流
</Button>
</dd>
</dl>
</div>
</div>
</dd>
</dl>
<dl>
<dt>备注信息</dt>
<dd>
{{ afterSaleInfo.auditRemark }}
</dd>
</dl>
</div>
</div>
<div class="div-flow-center">
</Card>
</div>
<div class="div-flow-right">
<div class="div-form-default">
<h3>相关商品交易信息</h3>
<dl>
<dt>
<img :src="afterSaleInfo.goodsImage" height="60px">
</dt>
<dd>
<a>{{ afterSaleInfo.goodsName }}</a><br>
<span>{{ afterSaleInfo.num }}(数量)</span><br>
</dd>
</dl>
</div>
<div class="div-form-default">
<h3>订单相关信息</h3>
<dl>
<dt>
订单编号
</dt>
<dd>
{{ afterSaleInfo.orderSn }}
</dd>
</dl>
<dl v-if="afterSaleInfo.bankDepositName">
<dt>银行开户行</dt>
<dd>
{{afterSaleInfo.bankDepositName}}
</dd>
</dl>
<dl v-if="afterSaleInfo.bankAccountName">
<dt>银行开户名</dt>
<dd>
{{afterSaleInfo.bankAccountName}}
</dd>
</dl>
<dl v-if="afterSaleInfo.bankAccountNumber">
<dt>银行卡号</dt>
<dd>
{{afterSaleInfo.bankAccountNumber}}
</dd>
</dl>
</div>
<div class="div-form-default" v-if="afterSaleInfo.serviceStatus =='BUYER_RETURN' || afterSaleInfo.serviceStatus =='COMPLETE' && afterSaleInfo.serviceType !='RETURN_MONEY'">
<h3>回寄物流信息</h3>
<dl>
<dt>
物流公司
</dt>
<dd>
{{ afterSaleInfo.mlogisticsName }}
</dd>
</dl>
<dl>
<dt>
物流单号
</dt>
<dd>
{{ afterSaleInfo.mlogisticsNo }}
</dd>
</dl>
<dl>
<dt>操作</dt>
<dd>
<Button type="info" :loading="submitLoading" @click="sellerConfirmSubmit('PASS')" style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
确认收货
</Button>
<Button type="primary" :loading="submitLoading" @click="sellerConfirmSubmit('REFUSE')" style="margin-left: 5px" v-if="afterSaleInfo.afterSaleAllowOperationVO.rog">
拒收
</Button>
<Button type="default" :loading="submitLoading" @click="logisticsBuyer()" style="margin-left: 5px">
查询物流
</Button>
</dd>
</dl>
</div>
<div class="div-form-default" v-if="afterSaleInfo.afterSaleAllowOperationVO.return_goods && afterSaleInfo.serviceType == 'EXCHANGE_GOODS'">
<h3>换货</h3>
<dl>
<dt>
换货
</dt>
<dd>
<Button type="primary" :loading="submitLoading" @click="exchangeGoods" style="margin-left: 5px">
发货
</Button>
</dd>
</dl>
</div>
<div class="div-form-default" v-if=" afterSaleInfo.serviceType == 'EXCHANGE_GOODS' && afterSaleInfo.serviceStatus =='SELLER_RE_DELIVERY'">
<h3>物流信息</h3>
<dl>
<dt>
物流公司
</dt>
<dd>
{{ afterSaleInfo.slogisticsName }}
</dd>
</dl>
<dl>
<dt>
物流单号
</dt>
<dd>
{{ afterSaleInfo.slogisticsNo }}
</dd>
</dl>
<dl>
<dt>操作</dt>
<dd>
<Button type="primary" :loading="submitLoading" @click="logisticsSeller()" style="margin-left: 5px">
查询物流
</Button>
</dd>
</dl>
</div>
</div>
</div>
</Card>
</Col>
</Row>
<!-- 订单发货 -->
@@ -280,7 +291,7 @@
</Select>
</FormItem>
<FormItem label="物流单号" prop="logisticsNo">
<Input v-model="form.logisticsNo" style="width:250px"/>
<Input v-model="form.logisticsNo" style="width:250px" />
</FormItem>
</Form>
@@ -350,20 +361,22 @@ export default {
sn: "", // 订单号
logisticsModal: false, //查询物流模态框
logisticsInfo: {}, //物流信息
form: { // 物流信息
form: {
// 物流信息
logisticsNo: "",
logisticsId: "",
}, //换货发货form
formValidate: {
logisticsNo: [
{required: true, message: "发货单号不能为空", trigger: "change"},
{ required: true, message: "发货单号不能为空", trigger: "change" },
],
logisticsId: [
{required: true, message: "请选择物流公司", trigger: "blur"},
{ required: true, message: "请选择物流公司", trigger: "blur" },
],
},
modalVisible: false, // 添加或编辑显示
afterSaleInfo: { // 售后信息
afterSaleInfo: {
// 售后信息
afterSaleAllowOperationVO: {
return_goods: false,
},
@@ -380,18 +393,18 @@ export default {
},
// 售后状态
afterSaleStatus: [
{status: 'APPLY', label: '申请售后'},
{status: 'PASS', label: '申请通过'},
{status: 'REFUSE', label: '申请拒绝'},
{status: 'BUYER_RETURN', label: '买家退货,待卖家收货'},
{status: 'SELLER_RE_DELIVERY', label: '商家换货'},
{status: 'SELLER_CONFIRM', label: '卖家确认收货'},
{status: 'SELLER_TERMINATION', label: '卖家终止售后'},
{status: 'BUYER_CONFIRM', label: '买家确认收货'},
{status: 'BUYER_CANCEL', label: '买家取消售后'},
{status: 'WAIT_REFUND', label: '等待平台退款'},
{status: 'COMPLETE', label: '已完成'},
]
{ status: "APPLY", label: "申请售后" },
{ status: "PASS", label: "申请通过" },
{ status: "REFUSE", label: "申请拒绝" },
{ status: "BUYER_RETURN", label: "买家退货,待卖家收货" },
{ status: "SELLER_RE_DELIVERY", label: "商家换货" },
{ status: "SELLER_CONFIRM", label: "卖家确认收货" },
{ status: "SELLER_TERMINATION", label: "卖家终止售后" },
{ status: "BUYER_CONFIRM", label: "买家确认收货" },
{ status: "BUYER_CANCEL", label: "买家取消售后" },
{ status: "WAIT_REFUND", label: "等待平台退款" },
{ status: "COMPLETE", label: "已完成" },
],
};
},
methods: {
@@ -493,22 +506,22 @@ export default {
});
},
// 返回售后状态中文描述
filterStatus (status) {
let label = ''
for (let i = 0; i< this.afterSaleStatus.length; i++) {
const obj = this.afterSaleStatus[i]
filterStatus(status) {
let label = "";
for (let i = 0; i < this.afterSaleStatus.length; i++) {
const obj = this.afterSaleStatus[i];
if (obj.status === status) {
label = obj.label
label = obj.label;
break;
}
}
return label
}
return label;
},
},
activated () {
activated() {
this.sn = this.$route.query.sn;
this.getDetail();
}
},
};
</script>
<style lang="scss" scoped>
@@ -546,10 +559,11 @@ export default {
margin: 0;
border-bottom: dotted 1px #e6e6e6;
overflow: hidden;
display: flex;
dt {
display: inline-block;
width: 13%;
flex: 2;
vertical-align: top;
text-align: right;
padding: 15px 1% 15px 0;
@@ -558,8 +572,9 @@ export default {
}
dd {
flex: 10;
display: inline-block;
width: 84%;
padding: 15px 0 15px 1%;
margin: 0;
border-left: 1px solid #f0f0f0;