update

src/business/bank/index.ts

@@ -132,11 +132,33 @@ export function useDoBankSign() {
     const { userInfo } = useUserStore()
     const loading = shallowRef(false)
     const bankInfo = shallowRef<Model.BankAccountSignRsp>()
-
     const system_1010 = shallowRef(getSystemParamValue('1010') ?? '1')
-    
-    /// 托管银行信息
-    const cusSignBank = shallowRef<Model.CusBankSignBankRsp>()
+    const cusSignBank = shallowRef<Model.CusBankSignBankRsp>() /// 托管银行信息
+
+    /// 数据
+    const formData = reactive<Partial<Proto.t2bBankSignReq>>({
+        AccountType: useStore.userInfo?.userinfotype,
+        IsForce: 0,
+        AgentCertType: 0,
+        BankCardType: 0,
+        BankAccountType: useStore.userInfo?.userinfotype,
+        AccountCode: accountStore.currentAccountId.toString(),
+        CertID: decryptAES(userInfo?.cardnum ?? ''),
+        CertType: userInfo?.cardtypeid.toString(),
+        BankAccountName: userInfo?.customername,
+        MobilePhone: userInfo?.mobile2,
+        BankAccountNo: decryptAES(userInfo.bankaccount),
+        AccountName: userInfo?.customername,
+        OpenBankAccId: userInfo.bankid
+    })
+
+    /// 数据
+    const swsFormData = reactive<Partial<Proto.t2bSWSVerificationCodeReq>>({
+        Mobile: useStore.userInfo?.mobile2,
+        AccountCode: accountStore.currentAccountId.toString(),
+        extend_info: JSON.stringify({ "sex": 1 })
+    })
+
     /// 查询签约银行信息
     const request = queryCusBankSignBank().then((res) => {
         if (res.data.length) {
@@ -145,6 +167,9 @@ export function useDoBankSign() {
             formData.Currency = data.currency
             formData.CusBankID = data.cusbankid
             formData.TradeDate = data.tradedate
+
+            swsFormData.CusBankID = data.cusbankid
+            swsFormData.TradeDate = data.tradedate
         }
     })
 
@@ -170,22 +195,20 @@ export function useDoBankSign() {
         }
     })
 
-    /// 数据
-    const formData = reactive<Partial<Proto.t2bBankSignReq>>({
-        AccountType: useStore.userInfo?.userinfotype,
-        IsForce: 0,
-        AgentCertType: 0,
-        BankCardType: 0,
-        BankAccountType: useStore.userInfo?.userinfotype,
-        AccountCode: accountStore.currentAccountId.toString(),
-        CertID: decryptAES(userInfo?.cardnum ?? ''),
-        CertType: userInfo?.cardtypeid.toString(),
-        BankAccountName: userInfo?.customername,
-        MobilePhone: userInfo?.mobile2,
-        BankAccountNo: decryptAES(userInfo.bankaccount),
-        AccountName: userInfo?.customername,
-        OpenBankAccId: userInfo.bankid
-    })
+    // 银行获取手机验证码
+    const smsVerificationCode = async () => {
+        await request
+        loading.value = true
+
+        return t2bSMSVerificationCode({
+            data: {
+                ExtOperatorID: new Date().getTime(),
+                ...swsFormData,
+            }
+        }).finally(() => {
+            loading.value = false
+        })
+    }
 
     const onSubmit = async () => {
         await request
@@ -211,6 +234,7 @@ export function useDoBankSign() {
         formData,
         banklist,
         onSubmit,
+        smsVerificationCode,
         system_1010,
         bankInfo
     }
@@ -349,46 +373,6 @@ export function useQueryCusBankSignBank() {
     return { cusBank, banklist, request }
 }
 
-/// 银行获取手机验证码请求
-export function useT2bSMSVerificationCode() {
-    const loading = shallowRef(false)
-    /// 查询签约银行信息
-    const request = queryCusBankSignBank().then((res) => {
-        if (res.data.length) {
-            const data = res.data[0]
-            swsFormData.CusBankID = data.cusbankid
-            swsFormData.TradeDate = data.tradedate
-        }
-    })
-
-    /// 数据
-    const swsFormData = reactive<Partial<Proto.t2bSWSVerificationCodeReq>>({
-        Mobile: useStore.userInfo?.mobile2,
-        AccountCode: accountStore.currentAccountId.toString(),
-        extend_info: JSON.stringify({ "sex": 1 })
-    })
-
-    const smsVerificationCode = async () => {
-        await request
-        loading.value = true
-
-        return t2bSMSVerificationCode({
-            data: {
-                ExtOperatorID: new Date().getTime(),
-                ...swsFormData,
-            }
-        }).finally(() => {
-            loading.value = false
-        })
-    }
-
-    return {
-        loading,
-        swsFormData,
-        smsVerificationCode
-    }
-}
-
 /// 云缴费代扣解约请求
 export function useDoYJF_WithholdSignOut() {
     /// 获取UserId

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

@@ -2,29 +2,32 @@
     <app-modal direction="right-top" height="100%" width="100%" v-model:show="showModal" :refresh="refresh">
         <app-view class="g-form">
             <template #header>
-                <app-navbar :title="isedit ? $t('banksign.modifybanksign') : $t('banksign.addbanksign')" @back="closed" />
+                <app-navbar :title="isedit ? $t('banksign.modifybanksign') : $t('banksign.addbanksign')"
+                    @back="closed" />
             </template>
             <Form ref="formRef" class="g-form__container" @submit="formSubmit">
                 <CellGroup inset>
-                    <Field name="OpenBankAccId" :label="$t('banksign.bankname')" :rules="formRules.OpenBankAccId" is-link>
-                        <template #input>
-                            <app-select :readonly="bankaccount != ''" v-model="formData.OpenBankAccId" :placeholder="$t('banksign.Pleaseselectyourbank')" :options="banklist"
-                                :optionProps="{ label: 'bankname', value: 'bankid' }" />
-                        </template>
-                    </Field>
-                    <Field type="number" name="BankNo" :label="$t('banksign.bankaccountno')" :readonly="bankaccount != ''" maxlength="30" v-model.trim="formData.BankAccountNo"
-                    :placeholder="$t('banksign.Pleaseenterbankaccountno')" :rules="formRules.BankAccountNo" />
-                    <Field name="AccountName" :label="$t('banksign.bankaccountname')" readonly v-model="formData.AccountName" :placeholder="$t('banksign.Pleaseenterbankaccountname')"
+                    <Field name="OpenBankAccId" :label="$t('banksign.bankname')" v-model="selectedBankName"
+                        :placeholder="$t('banksign.Pleaseselectyourbank')" :rules="formRules.OpenBankAccId"
+                        @click-input="showSelect = true" readonly is-link />
+                    <Field type="number" name="BankNo" :label="$t('banksign.bankaccountno')"
+                        :readonly="bankaccount != ''" maxlength="30" v-model.trim="formData.BankAccountNo"
+                        :placeholder="$t('banksign.Pleaseenterbankaccountno')" :rules="formRules.BankAccountNo" />
+                    <Field name="AccountName" :label="$t('banksign.bankaccountname')" readonly
+                        v-model="formData.AccountName" :placeholder="$t('banksign.Pleaseenterbankaccountname')"
                         :rules="formRules.AccountName" />
-                    <Field name="MobilePhone" :label="$t('banksign.mobilephone')" :readonly="mobile2 != ''" maxlength="50"
-                        v-model="formData.MobilePhone" :placeholder="$t('banksign.Pleaseenteryourmobilephonenumber')" :rules="formRules.MobilePhone" />
+                    <Field name="MobilePhone" :label="$t('banksign.mobilephone')" :readonly="mobile2 != ''"
+                        maxlength="50" v-model="formData.MobilePhone"
+                        :placeholder="$t('banksign.Pleaseenteryourmobilephonenumber')" :rules="formRules.MobilePhone" />
                     <template v-for="(item, index) in configs" :key="index">
                         <template v-if="(item.fieldcode === 'verify_code')">
-                            <Field v-if="(bankInfo === undefined) && showExtendInfo(item)" v-model="item.value" type="digit"
-                                name="vcode" :label="item.fieldname" :placeholder="$t('common.required')" autocomplete="off">
+                            <Field v-if="(bankInfo === undefined) && showExtendInfo(item)" v-model="item.value"
+                                type="digit" name="vcode" :label="item.fieldname" :placeholder="$t('common.required')"
+                                autocomplete="off">
                                 <template #button>
                                     <Button size="small" type="danger" :disabled="isCountdown" @click="sendVerifyCode">
-                                        <span v-if="isCountdown">{{ $t('banksign.sendagain') }}({{ currentTime.seconds }})</span>
+                                        <span v-if="isCountdown">{{ $t('banksign.sendagain') }}({{ currentTime.seconds
+                                            }})</span>
                                         <span v-else>{{ $t('banksign.verificationcode') }}</span>
                                     </Button>
                                 </template>
@@ -33,28 +36,32 @@
                         <template v-else-if="(item.fieldcode === 'bank_branch_name')">
                             <Field v-if="showExtendInfo(item)" name="OpenBankName" :label="item.fieldname"
                                 v-model="item.value" maxlength="100" right-icon="search"
-                                :placeholder="$t('common.pleaseenter')+`${item.fieldname}`" :rules="formRules.OpenBankName"
-                                @click-right-icon="showSearch = true" />
+                                :placeholder="$t('common.pleaseenter') + `${item.fieldname}`"
+                                :rules="formRules.OpenBankName" @click-right-icon="showSearch = true" />
                         </template>
                         <template v-else-if="(item.fieldcode === '100')">
                             <Field v-if="showExtendInfo(item)" type="number" name="OpenBankNo" :label="item.fieldname"
-                                v-model="item.value" maxlength="50" :placeholder="$t('common.pleaseenter')+`${item.fieldname}`"
+                                v-model="item.value" maxlength="50"
+                                :placeholder="$t('common.pleaseenter') + `${item.fieldname}`"
                                 :rules="formRules.OpenBankNo" />
                         </template>
                         <template v-else>
                             <Field v-if="showExtendInfo(item)" :name="item.fieldcode" :label="item.fieldname"
                                 :readonly="item.fieldcode === 'legal_name' && legalpersonname != ''"
-                                v-model="item.value" maxlength="50" :placeholder="$t('common.pleaseenter')+`${item.fieldname}`" />
+                                v-model="item.value" maxlength="50"
+                                :placeholder="$t('common.pleaseenter') + `${item.fieldname}`" />
                         </template>
                     </template>
                 </CellGroup>
             </Form>
             <template #footer>
                 <div class="g-form__footer inset">
-                    <Button type="danger" round block @click="formRef?.submit()">{{ bankInfo ? $t('operation.modify') : $t('operation.submit') }}</Button>
+                    <Button type="danger" round block @click="formRef?.submit()">{{ bankInfo ? $t('operation.modify') :
+                        $t('operation.submit') }}</Button>
                 </div>
             </template>
-            <Search v-model:show="showSearch" @change="onBankChange" />
+            <SelectBank v-model:show="showSelect" :data-list="banklist" @change="onSelectBankChange" />
+            <SearchBank v-model:show="showSearch" @change="onSearchBankChange" />
         </app-view>
     </app-modal>
 </template>
@@ -64,24 +71,26 @@
 import { shallowRef, ref, computed, defineAsyncComponent } from 'vue'
 import { CellGroup, Button, Field, Form, FormInstance, FieldRule, showFailToast } from 'vant'
 import { fullloading, dialog } from '@/utils/vant'
-import { useDoBankSign, useDoCusBankExtendConfigs, useT2bSMSVerificationCode } from '@/business/bank'
+import { useDoBankSign, useDoCusBankExtendConfigs } from '@/business/bank'
 import { validateRules } from '@/constants/regex'
 import { useCountDown } from '@vant/use'
 import { useUserStore, i18n } from '@/stores'
 import AppModal from '@/components/base/modal/index.vue'
-import AppSelect from '@mobile/components/base/select/index.vue'
 
+// 选择银行
+const SelectBank = defineAsyncComponent(() => import('./select-bank/index.vue'))
 // 搜索支行
-const Search = defineAsyncComponent(() => import('./search/index.vue'))
+const SearchBank = defineAsyncComponent(() => import('./search-bank/index.vue'))
 
-const { formData, onSubmit, banklist, bankInfo, system_1010 } = useDoBankSign()
+const { formData, onSubmit, banklist, bankInfo, system_1010, smsVerificationCode } = useDoBankSign()
 const showModal = shallowRef(true)
-const showSearch = shallowRef(false) // 弹出客户搜索界面
 const refresh = shallowRef(false) // 是否刷新父组件数据
 const formRef = shallowRef<FormInstance>()
+const showSelect = shallowRef(false) // 弹出客户选择界面
+const showSearch = shallowRef(false) // 弹出客户搜索界面
+const selectedBankName = shallowRef('') // 选中的银行名称
 const { configs } = useDoCusBankExtendConfigs(1)
 const userStore = useUserStore()
-const { smsVerificationCode } = useT2bSMSVerificationCode()
 const { legalpersonname, mobile2, bankaccount, userinfotype } = userStore.userInfo
 
 const { global: { t } } = i18n
@@ -128,7 +137,12 @@ const sendVerifyCode = () => {
     })
 }
 
-const onBankChange = (item: Model.BankBranChnumInfoRsp) => {
+const onSelectBankChange = (item: Model.BankInfoRsp) => {
+    selectedBankName.value = item.bankname
+    formData.OpenBankAccId = item.bankid
+}
+
+const onSearchBankChange = (item: Model.BankBranChnumInfoRsp) => {
     configs.value.forEach((e) => {
         switch (e.fieldcode) {
             case 'bank_branch_name':
@@ -232,8 +246,9 @@ const formSubmit = () => {
 // 关闭弹窗
 const closed = (isRefresh = false) => {
     refresh.value = isRefresh
-    if (showSearch.value) {
+    if (showSearch.value || showSelect.value) {
         showSearch.value = false
+        showSelect.value = false
     } else {
         showModal.value = false
     }

src/packages/mobile/views/bank/sign/components/edit/search/index.vue → src/packages/mobile/views/bank/sign/components/edit/search-bank/index.vue

@@ -58,7 +58,7 @@ const { dataList, runAsync } = useRequest(queryBankBranChnumInfo, {
 })
 
 const onSearch = (val: string) => {
-    if (val.length >= 3) {
+    if (val) {
         fullloading((hideLoading) => {
             runAsync({
                 branchname: val

src/packages/mobile/views/bank/sign/components/edit/select-bank/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <app-modal direction="right-top" height="100%" width="100%" v-model:show="showModal">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="选择银行">
+                    <template #footer>
+                        <Form action="/">
+                            <Search placeholder="请输入银行名称" v-model="keyword" />
+                        </Form>
+                    </template>
+                </app-navbar>
+            </template>
+            <RadioGroup v-model="checked" style="padding-bottom: 50px;" v-if="bankList.length">
+                <CellGroup title="选择银行">
+                    <template v-for="(item, index) in bankList" :key="index">
+                        <Cell :title="item.bankname" :label="item.bankid" clickable @click="onChange(item)">
+                            <template #icon>
+                                <Radio :name="item" style="padding: 0 10px;" />
+                            </template>
+                        </Cell>
+                    </template>
+                </CellGroup>
+            </RadioGroup>
+            <Empty :description="$t('banksign.search.nodatas')" v-else />
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed, toRaw, PropType } from 'vue'
+import { Form, Search, Empty, Cell, CellGroup, RadioGroup, Radio } from 'vant'
+import AppModal from '@/components/base/modal/index.vue'
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    dataList: {
+        type: Array as PropType<Model.BankInfoRsp[]>,
+        default: () => []
+    }
+})
+
+const emit = defineEmits(['update:show', 'change'])
+const keyword = shallowRef('')
+const checked = shallowRef<Model.BankInfoRsp>()
+
+const showModal = computed({
+    get: () => props.show,
+    set: (val) => emit('update:show', val)
+})
+
+const bankList = computed(() => {
+    const filteredList = props.dataList.filter(e => {
+        const a = e.bankname.toLowerCase()
+        const b = keyword.value.toLowerCase()
+        return !b || a.includes(b)
+    })
+    return filteredList.slice(0, 30)
+})
+
+const onChange = (item: Model.BankInfoRsp) => {
+    checked.value = item
+    showModal.value = false
+    emit('change', toRaw(item))
+}
+</script>

src/packages/pc/views/account/sign/components/sign/index.vue

@@ -5,28 +5,31 @@
         <el-form ref="formRef" class="el-form--horizontal" label-width="120px" :model="formData" :rules="formRules">
             <el-form-item label="开户银行" prop="OpenBankAccId">
                 <el-select effect="dark" v-model="formData.OpenBankAccId" :readonly="bankaccount != ''">
-                    <el-option :label="item.bankname" :value="item.bankid" v-for="(item, index) in banklist" :key="index" />
+                    <el-option :label="item.bankname" :value="item.bankid" v-for="(item, index) in banklist"
+                        :key="index" />
                 </el-select>
             </el-form-item>
             <el-form-item label="银行卡号" prop="BankAccountNo">
-                <el-input type="number" name="BankAccountNo" :readonly="bankaccount != ''" placeholder="银行卡号" :maxlength="30"
-                    v-model="formData.BankAccountNo" :rules="formRules.BankAccountNo" />
+                <el-input type="number" name="BankAccountNo" :readonly="bankaccount != ''" placeholder="银行卡号"
+                    :maxlength="30" v-model="formData.BankAccountNo" :rules="formRules.BankAccountNo" />
             </el-form-item>
             <el-form-item label="名称" prop="AccountName">
                 <el-input name="AccountName" readonly placeholder="银行卡账户名" v-model="formData.AccountName"
                     :rules="formRules.AccountName" />
             </el-form-item>
             <el-form-item label="手机号码" prop="MobilePhone">
-                <el-input name="MobilePhone" :readonly="mobile2 != ''" maxlength="50"
-                    placeholder="请输入手机号码" v-model="formData.MobilePhone" />
+                <el-input name="MobilePhone" :readonly="mobile2 != ''" maxlength="50" placeholder="请输入手机号码"
+                    v-model="formData.MobilePhone" />
             </el-form-item>
         </el-form>
-        <el-form ref="extendRef" class="el-form--horizontal" label-width="120px" :model="extendModel" :rules="formRules">
+        <el-form ref="extendRef" class="el-form--horizontal" label-width="120px" :model="extendModel"
+            :rules="formRules">
             <template v-for="(item, index) in configs" :key="index">
                 <template v-if="(item.fieldcode === 'verify_code')">
                     <el-form-item :label="item.fieldname" :prop="item.fieldcode"
                         v-if="bankInfo === undefined && showExtendInfo(item)">
-                        <el-input :placeholder="t('common.pleaseenter')" type="number" v-model="item.value" :rules="formRules.vcode">
+                        <el-input :placeholder="t('common.pleaseenter')" type="number" v-model="item.value"
+                            :rules="formRules.vcode">
                             <template #append>
                                 <el-button size="small" type="primary" :disabled="isCountdown" @click="sendVerifyCode">
                                     <span v-if="isCountdown">重新发送({{ seconds }})</span>
@@ -38,9 +41,9 @@
                 </template>
                 <template v-else-if="(item.fieldcode === 'bank_branch_name')">
                     <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
-                        <el-select effect="dark" :placeholder="t('common.pleaseenter')" v-model="item.value" value-key="branchnum" :loading="searchLoading"
-                            :remote-method="remoteMethod" filterable remote clearable allow-create @change="onBankChange"
-                            @clear="dataList = []">
+                        <el-select effect="dark" :placeholder="t('common.pleaseenter')" v-model="item.value"
+                            value-key="branchnum" :loading="searchLoading" :remote-method="remoteMethod" filterable
+                            remote clearable allow-create @change="onBankChange" @clear="dataList = []">
                             <template v-for="(item, index) in dataList" :key="index">
                                 <el-option :label="item.branchname" :value="item" />
                             </template>
@@ -49,20 +52,22 @@
                 </template>
                 <template v-else-if="(item.fieldcode === '100')">
                     <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
-                        <el-input maxlength="50" type="number" :placeholder="t('common.pleaseenter')" v-model="item.value" />
+                        <el-input maxlength="50" type="number" :placeholder="t('common.pleaseenter')"
+                            v-model="item.value" />
                     </el-form-item>
                 </template>
                 <template v-else>
                     <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
-                        <el-input :readonly="item.fieldcode === 'legal_name' && legalpersonname != ''" maxlength="50" 
-                        :placeholder="t('common.pleaseenter')" v-model="item.value" />
+                        <el-input :readonly="item.fieldcode === 'legal_name' && legalpersonname != ''" maxlength="50"
+                            :placeholder="t('common.pleaseenter')" v-model="item.value" />
                     </el-form-item>
                 </template>
             </template>
         </el-form>
         <template #footer>
             <el-button type="info" @click="onCancel(false)">{{ t('operation.cancel') }}</el-button>
-            <el-button type="primary" @click="formSubmit">{{ bankInfo?.signstatus != undefined ? t('operation.modify') : t('operation.submit') }}</el-button>
+            <el-button type="primary" @click="formSubmit">{{ bankInfo?.signstatus != undefined ? t('operation.modify') :
+                t('operation.submit') }}</el-button>
         </template>
     </app-drawer>
 </template>
@@ -73,16 +78,15 @@ import { ElMessage, FormInstance, FormRules } from 'element-plus'
 import { validateRules } from '@/constants/regex'
 import { useRequest } from '@/hooks/request'
 import { queryBankBranChnumInfo } from '@/services/api/bank'
-import { useDoBankSign, useDoCusBankExtendConfigs, useT2bSMSVerificationCode } from '@/business/bank'
+import { useDoBankSign, useDoCusBankExtendConfigs } from '@/business/bank'
 import { useUserStore, i18n } from '@/stores'
 import service from '@/services'
 import AppDrawer from '@pc/components/base/drawer/index.vue'
 
 const { t } = i18n.global
 
-const { formData, onSubmit, banklist, bankInfo, loading, system_1010 } = useDoBankSign()
+const { formData, onSubmit, banklist, bankInfo, loading, system_1010, smsVerificationCode } = useDoBankSign()
 const { configs } = useDoCusBankExtendConfigs(1)
-const { smsVerificationCode } = useT2bSMSVerificationCode()
 
 const userStore = useUserStore()
 const show = ref(true)