fire_control/src/view/system/register.vue

<template>
  <el-form class="panel" :model="form" @submit.stop label-width="70px">
    <h2>注册</h2>
    
    <div class="stop-psw">
      <input type="text">
      <input type="password" name="" id="">
    </div>
    
    <el-form-item class="panel-form-item" label="选择架构">
      <p class="err-info">{{verification.organize}}</p>
      <com-company v-model="form.organize" hideAll />
    </el-form-item>
    <el-form-item class="panel-form-item" label="姓名">
      <p class="err-info">{{verification.name}}</p>
      <el-input v-model="form.name" placeholder="填写写姓名，限15字" maxlength="15"></el-input>
    </el-form-item>
    <el-form-item class="panel-form-item" label="手机号">
      <p class="err-info">{{verification.phone}}</p>
      <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
    </el-form-item>
    <el-form-item class="panel-form-item" label="验证码">
      <p class="err-info">{{verification.code}}</p>
      <el-input v-model="form.code" placeholder="请输入验证码">
        <template v-slot:suffix>
          <el-button type="primary" plain class="input-inner-btn" @click="sendCode" :disabled="msgStatus.status !== 0">
            {{msgStatus.status === 2 ? `${msgStatus.miss}S后可重新发送` : '获取验证码' }}
          </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="panel-form-item" label="设置密码">
      <p class="err-info">{{verification.psw}}</p>
      <el-input v-model="form.psw" placeholder="请输入8-16位数字、英文大小写组合密码" type="password"></el-input>
    </el-form-item>
    <el-form-item class="panel-form-item" label="确认密码">
      <p class="err-info">{{verification.regPsw}}</p>
      <el-input v-model="form.regPsw" placeholder="请确认密码" type="password"></el-input>
    </el-form-item>
    
    <div class="panel-form-item">
      <el-button type="primary" class="fill" @click="submitClick">注册</el-button>
    </div>

    <div class="more">
      <a @click="$router.replace({name: 'login'})">已注册，去登录</a>
    </div>
  </el-form>
</template>

<script>
import { reactive, watch } from 'vue'
import axios from 'axios'
import { userReg, sendUserMsg } from '@/request/config'
import comCompany from "@/components/company-select";
import { PHONE, PSW } from '@/constant/REG'
import { openErrorMsg } from '@/request/errorMsg.js'
import { encryption } from '@/util'

export default {
  name: 'login',
  setup() {
    const form = reactive({
      organize: '',
      name: '',
      phone: '',
      code: '',
      psw: '',
      regPsw: '',
    })
    const verification = reactive({ 
      organize: '',
      name: '',
      phone: '',
      code: '',
      psw: '',
      regPsw: '',
    })
    const msgStatus = reactive({status: 0, miss: 0})

    const checkForm = (isForce) => {
      verification.organize = ''
      verification.name = ''
      verification.phone = ''
      verification.code = ''
      verification.psw = ''
      verification.regPsw = ''

      if (!form.phone) {
        isForce && (verification.phone = '请输入手机号')
      } else {
        verification.phone = PHONE.REG.test(form.phone) ? '': PHONE.tip
      }
      
      if (!form.name) {
        isForce && (verification.name = '请输入姓名')
      } else if (form.name.length > 15) {
        verification.name = '姓名不合法!'
      }
      
      if (!form.organize) {
        isForce && (verification.organize = '请选择组织架构')
      }
      
      if (!form.code) {
        isForce && (verification.code = '请输入验证码')
      } else if (form.code.length !== 6){
        verification.code = '验证码不合法'
      }
      
      if (!form.psw) {
        isForce && (verification.psw = '请输入密码')
      } else {
        verification.psw = PSW.REG.test(form.psw) ? '': PSW.tip
      }
      
      if (!form.regPsw) {
        isForce && (verification.regPsw = '请输入确认密码')
      } else if (form.psw !== form.regPsw){
        verification.regPsw = '密码不一致'
      }
    }

    watch(form, () => checkForm())
    

    return {
      form,
      verification,
      checkForm,
      msgStatus
    }
  },
  methods: {
    async submitClick(ev) {
      this.checkForm(true)

      ev.stopPropagation()

      for (let val of Object.values(this.verification)) {
        if (val) return openErrorMsg(val, '提示')
      }

      let psw = encryption(this.form.psw)
      try {
        await axios.post(userReg, {
          deptId: this.form.organize,
          nickName: this.form.name,
          userName: this.form.phone,
          key: this.imgKey,
          code: this.form.code,
          password: psw,
          confirmPwd: psw,
        })

        this.$router.replace({ name: 'login' })
      } catch {
        // return this.refer()
      }
    },
    async sendCode() {
      for (let val of Object.values(this.verification)) {
        if (val) return openErrorMsg(val, '提示')
      }

      if (this.msgStatus.status !== 0) {
        return;
      }

      this.msgStatus.status = 1
      try {
        await axios.get(sendUserMsg, {
          params: {
            areaNum: 86,
            phoneNum: this.form.phone,
            type: 1
          }
        })
        this.msgStatus.status = 2
        this.msgStatus.miss = 60
        let interval = setInterval(() => {
          if (--this.msgStatus.miss < 0) {
            clearInterval(interval)
            this.msgStatus.status = 0
          }
        }, 1000)

      } catch {
        this.msgStatus.status = 0
      }
    }
  },
  components: {
    "com-company": comCompany,
  }
}
</script>

<style lang="sass">
@import "./style.scss"
</style>