提交文件

src/packages/mobile/views/bank/sign/components/edit/Index.vue

@@ -0,0 +1,98 @@
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar :title="bankInfo ? '修改签约账户' : '添加签约账户'" @back="closed" />
+            </template>
+            <Form ref="formRef" class="g-form__container" @submit="formSubmit">
+                <CellGroup inset>
+                    <Field name="OpenBankAccId" label="开户银行" :rules="formRules.OpenBankAccId" is-link>
+                        <template #input>
+                            <app-select v-model="formData.OpenBankAccId" placeholder="请选择开户银行" :options="banklist"
+                                :optionProps="{ label: 'bankname', value: 'bankid' }" />
+                        </template>
+                    </Field>
+                    <Field name="BankNo" label="银行卡号" v-model="formData.BankAccountNo" placeholder="请输入银行卡账号"
+                        :rules="formRules.BankAccountNo" />
+                    <Field name="AccountName" label="姓名" readonly v-model="formData.BankAccountName" placeholder="请输入银行卡账户名"
+                        :rules="formRules.BankAccountName" />
+                    <Field name="BranchBankName" label="支行名称" v-model="formData.OpenBankName" placeholder="请输入银行卡支行名称"
+                        :rules="formRules.OpenBankName" />
+                </CellGroup>
+            </Form>
+            <template #footer>
+                <div class="g-form__footer">
+                    <Button type="primary" round block @click="formRef?.submit()">{{ bankInfo ? '修改' : '提交' }}</Button>
+                </div>
+            </template>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+
+import { shallowRef } from 'vue'
+import { CellGroup, Button, Field, Form, FormInstance, FieldRule, showFailToast } from 'vant'
+import { fullloading, dialog } from '@/utils/vant'
+import { useDoBankSign } from '@/business/bank'
+import AppSelect from '@mobile/components/base/select/index.vue'
+import { validateRules } from '@/constants/regex'
+import AppModal from '@/components/base/modal/index.vue'
+
+const { formData, onSubmit, banklist, bankInfo } = useDoBankSign()
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+const formRef = shallowRef<FormInstance>()
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.t2bBankSignReq]?: FieldRule[] } = {
+    OpenBankAccId: [{
+        message: '请选择银行信息',
+        validator: () => {
+            return !!formData.OpenBankAccId
+        }
+    }],
+    BankAccountNo: [{
+        required: true,
+        message: '请输入银行卡账号',
+        validator: (val) => {
+            if (validateRules.bankcardno.validate(val)) {
+                return true
+            }
+            return validateRules.bankcardno.message
+        }
+    }],
+    BankAccountName: [{
+        required: true,
+        message: '请输入银行卡账户名',
+    }],
+    OpenBankName: [{
+        required: true,
+        message: '请输入银行卡支行名称',
+    }],
+}
+
+const formSubmit = () => {
+    fullloading((hideLoading) => {
+        onSubmit().then(() => {
+            hideLoading()
+            dialog(bankInfo ? '签约信息修改成功' : '签约提交成功，请耐心等待审核。').then(() => {
+                closed(true)
+            })
+        }).catch((err) => {
+            showFailToast(err)
+        })
+    })
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>