<template>
|
<div class="BaseInfo">
|
<el-form
|
:model="user"
|
:rules="baseInforule"
|
:validate-on-rule-change="false"
|
ref="userForm"
|
class="demo-rulmargin"
|
@validate="formValidate"
|
>
|
<el-form-item prop="userName">
|
<el-input v-model="user.userName" placeholder="用户名"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="password">
|
<PwInput show-password v-model="user.password" placeholder="密码">
|
</PwInput>
|
</el-form-item>
|
<el-form-item prop="repassword">
|
<PwInput show-password v-model="user.repassword" placeholder="确认密码">
|
</PwInput>
|
</el-form-item>
|
<el-form-item prop="phoneNum">
|
<div class="phoneNum" :class="{ isFocus: phoneFocus }">
|
<el-input
|
placeholder="手机号"
|
v-model="user.phoneNum"
|
class="input-with-select"
|
@focus="phoneFocus = true"
|
@blur="phoneFocus = false"
|
>
|
</el-input>
|
<div slot="prepend" class="teleSlot">+86(中国)</div>
|
</div>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input
|
v-model="user.verifyCode"
|
readonly
|
onfocus="this.removeAttribute('readonly');"
|
onblur="this.setAttribute('readonly',true);"
|
autocomplete="off"
|
style="width: 350px"
|
placeholder="验证码"
|
></el-input>
|
<el-button class="code-btn" :disabled="codeDisabled" @click="getCode">{{
|
codeMsg
|
}}</el-button>
|
</el-form-item>
|
|
<div>
|
<el-button
|
:disabled="!btnAbled"
|
@click="handleRegister"
|
class="registBtn"
|
>注册</el-button
|
>
|
</div>
|
<el-form-item prop="agree" class="agree-form-item">
|
<el-checkbox
|
name="agree"
|
v-model="user.agree"
|
style="padding-right: 6px"
|
></el-checkbox>
|
<span>
|
我已阅读并同意
|
<el-link class="cursor-pointer" :underline="false" target="_blank"
|
>《服务协议》</el-link
|
>和
|
<el-link class="cursor-pointer" :underline="false" target="_blank"
|
>隐私政策</el-link
|
>
|
</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { validUser, validPassword, isPhone } from "@/scripts/validate"; // 正则文件
|
import {
|
register,
|
makeVerifyCode,
|
// getAreas,
|
// getDic,
|
// entireUserInfo,
|
} from "@/api/login";
|
export default {
|
mounted() {
|
const dom = document.querySelector(".phoneNum .el-input__inner");
|
dom.addEventListener("blur", () => {
|
document.querySelector(".el-input-group__prepend").style.borderColor =
|
"#c0c5cc";
|
});
|
|
dom.addEventListener("focus", () => {
|
console.log(this.isWrong);
|
if (this.isWrong) {
|
document.querySelector(".el-input-group__prepend").style.borderColor =
|
"#FF4B33";
|
}
|
});
|
},
|
data() {
|
//正则函数
|
var validateUser = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请设置用户名！"));
|
} else {
|
let result = validUser(value);
|
if (result) {
|
callback();
|
} else {
|
callback(
|
new Error("请输入5到20位由数字和字母组成的用户名，不以数字开头")
|
);
|
}
|
}
|
};
|
var validatePassword = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请设置密码！"));
|
} else {
|
let result = validPassword(value);
|
if (result) {
|
callback();
|
} else {
|
callback(
|
new Error(
|
"请输入6到14位字符，字母/数字以及标点符号至少包含2种组成的"
|
)
|
);
|
}
|
}
|
};
|
|
let validateRePassword = (rule, value, callback) => {
|
if (value === this.user.password) {
|
callback();
|
} else {
|
callback(new Error("两次输入的密码不一致，请重新输入"));
|
}
|
};
|
return {
|
user: {
|
userName: "",
|
password: "",
|
phoneNum: "",
|
verifyCode: "",
|
agree: false,
|
repassword: "",
|
}, //用户信息
|
baseInforule: {
|
userName: [{ validator: validateUser, trigger: "change" }],
|
password: [{ validator: validatePassword, trigger: "change" }],
|
repassword: [{ validator: validateRePassword, trigger: "change" }],
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [
|
{ required: true, message: "请输入验证码", trigger: "change" },
|
],
|
agree: [
|
{
|
required: true,
|
message: "请勾选同意服务协议和隐私政策",
|
trigger: "change",
|
},
|
],
|
}, //正则规则
|
codeMsg: "获取验证码",
|
codeDisabled: false,
|
validateStore: {}, //缓存表单校验结果
|
btnAbled: false, //控制注册按钮
|
bbsHost: "",
|
isWrong: false,
|
countdown: 60,
|
gotCode: false,
|
phoneFocus: false,
|
};
|
},
|
methods: {
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--;
|
if (this.countdown !== 0) {
|
this.codeMsg = `${this.countdown}s`;
|
} else {
|
clearInterval(this.timer);
|
this.codeMsg = "获取验证码";
|
this.countdown = 60;
|
this.timer = null;
|
this.codeDisabled = false;
|
}
|
}
|
},
|
//获取验证码
|
getCode() {
|
this.$refs["userForm"].validateField("phoneNum", (res) => {
|
if (res) {
|
document.querySelector(".phoneNum .el-input__inner").focus();
|
}
|
if (!res) {
|
if (!this.timer) {
|
this.codeDisabled = true;
|
this.getValidStr();
|
this.timer = setInterval(this.getValidStr, 1000);
|
makeVerifyCode({ phoneNum: this.user.phoneNum, type: 1 })
|
.then(() => {
|
this.gotCode = true;
|
})
|
.catch((err) => {
|
if (err.data) {
|
console.log(err);
|
}
|
});
|
}
|
}
|
});
|
},
|
//注册手机号
|
handleRegister() {
|
this.$nextTick(() => {
|
this.$refs["userForm"].validate((valid) => {
|
// // 后门
|
// this.$emit("next", {
|
// name: this.user.userName,
|
// phone: this.user.phoneNum,
|
// });
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
let param = {
|
username: this.user.userName,
|
password: this.user.password,
|
phoneNum: this.user.phoneNum,
|
verifyCode: this.user.verifyCode,
|
};
|
register(param)
|
.then((json) => {
|
this.bbsHost = json.data.bbsHost;
|
const loginedInfo = {
|
access_token:
|
json.data.token_type + " " + json.data.access_token,
|
refresh_token: json.data.refresh_token,
|
};
|
sessionStorage.setItem("expires_in", json.data.expires_in);
|
sessionStorage.setItem(
|
"loginedInfo",
|
JSON.stringify(loginedInfo)
|
);
|
this.loading.close();
|
this.$emit("next", {
|
id: json.data.userInfo.id,
|
name: this.user.userName,
|
phone: this.user.phoneNum,
|
});
|
this.$notify({
|
type: "success",
|
message: "注册成功",
|
duration: 2500,
|
offset: 57,
|
});
|
})
|
.catch((err) => {
|
this.loading.close();
|
this.$notify({
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
|
// return false
|
} else {
|
return;
|
}
|
});
|
});
|
},
|
//储存校验结果
|
formValidate(key, val) {
|
this.btnAbled = false;
|
this.validateStore[key] = val;
|
console.log(this.validateStore);
|
if (
|
this.validateStore.userName &&
|
this.validateStore.password &&
|
this.validateStore.phoneNum &&
|
this.validateStore.verifyCode &&
|
this.validateStore.repassword &&
|
this.user.agree
|
) {
|
this.btnAbled = true;
|
}
|
|
if (key == "phoneNum" && !val) {
|
this.isWrong = true;
|
document.querySelector(".el-input-group__prepend").style.borderColor =
|
"#FF4B33";
|
}
|
|
if (key == "phoneNum" && val) {
|
this.isWrong = false;
|
document.querySelector(".el-input-group__prepend").style.borderColor =
|
"#c0c5cc";
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.BaseInfo {
|
padding: 0 80px;
|
|
.el-form-item {
|
margin-bottom: 30px;
|
|
&.is-error ::v-deep .el-input__inner:focus {
|
border-color: #ff4b33;
|
}
|
|
.PwInput {
|
::v-deep .iconfont {
|
margin-right: 5px;
|
font-size: 18px;
|
}
|
}
|
}
|
|
::v-deep .el-input__inner {
|
padding: 10px 20px;
|
border-color: #c0c5cc;
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
|
&::-webkit-input-placeholder {
|
font-size: 14px;
|
color: #999;
|
}
|
}
|
|
.phoneNum {
|
position: relative;
|
::v-deep .el-input__inner {
|
padding-left: 120px;
|
}
|
.teleSlot {
|
position: absolute;
|
top: 7px;
|
width: 103px;
|
height: 28px;
|
line-height: 28px;
|
text-align: center;
|
font-size: 14px;
|
color: #3d3d3d;
|
border-right: 1px solid #e9ebee;
|
}
|
}
|
|
.code-btn {
|
margin-left: 10px;
|
width: 140px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
border-radius: 4px;
|
text-align: center;
|
font-size: 14px;
|
line-height: 40px;
|
padding: 0;
|
color: #0065ff;
|
background-color: #fff;
|
|
&:hover {
|
background-color: #fff;
|
}
|
|
&.is-disabled {
|
border: 1px solid #c0c5cc;
|
color: #999999;
|
}
|
}
|
|
.registBtn {
|
margin-top: 83px;
|
margin-bottom: 8px;
|
width: 500px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
|
&.is-disabled {
|
opacity: 0.5;
|
border-radius: 4px;
|
}
|
}
|
|
.agree-form-item {
|
color: #999999;
|
|
.cursor-pointer {
|
color: #0065ff;
|
cursor: pointer;
|
text-decoration: underline;
|
}
|
|
::v-deep .el-checkbox__inner {
|
background-color: #fff;
|
border-color: #0065ff;
|
|
&::after {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
</style>
|
