new-cashier/jeepay-ui-agent/src/views/order/pay/RefundModal.vue

<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>