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