<template>
|
<div class="m-login">
|
<div class="mid-content">
|
<div class="icon-logo">
|
<img src="../assets/img/icon_logo.png" alt />
|
</div>
|
<div class="login-content">
|
<el-form
|
:model="user"
|
:rules="userRules"
|
:validate-on-rule-change="false"
|
ref="userLogin"
|
>
|
<el-form-item prop="loginName" style="">
|
<el-input
|
v-model="user.loginName"
|
style=""
|
placeholder="请输入手机号 / 用户名"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password" class="password-form-item">
|
<el-input
|
show-password
|
@keyup.enter.native="userLogin"
|
v-model="user.password"
|
autocomplete="off"
|
style=""
|
placeholder="请输入密码"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="userLogin" style="width: 100%"
|
>登录</el-button
|
>
|
</el-form-item>
|
<p class="toRegist text-left">
|
如果还没有注册，你可以在浏览器中
|
<el-link class="cursor-pointer" target="_blank">
|
<router-link to="/Register">立即注册</router-link>
|
</el-link>
|
</p>
|
</el-form>
|
</div>
|
<div class="to-reg"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin } from "@/api/login";
|
|
export default {
|
metaInfo: {
|
title: "手机登录页",
|
},
|
mounted() {
|
const getUrlKey = (name) => {
|
return (
|
decodeURIComponent(
|
(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
|
location.href
|
) || [, ""])[1].replace(/\+/g, "%20")
|
) || null
|
);
|
};
|
this.reqcode = getUrlKey("q");
|
},
|
data() {
|
return {
|
reqcode: "",
|
phoneNum: "",
|
// verifyCode: "",
|
user: {
|
loginName: "",
|
password: "",
|
},
|
userRules: {
|
loginName: [
|
{ required: true, message: "请输入用户名", trigger: "change" },
|
],
|
password: [
|
{ required: true, message: "请输入密码", trigger: "change" },
|
],
|
},
|
};
|
},
|
methods: {
|
userLogin() {
|
this.$nextTick(() => {
|
this.$refs["userLogin"].validate((valid) => {
|
if (valid) {
|
let param = {
|
username: this.user.loginName,
|
password: this.user.password,
|
};
|
this.testLogin(param);
|
} else {
|
this.userRules = {};
|
}
|
});
|
this.userRules = {};
|
});
|
},
|
|
async testLogin(param) {
|
tologin(param)
|
.then((json) => {
|
const loginedInfo = {
|
access_token: json.data.token_type + " " + json.data.access_token,
|
refresh_token: json.data.refresh_token,
|
};
|
sessionStorage.setItem("expires_in", json.data.expires_in);
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
|
sessionStorage.setItem(
|
"userInfo",
|
JSON.stringify(json.data.userInfo)
|
);
|
if (this.user.loginName == "basic") {
|
this.AuthData.background = true;
|
}
|
if (!json.data.userInfo.phoneNum || json.data.userInfo.reEditPwd) {
|
sessionStorage.setItem(
|
"userInfo",
|
JSON.stringify(json.data.userInfo)
|
);
|
this.$router.push({
|
name: "BindPhone",
|
params: { userInfo: json.data.userInfo },
|
});
|
} else {
|
this.$router.push({
|
name: "ChoseActivateWay",
|
query: { try: 1, q: this.reqcode },
|
});
|
}
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
},
|
beforeDestroy() {
|
window.onresize = null;
|
},
|
};
|
</script>
|
<style lang="scss">
|
.m-login {
|
.text-left {
|
text-align: left;
|
font-size: 14px;
|
}
|
background-color: rgba(249, 249, 249, 1);
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
.mid-content {
|
height: 70%;
|
.icon-logo {
|
margin-bottom: 30px;
|
|
img {
|
width: 60px;
|
}
|
}
|
.login-content {
|
box-sizing: border-box;
|
padding: 0 30px;
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: #ffffff;
|
background-image: none;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
box-sizing: border-box;
|
color: #3d3d3d;
|
display: inline-block;
|
font-size: 16px;
|
border-radius: 5px;
|
height: 50px;
|
line-height: 40px;
|
outline: none;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
