You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
6.9 KiB
215 lines
6.9 KiB
<template> |
|
<el-dialog |
|
class="afterSealsAdd" |
|
:close-on-click-modal="false" |
|
:visible.sync="visible" |
|
width="800px"> |
|
<div class="checkForm"> |
|
<span>订单详情：</span> |
|
<el-form ref="form" :model="checkForm" size="small" label-width="100px"> |
|
<el-form-item label="订单号："> |
|
<el-input v-model="checkForm.orderCode" disabled /> |
|
</el-form-item> |
|
<el-form-item label="售后类型："> |
|
<el-input v-if="checkForm.serviceType === 0" :value="'仅退款'" disabled /> |
|
<el-input v-if="checkForm.serviceType === 1" :value="'退货退款'" disabled /> |
|
</el-form-item> |
|
<el-form-item label="售后原因："> |
|
<el-input v-model="checkForm.reasons" disabled /> |
|
</el-form-item> |
|
<el-form-item label="售后说明："> |
|
<el-input v-model="checkForm.explains" disabled /> |
|
</el-form-item> |
|
<el-form-item label="原因图片："> |
|
<div v-if="!checkForm.explainImg"> |
|
<b>用户未上传图片</b> |
|
</div> |
|
<div v-else> |
|
<el-image |
|
v-for="(item,index) in checkForm.explainImg.split(',')" |
|
:key="index" |
|
style="width: 100px; height: 100px" |
|
:src="item" |
|
:preview-src-list="[item]"> |
|
</el-image> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="提交时间："> |
|
<el-input v-model="checkForm.createTime" disabled /> |
|
</el-form-item> |
|
<div v-for="item in checkForm.cartInfo" |
|
:key="item.id"> |
|
<el-form-item label="售后商品："> |
|
<el-input v-model="item.productInfo.storeName" disabled /> |
|
</el-form-item> |
|
<el-form-item label="商品图片："> |
|
<el-image |
|
:src="item.productInfo.image" |
|
style="width: 100px; height: 100px"> |
|
<div slot="placeholder" class="image-slot"> |
|
加载中<b class="dot">...</b> |
|
</div> |
|
</el-image> |
|
</el-form-item> |
|
<el-form-item label="规格："> |
|
<el-input v-model="item.productInfo.attrInfo.sku" disabled /> |
|
</el-form-item> |
|
<el-form-item label="商品单价"> |
|
<el-input v-model="item.truePrice" disabled /> |
|
</el-form-item> |
|
<el-form-item label="商品数量"> |
|
<el-input v-model="item.cartNum" disabled /> |
|
</el-form-item> |
|
<el-form-item label="邮费："> |
|
<el-input v-model="item.productInfo.postage" disabled /> |
|
</el-form-item> |
|
</div> |
|
</el-form> |
|
</div> |
|
<div v-if="serviceType === 0 && isShow"> |
|
<span>该订单为仅退款订单，审核通过之后将直接退款，是否审核通过？</span> |
|
</div> |
|
<div v-if="serviceType === 1 && isShow"> |
|
<span>该订单为退货退款，请输入退货地址：</span> |
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
|
<el-form-item label="收货人" prop="consignee"> |
|
<el-input v-model="form.consignee" /> |
|
</el-form-item> |
|
<el-form-item label="手机号" prop="phoneNumber"> |
|
<el-input v-model="form.phoneNumber" /> |
|
</el-form-item> |
|
<el-form-item label="地址" prop="address"> |
|
<el-input v-model="form.address" /> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div v-if="serviceType === 1&& (this.checkForm.state===2||this.checkForm.state===3)"> |
|
<span>退货物流查看</span> |
|
<el-timeline :reverse="reverse"> |
|
<el-timeline-item |
|
v-for="(activity, index) in activities" |
|
:key="index" |
|
:timestamp="activity.acceptTime"> |
|
{{activity.AcceptStation}} |
|
</el-timeline-item> |
|
</el-timeline> |
|
<span v-if="this.activities==null">{{this.reason}}</span> |
|
</div> |
|
<div slot="footer" class="dialog-footer"> |
|
<el-button class="refuse" type="danger" v-if="isShow" :loading="loading" @click="submit(1)">拒绝</el-button> |
|
<el-button class="check" type="primary" v-if="isShow" :loading="loading" @click="submit(0)">确认</el-button> |
|
</div> |
|
</el-dialog> |
|
</template> |
|
|
|
<script> |
|
import {getRefundInfo, salesCheck} from '@/api/bxg/yxStoreAfterSales.js' |
|
export default { |
|
props: { |
|
}, |
|
data () { |
|
return { |
|
visible: false, |
|
isShow: false, |
|
loading: false, |
|
serviceType: '', |
|
checkForm: {}, |
|
form: { |
|
salesId: '', // 售后id |
|
orderCode: '', // 订单编号 |
|
approvalStatus: '', // 审核状态0成功1失败 |
|
consignee: '', // 收货人 |
|
phoneNumber: '', // 手机号 |
|
address: '' // 地址 |
|
}, |
|
activities:[], |
|
reason:'', |
|
rules: { |
|
consignee: [{ required: true, message: '请输入收货人', trigger: 'blur' }], |
|
phoneNumber: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' }], |
|
address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }] |
|
}, |
|
} |
|
}, |
|
mounted() { |
|
//查看退货的物流信息 |
|
this.getRefundInfo() |
|
}, |
|
methods: { |
|
getRefundInfo(){ |
|
let data={ |
|
//订单编号 |
|
orderCode:this.checkForm.orderCode, |
|
//快递公司编码 |
|
shipperCode:this.checkForm.shipperCode, |
|
//物流单号 |
|
logisticCode:this.checkForm.deliverySn |
|
} |
|
getRefundInfo(data).then(res=>{ |
|
console.log('res',res) |
|
this.activities=res.Traces |
|
this.reason=res.Reason |
|
}) |
|
}, |
|
cancel() { |
|
this.visible = false |
|
this.$refs['form'].resetFields() |
|
}, |
|
submit(type) { |
|
this.loading = true |
|
if (this.serviceType === 0) { |
|
this.form.consignee = '' |
|
this.form.phoneNumber = '' |
|
this.form.address = '' |
|
} |
|
this.form.approvalStatus = type // 0成功 1失败 |
|
// var res = salesCheck(this.form) |
|
// if (res) { |
|
// this.$message.success('审核成功') |
|
// this.visible = false |
|
// this.$emit('checkSuccess') |
|
// } else { |
|
// this.$message.error(res.message || '审核失败！') |
|
// } |
|
// this.loading = false |
|
salesCheck(this.form).then(res => { |
|
if (res) { |
|
this.$message.success('审核成功') |
|
this.visible = false |
|
this.$emit('checkSuccess') |
|
} else { |
|
this.$message.error(res.message || '审核失败！') |
|
} |
|
}).finally( |
|
this.loading = false |
|
) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.afterSealsAdd{ |
|
padding-bottom: 10vh; |
|
span{ |
|
color: #F56C6C; |
|
line-height: 40px; |
|
font-size: 18px; |
|
font-weight: bold; |
|
margin: 25px 0; |
|
} |
|
} |
|
.afterSealsAdd ::v-deep.el-input.is-disabled .el-input__inner{ |
|
color: #333333; |
|
} |
|
.afterSealsAdd ::v-deep .dialog-footer{ |
|
display: flex; |
|
justify-content: space-around; |
|
.el-button{ |
|
width: 120px; |
|
height: 40px; |
|
} |
|
.refuse{} |
|
.check{} |
|
} |
|
</style>
|
|
|