Skip to content

C
campSite
Commit 0bc147e1 authored by 杨梦11's avatar 杨梦11
Browse files
Options

修改验证码登录

parent 3ebb17cb
Hide whitespace changes
Inline Side-by-side
Showing with 374 additions and 357 deletions
src/views/index/login/Login.vue
View file @ 0bc147e1
......@@ -3,7 +3,9 @@
<div class="title_Login">
<div v-if="changeLogin == 1">
<div @click="toCodeLogin" class="title title_top">
<div :class="changeLogin == 2 ? 'change_login normal' : 'normal'">验证码登录</div>
<div :class="changeLogin == 2 ? 'change_login normal' : 'normal'">
验证码登录
</div>
</div>
<div @click="toLogin" class="title">
<div :class="changeLogin == 1 ? 'change_login' : ''">
......@@ -79,7 +81,7 @@
ref="code"
v-else-if="changeLogin == 2"
>
<img alt="" class="img_l" src="@/assets/img/reset/code.png"/>
<img alt="" class="img_l" src="@/assets/img/reset/code.png" />
<el-input
maxlength="20"
placeholder="请输入短信验证码"
......@@ -88,7 +90,7 @@
<!-- 短信验证码 -->
<div class="phoneCode">
<span @click="getCode" class="code" v-show="showCode"
>获取验证码</span
>获取验证码</span
>
<span class="count" v-show="!showCode">{{ count }} s</span>
</div>
......@@ -110,411 +112,426 @@
</template>
<script>
/* eslint-disable */
import {login, loginCode} from "r/index/login";
import {mobileCheck} from "@/common/utils.js";
import {intervalTime} from "store/time";
/* eslint-disable */
import { login, loginCode } from "r/index/login";
import { mobileCheck } from "@/common/utils.js";
import { intervalTime } from "store/time";
export default {
name: "index-login",
data() {
return {
isShowPwd: true, // 控制密码显示隐藏
// 手机验证短信
showCode: true,
count: "",
timer: null,
codeTime: "", //手机验证码倒计时时间
loginForm: {
phone: null,
password: null,
code: null,
},
// 表单验证规则对象
loginFormRules: {
// 对手机号进行校验
phone: [
{required: true, message: "请输入手机号", trigger: "blur"},
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
},
],
// 对密码进行校验
password: [
{
required: true,
message: "请输入密码",
transform: (value) => value,
trigger: "blur",
export default {
name: "index-login",
data() {
return {
isShowPwd: true, // 控制密码显示隐藏
// 手机验证短信
showCode: true,
count: "",
timer: null,
codeTime: "", //手机验证码倒计时时间
loginForm: {
phone: null,
password: null,
code: null,
},
// 表单验证规则对象
loginFormRules: {
// 对手机号进行校验
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
},
trigger: "blur",
},
],
// 对密码进行校验
password: [
{
required: true,
message: "请输入密码",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
},
{
trigger: "blur",
validator: (rule, value, callback) => {
var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
if (!passwordreg.test(value)) {
callback(new Error("请输入6-12位，包含数字/字母,"));
} else {
callback();
}
},
},
{
trigger: "blur",
validator: (rule, value, callback) => {
var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
if (!passwordreg.test(value)) {
callback(new Error("请输入6-12位，包含数字/字母,"));
} else {
callback();
}
},
],
// 对验证码进行校验
code: [
{required: true, message: "请输入验证码", trigger: "blur"},
{min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
],
},
changeLogin: 1,
};
},
],
// 对验证码进行校验
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
],
},
changeLogin: 1,
};
},
created() {
this.$emit("getStatus", false);
const endTime = window.localStorage.getItem("login_code_time");
const phone = window.localStorage.getItem("login_code_phone");
if (endTime > 0) {
this.loginForm.phone = phone;
this.intervalHandleNew(endTime);
}
this.commonApi(31);
},
methods: {
// 定时器倒计时
intervalHandleNew(timeLag) {
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
window.localStorage.setItem("login_code_time_" + code, this.count);
} else {
clearInterval(this.timer);
this.showCode = true;
this.timer = null;
}
}, 1000);
}
},
created() {
this.$emit("getStatus", false);
const endTime = window.localStorage.getItem("login_code_time");
const phone = window.localStorage.getItem("login_code_phone");
if (endTime > 0) {
this.loginForm.phone = phone;
this.intervalHandleNew(endTime);
// 定时器倒计时
intervalHandle(startTime, endTime) {
// 时间差
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);
}
this.commonApi(31)
},
methods: {
// 定时器倒计时
intervalHandleNew(timeLag) {
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
window.localStorage.setItem("login_code_time_" + code, this.count);
} else {
clearInterval(this.timer);
this.showCode = true;
this.timer = null;
}
}, 1000);
}
},
// 定时器倒计时
intervalHandle(startTime, endTime) {
// 时间差
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;
// 获取手机验证短信
getCode() {
if (!this.loginForm.phone) {
return this.$message.error("请输入手机号");
}
this.$alert("若未及时收到验证码，可用手机号后六位当做验证码登录", "", {
confirmButtonText: "确定",
callback: (action) => {
// 接口获得验证码
loginCode({
phone: this.loginForm.phone,
}).then((res) => {
console.log(res, "passwordCode");
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
}, 1000);
}
},
// 获取手机验证短信
getCode() {
if (!this.loginForm.phone) {
return this.$message.error("请输入手机号");
this.$message.success(res.data.msg);
this.codeTime = res.data.expire_time;
window.localStorage.setItem(
"login_code_time",
res.data.expire_time
);
window.localStorage.setItem(
"login_code_phone",
this.loginForm.phone
);
this.intervalHandleNew(res.data.expire_time);
});
},
});
},
// 忘记账号/密码
forgetPwd() {
let code = this.$store.state.indexIdentity;
this.$router.push({
path: "/reset",
query: {
...this.$store.state.query,
code: code,
},
});
},
// 去注册
register() {
let code = this.$store.state.indexIdentity;
this.$router.push({
path: "/register",
query: {
...this.$store.state.query,
code: code,
},
});
},
// 改变密码显示状态
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;
}
// 接口获得验证码
loginCode({
phone: this.loginForm.phone,
}).then((res) => {
console.log(res, "passwordCode");
console.log(obj);
login(obj).then((res) => {
console.log(res, "login");
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.$message.success(res.data.msg);
this.codeTime = res.data.expire_time;
window.localStorage.setItem("login_code_time", res.data.expire_time);
window.localStorage.setItem("login_code_phone", this.loginForm.phone);
this.intervalHandleNew(res.data.expire_time);
});
},
// 忘记账号/密码
forgetPwd() {
let code = this.$store.state.indexIdentity;
this.$router.push({
path: "/reset",
query: {
...this.$store.state.query,
code: code
}
});
},
// 去注册
register() {
let code = this.$store.state.indexIdentity;
this.$router.push({
path: "/register",
query: {
...this.$store.state.query,
code: code
}
});
},
// 改变密码显示状态
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;
}
console.log(obj);
login(obj).then((res) => {
console.log(res, "login");
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.$message.success(res.data.msg);
// 跳转到报名
const code = this.$store.state.indexIdentity;
// token存储
this.$store.commit('login', res.data.token);
window.localStorage.setItem("index-phone-all", this.loginForm.phone);
window.localStorage.setItem("index-email-all", res.data.email);
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem("system_color" + code, res.data.cam.system_color);
// 跳转到报名
this.$router.replace({
path: "/signUp/undefined",
query: {
...this.$store.state.query,
code: code
}
});
// 跳转到报名
const code = this.$store.state.indexIdentity;
// token存储
this.$store.commit("login", res.data.token);
window.localStorage.setItem("index-phone-all", this.loginForm.phone);
window.localStorage.setItem("index-email-all", res.data.email);
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem(
"system_color" + code,
res.data.cam.system_color
);
// 跳转到报名
this.$router.replace({
path: "/signUp/undefined",
query: {
...this.$store.state.query,
code: code,
},
});
});
},
});
},
destroyed() {
this.timer && clearInterval(this.timer);
localStorage.removeItem('login_code_time');
localStorage.removeItem('login_code_phone');
}
};
},
destroyed() {
this.timer && clearInterval(this.timer);
localStorage.removeItem("login_code_time");
localStorage.removeItem("login_code_phone");
},
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;
}
.flex {
display: flex;
}
.container {
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;
.container {
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;
margin: 19px 0 0 0;
text-align: center;
.title_Login {
position: relative;
margin: 19px 0 0 0;
text-align: center;
.title {
height: 20px;
font-size: 16px;
font-weight: 500;
color: var(--color);
line-height: 20px;
text-align: right;
.title {
height: 20px;
font-size: 16px;
font-weight: 500;
color: var(--color);
line-height: 20px;
text-align: right;
&.title_top {
display: flex;
justify-content: flex-end;
&.title_top {
display: flex;
justify-content: flex-end;
.normal {
cursor: pointer
}
.normal {
cursor: pointer;
}
}
}
.change_login {
font-size: 22px;
margin-top: 32px;
color: black;
text-align: center;
}
.change_login {
font-size: 22px;
margin-top: 32px;
color: black;
text-align: center;
}
}
.el-form {
margin-top: 60px;
.el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
&:last-child {
margin: 0;
}
.phoneCode {
position: absolute;
z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.phoneCode {
position: absolute;
z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.code {
font-size: 12px;
font-weight: 600;
color: var(--color);
}
.code {
font-size: 12px;
font-weight: 600;
color: var(--color);
}
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
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;
}
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;
::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);
}
&:focus {
border-bottom-color: var(--color);
}
}
::v-deep .el-form-item__error {
color: #e0823d;
}
::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;
}
.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;
}
}
.box {
font-size: 12px;
height: 18px;
// display: block;
display: flex;
flex-direction: column;
.box {
font-size: 12px;
height: 18px;
// display: block;
display: flex;
flex-direction: column;
.fl {
float: right;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
.fl {
float: right;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
&:hover {
color: var(--color);
text-decoration: underline;
}
}
.fr {
float: left;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
.fr {
float: left;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
&: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>
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