nsgk_mobile/src/views/lawEnforcement/register/userRegister.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" style="padding-bottom: 22%;">
      <van-field v-model="form.name" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
      <van-field v-model="form.cardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
      <van-field name="radio" label="性别" :rules="[{ required:true }]" required>
        <template #input>
          <van-radio-group v-model="form.sex" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="nationText"
        is-link
        readonly
        label="民族"
        placeholder="点击选择民族"
        @click="showNation = true"
      />
      <van-popup v-model:show="showNation" position="bottom">
        <van-picker
          title="民族"
          show-toolbar
          :columns="nationOptions"
          @confirm="onConfirmNation"
          value-key="dictLabel"
        />
<!--        @confirm="onConfirm"-->
<!--        @cancel="onCancel"-->
<!--        @change="onChange"-->
      </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.birthday"
        is-link
        readonly
        name="datetimePicker"
        label="出生日期"
        placeholder="点击选择出生日期"
        @click="showDate = true"
      />
      <van-popup v-model:show="showDate" position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmBirthday"
          @cancel="showDate = false"
        />
      </van-popup>
      <van-field v-model="form.companyPosition" label="工作单位及职务" placeholder="请输入工作单位及职务" required :rules="[{ required:true }]"/>
      <van-field v-model="form.uniformCode" label="统一社会信用代码" placeholder="请输入统一社会信用代码" required :rules="[{ required:true }]"/>
      <van-field
        v-model="form.deptId"
        is-link
        readonly
        name="area"
        label="所在地区"
        placeholder="点击选择地区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="deptOptions"
          @confirm="onConfirmAdress"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field v-model="form.zihao" label="字号名称" placeholder="请输入字号名称" required :rules="[{ required:true }]"/>
      <van-field v-model="form.address" label="详细地址" placeholder="请输入详细地址" required :rules="[{ required:true }]"/>
      <van-field v-model="form.businessType" label="经营类别" placeholder="请输入经营类别" required :rules="[{ required:true }]"/>
      <van-field v-model="form.businessScope" label="经营范围" placeholder="请输入经营范围" required :rules="[{ required:true }]"/>
      <div class="submit">
        <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 { userRegister,treeselect } from "@/api/register/index";
import { areaList } from '@vant/area-data';
export default {
  name: "userRegister",
  data() {
    return {
      height:0,
      tel:'',
      result:'',
      confirmPassWord:'',
      areaList:areaList,
      showArea:false,
      showDate:false,
      showNation:false,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      form: {
        sex:'0'
      },
      codeUrl:'',
      nationText:'',
      // 民族字典
      nationOptions: [],
      // 部门列表
      deptOptions: [],
    };
  },
  created() {
    this.getCode()
    this.height = document.body.clientHeight
    this.getDicts("nationality").then(response => {
      this.nationOptions = response.data;
    });
    /** 查询部门下拉树结构 */
    treeselect().then((response) => {
      this.deptOptions = response.data;
    });
  },
  methods: {
    onConfirmAdress(areaValues){
      this.showArea = false;
      this.result = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
    },
    onConfirmBirthday(value){
      console.log(this.timeFormat(value))
      this.showDate = false;
      this.form.birthday = this.timeFormat(value);
    },
    onConfirmNation(value,index){
      this.showNation = false;
      this.nationText = value.dictLabel;
      this.form.nation = value.dictValue;
    },
    timeFormat(time) { // 时间格式化 2019-09-08

      let year = time.getFullYear();

      let month = time.getMonth() + 1;

      let day = time.getDate();

      return year + '-' + month + '-' + day

    },
    getCode() {
      getCodeImg().then((res) => {
        this.form.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    getSubmit(){
      console.log(this.form)
      userRegister(this.form).then((res) => {
        console.log(res)
      });
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #FFF;
  .code-img {
    width: 220px;
  }
}
.submit{
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #FFF;
  padding: 5% 3%;
  box-shadow: 0px -5px 9px #eee;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
</style>