fix:余额为0时余额支付校验
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { defineProps, defineEmits, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { AlipayOutlined, WechatOutlined, WalletOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
@@ -26,6 +26,17 @@ const orderTypeMap = {
|
||||
1: t('page.order.balanceRecharge')
|
||||
} as const;
|
||||
|
||||
const isBalancePayDisabled = computed(() => {
|
||||
// 如果余额未定义,禁用按钮
|
||||
if (props.userBalance === undefined) return true;
|
||||
// 如果余额为0,禁用按钮
|
||||
if (props.userBalance === 0) return true;
|
||||
// 如果余额小于订单金额,禁用按钮
|
||||
if (props.userBalance < props.orderInfo.orderAmount) return true;
|
||||
// 如果正在加载,禁用按钮
|
||||
return props.loading || false;
|
||||
});
|
||||
|
||||
const handleConfirm = (paymentMethod: 'alipay' | 'wxpay' | 'balance') => {
|
||||
if (paymentMethod === 'balance') {
|
||||
Modal.confirm({
|
||||
@@ -84,9 +95,9 @@ const handleCancel = () => {
|
||||
v-if="orderInfo.orderType === 0"
|
||||
class="method-item"
|
||||
:class="{
|
||||
disabled: !enableBalancePay || loading,
|
||||
disabled: isBalancePayDisabled,
|
||||
}"
|
||||
@click="(!loading && enableBalancePay) && handleConfirm('balance')"
|
||||
@click="!isBalancePayDisabled && handleConfirm('balance')"
|
||||
>
|
||||
<div class="debug-info" style="display: none;">
|
||||
Enable balance pay: {{ enableBalancePay }}
|
||||
@@ -95,6 +106,10 @@ const handleCancel = () => {
|
||||
<span>{{ t('page.order.balancePay') }}</span>
|
||||
<div class="balance-info" v-if="userBalance !== undefined">
|
||||
{{ t('page.order.availableBalance') }}: ¥{{ userBalance.toFixed(2) }}
|
||||
<template v-if="userBalance < orderInfo.orderAmount">
|
||||
<br>
|
||||
<span class="balance-insufficient">{{ t('page.order.insufficientBalance') }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -216,6 +231,14 @@ const handleCancel = () => {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.balance-insufficient {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-spin-container) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -730,6 +730,7 @@ const local: any = {
|
||||
balancePayConfirm:'Are you sure you want to pay?',
|
||||
cancel:'Cancel',
|
||||
confirm:'Confirm',
|
||||
insufficientBalance:'Insufficient balance'
|
||||
},
|
||||
kyc:{
|
||||
rejectReason:'Reject Reason:',
|
||||
|
||||
@@ -736,6 +736,7 @@ const local:any = {
|
||||
balancePayConfirm:'确定要支付吗?',
|
||||
cancel:'取消',
|
||||
confirm:'确定',
|
||||
insufficientBalance:'余额不足'
|
||||
},
|
||||
kyc:{
|
||||
rejectReason:'拒绝原因:',
|
||||
|
||||
Reference in New Issue
Block a user