<template>
|
<div v-loading="wholeLoading" class="base-page-wrapper sale-detail">
|
<el-bus-title title="订单信息" size="small"></el-bus-title>
|
<el-bus-form
|
ref="form"
|
label-width="auto"
|
:content="formContent"
|
readonly
|
></el-bus-form>
|
<div
|
v-if="detail.imageListFormat && detail.imageListFormat.length > 0"
|
class="mb-20"
|
>
|
<el-bus-title title="售后图片" size="small"></el-bus-title>
|
<el-bus-upload
|
:value="detail.imageListFormat"
|
disabled
|
list-type="picture-card"
|
></el-bus-upload>
|
</div>
|
<div v-if="detail.videoList && detail.videoList.length > 0" class="mb-20">
|
<el-bus-title title="售后视频" size="small"></el-bus-title>
|
<video
|
v-for="(item, index) in detail.videoList"
|
:key="index"
|
controls
|
width="300px"
|
height="200"
|
class="mr-20 mb-15"
|
>
|
<source :src="item" />
|
</video>
|
</div>
|
<el-bus-title title="售后处理" size="small"></el-bus-title>
|
<el-bus-form
|
ref="auditForm"
|
label-width="auto"
|
:content="auditFormContent"
|
:readonly="!editable"
|
></el-bus-form>
|
<div class="text-center mt-20">
|
<el-button
|
v-if="editable"
|
class="min-w-100"
|
:loading="loading"
|
type="primary"
|
@click="save"
|
>处理完成</el-button
|
>
|
<el-button class="min-w-100" @click="goBack">返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AfterSaleItems from '@/components/order/after-sale-items.vue'
|
export default {
|
data() {
|
return {
|
detail: {},
|
wholeLoading: false,
|
loading: false,
|
formContent: [
|
{
|
type: 'row',
|
items: [
|
{ label: '订单号：', id: 'orderNo', type: 'input' },
|
{ label: '售后单号：', id: 'salesNo', type: 'input' },
|
{ label: '用户账号：', id: 'createName', type: 'input' },
|
{ label: '收货人：', id: 'customer', type: 'input' },
|
{ label: '收货人电话：', id: 'customerTel', type: 'input' },
|
{ label: '收货地址：', id: 'customerWholeAddress', type: 'input' },
|
{ label: '下单时间：', id: 'createTime', type: 'input' },
|
{ label: '订单金额：', id: 'totalOrderAmount', type: 'input' },
|
{ label: '售后状态：', id: 'statusStr', type: 'input' },
|
{ label: '售后理由：', id: 'reason', type: 'input', span: 24 },
|
{ label: '处理时间：', id: 'auditTime', type: 'input' },
|
],
|
},
|
],
|
auditFormContent: [
|
{
|
label: '处理意见：',
|
id: 'auditStatus',
|
type: 'bus-radio',
|
el: {
|
code: 'SALES_AUDIT_STATUS',
|
},
|
rules: { required: true, message: '请选择处理意见' },
|
on: {
|
change: (e, updateForm) => {
|
updateForm({ auditRemarks: '' })
|
},
|
},
|
str: true,
|
},
|
{
|
label: '不通过原因：',
|
id: 'auditRemarks',
|
type: 'input',
|
el: {
|
type: 'textarea',
|
rows: 6,
|
},
|
rules: {
|
required: true,
|
message: '请输入不通过原因',
|
trigger: 'blur',
|
},
|
hidden: (row) => row.auditStatus !== 'REJECT',
|
},
|
{
|
label: '',
|
id: 'items',
|
component: AfterSaleItems,
|
forceDisabled: true,
|
},
|
],
|
}
|
},
|
head() {
|
return {
|
title: '售后详情',
|
}
|
},
|
computed: {
|
editable() {
|
return (
|
this.$route.params.action === 'handle' &&
|
this.detail?.status === 'PENDING'
|
)
|
},
|
},
|
mounted() {
|
this.getDetail()
|
},
|
methods: {
|
goBack() {
|
this.$router.back()
|
},
|
async getDetail() {
|
this.wholeLoading = true
|
const { code, data } = await this.$elBusHttp.request(
|
'flower/api/sales/list/view',
|
{ params: { id: this.$route.params.id } }
|
)
|
if (code === 0 && data) {
|
data.customerWholeAddress = `${data.customerProvince || ''}${
|
data.customerCity || ''
|
}${data.customerRegion || ''}${data.customerAddress || ''}`
|
data.imageListFormat = Array.isArray(data.imageList)
|
? data.imageList.map((i) => ({ url: i }))
|
: []
|
this.detail = data || {}
|
this.$refs.form.updateForm(data)
|
this.$refs.auditForm.updateForm({
|
...data,
|
auditStatus: data.status === 'PENDING' ? undefined : data.auditStatus,
|
})
|
}
|
this.wholeLoading = false
|
},
|
save() {
|
this.$refs.auditForm.validate((res) => {
|
if (res) {
|
const formValue = this.$refs.auditForm.getFormValue()
|
if (formValue.auditStatus === 'REJECT') {
|
this.$elBusUtil
|
.confirm('确定处理完成吗？')
|
.then(() => {
|
this.doSave({ ...formValue, items: [] })
|
})
|
.catch(() => {})
|
} else {
|
// eslint-disable-next-line
|
if (
|
formValue.items.every(
|
(i) =>
|
this.$elBusUtil.isEmpty(i.amount) &&
|
this.$elBusUtil.isTrueEmpty(i.personInCharge)
|
)
|
) {
|
this.$message.warning('请完善商品售后信息')
|
} else if (
|
// 理赔金额和责任方不能只有一个有值
|
formValue.items.find(
|
(i) =>
|
(!this.$elBusUtil.isEmpty(i.amount) &&
|
this.$elBusUtil.isTrueEmpty(i.personInCharge)) ||
|
(this.$elBusUtil.isEmpty(i.amount) &&
|
!this.$elBusUtil.isTrueEmpty(i.personInCharge))
|
)
|
) {
|
this.$message.warning('赔付金额和责任方必须同时填写')
|
} else {
|
const items = formValue.items.filter(
|
(i) =>
|
!this.$elBusUtil.isEmpty(i.amount) &&
|
!this.$elBusUtil.isTrueEmpty(i.personInCharge)
|
)
|
// 当存在部分商品未设置赔付金额时提示但允许提交
|
if (items.length !== formValue.items.length) {
|
this.$elBusUtil
|
.confirm('存在部分商品未设置赔付金额，确定处理完成吗？')
|
.then(() => {
|
this.doSave({ ...formValue, items })
|
})
|
.catch(() => {})
|
} else {
|
this.$elBusUtil
|
.confirm('确定处理完成吗？')
|
.then(() => {
|
this.doSave({ ...formValue, items })
|
})
|
.catch(() => {})
|
}
|
}
|
}
|
}
|
})
|
},
|
async doSave(data) {
|
this.loading = true
|
const { code } = await this.$elBusHttp.request('flower/api/sales/audit', {
|
method: 'post',
|
data: { ...data, id: this.$route.params.id },
|
})
|
if (code === 0) {
|
this.$message.success('处理成功')
|
this.goBack()
|
}
|
this.loading = false
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.sale-detail {
|
.el-bus-title {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
