<template>
|
<GlobalWindow
|
:title="title"
|
width="600px"
|
:visible.sync="visible"
|
:confirm-working="submitting"
|
:confirm-text="'确认退款'"
|
:withFooter="refundForm.manualRefund !== 1"
|
@confirm="handleSubmit"
|
>
|
<el-form ref="refundForm" :model="refundForm" v-if="orderInfo && orderInfo.order">
|
<!-- 订单基本信息 -->
|
<el-row :gutter="20" style="margin-bottom: 20px;">
|
<el-col :span="8">
|
<el-form-item label="订单编号">
|
<span>{{ orderInfo.order.code }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="可退金额">
|
<span style="color: #f56c6c;">¥{{ (((orderInfo.order.payAmount||0) - (orderInfo.order.refundAmount ||0)) / 100).toFixed(2) }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="配送方式">
|
<span>{{ orderInfo.order.type === 0 ? '就地存取' : '同城寄送' }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 物品明细表格 -->
|
<el-table :data="orderInfo.detailList" stripe style="margin-bottom: 20px;">
|
<el-table-column prop="typeName" label="物品名称" min-width="150px"></el-table-column>
|
<el-table-column prop="luggageName" label="物品尺寸" min-width="120px"></el-table-column>
|
<el-table-column label="配送价（元）" min-width="120px">
|
<template slot-scope="{row}">
|
¥{{ ((row.unitPrice||0) / 100).toFixed(2) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="num" label="数量" min-width="80px"></el-table-column>
|
<el-table-column label="小计（元）" min-width="120px">
|
<template slot-scope="{row}">
|
<span class="yellowstate"> ¥{{ ((row.subtotal ||0) / 100).toFixed(2) }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 退款表单 -->
|
<el-form-item label="退款金额" prop="refundAmount" label-suffix="：*" :rules="[{ required: true, message: '请输入退款金额', trigger: 'blur' }, { validator: this.validateRefundAmount, trigger: 'blur' }]">
|
<el-input v-model="refundForm.refundAmount" placeholder="请输入退款金额" suffix-icon="el-icon-yuan"></el-input>
|
</el-form-item>
|
<el-form-item label="寄件门店扣费" prop="depositShopFee" :rules="[{ validator: this.validateDecimal, trigger: 'blur' }]">
|
<el-input v-model="refundForm.depositShopFee" placeholder="请输入寄件门店扣费" suffix-icon="el-icon-yuan"></el-input>
|
</el-form-item>
|
<el-form-item label="收件门店扣费" prop="takeShopFee" v-if="orderInfo.order.type === 1 && orderInfo.order.takeShopId" :rules="[{ validator: this.validateDecimal, trigger: 'blur' }]">
|
<el-input v-model="refundForm.takeShopFee" placeholder="请输入收件门店扣费" suffix-icon="el-icon-yuan"></el-input>
|
</el-form-item>
|
<el-form-item label="配送司机扣费" prop="driverFee" v-if="orderInfo.order.type === 1" :rules="[{ validator: this.validateDecimal, trigger: 'blur' }]">
|
<el-input v-model="refundForm.driverFee" placeholder="请输入配送司机扣费" suffix-icon="el-icon-yuan"></el-input>
|
</el-form-item>
|
<el-form-item label="备注说明">
|
<el-input v-model="refundForm.remark" type="textarea" :rows="4" placeholder="请输入备注说明"></el-input>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById } from '@/api/business/orderManagement'
|
import { manualRefund, manualRefundDetail } from '@/api/business/orders'
|
|
export default {
|
name: 'OperaManualRefund',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '手动退款',
|
submitting: false,
|
orderId: null,
|
orderInfo: null,
|
refundForm: {
|
refundAmount: null,
|
depositShopFee: null,
|
takeShopFee: null,
|
driverFee: null,
|
remark: '',
|
manualRefund: null
|
}
|
}
|
},
|
methods: {
|
validateRefundAmount(rule, value, callback) {
|
let refundAmount = (((this.orderInfo.order.payAmount||0) - (this.orderInfo.order.refundAmount ||0)) / 100)
|
// 验证最多两位小数
|
if (value !== null && value !== '' && value !== undefined) {
|
const str = String(value)
|
if (str.includes('.')) {
|
const decimal = str.split('.')[1]
|
if (decimal.length > 2) {
|
callback(new Error('最多支持两位小数'))
|
return
|
}
|
}
|
}
|
// 退款金额必须大于0
|
if (Number(value) <= 0) {
|
callback(new Error('退款金额必须大于0'))
|
}
|
console.log(Number(value))
|
console.log(refundAmount)
|
// 退款金额必须小于等于可退金额
|
if (Number(value) > refundAmount) {
|
callback(new Error('退款金额不能超过可退金额'))
|
}
|
|
callback()
|
},
|
validateDecimal(rule, value, callback) {
|
if (value !== null && value !== '' && value !== undefined) {
|
const str = String(value)
|
if (str.includes('.')) {
|
const decimal = str.split('.')[1]
|
if (decimal.length > 2) {
|
callback(new Error('最多支持两位小数'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
},
|
open (row) {
|
this.orderId = row.id
|
if (row.manualRefund === 1) {
|
this.refundForm.manualRefund = row.manualRefund
|
manualRefundDetail(row.id)
|
.then(res => {
|
this.refundForm.refundAmount = ((res.refundAmount || 0) / 100).toFixed(2)
|
this.refundForm.depositShopFee = ((res.depositShopDeduct || 0) / 100).toFixed(2)
|
this.refundForm.takeShopFee = ((res.takeShopDeduct || 0) / 100).toFixed(2)
|
this.refundForm.driverFee = ((res.driverDeduct || 0) / 100).toFixed(2)
|
this.refundForm.remark = res.refundRemark
|
})
|
} else {
|
this.refundForm.manualRefund = null
|
this.refundForm.refundAmount = ''
|
this.refundForm.depositShopFee = ''
|
this.refundForm.takeShopFee = ''
|
this.refundForm.driverFee = ''
|
this.refundForm.remark = ''
|
}
|
this.orderInfo = null
|
this.visible = true
|
this.getOrderDetail()
|
},
|
async getOrderDetail () {
|
const response = await getById(this.orderId)
|
console.log(response)
|
this.orderInfo = response
|
// 初始化退款金额为可退金额
|
// this.refundForm.refundAmount = this.orderInfo.refundAmount / 100
|
},
|
async handleSubmit () {
|
this.$refs.refundForm.validate(async (valid) => {
|
if (valid) {
|
this.submitting = true
|
// 拷贝一个新的对象，避免直接修改refundForm
|
const formData = { ...this.refundForm }
|
|
// 转换为接口需要的参数格式
|
const params = {
|
orderId: this.orderId,
|
refundAmount: Math.round(formData.refundAmount * 100),
|
remark: formData.remark,
|
takeShopDeduct: formData.takeShopFee ? Math.round(formData.takeShopFee * 100) : 0,
|
depositShopDeduct: formData.depositShopFee ? Math.round(formData.depositShopFee * 100) : 0,
|
driverDeduct: formData.driverFee ? Math.round(formData.driverFee * 100) : 0
|
}
|
try {
|
await manualRefund(params)
|
this.$message.success('退款申请提交成功')
|
this.submitting = false
|
this.visible = false
|
this.$emit('success')
|
} catch (error) {
|
console.log(error)
|
this.submitting = false
|
this.$message.error(error.message)
|
}
|
// 调用手动退款接口
|
}
|
})
|
},
|
handleClose () {
|
this.$refs.refundForm.resetFields()
|
this.refundForm = {
|
refundAmount: null,
|
depositShopFee: null,
|
takeShopFee: null,
|
driverFee: null,
|
remark: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
