Skip to content

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

22222

parent 88685215
Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 79 deletions
src/request/index/login.js
View file @ bd44fa07
...@@ -41,7 +41,16 @@ export function login(data) { ...@@ -41,7 +41,16 @@ export function login(data) {
}) })
} }
// 获取登录验证码
export function loginCode(data) {
data['identity'] = store.state.indexIdentity;
return request({
method: 'post',
url: '/web/code/loginCode',
params: data
})
}
// 退出 // 退出
export function logout(data) { export function logout(data) {
data['identity'] = store.state.indexIdentity; data['identity'] = store.state.indexIdentity;
......
src/request/index/network.js
View file @ bd44fa07
...@@ -104,6 +104,7 @@ export function request(config) { ...@@ -104,6 +104,7 @@ export function request(config) {
const setAccountInfo = '/web/register/setAccountInfo'; const setAccountInfo = '/web/register/setAccountInfo';
const passMsgOld = '/web/auth/changePassOld'; const passMsgOld = '/web/auth/changePassOld';
const getCam = '/web/auth/getCam'; const getCam = '/web/auth/getCam';
const LoginCode = '/web/code/loginCode';
const registerCode = '/web/code/registerCode'; const registerCode = '/web/code/registerCode';
const registerEmailCode = 'web/code/registerEmailCode'; const registerEmailCode = 'web/code/registerEmailCode';
const passwordEmailCode = 'web/code/passwordEmailCode'; const passwordEmailCode = 'web/code/passwordEmailCode';
...@@ -117,6 +118,7 @@ export function request(config) { ...@@ -117,6 +118,7 @@ export function request(config) {
config.url.indexOf(setAccountInfo) != -1 || config.url.indexOf(setAccountInfo) != -1 ||
config.url.indexOf(passMsgOld) != -1 || config.url.indexOf(passMsgOld) != -1 ||
config.url.indexOf(getCam) != -1 || config.url.indexOf(getCam) != -1 ||
config.url.indexOf(LoginCode) != -1 ||
config.url.indexOf(registerCode) != -1 || config.url.indexOf(registerCode) != -1 ||
config.url.indexOf(registerEmailCode) != -1 || config.url.indexOf(registerEmailCode) != -1 ||
config.url.indexOf(passwordEmailCode) != -1 || config.url.indexOf(passwordEmailCode) != -1 ||
......
src/views/index/login/Login.vue
View file @ bd44fa07
<template> <template>
<div class="container"> <div class="container">
<div class="title">账号密码登录</div> <div class="flex title_Login">
<div class="line"></div> <div @click="toLogin">
<el-form <div class="title">账号密码登录</div>
:model="loginForm" <div class="line"></div>
:rules="loginFormRules" </div>
ref="loginFormRef" <div class="codeLogin" @click="toCodeLogin">
class="demo-ruleForm" <div class="title">验证码登录</div>
> <div class="line"></div>
<el-form-item prop="phone">
<img
class="img_l"
src="../../../assets/img/login/username.png"
alt=""
/>
<el-input
v-model="loginForm.phone"
placeholder="请输入手机号"
maxlength="11"
></el-input>
</el-form-item>
<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 class="fc">忘记密码请联系管理员邮箱：ydhdservice@163.com</div> -->
</div> </div>
</el-form> </div>
<div>
<el-form
:model="loginForm"
:rules="loginFormRules"
ref="loginFormRef"
class="demo-ruleForm"
>
<el-form-item prop="phone">
<img
class="img_l"
src="../../../assets/img/login/username.png"
alt=""
/>
<el-input
v-model="loginForm.phone"
placeholder="请输入手机号"
maxlength="11"
></el-input>
</el-form-item>
<el-form-item
v-if="changeLogin == 1"
:prop="changeLogin == 1 ? '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
v-else-if="changeLogin == 2"
:prop="changeLogin == 2 ? 'code' : ''"
>
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="loginForm.code"
placeholder="请输入短信验证码"
maxlength="20"
autocomplete="off"
></el-input>
<!-- 短信验证码 -->
<div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode"
>获取验证码</span
>
<span v-show="!showCode" class="count">{{ 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">
<div>
<div class="fr" @click="register()">还没有账号？立即注册</div>
<div class="fl" @click="forgetPwd()">忘记密码？</div>
</div>
<!-- <div class="fc">忘记密码请联系管理员邮箱：ydhdservice@163.com</div> -->
</div>
</el-form>
</div>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import Cookie from "js-cookie"; import Cookie from "js-cookie";
import { login } 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";
export default { export default {
name: "index-login", name: "index-login",
data() { data() {
return { return {
isShowPwd: true, // 控制密码显示隐藏
// 手机验证短信
showCode: true,
count: "",
timer: null,
codeTime: "", //手机验证码倒计时时间
isShowPwd: true, // 控制密码显示隐藏 isShowPwd: true, // 控制密码显示隐藏
loginForm: { loginForm: {
phone: "", phone: null,
password: "", password: null,
code: null,
}, },
// 表单验证规则对象 // 表单验证规则对象
loginFormRules: { loginFormRules: {
...@@ -126,13 +167,72 @@ export default { ...@@ -126,13 +167,72 @@ export default {
}, },
}, },
], ],
// 对验证码进行校验
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
],
}, },
changeLogin: 1,
}; };
}, },
created() { created() {
this.$emit("getStatus", false); this.$emit("getStatus", false);
const code = this.$store.state.indexIdentity;
const endTime = window.localStorage.getItem("login_code_time" + code);
if (endTime && Number(endTime) > new Date().getTime()) {
this.loginForm.phone = phone;
this.intervalHandle(new Date(), Number(endTime));
}
}, },
methods: { methods: {
// 定时器倒计时
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);
}
},
// 获取手机验证短信
getCode() {
if (!this.loginForm.phone) {
return this.$message.error("请输入手机号");
}
// if (!this.codeTime) {
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
// }
// 接口获得验证码
loginCode({
phone: this.loginForm.phone,
}).then((res) => {
console.log(res, "passwordCode");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.message);
this.codeTime = res.data.data.now * 1000;
// console.log(this.codeTime)
let code = this.$store.state.indexIdentity;
window.localStorage.setItem(
"login_code_time" + code,
res.data.data.now * 1000
);
this.intervalHandle(new Date(), res.data.data.now * 1000);
});
},
// 忘记账号/密码 // 忘记账号/密码
forgetPwd() { forgetPwd() {
let code = this.$store.state.indexIdentity; let code = this.$store.state.indexIdentity;
...@@ -148,14 +248,29 @@ export default { ...@@ -148,14 +248,29 @@ export default {
changePwdStatus() { changePwdStatus() {
this.isShowPwd = !this.isShowPwd; this.isShowPwd = !this.isShowPwd;
}, },
toLogin() {
this.loginForm = {};
this.changeLogin = 1;
},
toCodeLogin() {
this.loginForm = {};
this.changeLogin = 2;
},
// 登录 // 登录
submitForm() { submitForm() {
this.$refs["loginFormRef"].validate((valid) => { this.$refs["loginFormRef"].validate((valid) => {
if (!valid) return; if (!valid) return;
login({ let obj = {};
phone: this.loginForm.phone, if (this.changeLogin == 1) {
password: this.loginForm.password, obj.phone = this.loginForm.phone;
}).then((res) => { 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"); console.log(res, "login");
if (res.data.code != 200) { if (res.data.code != 200) {
return this.$message.error(res.data.message); return this.$message.error(res.data.message);
...@@ -184,6 +299,9 @@ export default { ...@@ -184,6 +299,9 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.flex {
display: flex;
}
.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);
...@@ -191,21 +309,33 @@ export default { ...@@ -191,21 +309,33 @@ export default {
padding: 40px 60px; padding: 40px 60px;
margin-top: 0; margin-top: 0;
overflow: hidden; overflow: hidden;
.title { .title_Login {
margin: 19px 0 6px 0; justify-content: space-between;
width: 132px; .title {
height: 20px; margin: 19px 0 6px 0;
font-size: 22px; width: 132px;
font-weight: 500; height: 20px;
color: var(--color); font-size: 22px;
line-height: 20px; font-weight: 500;
} color: var(--color);
.line { line-height: 20px;
width: 125px; }
height: 3px; .line {
background: var(--color); width: 125px;
border-radius: 2px; height: 3px;
background: var(--color);
border-radius: 2px;
}
.codeLogin {
.title {
font-size: 18px !important;
}
.line {
width: 100px;
}
}
} }
.el-form { .el-form {
margin-top: 60px; margin-top: 60px;
.el-form-item { .el-form-item {
...@@ -214,7 +344,20 @@ export default { ...@@ -214,7 +344,20 @@ export default {
&:last-child { &:last-child {
margin: 0; margin: 0;
} }
.phoneCode {
position: absolute;
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 { img.img_l {
position: absolute; position: absolute;
left: 25px; left: 25px;
......
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