296 lines
8.4 KiB
Vue
296 lines
8.4 KiB
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>
|