<template>
|
<div class="registerPage">
|
<div class="registerContent">
|
<div class="registerBox">
|
<div class="registerForm">
|
<h1>注册通行证</h1>
|
<div class="formItem flex">
|
<el-select placeholder="请选择" v-model="registerForm.region">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
<el-input
|
placeholder="请输入手机号"
|
class="ml10"
|
clearable
|
v-model="registerForm.phoneNumber"
|
></el-input>
|
</div>
|
<div class="formItem flex">
|
<el-input
|
placeholder="请输入图形验证码"
|
class="flex1"
|
v-model="registerForm.imgCode"
|
></el-input>
|
<div class="imgCode ml10">
|
<img :src="imgCode" alt="" @click="getImgCapcha" />
|
</div>
|
</div>
|
<div class="formItem flex">
|
<el-input
|
placeholder="请输入短信验证码"
|
class="flex1"
|
v-model="registerForm.verificationCode"
|
></el-input>
|
<el-button
|
class="ml10"
|
style="width: 140px"
|
@click="getVerifyCode"
|
:disabled="countDown != 0"
|
>{{
|
countDown == 0 ? "获取短信验证码" : "验证码(" + countDown + "s)"
|
}}</el-button
|
>
|
</div>
|
<!-- 手机号注册不需要填写用户名，先注释 -->
|
<!-- <div class="formItem flex">
|
<span>用户名</span>
|
<el-input
|
v-model="registerForm.username"
|
placeholder="用户名长度3-64个字符，由字母、数字组成"
|
clearable
|
></el-input>
|
</div>
|
<div class="formItem">
|
<p class="tips">用户名称一旦注册成功不可修改</p>
|
</div> -->
|
<div class="formItem">
|
<el-input
|
v-model="registerForm.password"
|
type="password"
|
show-password
|
placeholder="请输入密码"
|
></el-input>
|
</div>
|
<div class="formItem">
|
<el-input
|
v-model="registerForm.passwordAgain"
|
type="password"
|
show-password
|
placeholder="确认密码"
|
></el-input>
|
</div>
|
<div class="formItem">
|
<p class="tips">请将密码设置为8-16位，且不支持纯数字</p>
|
</div>
|
<div class="formItem">
|
<el-button
|
class="registerBtn"
|
:class="{ isActive: registerForm.accept }"
|
:disabled="!registerForm.accept"
|
:loading="registerBtnLoading"
|
@click="registerFun"
|
>注册</el-button
|
>
|
</div>
|
<div class="termsBox">
|
<el-checkbox class="termsCheckBox" v-model="registerForm.accept">
|
</el-checkbox>
|
<span>我接受并同意</span>
|
<span class="terms" @click="getClauseData(1)">《用户服务条款》</span>
|
<span>和</span>
|
<span class="terms" @click="getClauseData(0)">《隐私政策》</span>
|
</div>
|
</div>
|
<div class="tipBox">
|
<p>
|
已有账号，请点击这里
|
<span class="toLogin" @click="toLogin()">直接登录</span>
|
</p>
|
<p>使用第三方账号登录</p>
|
<p>
|
<img
|
@click="toWxLogin()"
|
src="@/assets/images/login/weChartIcon.png"
|
alt
|
/>
|
</p>
|
</div>
|
</div>
|
</div>
|
<!-- 弹框 -->
|
<el-dialog
|
title="《用户服务条款》"
|
:visible.sync="dialogVisibleUserService"
|
:close-on-click-modal="false"
|
width="40%"
|
>
|
<div class="protocolBox" v-html="userProtocolTxt"></div>
|
|
<span slot="footer" class="dialog-footer">
|
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
|
<el-button
|
type="primary"
|
class="btn"
|
@click="dialogVisibleUserService = false"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="《隐私政策条款》"
|
:visible.sync="dialogVisibleprivacyPolicy"
|
:close-on-click-modal="false"
|
width="40%"
|
>
|
<div class="protocolBox" v-html="privacyPolicyTxt"></div>
|
|
<span slot="footer" class="dialog-footer">
|
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
|
<el-button
|
type="primary"
|
class="btn"
|
@click="dialogVisibleUserService = false"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "register",
|
data() {
|
return {
|
dialogVisibleprivacyPolicy:false,
|
//用户协议dialog
|
dialogVisibleUserService: false,
|
//用户协议
|
userProtocolTxt:"",
|
//协议弹框title
|
dialogTitle:"",
|
//隐私政策条款
|
privacyPolicyTxt:"",
|
//当前条款富文本
|
currentProtocolTxt:"",
|
clauseDialog: {
|
title: "",
|
open: false,
|
},
|
clauseData: "",
|
registerBtnLoading: false,
|
options: [
|
{
|
value: "中国+86",
|
label: "中国+86",
|
},
|
],
|
registerForm: {
|
region: "中国+86",
|
phoneNumber: "",
|
imgCode: "",
|
username: "",
|
verificationCode: "",
|
password: "",
|
passwordAgain: "",
|
accept: true,
|
},
|
countDown: 0,
|
imgCode: "",
|
};
|
},
|
mounted() {
|
this.showTips();
|
this.getImgCapcha();
|
this.getProtocol();
|
},
|
methods: {
|
showTips() {
|
this.$confirm(
|
"如果您已使用过中国农业大学出版社公众号样书申请服务，请使用微信扫码登录！",
|
"温馨提示",
|
{
|
confirmButtonText: "去微信扫码登录",
|
cancelButtonText: "继续注册全新账号",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.toWxLogin();
|
})
|
.catch(() => {});
|
},
|
getImgCapcha() {
|
this.MG.identity.getImgCode().then((res) => {
|
this.imgCode = "data:image/png;base64," + res;
|
});
|
},
|
// 获取验证码(注册)
|
getVerifyCode() {
|
if (!this.config.reg_tel.test(this.registerForm.phoneNumber)) {
|
this.$message({
|
message: "请输入正确格式的手机号！",
|
type: "error",
|
});
|
return false;
|
} else if (
|
this.registerForm.imgCode == "" ||
|
this.registerForm.imgCode.length != 4
|
) {
|
this.$message({
|
message: "请输入正确格式的图形验证码",
|
type: "error",
|
});
|
return false;
|
} else {
|
this.MG.identity
|
.getPhoneCode({
|
phoneNumber: this.registerForm.phoneNumber,
|
imageCaptcha: this.registerForm.imgCode,
|
appRefCode: this.config.appRefCode,
|
})
|
.then((res) => {
|
if (res == "验证码发送成功") {
|
this.$message({
|
message: res,
|
type: "success",
|
});
|
this.getSecond(60);
|
} else {
|
this.$message({
|
message: res,
|
type: "error",
|
});
|
this.getImgCapcha();
|
}
|
});
|
}
|
},
|
//验证码倒计时
|
getSecond(time) {
|
if (!this.timer) {
|
this.countDown = time;
|
this.timer = setInterval(() => {
|
this.countDown--;
|
if (this.countDown == 0) {
|
clearInterval(this.timer);
|
this.timer = null;
|
}
|
}, 1000);
|
}
|
},
|
// 绑定手机号弹框-绑定按钮-函数
|
registerFun() {
|
if (this.registerForm.phoneNumber == "") {
|
this.$message({
|
message: "手机号不能为空",
|
type: "error",
|
});
|
return false;
|
}
|
if (this.registerForm.verificationCode == "") {
|
this.$message({
|
message: "短信验证码不能为空",
|
type: "error",
|
});
|
return false;
|
}
|
if (this.registerForm.password == "") {
|
this.$message({
|
message: "密码不能为空",
|
type: "error",
|
});
|
return false;
|
}
|
if (this.registerForm.password != this.registerForm.passwordAgain) {
|
this.$message({
|
message: "两次输入密码不一致",
|
type: "error",
|
});
|
return false;
|
}
|
let pwdreg =
|
// eslint-disable-next-line
|
/^(?![A-Za-z]+$)(?![0-9]+$)(?![_!@#$%^&*`~()\-+=<>?:,./;'\|\\\{\}\[\]]+$)[a-zA-Z0-9_!@#$%^&*`~()\-+=<>?:,./;'\|\\\{\}\[\]]{8,32}$/;
|
if (!this.config.reg_tel.test(this.registerForm.phoneNumber)) {
|
this.$message({
|
message: "请输入正确格式的手机号！",
|
type: "error",
|
});
|
} else if (!pwdreg.test(this.registerForm.password)) {
|
this.$message({
|
message:
|
"密码长度8-32个字符，必须由字母、数字、符号（-*/+_.~!@#$%^&*及括号）两种及以上组合！",
|
type: "error",
|
});
|
return false;
|
} else {
|
this.registerBtnLoading = true;
|
this.MG.identity
|
.registerAppUserWithPhone({
|
appRefCode: this.config.appRefCode,
|
phoneNumber: this.registerForm.phoneNumber,
|
phoneCaptcha: this.registerForm.verificationCode,
|
passWord: this.registerForm.password,
|
})
|
.then((res) => {
|
this.registerBtnLoading = false;
|
if (res) {
|
this.$confirm("注册成功！", {
|
confirmButtonText: "去登录",
|
cancelButtonText: "取消",
|
type: "success",
|
})
|
.then(() => {
|
this.$router.push({
|
path: "/login",
|
});
|
})
|
.catch(() => {});
|
}
|
})
|
.catch((e) => {
|
this.$message({
|
message: e.response.data.msg,
|
type: "error",
|
});
|
this.registerBtnLoading = false;
|
});
|
}
|
},
|
//获取用户协议
|
getProtocol() {
|
var that = this;
|
that.MG.resource
|
.getItem({
|
path: "caupress_protocol",
|
fields: {
|
caupress_content: [],
|
},
|
})
|
.then((res) => {
|
console.log(res);
|
try {
|
const data = res.datas.find(
|
(e) => e.refCode == "caupress_userRegistrationAgreement"
|
);
|
this.userProtocolTxt = data ? data.caupress_content : "暂无协议";
|
const privacy = res.datas.find(
|
(e) => e.refCode == "caupress_privacyPolicy"
|
);
|
this.privacyPolicyTxt = privacy ? privacy.caupress_content : "暂无协议";
|
|
} catch (error) {
|
this.protocolTxt = "暂无协议";
|
}
|
});
|
},
|
getClauseData(type) {
|
console.log(type);
|
if(type == 1){
|
this.dialogVisibleUserService = true
|
|
}else{
|
this.dialogVisibleprivacyPolicy = true
|
|
}
|
|
},
|
toLogin() {
|
this.$router.push({
|
path: "/login",
|
});
|
},
|
toWxLogin() {
|
this.$router.push({
|
path: "/login",
|
query: {
|
from: "weChatLogin",
|
},
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
@import "@/assets/css/theme.less";
|
.registerPage {
|
width: 100%;
|
height: 100%;
|
background-image: url("@/assets/images/login/pageBg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
padding: 50px 0;
|
.registerContent {
|
width: 1200px;
|
background: #fff;
|
margin: 0 auto;
|
padding-bottom: 36px;
|
box-shadow: 0 0 66px 0 hsl(0deg 0% 67% / 35%);
|
display: flex;
|
justify-content: center;
|
.registerBox {
|
display: flex;
|
align-items: center;
|
.registerForm {
|
width: 420px;
|
box-sizing: border-box;
|
padding: 20px;
|
margin: 20px;
|
margin-left: 100px;
|
h1 {
|
font-size: 18px;
|
color: @color;
|
text-align: center;
|
margin-bottom: 30px;
|
}
|
.formItem {
|
margin-bottom: 10px;
|
.imgCode {
|
width: 140px;
|
height: 40px;
|
img {
|
width: 100%;
|
height: 100%;
|
background: #efefef;
|
}
|
}
|
span {
|
display: inline-block;
|
width: 80px;
|
text-align: left;
|
line-height: 40px;
|
}
|
.tips {
|
font-size: 12px;
|
margin: 0 0 10px 0;
|
color: #666;
|
}
|
.registerBtn {
|
width: 100%;
|
background: #b1b6bd;
|
color: #fff;
|
cursor: not-allowed;
|
margin-top: 15px;
|
&.isActive {
|
background: @color;
|
cursor: pointer;
|
}
|
}
|
}
|
.termsBox {
|
line-height: 20px;
|
.termsCheckBox {
|
vertical-align: text-bottom;
|
margin-right: 8px;
|
}
|
span {
|
vertical-align: middle;
|
}
|
.terms {
|
color: @color;
|
cursor: pointer;
|
}
|
}
|
}
|
.tipBox {
|
padding-left: 30px;
|
border-left: 1px solid #ddd;
|
.toLogin {
|
color: @color;
|
cursor: pointer;
|
}
|
p {
|
margin-bottom: 15px;
|
}
|
img {
|
width: 30px;
|
height: 30px;
|
margin-left: 50px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
.ml10 {
|
margin-left: 10px;
|
}
|
|
.clauseBox {
|
height: 500px;
|
}
|
.protocolBox {
|
text-align: left;
|
line-height: 23px;
|
z-index: 1;
|
height: 500px;
|
overflow-y: auto;
|
margin-top: -20px;
|
box-sizing: border-box;
|
padding: 10px;
|
}
|
.el-dialog__footer button {
|
margin-right: 43%;
|
margin-top: 10px;
|
}
|
</style>
|
