txz-mch-pay/src/views/settlement/apply/index.vue

<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="20" :md="16" :lg="12" :xl="10">
					<el-card shadow="hover" class="apply-card">
						<template #header>
							<div class="card-header">
								<span class="card-title">{{ $t('settlement.applySettlement') }}</span>
								<span class="available-balance"
									>{{ $t('settlement.availableBalance') }}：<span class="balance-amount">¥{{ formatAmount(availableBalance) }}</span></span
								>
							</div>
						</template>

						<el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
							<el-form-item :label="$t('settlement.withdrawAmount')" prop="amount">
								<el-input-number
									v-model="formData.amount"
									:min="0"
									:controls="false"
									:placeholder="$t('settlement.withdrawAmountPlaceholder')"
									style="width: 100%"
								/>
							</el-form-item>

							<el-form-item :label="$t('settlement.withdrawType')" prop="type">
								<el-radio-group v-model="formData.type">
									<el-radio :label="1">{{ $t('settlement.bankCard') }}</el-radio>
									<el-radio :label="2">{{ $t('settlement.usdt') }}</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item :label="$t('settlement.bankName')" prop="bankName" v-if="formData.type === 1">
								<el-input v-model="formData.bankName" :placeholder="$t('settlement.bankNamePlaceholder')" clearable />
							</el-form-item>

							<el-form-item :label="$t('settlement.bankAccount')" prop="bankAccount">
								<el-input v-model="formData.bankAccount" :placeholder="$t('settlement.bankAccountPlaceholder')" clearable />
							</el-form-item>

							<el-form-item :label="$t('settlement.realName')" prop="realName">
								<el-input v-model="formData.realName" :placeholder="$t('settlement.realNamePlaceholder')" clearable />
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="handleSubmit" :loading="loading" size="large" style="width: 120px">
									{{ $t('settlement.submitApply') }}
								</el-button>
								<el-button @click="handleReset" size="large" style="width: 120px">{{ $t('common.resetBtn') }}</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts" name="settlementApply" setup>
import { applyWithdraw, getMerchantBalance } from '/@/api/settlement';
import { useMessage } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 定义变量
const formRef = ref();
const loading = ref(false);
const availableBalance = ref(0);
const formData = ref({
	amount: null,
	type: 1,
	bankName: '',
	bankAccount: '',
	realName: '',
});

// 表单验证规则
const rules = computed(() => ({
	amount: [{ required: true, message: t('settlement.withdrawAmountPlaceholder'), trigger: 'blur' }],
	type: [{ required: true, message: t('settlement.withdrawType'), trigger: 'change' }],
	bankName: [{ required: true, message: t('settlement.bankNamePlaceholder'), trigger: 'blur' }],
	bankAccount: [{ required: true, message: t('settlement.bankAccountPlaceholder'), trigger: 'blur' }],
	realName: [{ required: true, message: t('settlement.realNamePlaceholder'), trigger: 'blur' }],
}));

// 提交申请
const handleSubmit = async () => {
	try {
		await formRef.value?.validate();

		// 验证提现金额不能超过可提现金额
		if (formData.value.amount && formData.value.amount > availableBalance.value) {
			useMessage().error(`${t('settlement.exceedBalance')} ¥${formatAmount(availableBalance.value)}`);
			return;
		}

		loading.value = true;

		const submitData: any = {
			amount: formData.value.amount,
			type: formData.value.type,
			bankAccount: formData.value.bankAccount,
			realName: formData.value.realName,
		};

		// 银行卡类型才需要银行名称
		if (formData.value.type === 1) {
			submitData.bankName = formData.value.bankName;
		}

		await applyWithdraw(submitData);
		useMessage().success(t('settlement.applySuccess'));
		handleReset();
	} catch (err: any) {
		if (err.msg) {
			useMessage().error(err.msg);
		}
	} finally {
		loading.value = false;
	}
};

// 重置表单
const handleReset = () => {
	formRef.value?.resetFields();
	formData.value = {
		amount: null,
		type: 1,
		bankName: '',
		bankAccount: '',
		realName: '',
	};
};

// 加载商户余额
const loadBalance = async () => {
	try {
		const res = await getMerchantBalance();
		if (res.code === 0 && res.data) {
			availableBalance.value = res.data.totalUseAmount || 0;
		}
	} catch (err) {
		// 加载余额失败
	}
};

// 格式化金额
const formatAmount = (amount: number) => {
	return amount ? amount.toFixed(2) : '0.00';
};

// 页面加载时获取余额
onMounted(() => {
	loadBalance();
});
</script>

<style scoped lang="scss">
.apply-card {
	margin-top: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.card-title {
		font-size: 18px;
		font-weight: bold;
		color: #303133;
	}

	.available-balance {
		font-size: 14px;
		color: #606266;

		.balance-amount {
			font-size: 18px;
			font-weight: bold;
			color: #f56c6c;
			margin-left: 5px;
		}
	}
}

:deep(.el-form) {
	padding: 20px 0;
}

:deep(.el-form-item) {
	margin-bottom: 28px;
}

:deep(.el-input-number) {
	width: 100%;

	.el-input__inner {
		text-align: left;
	}
}

:deep(.el-input__inner) {
	height: 40px;
	line-height: 40px;
}

:deep(.el-radio) {
	margin-right: 30px;
}
</style>