THJ_Mobile/src/packages/mobile/views/bank/wallet/components/withdraw/index.vue

<template>
    <app-view class="g-form bank-wallet-withdraw">
        <Form ref="formRef" class="g-form__container" @submit="formSubmit">
            <CellGroup inset>
                <Field class="form-field" label="提现金额" v-model="formData.Amount" :rules="formRules.Amount">
                    <template #input>
                        <input v-model="formData.Amount" placeholder="请填写提现金额" />
                        <span class="form-field__tips">可出金额：{{ fund.AvailableOutMoney }}</span>
                    </template>
                </Field>
                <Field label="开户银行">
                    <template #input>
                        {{ sign.bankname }}
                    </template>
                </Field>
                <Field label="银行卡号">
                    <template #input>
                        {{ sign.bankaccountno }}
                    </template>
                </Field>
                <Field label="姓名">
                    <template #input>
                        {{ sign.bankaccountname }}
                    </template>
                </Field>
                <Field label="支行名称">
                    <template #input>
                        {{ sign.branchbankname }}
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <template #footer>
            <div class="g-form__footer">
                <Button round block type="primary" @click="formRef?.submit()">确定</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { useDoWithdraw, useAccountFundInfo } from '@/business/bank';
import { Form, Field, CellGroup, FormInstance, Button, FieldRule, Toast } from 'vant'
import { shallowRef } from 'vue'
import { fullloading, dialog } from '@/utils/vant'
import { useNavigation } from '@/hooks/navigation'

const { formData, onSubmit, sign } = useDoWithdraw()
/// 资金账户信息
const { fund } = useAccountFundInfo()
const { router } = useNavigation()
const formRef = shallowRef<FormInstance>()

// 表单验证规则
const formRules: { [key in keyof Proto.t2bBankWithdrawReq]?: FieldRule[] } = {
    Amount: [{
        required: true,
        message: '请输入出金金额',
        validator: (val) => {
            if (val <= (fund.value.AvailableOutMoney ?? 0.0)) {
                return true
            }
            return '超过可出金额'
        }
    }]
}

const formSubmit = () => {
    fullloading((hideLoading) => {
        onSubmit().then(() => {
            hideLoading()
            dialog('出金提交申请成功，请耐心等待审核。').then(() => {
                router.back()
            })
        }).catch((err) => {
            Toast.fail(err)
        })
    })
}
</script>

<style lang="less">
@import './index.less';
</style>