src/components/fee/payFeeOrderConfirm.vue

<template>
  <div>
  <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
    :close-on-click-modal="false">
    <el-form label-width="120px" class="text-left">
      <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
        <span>{{ formData.payerObjName }}</span>
      </el-form-item>
      <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
        :label="$t('payFeeOrderConfirm.timeRange')">
        <span>
          {{ dateFormat(formData.endTime) }} 至
          {{ dateFormat(formData.showEndTime) }}
        </span>
      </el-form-item>
      <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
        :label="$t('payFeeOrderConfirm.timeRange')">
        <span>
          {{ dateFormat(formData.endTime) }} 至
          {{ formData.custEndTime }}
        </span>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
        <span>{{ formData.totalFeePrice }}</span>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
        <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
          <span>
            {{ formData.totalDiscountMoney.toFixed(2) }}
          </span>
        </el-tooltip>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
        <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
          {{ formData.receivedAmountNumber }}
        </span>
        <span v-else>{{ formData.receivedAmount }}</span>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
        <span>
          {{ formData.accountAmount >= formData.receivedAmount ?
            formData.receivedAmount : formData.accountAmount.toFixed(2) }}
        </span>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
        <span>
          {{ formData.accountAmount >= formData.receivedAmount ?
            '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
        </span>
      </el-form-item>
      <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
        :label="$t('payFeeOrderConfirm.integralDeduction')">
        <span>{{ formData.integralAmount }}</span>
      </el-form-item>
      <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
        :label="$t('payFeeOrderConfirm.cashDeduction')">
        <span>{{ formData.cashAmount }}</span>
      </el-form-item>
      <el-form-item :label="$t('payFeeOrderConfirm.remark')">
        <span>{{ formData.remark }}</span>
      </el-form-item>
      <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
        <el-input v-model="formData.authCode" :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
          @keyup.enter.native="qrCodePayFee"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
      <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
        {{ $t('payFeeOrderConfirm.confirm') }}
      </el-button>
    </div>
  </el-dialog>
  <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
</div>
</template>
<script>
import { qrCodePayment, checkPayFinish ,payFee} from '@/api/fee/payFeeOrderApi'
import { dateFormat } from '@/utils/dateUtil'
import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
export default {
  name: 'PayFeeOrderConfirm',
  data() {
    return {
      dialogVisible: false,
      formData: {
        totalDiscountMoney: 0.0,
        accountAmount: 0.0,
        payType: ''
      }
    }
  },
  components: {
    PayFeeOrderResult
  },
  methods: {
    dateFormat,
    open(params) {
      this.formData = { ...params }
      this.dialogVisible = true
      if (this.formData.payType !== 'common') {
        setTimeout(() => {
          document.getElementById('authCode').focus()
        }, 1000)
      }
    },
    close() {
      this.dialogVisible = false
    },
    closeDoPayFeeModal() {
      this.close()
    },
    async qrCodePayFee() {
      try {
        // const printFees = [{
        //   feeId: this.formData.feeId,
        //   squarePrice: this.formData.squarePrice,
        //   additionalAmount: this.formData.additionalAmount,
        //   feeName: this.formData.feeName,
        //   amount: this.formData.receivedAmount,
        //   authCode: this.formData.authCode
        // }]
        this.formData.subServiceCode = 'fee.payFee'
        const data = await qrCodePayment(this.formData)
        if (data.code == 404) {
          this.$message.error(data.msg)
          if (data.data && data.data.orderId) {
            this.formData.orderId = data.data.orderId
            this.formData.paymentPoolId = data.data.paymentPoolId
            setTimeout(() => {
              this.qrCodeCheckPayFinish()
            }, 5000)
          }
          return
        }
        this.close()
        this.$emit('success', data)
      } catch (error) {
        console.error('扫码支付失败:', error)
      }
    },
    async qrCodeCheckPayFinish() {
      try {
        // const printFees = [{
        //   feeId: this.formData.feeId,
        //   squarePrice: this.formData.squarePrice,
        //   additionalAmount: this.formData.additionalAmount,
        //   feeName: this.formData.feeName,
        //   amount: this.formData.receivedAmount,
        //   authCode: this.formData.authCode,
        //   orderId: this.formData.orderId
        // }]
        this.formData.subServiceCode = 'fee.payFee'
        const data = await checkPayFinish(this.formData)
        if (data.code == 404) {
          this.$message.error(data.msg)
          return
        } else if (data.code == 41) {
          setTimeout(() => {
            this.qrCodeCheckPayFinish()
          }, 5000)
          return
        }
        this.close()
        this.$refs.payFeeOrderResult.open(data.data)
        this.$emit('success', data.data)
      } catch (error) {
        console.error('检查支付状态失败:', error)
      }
    },
    async payFee() {
      try {
        const data = await payFee(this.formData)
        if (data.code === 0) {
          this.close()
          this.$refs.payFeeOrderResult.open(data.data)
          this.$emit('success', data.data)
        } else {
          this.$message.error(data.msg)
        }
      } catch (error) {
        console.error('缴费失败:', error)
      }
    },
    handleClose() {
      this.formData = {
        totalDiscountMoney: 0.0,
        accountAmount: 0.0,
        payType: ''
      }
    }
  }
}
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>