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" @submit.prevent>
        <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) }} 至
            {{ dateFormatSubSec(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')">
          <input 
            v-model="formData.authCode" 
            :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
            @keydown.enter.prevent="qrCodePayFee"
            class="custom-input"
            type="text">
        </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, dateFormatSubSec } 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,
    dateFormatSubSec,
    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 {
        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 {
        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>
.custom-input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
}
.custom-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.custom-input:hover {
  border-color: #c0c4cc;
}
.custom-input::placeholder {
  color: #c0c4cc;
}
/* 禁用状态 */
.custom-input:disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
/* 错误状态 */
.custom-input.error {
  border-color: #f56c6c;
}
.custom-input.error:focus {
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}
</style>