源文件
This commit is contained in:
170
jeepay-ui-agent/src/views/order/pay/RefundModal.vue
Normal file
170
jeepay-ui-agent/src/views/order/pay/RefundModal.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="vdata.visible"
|
||||
title="退款"
|
||||
:confirm-loading="vdata.confirmLoading"
|
||||
:closable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付订单号">
|
||||
<a-tag color="purple">
|
||||
{{ vdata.detailData.payOrderId }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付金额">
|
||||
<a-tag color="green">
|
||||
{{ vdata.detailData.amount/100 }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="可退金额">
|
||||
<a-tag color="pink">
|
||||
{{ nowRefundAmount }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form ref="refundInfo" :rules="rules" :model="vdata.refund">
|
||||
<a-form-item label="退款金额" name="refundAmount">
|
||||
<a-input-number v-model:value="vdata.refund.refundAmount" :precision="2" style="width:100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="退款原因" name="refundReason">
|
||||
<a-input v-model:value="vdata.refund.refundReason" type="textarea" autocomplete="off" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="支付密码" name="refundPassword">
|
||||
<a-input v-model:value="vdata.refund.refundPassword" maxlength="6" type="password" autocomplete="off" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { API_URL_PAY_ORDER_LIST, req, $payOrderRefund } from '@/api/manage'
|
||||
import {ref, onMounted, reactive, getCurrentInstance,computed} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 获取全局函数
|
||||
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const props = defineProps ({
|
||||
callbackFunc: { type: Function, default: () => () => ({}) }
|
||||
})
|
||||
|
||||
const refundInfo = ref()
|
||||
const vdata : any = reactive({
|
||||
refundErrorModal: null, // 退款错误信息的modal对象
|
||||
recordId: '',
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 16 },
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
detailData: {} as any,
|
||||
refund: {
|
||||
refundReason: '', // 退款原因
|
||||
refundAmount: '' // 退款金额
|
||||
} as any,
|
||||
|
||||
})
|
||||
|
||||
const rules = {
|
||||
refundReason: [{ min: 0, max: 256, required: true, trigger: 'blur', message: '请输入退款原因，最长不超过256个字符' }],
|
||||
refundPassword: [{required: true, trigger: 'blur', message: '请输入支付密码' }],
|
||||
refundAmount: [{ required: true, message: '请输入金额', trigger: 'blur',type:'number' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
console.log(value)
|
||||
|
||||
if (value < 0.01 || value > nowRefundAmount.value) {
|
||||
return Promise.reject('退款金额不能小于0.01并且不能大于可退金额')
|
||||
}else{
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
const nowRefundAmount = computed(()=>{
|
||||
return (vdata.detailData.amount - vdata.detailData.refundAmount) / 100
|
||||
})
|
||||
|
||||
defineExpose({show})
|
||||
function show (recordId) {
|
||||
if (refundInfo.value !== undefined) {
|
||||
refundInfo.value.resetFields()
|
||||
}
|
||||
vdata.recordId = recordId
|
||||
vdata.visible = true
|
||||
vdata.refund = {}
|
||||
|
||||
req.getById(API_URL_PAY_ORDER_LIST, recordId).then(res => {
|
||||
vdata.detailData = res
|
||||
})
|
||||
}
|
||||
function handleOk () {
|
||||
refundInfo.value.validate().then(valid =>{
|
||||
vdata.confirmLoading = true
|
||||
|
||||
// 退款接口
|
||||
$payOrderRefund(vdata.recordId, vdata.refund.refundAmount, vdata.refund.refundReason, vdata.refund.refundPassword).then(res => {
|
||||
vdata.visible = false // 关闭弹窗
|
||||
vdata.confirmLoading = false // 取消按钮转圈
|
||||
|
||||
if (res.state === 0 || res.state === 3) { // 订单生成 || 失败
|
||||
vdata.refundErrorModal = $infoBox.modalError('退款失败', buildModalText(res))
|
||||
} else if (res.state === 1) { // 退款中
|
||||
vdata.refundErrorModal = $infoBox.modalWarning('退款中', buildModalText(res))
|
||||
props.callbackFunc()
|
||||
} else if (res.state === 2) { // 退款成功
|
||||
$infoBox.message.success('退款成功')
|
||||
props.callbackFunc()
|
||||
} else {
|
||||
vdata.refundErrorModal = $infoBox.modalWarning('退款状态未知', buildModalText(res))
|
||||
}
|
||||
}).catch(() => {
|
||||
vdata.confirmLoading = false // 取消按钮转圈
|
||||
})
|
||||
})
|
||||
}
|
||||
function handleCancel (e) {
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 跳转到退款列表函数
|
||||
function toRefundList () {
|
||||
vdata.refundErrorModal.destroy()
|
||||
router.push({
|
||||
path: '/refund',
|
||||
})
|
||||
}
|
||||
|
||||
function buildModalText (res) {
|
||||
return <div>
|
||||
{ res.errCode? <div>错误码：{res.errCode} </div> : '' }
|
||||
{ res.errMsg? <div>错误信息：{res.errMsg} </div> : '' }
|
||||
<div>请到<a onClick={ toRefundList }>退款列表</a>中查看详细信息</div>
|
||||
</div>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user