产权交易银行账户信息修改

src/views/user/accountSetting/bankInformation/index.vue

@@ -8,9 +8,95 @@
       @click-left="onClickLeft"
     />
     <van-form @submit="submitBank">
-      <van-field v-model="form.bankAddress" label="开户银行" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
       <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
       <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>
+
+      <van-field
+        v-model="accountType"
+        is-link
+        readonly
+        required
+        :rules="[{ required:true }]"
+        label="账户类型"
+        placeholder="请选择账户类型"
+        @click="showAccountType = true"
+      />
+      <van-popup v-model:show="showAccountType" position="bottom">
+        <van-picker
+          show-toolbar
+          value-key="dictLabel"
+          :columns="accountTypeOption"
+          @confirm="onConfirmAccountType"
+          @cancel="showAccountType = false"
+        />
+      </van-popup>
+
+      <van-divider>银行信息</van-divider>
+      <van-field
+        v-model="bankType"
+        is-link
+        readonly
+        required
+        :rules="[{ required:true }]"
+        label="所属银行"
+        placeholder="请选择所属银行"
+        @click="showBankType = true"
+      />
+      <van-popup v-model:show="showBankType" position="bottom">
+        <van-picker
+          show-toolbar
+          value-key="dictLabel"
+          :columns="bankTypeOption"
+          @confirm="onConfirmBankType"
+          @cancel="showArea = false"
+        />
+      </van-popup>
+
+      <van-field
+        v-model="sheng"
+        is-link
+        readonly
+        label="开户省市"
+        placeholder="请选择开户省市"
+        @click="showSheng = true"
+      />
+      <van-popup v-model:show="showSheng" position="bottom">
+        <van-picker
+          show-toolbar
+          value-key="label"
+          :columns="shengOption"
+          @confirm="onConfirmSheng"
+          @cancel="showSheng = false"
+        />
+      </van-popup>
+
+      <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入关键词"/>
+      <van-field
+        v-model="form.bankAddress"
+        label="开户银行"
+        placeholder="请输入开户银行"
+        required
+        :rules="[{ required:true }]"
+        readonly
+        @click="showBankAddress = true"
+      >
+        <template #button>
+          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
+        </template>
+      </van-field>
+      <van-popup v-model:show="showBankAddress" position="bottom">
+        <van-picker
+          show-toolbar
+          value-key="bankDeposit"
+          :columns="bankAddressOption"
+          @confirm="onConfirmBankAddress"
+          @cancel="showBankAddress = false"
+        />
+      </van-popup>
+
+
+      <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
+
       <div class="submit">
         <van-button round block type="info" color="#007E72" native-type="submit">保存</van-button>
       </div>
@@ -19,7 +105,7 @@
 </template>
 
 <script>
-import { getMember , userUpdate } from "@/api/user/index";
+import { getMember , userUpdate , options , realtimeList } from "@/api/user/index";
 import { getInfo } from "@/api/login/index";
 import {Dialog} from "vant";
   export default {
@@ -34,18 +120,59 @@ import {Dialog} from "vant";
           bankCardNum:'',
           bankAddress:'',
           id:'',
-        }
+        },
+        hcAreaInfoFieldName: {
+          text: "label",
+          value: "value",
+          children: "children",
+        },
+        bankTypeOption:[],
+        sheng:'',
+        shi:'',
+        bankType:'',
+        accountType:'',
+        bankDeposit:'',
+        showBankType:false,
+        showSheng :false,
+        shengOption:options,
+        showShi :false,
+        shiOption:[],
+        showBankAddress :false,
+        accountTypeOption:[],
+        showAccountType :false,
+        bankAddressOption:[],
       };
     },
     created() {
       this.height = document.body.clientHeight;
+      this.getDicts("bank_type_all").then(response => {
+          this.bankTypeOption = response.data;
+      });
+      this.getDicts("bank_account_type").then(response => {
+          this.accountTypeOption = response.data;
+      });
       this.getInfo();
     },
     methods: {
+      searchBankAddress(){
+        let data = {
+          sheng:this.form.sheng,
+          shi:this.form.shi,
+          bankType:this.form.bankType,
+          bankDeposit:this.bankDeposit,
+        }
+        realtimeList(data).then(response => {
+          console.log(response)
+          this.bankAddressOption = response.data;
+        });
+      },
       getInfo(){
         getInfo().then(response => {
           getMember(response.user.userId).then(response => {
             console.log(response)
+            this.form = response.data;
+            this.bankType = this.selectDictLabel(this.bankTypeOption,response.data.bankType);
+            this.accountType = this.selectDictLabel(this.accountTypeOption,response.data.accountType);
             this.form.bankCardName = response.data.bankCardName;
             this.form.bankCardNum = response.data.bankCardNum;
             this.form.bankAddress = response.data.bankAddress;
@@ -64,7 +191,31 @@ import {Dialog} from "vant";
             })
           }
         });
-      }
+      },
+      onConfirmBankType(value){
+        this.showBankType = false;
+        this.bankType = value.dictLabel;
+        this.form.bankType = value.dictValue;
+      },
+      onConfirmSheng(value){
+        console.log(value)
+        this.showSheng = false;
+        this.form.sheng = value[0];
+        this.form.shi = value[1];
+        this.sheng = value.join('/');
+      },
+      onConfirmBankAddress(value){
+        console.log(value)
+        this.form.bankAddress = value.bankDeposit;
+        this.showBankAddress = false;
+      },
+      onConfirmAccountType(value){
+        console.log(value)
+        this.form.accountType = value.dictValue;
+        this.accountType = value.dictLabel;
+        this.showAccountType = false;
+      },
+
     },
   };
 </script>