Skip to content

C
campSite
Commit 6e42c0ed authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

登录注册

parent 0d002cae
Hide whitespace changes
Inline Side-by-side
Showing with 1186 additions and 958 deletions
src/request/base/register.js 0 → 100644
View file @ 6e42c0ed
/* eslint-disable */
import {
request
} from './network'
// 通过邮箱验证码注册
export function registerEmailCode(data) {
return request({
method: 'post',
url: 'web/code/registerEmailCode',
params: data
})
}
// 通过邮箱验证码找回密码（忘记密码）
export function passwordEmailCode(data) {
return request({
method: 'post',
url: 'web/code/passwordEmailCode',
params: data
})
}
// 发送注册时候验证码
export function registerCode(data) {
return request({
method: 'post',
url: '/web/code/registerCode',
params: data
})
}
export function passwordCode(data) {
return request({
method: 'post',
url: '/web/code/passwordCode',
params: data
})
}
// 填写注册信息
export function setAccountInfo(data) {
return request({
method: 'post',
url: '/web/register/setAccountInfo',
data
})
}
// 获取注册信息
export function getAccountInfo(data) {
return request({
method: 'post',
url: '/web/register/getAccountInfo',
data
})
}
src/router/base/login.js
View file @ 6e42c0ed
...@@ -15,7 +15,7 @@ export default [{ ...@@ -15,7 +15,7 @@ export default [{
} }
}, },
{ {
path: '/reset', path: '/baseReset',
name: 'base-reset', name: 'base-reset',
component: () => import(/* webpackChunkName: "reset" */ 'v/base/login/Reset.vue'), component: () => import(/* webpackChunkName: "reset" */ 'v/base/login/Reset.vue'),
meta: { meta: {
......
src/router/index.js
View file @ 6e42c0ed
...@@ -204,7 +204,9 @@ router.beforeEach((to, from, next) => { ...@@ -204,7 +204,9 @@ router.beforeEach((to, from, next) => {
toLogin = "/login", toLogin = "/login",
toBaseLogin = "/baseLogin", toBaseLogin = "/baseLogin",
toRegister = "/register", toRegister = "/register",
toBaseRegister = "/baseRegister",
toReset = "/reset", toReset = "/reset",
toBaseReset = "/baseReset",
toHome = "/home", toHome = "/home",
toActive = "/active"; toActive = "/active";
let toMyInfo; let toMyInfo;
...@@ -225,7 +227,7 @@ router.beforeEach((to, from, next) => { ...@@ -225,7 +227,7 @@ router.beforeEach((to, from, next) => {
// } // }
// }); // });
return next(); return next();
} else if (to.path == toBaseLogin || to.path == toMyInfo || to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) { } else if (to.path == toBaseLogin ||to.path == toBaseRegister ||to.path == toBaseReset || to.path == toMyInfo || to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) {
return next(); return next();
} else if (to.name == "recruit") { } else if (to.name == "recruit") {
code = to.params.code; code = to.params.code;
......
src/views/base/login/Index.vue
View file @ 6e42c0ed
<template> <template>
<div class="login-index"> <div class="login-index">
<Header></Header>
<div class="big-right"> <div class="big-right">
<div class="info-box"> <div class="info-box">
<router-view /> <router-view/>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import Cookie from "js-cookie" import Header from "@/components/base/Header.vue";
export default { export default {
name: "loginBase", name: "loginBase",
data() { data() {
return { return {};
}; },
}, components: {
created() { Header,
},
this.$emit("getStatus", false); created() {
}, },
methods: { methods: {},
toHome() { };
let code = this.$store.state.indexIdentity;
this.$router.push("/"+code);
}
},
};
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.login-index { @media (min-width: 1024px) {
position: relative; .login-index .big-right .info-box {
min-width: 1104px; width: 32%!important;
background: #f8f8f8; top: 60%!important;
display: flex;
flex-flow: row;
min-height: 100%;
.big-img {
width: (500/1920 * 100%);
min-width: 350px;
min-height: 100%;
img {
width: 100%;
min-height: 100%;
} }
} }
.big-right {
flex: 1;
.login-index {
position: relative; position: relative;
.info-box { min-width: 1104px;
width: 520px; background: #f8f8f8;
height: auto; min-height: 100%;
position: absolute; width: 100%;
top: 50%;
left: 50%; .big-right {
transform: translate(-50%, -50%); height: calc(100% - 80px);
.info-box {
width: 520px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
} }
}
</style> </style>
src/views/base/login/Login.vue
View file @ 6e42c0ed
<template> <template>
<div class="container"> <div class="container">
<div class="title">账号密码登录</div> <div class="title_Login">
<div class="line"></div> <div v-if="changeLogin == 1">
<el-form <div @click="toCodeLogin" class="title">
:model="loginForm" <div :class="changeLogin == 2 ? 'change_login' : ''">验证码登录</div>
:rules="loginFormRules" </div>
ref="loginFormRef" <div @click="toLogin" class="title">
class="demo-ruleForm" <div :class="changeLogin == 1 ? 'change_login' : ''">
> 账号密码登录
<el-form-item prop="phone"> </div>
<img </div>
class="img_l" </div>
src="../../../assets/img/login/username.png"
alt="" <div v-else-if="changeLogin == 2">
/> <div @click="toLogin" class="title">
<el-input <div :class="changeLogin == 1 ? 'change_login' : ''">
v-model="loginForm.phone" 账号密码登录
placeholder="请输入手机号" </div>
maxlength="11" </div>
></el-input> <div @click="toCodeLogin" class="title">
</el-form-item> <div :class="changeLogin == 2 ? 'change_login' : ''">验证码登录</div>
<el-form-item prop="password">
<img
class="img_l"
src="../../../assets/img/login/password.png"
alt=""
/>
<el-input
v-model="loginForm.password"
:type="isShowPwd ? 'password' : 'text'"
maxlength="20"
placeholder="请输入密码"
></el-input>
<img
@click="changePwdStatus()"
v-if="!isShowPwd"
class="img_r"
src="../../../assets/img/login/eye01.png"
alt=""
/>
<img
@click="changePwdStatus()"
v-if="isShowPwd"
class="img_r"
src="../../../assets/img/login/eye01.png"
alt=""
/>
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()">登 录</el-button>
</el-form-item>
<div class="box">
<div>
<div class="fr" @click="register()">还没有账号？立即注册</div>
<div class="fl" @click="forgetPwd()">忘记密码？</div>
</div> </div>
<!-- <div class="fc">忘记密码请联系管理员邮箱：ydhdservice@163.com</div> -->
</div> </div>
</el-form> </div>
<div>
<el-form
:model="loginForm"
:rules="loginFormRules"
class="demo-ruleForm"
ref="loginFormRef"
>
<el-form-item prop="phone" ref="phone">
<img
alt=""
class="img_l"
src="../../../assets/img/login/username.png"
/>
<el-input
maxlength="11"
placeholder="请输入手机号"
v-model="loginForm.phone"
></el-input>
</el-form-item>
<el-form-item
:prop="changeLogin == 1 ? 'password' : ''"
ref="password"
v-if="changeLogin == 1"
>
<img
alt=""
class="img_l"
src="../../../assets/img/login/password.png"
/>
<el-input
:type="isShowPwd ? 'password' : 'text'"
maxlength="20"
placeholder="请输入密码"
v-model="loginForm.password"
></el-input>
<img
@click="changePwdStatus()"
alt=""
class="img_r"
src="../../../assets/img/login/eye01.png"
v-if="!isShowPwd"
/>
<img
@click="changePwdStatus()"
alt=""
class="img_r"
src="../../../assets/img/login/eye01.png"
v-if="isShowPwd"
/>
</el-form-item>
<el-form-item
:prop="changeLogin == 2 ? 'code' : ''"
ref="code"
v-else-if="changeLogin == 2"
>
<img alt="" class="img_l" src="@/assets/img/reset/code.png"/>
<el-input
maxlength="20"
placeholder="请输入短信验证码"
v-model="loginForm.code"
></el-input>
<!-- 短信验证码 -->
<div class="phoneCode">
<span @click="getCode" class="code" v-show="showCode"
>获取验证码</span
>
<span class="count" v-show="!showCode">{{ count }} s</span>
</div>
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()">登 录</el-button>
</el-form-item>
<div class="box" v-if="changeLogin == 1">
<div>
<div @click="register()" class="fr">还没有账号？立即注册</div>
<div @click="forgetPwd()" class="fl">忘记密码？</div>
</div>
<!-- <div class="fc">忘记密码请联系管理员邮箱：service@campcenter.cn</div> -->
</div>
</el-form>
</div>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import Cookie from "js-cookie"; import {login, loginCode} from "r/base/login";
import { login } from "r/base/login"; import {mobileCheck} from "@/common/utils.js";
import { mobileCheck } from "@/common/utils.js"; import {intervalTime} from "store/time";
export default { export default {
name: "base-login", name: "base-login",
data() { data() {
return { return {
isShowPwd: true, // 控制密码显示隐藏 isShowPwd: true, // 控制密码显示隐藏
loginForm: { // 手机验证短信
phone: "", showCode: true,
password: "", count: "",
}, timer: null,
// 表单验证规则对象 codeTime: "", //手机验证码倒计时时间
loginFormRules: { loginForm: {
// 对手机号进行校验 phone: null,
phone: [ password: null,
{ required: true, message: "请输入手机号", trigger: "blur" }, code: null,
{ },
validator: function (rule, value, callback) { // 表单验证规则对象
if (mobileCheck(value) === false) { loginFormRules: {
callback(new Error("请输入正确的手机号")); // 对手机号进行校验
} else { phone: [
callback(); {required: true, message: "请输入手机号", trigger: "blur"},
} {
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
}, },
trigger: "blur", ],
}, // 对密码进行校验
], password: [
// 对密码进行校验 {
password: [ required: true,
{ message: "请输入密码",
required: true, transform: (value) => value,
message: "请输入密码", trigger: "blur",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
}, },
}, {
{ type: "string",
trigger: "blur", message: "请输入不包含空格的字符",
validator: (rule, value, callback) => { trigger: "blur",
var passwordreg = /^[a-zA-Z0-9]{6,12}$/; transform(value) {
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/; if (value && value.indexOf(" ") === -1) {
if (!passwordreg.test(value)) { return value;
callback(new Error("请输入6-12位，包含数字/字母,")); } else {
} else { return false;
callback(); }
} },
}, },
}, {
], trigger: "blur",
}, validator: (rule, value, callback) => {
}; var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
}, // /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
created() { if (!passwordreg.test(value)) {
this.$emit("getStatus", false); callback(new Error("请输入6-12位，包含数字/字母,"));
}, } else {
methods: { callback();
// 忘记账号/密码 }
forgetPwd() { },
let code = this.$store.state.indexIdentity; },
this.$router.push("/reset?code=" + code); ],
// 对验证码进行校验
code: [
{required: true, message: "请输入验证码", trigger: "blur"},
{min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
],
},
changeLogin: 2,
};
}, },
created() {
this.$emit("getStatus", false);
const endTime = window.localStorage.getItem("login_code_time");
// 去注册 if (endTime && Number(endTime) > new Date().getTime()) {
register() { this.loginForm.phone = phone;
let code = this.$store.state.indexIdentity; this.intervalHandle(new Date(), Number(endTime));
this.$router.push("/register?code=" + code); }
}, this.commonApi(31)
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
}, },
// 登录 methods: {
submitForm() { // 定时器倒计时
this.$refs["loginFormRef"].validate((valid) => { intervalHandle(startTime, endTime) {
if (!valid) return; // 时间差
login({ const timeLag = intervalTime(startTime, endTime);
console.log(timeLag);
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
// 获取手机验证短信
getCode() {
if (!this.loginForm.phone) {
return this.$message.error("请输入手机号");
}
// if (!this.codeTime) {
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
// }
// 接口获得验证码
loginCode({
phone: this.loginForm.phone, phone: this.loginForm.phone,
password: this.loginForm.password,
}).then((res) => { }).then((res) => {
console.log(res, "login"); console.log(res, "passwordCode");
if (res.data.code != 200) { if (res.data.code != 200) {
return this.$message.error(res.data.message); return this.$message.error(res.data.message);
} }
// this.$message.success("登录成功"); this.$message.success(res.data.message);
// 跳转到报名 this.codeTime = res.data.data.now * 1000;
const code = this.$store.state.indexIdentity; // console.log(this.codeTime)
// token存储 let code = this.$store.state.indexIdentity;
window.localStorage.setItem("index-token" + code, res.data.token);
window.localStorage.setItem("phone" + code, this.loginForm.phone);
window.localStorage.setItem("email" + code, res.data.email);
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem( window.localStorage.setItem(
"system_color" + code, "login_code_time",
res.data.cam.system_color res.data.data.now * 1000
); );
this.intervalHandle(new Date(), res.data.data.now * 1000);
this.$router.replace("/signUp/examInfo?code=" + code); });
},
// 忘记账号/密码
forgetPwd() {
this.$router.push("/baseReset");
},
// 去注册
register() {
this.$router.push("/baseRegister");
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
},
toLogin() {
this.loginForm = {};
this.changeLogin = 1;
this.$nextTick(() => {
this.$refs["loginFormRef"].clearValidate();
});
},
toCodeLogin() {
this.loginForm = {};
this.changeLogin = 2;
this.$nextTick(() => {
this.$refs["loginFormRef"].clearValidate();
});
},
// 登录
submitForm() {
this.$refs["loginFormRef"].validate((valid) => {
if (!valid) return;
let obj = {};
if (this.changeLogin == 1) {
obj.phone = this.loginForm.phone;
obj.password = this.loginForm.password;
} else {
obj.phone = this.loginForm.phone;
obj.code = this.loginForm.code;
}
login(obj).then((res) => {
console.log(res, "login");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
// this.$message.success("登录成功");
// 跳转到报名
// token存储
window.localStorage.setItem("base-token", res.data.token);
window.localStorage.setItem("phone", this.loginForm.phone);
window.localStorage.setItem("email", res.data.email);
// 报名信息
this.$router.replace("/signUpList");
});
}); });
}); },
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.container { @media screen and (max-width: 1500px){
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; .container {
padding: 40px 60px; height: 300px !important;
margin-top: 0; padding: 30px 37px 70px 37px!important;
overflow: hidden;
.title { .title_Login {
margin: 19px 0 6px 0; margin: 0 !important;
width: 132px;
height: 20px; .title {
font-size: 22px; font-size: 12px !important;
font-weight: 500; }
color: var(--color);
line-height: 20px; .change_login {
margin-top: 5px !important;
font-size: 18px !important;
}
}
::v-deep .el-form {
margin-top: 20px !important;
}
}
} }
.line {
width: 125px;
height: 3px; .flex {
background: var(--color); display: flex;
border-radius: 2px;
} }
.el-form {
margin-top: 60px; .container {
.el-form-item { height: 440px;
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 40px 60px;
margin-top: 0;
overflow: hidden;
.title_Login {
position: relative; position: relative;
margin-bottom: 30px; margin: 19px 0 0 0;
&:last-child { text-align: center;
margin: 0;
}
img.img_l { .title {
position: absolute; height: 20px;
left: 25px; font-size: 16px;
top: 50%; font-weight: 500;
transform: translate(-50%, -50%); color: var(--color);
z-index: 1000; line-height: 20px;
} text-align: right;
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
::v-deep .el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: var(--color);
}
}
::v-deep .el-form-item__error {
color: #e0823d;
} }
.el-button {
width: 100%; .change_login {
height: 60px; font-size: 22px;
background: var(--color); margin-top: 32px;
border-radius: 4px; color: black;
opacity: 0.8;
line-height: 50px;
text-align: center; text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
border: none;
} }
} }
.box {
height: 18px; .el-form {
// display: block; margin-top: 60px;
display: flex;
flex-direction: column; .el-form-item {
.fl { position: relative;
float: right; margin-bottom: 30px;
height: 18px;
line-height: 18px; &:last-child {
color: #999999; margin: 0;
margin-top: -10px; }
cursor: pointer;
&:hover { .phoneCode {
color: var(--color); position: absolute;
text-decoration: underline; z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.code {
font-size: 14px;
font-weight: 600;
color: var(--color);
}
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
::v-deep .el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: var(--color);
}
}
::v-deep .el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: var(--color);
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
border: none;
} }
} }
.fr {
float: left; .box {
height: 18px; height: 18px;
line-height: 18px; // display: block;
color: #999999; display: flex;
margin-top: -10px; flex-direction: column;
cursor: pointer;
&:hover { .fl {
color: var(--color); float: right;
text-decoration: underline; height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
.fr {
float: left;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
.fc {
font-size: 4px;
float: right;
// height: 18px;
line-height: 18px;
color: #999999;
margin-top: 10px;
// cursor: pointer;
// &:hover {
// color: #563279;
// text-decoration: underline;
// }
} }
}
.fc {
font-size: 4px;
float: right;
// height: 18px;
line-height: 18px;
color: #999999;
margin-top: 10px;
// cursor: pointer;
// &:hover {
// color: #563279;
// text-decoration: underline;
// }
} }
} }
} }
}
</style> </style>
src/views/base/login/Register.vue
View file @ 6e42c0ed
...@@ -16,46 +16,46 @@ ...@@ -16,46 +16,46 @@
v-model="registerForm.phone" v-model="registerForm.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
maxlength="11" maxlength="11"
autocomplete="off"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="email"> <!-- <el-form-item prop="email">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" /> <img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
autocomplete="off"
></el-input> ></el-input>
</el-form-item>
<!-- <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="registerForm.code"
placeholder="请输入短信验证码"
maxlength="20"
autocomplete="off"
></el-input> -->
<!-- 短信验证码 -->
<!-- <div class="phoneCode">
<span class="code" v-show="show" @click="getCode"
>获取验证码</span
>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
</el-form-item> --> </el-form-item> -->
<el-form-item prop="code"> <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" /> <img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input <el-input
v-model="registerForm.code" v-model="registerForm.code"
placeholder="请输入邮箱注册验证码" placeholder="请输入短信验证码"
maxlength="6" maxlength="20"
autocomplete="off"
></el-input> ></el-input>
<!-- 短信验证码 --> <!-- 短信验证码 -->
<!-- <div class="phoneCode">
<span class="code" v-show="show" @click="getCode"
>获取验证码</span
>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
</el-form-item> -->
<!-- <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="registerForm.code"
placeholder="请输入邮箱注册验证码"
maxlength="6"
></el-input> -->
<!-- 短信验证码 -->
<div class="phoneCode"> <div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode" <span class="code" v-show="showCode" @click="getCode"
>获取邮箱验证码</span >获取验证码</span
> >
<span v-show="!showCode" class="count">{{ count }} s</span> <span v-show="!showCode" class="count">{{ count }} s</span>
</div> </div>
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
v-model="registerForm.rq_password" v-model="registerForm.rq_password"
placeholder="请再次输入登录密码" placeholder="请再次输入登录密码"
maxlength="20" maxlength="20"
autocomplete="off"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item> <el-form-item style="margin: 40px 0 0 0"></el-form-item>
...@@ -106,366 +106,357 @@ ...@@ -106,366 +106,357 @@
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
// 请求接口 import {
registerCode,
import { setAccountInfo,
registerCode, registerEmailCode,
setAccountInfo, } from "r/base/register";
registerEmailCode, import { mobileCheck, checkStrong } from "@/common/utils.js";
} from "r/index/register"; import validator from "common/validator";
import { mobileCheck, checkStrong } from "@/common/utils.js"; import { intervalTime } from "store/time";
import validator from "common/validator";
import { intervalTime } from "store/time";
export default { export default {
name: "index-register", name: "base-register",
data() { data() {
const pwdCheck = async (rule, value, callback) => { const pwdCheck = async (rule, value, callback) => {
if (value !== this.registerForm.password) { if (value !== this.registerForm.password) {
callback(new Error("两次输入的密码不一致")); callback(new Error("两次输入的密码不一致"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
inputType: "", inputType: "",
// 手机验证短信 // 手机验证短信
showCode: true, showCode: true,
count: "", count: "",
timer: null, timer: null,
codeTime: "", //手机验证码倒计时时间 codeTime: "", //手机验证码倒计时时间
isShowPwd: true, // 控制密码显示隐藏 isShowPwd: true, // 控制密码显示隐藏
registerForm: { registerForm: {
phone: "", phone: "",
email: "", // email: "",
code: "", code: "",
password: "", password: "",
rq_password: "", rq_password: "",
}, },
// 表单验证规则对象 // 表单验证规则对象
registerRules: { registerRules: {
// 对手机号进行校验 // 对手机号进行校验
phone: [ phone: [
{ required: true, message: "请输入手机号", trigger: "blur" }, { required: true, message: "请输入手机号", trigger: "blur" },
{ {
validator: function (rule, value, callback) { validator: function (rule, value, callback) {
if (mobileCheck(value) === false) { if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号")); callback(new Error("请输入正确的手机号"));
} else { } else {
callback(); callback();
} }
},
trigger: "blur",
}, },
trigger: "blur", ],
}, // 对邮箱验证
], // email: [
// 对邮箱验证 // { required: true, message: "请输入邮箱", trigger: "blur" },
email: [ // {
{ required: true, message: "请输入邮箱", trigger: "blur" }, // validator: validator.validateEmail,
{ // trigger: "blur",
validator: validator.validateEmail, // },
trigger: "blur", // ],
}, // 对验证码进行校验
], code: [
// 对验证码进行校验 { required: true, message: "请输入验证码", trigger: "blur" },
code: [ { min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
{ required: true, message: "请输入验证码", trigger: "blur" }, ],
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" }, // 对密码进行校验
], password: [
// 对密码进行校验 {
password: [ required: true,
{ message: "请输入密码",
required: true, transform: (value) => value,
message: "请输入密码", trigger: "blur",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
}, },
}, {
{ type: "string",
trigger: "blur", message: "请输入不包含空格的字符",
validator: (rule, value, callback) => { trigger: "blur",
var passwordreg = /^[a-zA-Z0-9]{6,12}$/; transform(value) {
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/; if (value && value.indexOf(" ") === -1) {
if (!passwordreg.test(value)) { return value;
callback(new Error("请输入6-12位，包含数字/字母,")); } else {
} else { return false;
callback(); }
} },
}, },
}, {
], trigger: "blur",
// 对密码进行校验 validator: (rule, value, callback) => {
rq_password: [ var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
{ required: true, message: "请输入确认密码", trigger: "blur" }, // /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
{ if (!passwordreg.test(value)) {
validator: pwdCheck, callback(new Error("请输入6-12位，包含数字/字母,"));
trigger: "blur", } else {
}, callback();
], }
}, },
}; },
}, ],
created() { // 对密码进行校验
const code = this.$store.state.indexIdentity; rq_password: [
const endTime = window.localStorage.getItem("register_code_time" + code); { required: true, message: "请输入确认密码", trigger: "blur" },
{
if (endTime && Number(endTime) > new Date().getTime()) { validator: pwdCheck,
this.resetForm.phone = phone; trigger: "blur",
this.intervalHandle(new Date(), Number(endTime)); },
} ],
}, },
methods: { };
// 去注册
toLogin() {
let code = this.$store.state.indexIdentity;
this.$router.push("/login?code=" + code);
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
}, },
// 定时器倒计时 created() {
intervalHandle(startTime, endTime) { const endTime = window.localStorage.getItem("register_code_time" );
// 时间差 if (endTime && Number(endTime) > new Date().getTime()) {
const timeLag = intervalTime(startTime, endTime); this.resetForm.phone = phone;
console.log(timeLag); this.intervalHandle(new Date(), Number(endTime));
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
} }
this.commonApi(30)
}, },
// 获取手机验证短信 methods: {
getCode() { // 去注册
if (!this.registerForm.email) { toLogin() {
return this.$message.error("请输入邮箱"); this.$router.push("/baseLogin");
} },
// if (!this.codeTime) { // 改变密码显示状态
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看"); changePwdStatus() {
// } this.isShowPwd = !this.isShowPwd;
// 接口获得验证码 },
registerEmailCode({ // 定时器倒计时
intervalHandle(startTime, endTime) {
email: this.registerForm.email, // 时间差
}).then((res) => { const timeLag = intervalTime(startTime, endTime);
console.log(res, "passwordCode"); console.log(timeLag);
if (res.data.code != 200) { if (!this.timer) {
return this.$message.error(res.data.message); this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
} }
this.$message.success(res.data.message); },
this.codeTime = res.data.data.now * 1000; // 获取手机验证短信
// console.log(this.codeTime) getCode() {
let code = this.$store.state.indexIdentity; if (!this.registerForm.phone) {
window.localStorage.setItem( return this.$message.error("请输入邮箱");
"register_code_time" + code, }
res.data.data.now * 1000 // if (!this.codeTime) {
); // return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
this.intervalHandle(new Date(), res.data.data.now * 1000); // }
}); // 接口获得验证码
}, registerCode({
// 表单验证
submitForm() {
this.$refs["registerFormRef"].validate((valid) => {
if (!valid) return;
setAccountInfo({
phone: this.registerForm.phone, phone: this.registerForm.phone,
email: this.registerForm.email,
code: this.registerForm.code,
password: this.registerForm.password,
rq_password: this.registerForm.rq_password,
}).then((res) => { }).then((res) => {
console.log(res); console.log(res, "passwordCode");
if (res.data.code != 200) { if (res.data.code != 200) {
return this.$message.error(res.data.message); return this.$message.error(res.data.message);
} }
// this.$message.success(res.data.message); this.$message.success(res.data.message);
let code = this.$store.state.indexIdentity; this.codeTime = res.data.data.now * 1000;
// token存储 // console.log(this.codeTime)
window.localStorage.setItem("index-token" + code, res.data.token);
window.localStorage.setItem("phone" + code, this.registerForm.phone);
window.localStorage.setItem("email" + code, this.registerForm.email);//邮箱
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem( window.localStorage.setItem(
"system_color" + code, "register_code_time" ,
res.data.cam.system_color res.data.data.now * 1000
); );
this.intervalHandle(new Date(), res.data.data.now * 1000);
});
},
// 跳转到报名 // 表单验证
submitForm() {
this.$router.push("/signUp/examInfo?code=" + code); this.$refs["registerFormRef"].validate((valid) => {
if (!valid) return;
setAccountInfo({
phone: this.registerForm.phone,
// email: this.registerForm.email,
code: this.registerForm.code,
password: this.registerForm.password,
rq_password: this.registerForm.rq_password,
}).then((res) => {
console.log(res);
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
// this.$message.success(res.data.message);
// token存储
window.localStorage.setItem("index-token" , res.data.token);
window.localStorage.setItem("phone" , this.registerForm.phone);
// window.localStorage.setItem("email" + code, this.registerForm.email);
// 报名信息
window.localStorage.setItem("camp_name" , res.data.cam.name);
//获取主题色
window.localStorage.setItem(
"system_color" ,
res.data.cam.system_color
);
// 跳转到报名
this.$router.replace("/signUpList" );
});
}); });
}); },
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 注册输入 // 注册输入
.container { .container {
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
padding: 40px 60px; padding: 40px 60px;
margin-top: 0; margin-top: 0;
overflow: hidden; overflow: hidden;
.title { .title {
margin: 19px 0 6px 0; // margin: 19px 0 6px 0;
width: 132px; // width: 132px;
height: 20px; height: 20px;
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
color: var(--color); color: var(--color);
line-height: 20px; line-height: 20px;
} }
.line { // .line {
width: 103px; // width: 103px;
height: 3px; // height: 3px;
background: var(--color); // background: var(--color);
border-radius: 2px; // border-radius: 2px;
} // }
::v-deep .el-form { ::v-deep .el-form {
margin-top: 60px; margin-top: 60px;
.el-form-item { .el-form-item {
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
&:last-child { &:last-child {
margin: 0; margin: 0;
} }
.el-form-item__content { .el-form-item__content {
position: relative; position: relative;
.phoneCode { .phoneCode {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: 50%; top: 50%;
right: 25px; right: 25px;
transform: translate(0, -50%); transform: translate(0, -50%);
cursor: pointer; cursor: pointer;
.code { .code {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--color); color: var(--color);
}
} }
}
img.img_l { img.img_l {
position: absolute; position: absolute;
left: 25px; left: 25px;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1000; z-index: 1000;
} }
img.img_r { img.img_r {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
z-index: 1000; z-index: 1000;
} }
.el-input__inner { .el-input__inner {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 10px 0 50px; padding: 0 10px 0 50px;
border-radius: 0; border-radius: 0;
color: #4d4d4d; color: #4d4d4d;
border: 0; border: 0;
border-bottom: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9;
&:focus { &:focus {
border-bottom-color: var(--color); border-bottom-color: var(--color);
}
} }
}
.el-form-item__error { .el-form-item__error {
color: #e0823d; color: #e0823d;
} }
.el-button { .el-button {
width: 100%; width: 100%;
height: 60px; height: 60px;
background: var(--color); background: var(--color);
border-radius: 4px; border-radius: 4px;
opacity: 0.8; opacity: 0.8;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
margin: 30px 0 0 0; margin: 30px 0 0 0;
border: none; border: none;
}
} }
} }
}
.box {
height: 18px;
display: block;
.fr { .box {
// float: left;
text-align: center;
height: 18px; height: 18px;
line-height: 18px; display: block;
color: #999999;
margin-top: -10px; .fr {
cursor: pointer; // float: left;
&:hover { text-align: center;
color: var(--color); height: 18px;
text-decoration: underline; line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
} }
} }
} }
} }
}
@media screen and (max-width: 1601px) { @media screen and (max-width: 1601px) {
.container { .container {
right: 18%; right: 18%;
}
} }
}
@media screen and (max-width: 1501px) { @media screen and (max-width: 1501px) {
.container { .container {
right: 16%; right: 16%;
}
} }
}
@media screen and (max-width: 1401px) { @media screen and (max-width: 1401px) {
.container { .container {
right: 14%; right: 14%;
}
} }
}
</style> </style>
src/views/base/login/Reset.vue
View file @ 6e42c0ed
...@@ -16,45 +16,43 @@ ...@@ -16,45 +16,43 @@
v-model="resetForm.phone" v-model="resetForm.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
maxlength="11" maxlength="11"
autocomplete="off"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="email"> <!-- <el-form-item prop="email">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" /> <img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input <el-input
v-model="resetForm.email" v-model="resetForm.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
autocomplete="off"
></el-input> ></el-input>
</el-form-item> </el-form-item> -->
<!-- <el-form-item prop="code"> <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" /> <img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input <el-input
v-model="resetForm.code" v-model="resetForm.code"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
maxlength="20" maxlength="20"
autocomplete="off" ></el-input>
></el-input> --> <!-- 短信验证码 -->
<!-- 短信验证码 --> <!-- <div class="phoneCode">
<!-- <div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode" <span class="code" v-show="showCode" @click="getCode"
>获取验证码</span >获取验证码</span
> >
<span v-show="!showCode" class="count">{{ count }} s</span> <span v-show="!showCode" class="count">{{ count }} s</span>
</div> </div>
</el-form-item> --> </el-form-item> -->
<el-form-item prop="code"> <!-- <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" /> <img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input <el-input
v-model="resetForm.code" v-model="resetForm.code"
placeholder="请输入邮箱验证码" placeholder="请输入邮箱验证码"
maxlength="6" maxlength="6"
autocomplete="off"
></el-input> ></el-input> -->
<!-- 短信验证码 --> <!-- 短信验证码 -->
<div class="phoneCode"> <div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode" <span class="code" v-show="showCode" @click="getCode"
>获取邮箱验证码</span >获取验证码</span
> >
<span v-show="!showCode" class="count">{{ count }} s</span> <span v-show="!showCode" class="count">{{ count }} s</span>
</div> </div>
...@@ -88,7 +86,6 @@ ...@@ -88,7 +86,6 @@
v-model="resetForm.rq_password" v-model="resetForm.rq_password"
placeholder="请再次输入新的登录密码" placeholder="请再次输入新的登录密码"
maxlength="20" maxlength="20"
autocomplete="off"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item> <el-form-item style="margin: 40px 0 0 0"></el-form-item>
...@@ -105,352 +102,349 @@ ...@@ -105,352 +102,349 @@
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
// 请求接口 // 请求接口
import { passwordEmailCode } from "r/index/register"; import { passwordCode } from "r/base/register";
import { changePassCode } from "r/index/login"; import { changePassCode } from "r/base/login";
import { mobileCheck } from "@/common/utils.js"; import { mobileCheck } from "@/common/utils.js";
import { intervalTime } from "store/time"; import { intervalTime } from "store/time";
import validator from "common/validator"; import validator from "common/validator";
export default { export default {
name: "index-reset", name: "base-reset",
data() { data() {
const pwdCheck = async (rule, value, callback) => { const pwdCheck = async (rule, value, callback) => {
if (value !== this.resetForm.password) { if (value !== this.resetForm.password) {
callback(new Error("两次输入的密码不一致")); callback(new Error("两次输入的密码不一致"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
// 手机验证短信 // 手机验证短信
showCode: true, showCode: true,
count: "", count: "",
timer: null, timer: null,
codeTime: "", //手机验证码倒计时时间 codeTime: "", //手机验证码倒计时时间
isShowPwd: true, // 控制密码显示隐藏 isShowPwd: true, // 控制密码显示隐藏
resetForm: { resetForm: {
phone: "", phone: "",
email: "", // email: "",
code: "", code: "",
password: "", password: "",
rq_password: "", rq_password: "",
}, },
// 表单验证规则对象 // 表单验证规则对象
resetRules: { resetRules: {
// 对手机号进行校验 // 对手机号进行校验
phone: [ phone: [
{ required: true, message: "请输入手机号", trigger: "blur" }, { required: true, message: "请输入手机号", trigger: "blur" },
{ {
validator: function (rule, value, callback) { validator: function (rule, value, callback) {
if (mobileCheck(value) === false) { if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号")); callback(new Error("请输入正确的手机号"));
} else { } else {
callback(); callback();
} }
},
trigger: "blur",
}, },
trigger: "blur", ],
}, // 对邮箱验证
], // email: [
// 对邮箱验证 // { required: true, message: "请输入邮箱", trigger: "blur" },
email: [ // {
{ required: true, message: "请输入邮箱", trigger: "blur" }, // validator: validator.validateEmail,
{ // trigger: "blur",
validator: validator.validateEmail, // },
trigger: "blur", // ],
}, // 对验证码进行校验
], code: [
// 对验证码进行校验 { required: true, message: "请输入验证码", trigger: "blur" },
code: [ { min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
{ required: true, message: "请输入验证码", trigger: "blur" }, ],
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" }, // 对密码进行校验
], password: [
// 对密码进行校验 {
password: [ required: true,
{ message: "请输入密码",
required: true, transform: (value) => value,
message: "请输入密码", trigger: "blur",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
}, },
}, {
{ type: "string",
trigger: "blur", message: "请输入不包含空格的字符",
validator: (rule, value, callback) => { trigger: "blur",
var passwordreg = /^[a-zA-Z0-9]{6,12}$/; transform(value) {
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/; if (value && value.indexOf(" ") === -1) {
if (!passwordreg.test(value)) { return value;
callback(new Error("请输入6-12位，包含数字/字母,")); } else {
} else { return false;
callback(); }
} },
}, },
}, {
], trigger: "blur",
// 对密码进行校验 validator: (rule, value, callback) => {
rq_password: [ var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
{ required: true, message: "请输入确认密码", trigger: "blur" }, // /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
{ if (!passwordreg.test(value)) {
validator: pwdCheck, callback(new Error("请输入6-12位，包含数字/字母,"));
trigger: "blur", } else {
}, callback();
], }
}, },
}; },
}, ],
created() { // 对密码进行校验
const code = this.$store.state.indexIdentity; rq_password: [
const endTime = window.localStorage.getItem("restet_code_time" + code); { required: true, message: "请输入确认密码", trigger: "blur" },
const phone = window.localStorage.getItem("restet_code_phone" + code); {
if (endTime && Number(endTime) > new Date().getTime()) { validator: pwdCheck,
this.resetForm.phone = phone; trigger: "blur",
this.intervalHandle(new Date(), Number(endTime)); },
} ],
}, },
methods: { };
// 去注册
toLogin() {
let code = this.$store.state.indexIdentity;
this.$router.push("/login?code=" + code);
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
}, },
// 定时器倒计时 created() {
intervalHandle(startTime, endTime) { const endTime = window.localStorage.getItem("restet_code_time" );
// 时间差 const phone = window.localStorage.getItem("restet_code_phone" );
const timeLag = intervalTime(startTime, endTime); if (endTime && Number(endTime) > new Date().getTime()) {
console.log(timeLag); this.resetForm.phone = phone;
if (!this.timer) { this.intervalHandle(new Date(), Number(endTime));
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
} }
}, },
// 获取手机验证短信 methods: {
getCode() { // 去注册
if (!this.resetForm.email) { toLogin() {
return this.$message.error("请输入邮箱"); this.$router.push("/baseLogin" );
} },
// if (!this.codeTime) { // 改变密码显示状态
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看"); changePwdStatus() {
// } this.isShowPwd = !this.isShowPwd;
// 接口获得验证码 },
passwordEmailCode({ // 定时器倒计时
phone: this.resetForm.phone, intervalHandle(startTime, endTime) {
email: this.resetForm.email, // 时间差
}).then((res) => { const timeLag = intervalTime(startTime, endTime);
console.log(res, "passwordCode"); console.log(timeLag);
if (res.data.code != 200) { if (!this.timer) {
return this.$message.error(res.data.message); this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
} }
this.$message.success(res.data.message); },
this.codeTime = res.data.data.now * 1000; // 获取手机验证短信
// console.log(this.codeTime) getCode() {
let code = this.$store.state.indexIdentity; if (!this.resetForm.phone) {
window.localStorage.setItem( return this.$message.error("请输入手机号");
"restet_code_time" + code, }
res.data.data.now * 1000 // if (!this.codeTime) {
); // return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
this.intervalHandle(new Date(), res.data.data.now * 1000); // }
}); // 接口获得验证码
}, passwordCode({
// 表单验证
submitForm() {
this.$refs["resetFormRef"].validate((valid) => {
if (!valid) return;
changePassCode({
phone: this.resetForm.phone, phone: this.resetForm.phone,
email: this.resetForm.email, // email: this.resetForm.email,
code: this.resetForm.code,
password: this.resetForm.password,
rq_password: this.resetForm.rq_password,
}).then((res) => { }).then((res) => {
console.log(res); console.log(res, "passwordCode");
if (res.data.code != 200) { if (res.data.code != 200) {
return this.$message.error(res.data.message); return this.$message.error(res.data.message);
} }
this.$message.success(res.data.message); this.$message.success(res.data.message);
// token存储 this.codeTime = res.data.data.now * 1000;
let code = this.$store.state.indexIdentity; // console.log(this.codeTime)
// window.localStorage.setItem("index-token" + code, res.token);
window.localStorage.setItem( window.localStorage.setItem(
"restet_code_phone" + code, "restet_code_time" ,
this.resetForm.phone res.data.data.now * 1000
); );
this.$router.push("/login?code=" + code); this.intervalHandle(new Date(), res.data.data.now * 1000);
});
},
// 表单验证
submitForm() {
this.$refs["resetFormRef"].validate((valid) => {
if (!valid) return;
changePassCode({
phone: this.resetForm.phone,
email: this.resetForm.email,
code: this.resetForm.code,
password: this.resetForm.password,
rq_password: this.resetForm.rq_password,
}).then((res) => {
console.log(res);
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.message);
// token存储
// window.localStorage.setItem("index-token" + code, res.token);
window.localStorage.setItem(
"restet_code_phone" ,
this.resetForm.phone
);
this.$router.replace("/baseLogin");
});
}); });
}); },
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 注册输入 // 注册输入
.container { .container {
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
padding: 40px 60px; padding: 40px 60px;
margin-top: 0; margin-top: 0;
overflow: hidden; overflow: hidden;
.title { .title {
margin: 19px 0 6px 0; // margin: 19px 0 6px 0;
width: 132px; // width: 132px;
height: 20px; height: 20px;
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
color: var(--color); color: var(--color);
line-height: 20px; line-height: 20px;
} text-align: center;
}
.line { // .line {
width: 83px; // width: 83px;
height: 3px; // height: 3px;
background: var(--color); // background: var(--color);
border-radius: 2px; // border-radius: 2px;
} // }
::v-deep .el-form { ::v-deep .el-form {
margin-top: 60px; margin-top: 60px;
.el-form-item { .el-form-item {
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
&:last-child { &:last-child {
margin: 0; margin: 0;
} }
.el-form-item__content { .el-form-item__content {
position: relative; position: relative;
.phoneCode { .phoneCode {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: 50%; top: 50%;
right: 25px; right: 25px;
transform: translate(0, -50%); transform: translate(0, -50%);
cursor: pointer; cursor: pointer;
.code { .code {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--color); color: var(--color);
}
} }
}
img.img_l { img.img_l {
position: absolute; position: absolute;
left: 25px; left: 25px;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1000; z-index: 1000;
} }
img.img_r { img.img_r {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
z-index: 1000; z-index: 1000;
} }
.el-input__inner { .el-input__inner {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 10px 0 50px; padding: 0 10px 0 50px;
border-radius: 0; border-radius: 0;
color: #4d4d4d; color: #4d4d4d;
border: 0; border: 0;
border-bottom: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9;
&:focus { &:focus {
border-bottom-color: var(--color); border-bottom-color: var(--color);
}
} }
}
.el-form-item__error { .el-form-item__error {
color: #e0823d; color: #e0823d;
} }
.el-button { .el-button {
width: 100%; width: 100%;
height: 60px; height: 60px;
background: var(--color); background: var(--color);
border-radius: 4px; border-radius: 4px;
opacity: 0.8; opacity: 0.8;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
margin: 30px 0 0 0; margin: 30px 0 0 0;
}
} }
} }
}
.box { .box {
height: 18px;
display: block;
.fr {
// float: left;
text-align: center;
height: 18px; height: 18px;
line-height: 18px; display: block;
color: #999999;
margin-top: -10px; .fr {
cursor: pointer; // float: left;
text-align: center;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover { &:hover {
color: var(--color); color: var(--color);
text-decoration: underline; text-decoration: underline;
}
} }
} }
} }
} }
}
@media screen and (max-width: 1601px) { @media screen and (max-width: 1601px) {
.container { .container {
right: 18%; right: 18%;
}
} }
}
@media screen and (max-width: 1501px) { @media screen and (max-width: 1501px) {
.container { .container {
right: 16%; right: 16%;
}
} }
}
@media screen and (max-width: 1401px) { @media screen and (max-width: 1401px) {
.container { .container {
right: 14%; right: 14%;
}
} }
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment