caseEditor/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="请输入手机号码"
        :maxlength="11"
      ></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 && msgStatus.status !== CountdownStuts.never"
          >
            {{
              msgStatus?.status === CountdownStuts.effective
                ? `${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"
        :maxlength="16"
        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"
        :maxlength="16"
      ></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 setup lang="ts">
import { reactive, ref, watch } from "vue";
import { PHONE, PSW } from "@/constant/REG";
import { openErrorMsg } from "@/request/errorMsg.js";
import { RouteName, router } from "@/router";
import { CountdownStore, CountdownStuts, register, sendPhoneCode } from "@/store/user";

const form = reactive({
  organize: "",
  name: "",
  phone: "",
  code: "",
  psw: "",
  regPsw: "",
});
const verification = reactive({
  organize: "",
  name: "",
  phone: "",
  code: "",
  psw: "",
  regPsw: "",
});
// 表单验证
const checkForm = (isForce = false) => {
  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());

// 表单提交
const submitClick = async () => {
  checkForm(true);

  for (let val of Object.values(verification)) {
    if (val) return openErrorMsg(val);
  }

  await register({
    deptId: form.organize,
    nickName: form.name,
    userName: form.phone,
    code: form.code,
    password: form.psw,
  });
  router.replace({ name: RouteName.login });
};

// 发送手机验证码
const msgStatus = ref<CountdownStore>();
const sendCode = async () => {
  for (let val of Object.values(verification)) {
    if (val) return openErrorMsg(val);
  }
  msgStatus.value = await sendPhoneCode(form.phone);
};
</script>

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