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