cmanager/src/page/login/userRegister.vue

<template>
  <div class="registerContainer">
    <div class="login-title">{{ $t('login.userRegister') }}</div>
    <el-form :model="registerForm" :rules="rules" ref="registerForm" class="login-form">
      <el-form-item prop="inviteCode">
        <el-input
          @keyup.enter.native="handleRegister"
          v-model="registerForm.inviteCode"
          :auto-complete="off"
          placeholder="请输入邀请码：JL10000000"
        ></el-input>
      </el-form-item>
      <el-form-item prop="companyName">
        <el-input
          @keyup.enter.native="handleRegister"
          v-model="registerForm.companyName"
          :auto-complete="off"
          placeholder="请输入您的企业名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="companyTid">
        <el-input
          @keyup.enter.native="handleRegister"
          v-model="registerForm.companyTid"
          :auto-complete="off"
          placeholder="统一社会信用代码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="account">
        <el-input
          @keyup.enter.native="handleRegister"
          v-model.trim="registerForm.account"
          :auto-complete="off"
          placeholder="请输入您的手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          @keyup.enter.native="handleRegister"
          v-model.trim="registerForm.code"
          auto-complete="off"
          placeholder="请输入验证码"
          class="code-input"
        ></el-input>
        <div class="login-code">
          <el-button :disabled="msgKey" type="text" @click="handleSend" class="msg-text">{{msgText}}</el-button>
        </div>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          @keyup.enter.native="handleRegister"
          v-model.trim="registerForm.password"
          :auto-complete="off"
          placeholder="请输入6-20位包含数字和字母的新密码"
        ></el-input>
      </el-form-item>
      <div>
        <el-button
          size="small"
          type="primary"
          @click="handleRegister"
          class="register-submit"
        >{{$t('login.registerSubmit')}}</el-button>
      </div>
    </el-form>
    <div class="reg-bottom">
      <div>
        <el-checkbox v-model="checked"></el-checkbox>
        <span @click="checked = !checked" class="reg-agreement">
          同意德阳市智慧就业服务平台用工
          <a
            @click.stop
            href="/blackboard/account/companyagreement.html"
            target="blank"
          >用户协议及隐私政策</a>
        </span>
      </div>
      <div>
        <a @click="$emit('change','login')">{{$t('login.directLogin')}}</a>
      </div>
    </div>
  </div>
</template>

  <script>
import { mapGetters } from "vuex";
import topLang from "@/page/index/top/top-lang";
import { isvalidatemobile } from "@/util/validate";
import { reg, sendValidate,regCheckIdentity } from "@/api/tenant/reg";
import md5 from "js-md5";

export default {
  name: "login",
  components: {
    topLang,
  },
  data () {
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]));
      } else {
        callback();
      }
    };
    const validatePwd = (rule, value, callback) => {
      var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
      var match = value.match(re);
      if (value.length < 6 || value.length > 20 || !match) {
        callback(new Error("密码格式不正确"));
      } else {
        callback();
      }
    };
    const validateTcode = (rule, value, callback) => {
      if(value){
        regCheckIdentity(value).then(()=>{
          callback();
        })
        .catch((err)=>{
          callback(err);
        })
      }
      else{
        callback(new Error('请输入社会统一信用代码'))
      }

    }
    const validateChecked = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请阅读并同意《服务及隐私协议》'));
      }
      else {
        callback();
      }
    }
    return {
      msgText: "获取验证码",
      msgTime: 120,
      msgKey: false,
      checked: false,
      registerForm: {
        inviteCode: "",
        account: "",
        password: "",
        code: "",
        checked: false,
      },
      rules: {
        companyName: [
          { required: true, trigger: "blur", message: "请输入企业名称" },
        ],
        companyTid: [
          {
            required: true,
            whitespace: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
          { validator: validateTcode, trigger: "blur" },
        ],
        account: [
          { required: true, trigger: "blur", validator: validatePhone },
        ],
        inviteCode: [
          { required: true, message: "请输入邀请码", trigger: "blur" },
          { min: 10, message: "长度不少于10个字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码" },
          { trigger: "blur", validator: validatePwd },
        ],
        checked: [
          {
            validator: validateChecked, trigger: 'blur'
          }
        ]
      },
      passwordType: "password",
    };
  },
  watch: {},
  mounted () { },
  computed: {
    ...mapGetters(["website", "tagWel"]),
  },
  props: [],
  methods: {
    showPassword () {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    /*发送短信验证码 */
    handleSend () {
      const inviteCode = new Promise((resolve) => {
        this.$refs.registerForm.validateField("inviteCode", resolve);
      });
      const account = new Promise((resolve) => {
        this.$refs.registerForm.validateField("account", resolve);
      });
      Promise.all([inviteCode, account]).then((err) => {
        if (err[0] || err[1]) {
          return;
        }
        this.msgKey = true;
        this.msgText = "发送中...";
        sendValidate(this.registerForm.account, 0)
          .then(() => {
            this.msgText = "剩余" + 120 + "s";
            this.msgKey = true;
            const time = setInterval(() => {
              this.msgTime--;
              this.msgText = "剩余" + this.msgTime + "s";
              if (this.msgTime === 0) {
                this.msgTime = 120;
                this.msgText = "重新获取";
                this.msgKey = false;
                clearInterval(time);
              }
            }, 1000);
          })
          .catch(() => {
            this.msgText = "重新获取";
            this.msgKey = false;
          });
      });
    },
    handleRegister () {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (this.checked) {
            const loading = this.$loading({
              lock: true,
              text: "注册中,请稍后。。。",
              spinner: "el-icon-loading",
            });
            reg(
              this.registerForm.inviteCode,
              this.registerForm.companyName,
              this.registerForm.companyTid,
              this.registerForm.code,
              this.registerForm.account,
              md5(this.registerForm.password)
            ).then(
              () => {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                loading.close();
                setTimeout(() => {
                  this.$emit("change", "login");
                }, 1000);
              },
              () => {
                loading.close();
              }
            );
          } else {
            this.$message.error("请阅读并同意德阳市智慧就业服务平台用工用户协议及隐私政策");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/login.scss";
.reg-bottom {
  margin: 0 30px 0 30px;
  display: flex;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  letter-spacing: 0;
  text-align: left;
  line-height: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
  cursor: pointer;
}
.reg-bottom > div {
  padding-top: 9px;
}

.reg-bottom a {
  color: #5aa0fa;
}
</style>