nsgk_mobile/src/views/register/companyRegister.vue

<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="单位用户注册"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form @submit="getSubmit">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="经济类型"
        placeholder="点击选择经济类型"
        @click="showPicker = true"
        required
        :rules="[{ required:true }]"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field v-model="form.phone" type="tel" 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>
      <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.companyName" 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.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码" required :rules="[{ required:true }]"/>
      <van-field v-model="form.companyLicense" label="营业执照号" placeholder="请输入公司的营业执照号" required :rules="[{ required:true }]"/>
      <van-field v-model="form.address" label="联系地址" placeholder="请输入联系地址" />
      <van-field name="uploader" label="开户证明" required>
        <template #input>
          <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
        </template>
      </van-field>
      <div class="submit">
<!--        <p>我已阅读并同意<span>《农村产权交易信息服务平台会员注册协议》</span></p>-->
        <van-button round block type="info" color="#007E72" native-type="submit">立即注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import {base64Upload, userRegister} from "@/api/register/index";
export default {
  name: "companyRegister",
  data() {
    return {
      height:0,
      tel:'',
      value:'',
      confirmPassWord:'',
      showPicker: false,
      columns:[],
      fileListKHZM:[],
      form: {
        phone: "", //账号
        code: "", //验证码
        password: "", //密码
        realname: "", //姓名
        idCardNum: "", //身份证号
        address: "", //地址
        uuid:'',//图形验证码ID
        memberType:2,
        economicType:1,
        companyName:'',
        companyLicense:'',
        companyCode:''
      },
      codeUrl:''
    };
  },
  created() {
    this.getCode();
    this.getDicts("economic_type").then(res => {
      res.data.map(item => {
        this.columns.push(item.dictLabel);
      });
    });
    this.height = document.body.clientHeight
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.form.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
      this.form.supplyDemandType = index + 1 ;
    },
    getSubmit(){
      console.log(this.form)
      if (this.form.password!= this.confirmPassWord){
        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.form.accountType = '1';
      var that = this
      userRegister(this.form).then((res) => {
        this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '注册成功',
          duration:"2000",
          onClose:function(){
            that.$router.push({path: '/login'})
          }
        })
      });
    },
    afterReadKHZM(file) {
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      // 此时可以自行将文件上传至服务器
      let params1 = new FormData();
      params1.append("file", file.content);
      base64Upload(params1).then((r1) => {
        this.form.accountOpenCert = r1.fileName;
      })
    },
    deleteFileKHZM(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListKHZM[elIndex].splice(fileIndex, 1)
        this.form.accountOpenCert = '';
      }
    },

  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #FFF;
  .code-img {
    width: 220px;
  }
}
.submit{
  width: 90%;
  margin: 2vh auto 0;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
</style>