You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
8.9 KiB
292 lines
8.9 KiB
<template>
|
|
<div class="loginUI flex">
|
|
|
|
<div class="loginUI-img">
|
|
<img src="@/assets/crmImages/login.png" class="img"/>
|
|
</div>
|
|
|
|
<div class="loginUI-panel flex-center">
|
|
|
|
<div class="loginUI-card flex-column">
|
|
|
|
<div class="loginUI-card__title flex-center">登录</div>
|
|
<div class="loginUI-card__tips flex-center">请登录以后再继续</div>
|
|
|
|
<div class="loginUI-card__tabs">
|
|
|
|
<a-tabs default-active-key="1" @change="onClickTab">
|
|
<a-tab-pane key="1" tab="账号密码">
|
|
|
|
<a-form-model ref="loginForm" :model="loginForm" :rules="rules">
|
|
|
|
<a-form-model-item ref="username" prop="username" class="loginUI-card__tabs--line">
|
|
<a-input v-model="loginForm.username" placeholder="请输入登录用户名"
|
|
@blur="() => { $refs.username.onFieldBlur(); }">
|
|
<a-icon slot="prefix" type="user" />
|
|
</a-input>
|
|
</a-form-model-item>
|
|
|
|
<a-form-model-item ref="password" prop="password" class="loginUI-card__tabs--line">
|
|
<!-- <a-input type="password" v-model="loginForm.password" placeholder="请输入登录密码" -->
|
|
<a-input v-model="loginForm.password" placeholder="请输入登录密码"
|
|
@blur="() => { $refs.password.onFieldBlur(); }" >
|
|
<a-icon slot="prefix" type="lock" />
|
|
</a-input>
|
|
</a-form-model-item>
|
|
|
|
<a-form-model-item class="loginUI-card__tabs--line">
|
|
<div class="loginUI-card__tabs--tips flex-between">
|
|
<!-- <div class="cursor-pointer">记住我</div> -->
|
|
<div></div>
|
|
<div class="cursor-pointer" @click="onForgetPassword">忘记密码</div>
|
|
</div>
|
|
</a-form-model-item>
|
|
|
|
<a-form-model-item class="loginUI-card__tabs--line">
|
|
<myButton class="loginUI-btn--big" theme="orange" :isRound="true"
|
|
:text="isLoginLoading ? '登录中' : '登录' " :loading="isLoginLoading" @click="onSubmit"/>
|
|
</a-form-model-item>
|
|
|
|
<a-form-model-item class="loginUI-card__tabs--line">
|
|
<div class="loginUI-btn--link flex-center cursor-pointer" @click="onRegister">还没有注册账号？</div>
|
|
</a-form-model-item>
|
|
|
|
</a-form-model>
|
|
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// @ is an alias to /src
|
|
import Loading from "@/components/Layout/Loading.vue";
|
|
import myButton from "@/components/Common/myButton";
|
|
export default {
|
|
name: "Login",
|
|
components: {
|
|
Loading, myButton
|
|
},
|
|
data() {
|
|
return {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 14 },
|
|
other: '',
|
|
loginForm: {
|
|
username: 'admin',
|
|
password: '123456',
|
|
},
|
|
rules: {
|
|
username: [
|
|
{ required: true, message: 'Please input Login name', trigger: 'blur' },
|
|
{ min: 3, max: 20, message: 'Length should be 6 to 20', trigger: 'blur' },
|
|
],
|
|
password: [{ required: true, message: 'Please input password form', trigger: 'blur' }],
|
|
},
|
|
isLoggingIn:false,
|
|
isAlertShow:false,
|
|
redirect: undefined,
|
|
otherQuery: {},
|
|
isLoginLoading: false
|
|
};
|
|
},
|
|
created() {
|
|
console.log("login created")
|
|
localStorage.clear();
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler: function(route) {
|
|
const query = route.query
|
|
if (query) {
|
|
this.redirect = query.redirect
|
|
this.otherQuery = this.getOtherQuery(query)
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.loginForm.username === '') {
|
|
this.$refs.username.focus()
|
|
} else if (this.loginForm.password === '') {
|
|
this.$refs.password.focus()
|
|
};
|
|
},
|
|
methods: {
|
|
onClickTab() {
|
|
|
|
},
|
|
onRegister(){
|
|
this.$router.push('/register')
|
|
},
|
|
onSubmit() {
|
|
this.$refs.loginForm.validate(valid => {
|
|
if (valid) {
|
|
return this.login();
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
login () {
|
|
|
|
this.isLoginLoading = true;
|
|
|
|
const { username, password } = this.loginForm;
|
|
let formData = new FormData();
|
|
formData.append("username", username.trim());
|
|
formData.append("password", password);
|
|
formData.append("grant_type", 'password');
|
|
formData.append("client_id", 'client-pc');
|
|
formData.append("client_secret", '123456');
|
|
|
|
this.$api.user.login(formData, { headers: {'Content-Type': 'application/x-www-form-urlencode'} }).then(res => {
|
|
if (res.code != 0 ) return this.isLoginLoading = false,this.$message.error(res.message || '登录失败');
|
|
const { data } = res;
|
|
let token = `${data.tokenHead}${data.token}`;
|
|
this.$store.commit('user/SET_TOKEN', token);
|
|
localStorage.setItem('x-auth-token', token);
|
|
this.queryUserInfo();//獲取用戶信息
|
|
// this.redirectMain();
|
|
}).catch(error => {
|
|
this.$message.error('登陆失败！');
|
|
})
|
|
},
|
|
queryUserInfo() {
|
|
this.$store.dispatch('user/queryUserInfo').then(res => {
|
|
this.isLoginLoading = false;
|
|
if (res) this.redirectMain();
|
|
|
|
});
|
|
},
|
|
redirectMain() {
|
|
if (this.$route.query.redirect == location.hostname) {
|
|
this.$router.go(-1);
|
|
} else {
|
|
this.$router.push('/activities');
|
|
}
|
|
},
|
|
resetForm() {
|
|
this.$refs.loginForm.resetFields();
|
|
},
|
|
onForgetPassword(){
|
|
this.$router.push('/forgetPassword');
|
|
},
|
|
getOtherQuery(query) {
|
|
return Object.keys(query).reduce((acc, cur) => {
|
|
if (cur !== 'redirect') {
|
|
acc[cur] = query[cur]
|
|
}
|
|
return acc
|
|
}, {})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
.loginUI {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
min-width: 960px;
|
|
// overflow: scroll;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #fff;
|
|
font-size: 15px !important;
|
|
&-img {
|
|
width: 55%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
min-width: 550px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit:cover;
|
|
}
|
|
}
|
|
&-panel {
|
|
height: 100%;
|
|
flex: 1;
|
|
min-width: 550px;
|
|
}
|
|
&-card {
|
|
width: 450px;
|
|
&__title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
&__tips {
|
|
margin-bottom: 30px;
|
|
}
|
|
&__tabs {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
&--line {
|
|
width: 100%;
|
|
margin-bottom: 7px !important;
|
|
}
|
|
&--tips {
|
|
margin-top: -7px !important;
|
|
}
|
|
}
|
|
}
|
|
&-btn--big {
|
|
button {
|
|
width: 360px;
|
|
height: 40px;
|
|
border-radius: 20px !important;
|
|
}
|
|
margin-top: 15px;
|
|
}
|
|
&-btn--link {
|
|
color: #317ae2;
|
|
margin-top: 80px;
|
|
width: 120px;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.widget{
|
|
margin:0;
|
|
height:unset;
|
|
}
|
|
.login-panel{
|
|
/* padding:200px 0; */
|
|
position:relative;
|
|
height: 100vh;
|
|
/* background: red; */
|
|
}
|
|
.login-panel .alert{
|
|
opacity:0;
|
|
position:absolute;
|
|
top:100px;
|
|
width:100%;
|
|
}
|
|
.login-panel .alert.alert-primary{
|
|
background:#007bff;
|
|
color:#fff;
|
|
font-size:18px;
|
|
z-index: 999;
|
|
}
|
|
.login-panel .alert .widget{
|
|
position:absolute;
|
|
right:5px;
|
|
top:0;
|
|
margin:10px;
|
|
}
|
|
</style> |