nsgk_mobile/src/views/register/userRegister.vue

<template>
  <div class="app-container" :style="{height:height+'px'}">
<!--    <van-nav-bar-->
<!--      title="个人用户注册"-->
<!--      left-arrow-->
<!--      fixed-->
<!--      placeholder-->
<!--      @click-left="onClickLeft"-->
<!--      style="background: linear-gradient(to right,#91E1CA,#E0F4E4);"-->
<!--    />-->
    <navBar title="个人用户注册" background="0" positionType="fixed"></navBar>
    <van-form @submit="getSubmit">
      <div class="block_box">

        <div class="block_tt"><i></i>用户信息</div>

        <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号，作为登录账号" required :rules="[{ required:true }]" />
<!--      <van-field-->
<!--        center-->
<!--        clearable-->
<!--        label="短信验证码"-->
<!--        placeholder="请输入短信验证码"-->
<!--        required-->
<!--        v-model="form.sms"-->
<!--        :rules="[{ required:true }]"-->
<!--      >-->
<!--        <template #button>-->
<!--          <van-button size="small" type="primary" native-type="button" :rules="[{ required:true }]">发送验证码</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
        <van-field v-model="form.password" type="password" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>
        <van-field v-model="confirmPassWord" type="password" label="确认密码" placeholder="请再次输入密码" required :rules="[{ required:true }]"/>
        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
        <van-field v-model="form.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
        <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
        <van-field name="uploader" label="身份证(正)" required :border="false"></van-field>
        <van-field name="uploader">
          <template #input>
            <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
          </template>
        </van-field>
        <p style="color: red;padding: 2vw 3vw;">*身份证照片</p>
      </div>

<!--      <van-divider>银行信息</van-divider>-->
      <div class="block_box">

        <div class="block_tt"><i></i>银行信息</div>
        <van-field name="uploader" label="银行卡" required :border="false"></van-field>
        <van-field name="uploader">
          <template #input>
            <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
          </template>
        </van-field>

        <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-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 }]"/>

        <van-field v-model="form.code" center clearable label="验证码" placeholder="图形验证码" required :rules="[{ required:true }]">
          <template #button>
            <img class="code-img" :src="codeUrl" @click="getCode" />
          </template>
        </van-field>
      </div>
      <div class="submit">
<!--        <p>我已阅读并同意<span>《农村产权交易信息服务平台会员注册协议》</span></p>-->
        <van-button round block type="info" color="#0DBCAA" native-type="submit">立即注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import {userRegister, attachmentUpload, realtimeBackList, depositList} from "@/api/register/index";
import {deleteUserImg, options, realtimeList} from "@/api/user";
import navBar from "@/components/common/nav_bar.vue";
export default {
  name: "userRegister",
  components: { navBar },
  data() {
    return {
      height:0,
      tel:'',
      confirmPassWord:'',
      form: {
        phone: "", //账号
        code: "", //验证码
        password: "", //密码
        realname: "", //姓名
        idCardNum: "", //身份证号
        address: "", //地址
        uuid:'',//图形验证码ID
        memberType:1,
        economicType:1,
        idCardPic :'',
        accountOpenCert:'',
        bankCardName:'',
        bankCardNum:'',
        bankAddress:'',
      },
      codeUrl:'',
      fileListSFZ:[],
      fileListYHK:[],
      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.getCode()
    this.getDicts("bank_type_all").then(response => {
      this.bankTypeOption = response.data;
    });
    this.getDicts("bank_account_type").then(response => {
      this.accountTypeOption = response.data;
    });
    this.height = document.body.clientHeight
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.form.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    getSubmit(){
      console.log(this.form)
      if (this.form.password!= this.confirmPassWord){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '两次密码输入不一致',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      if (this.form.idCardPic == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传身份证',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      if (this.form.accountOpenCert == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传银行卡',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      this.$toast.loading({
        message: '正在注册...',
        forbidClick: true,
      });
      this.form.accountType = '2';
      console.log(this.form);
      var that = this
      userRegister(this.form).then((res) => {
        this.$toast.clear();
        this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '注册成功',
          duration:"2000",
          onClose:function(){
            that.$router.push({path: '/login'})
          }
        })
      });
    },
    afterReadSFZ(file) {
      // 此时可以自行将文件上传至服务器
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      console.log(file)
      let params1 = new FormData();
      params1.append("file", file.file);
      attachmentUpload(params1).then((r1) => {
        this.form.idCardPic = r1.fileName;
      })
    },
    afterReadYHK(file) {
      // 此时可以自行将文件上传至服务器.
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      let params1 = new FormData();
      params1.append("file", file.file);
      attachmentUpload(params1).then((r1) => {
        this.form.accountOpenCert = r1.fileName;
      })
    },
    deleteFileSFZ(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListSFZ[elIndex].splice(fileIndex, 1)
        this.form.idCardPic = '';
      }
    },
    deleteFileYHK(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListYHK[elIndex].splice(fileIndex, 1)
        this.form.accountOpenCert = '';
      }
    },
    searchBankAddress(){
      let data = {
        sheng:this.form.sheng,
        shi:this.form.shi,
        bankType:this.form.bankType,
        bankDeposit:this.form.bankDeposit,
      }
      depositList(data).then(response => {
        if (response.rows.length<1){
          if (this.form.sheng==''||this.form.shi==''){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '请选择省市',
              duration:"1000",
            })
            return;
          }
          if (this.form.bankDeposit==''){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '请输入关键词',
              duration:"1000",
            })
            return;
          }
          realtimeBackList(data).then(response2 => {
            this.bankAddressOption = response2.data;
          });
        }else{
          this.bankAddressOption = response.rows;
        }
      });
    },

    onConfirmBankType(value){
      this.showBankType = false;
      this.form.bankAddress = '';
      this.form.payeePaymentLines = '';
      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.form.payeePaymentLines = value.payeePaymentLines;
      this.showBankAddress = false;
    },
    onConfirmAccountType(value){
      console.log(value)
      this.form.accountType = value.dictValue;
      this.accountType = value.dictLabel;
      this.showAccountType = false;
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #F4F8FB;
  .code-img {
    width: 220px;
  }
}

.submit{
  width: 90%;
  margin: 2vh auto 0;
  padding-bottom: 5vh;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
  .block_box{
    width: 94%;
    margin: 3vw auto;
    background: #ffffff;
    padding: 3vw 0;
    border-radius: 15Px;
    overflow: hidden;
    .block_tt{
      font-size: 20Px;
      display: flex;
      align-items: center;
      padding: 1.6vh 3vw;
      line-height: 1;
      font-weight: bold;
      i{
        display: block;
        width: 4Px;
        height: 16Px;
        background: #0CBEA6;
        margin-right: 5PX;
        border-radius: 5PX;
      }
      /*border-left: 3Px solid #0CBEA6;*/
    }
  }
</style>