Skip to content

C
confucius
Commit 6d831a1d authored by 黄奎's avatar 黄奎
Browse files
Options

登录修改

parent b5880f11
Hide whitespace changes
Inline Side-by-side
Showing with 482 additions and 490 deletions
src/api/login.js
View file @ 6d831a1d
......@@ -3,68 +3,83 @@
*/
import request from '../utils/request'
export function login({ Account, Password, AutoLoginId }) {
AutoLoginId = AutoLoginId ? AutoLoginId : 0
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8'
// }, 申明Headers信息，不包含token ,token通过注入添加
return request({
url: '/login/login',
method: "post",
// header,
data: {
Account,
Password,
AccountType: 1,
AutoLoginId
}
});
export function login({
Account,
Password,
AutoLoginId
}) {
AutoLoginId = AutoLoginId ? AutoLoginId : 0
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8'
// }, 申明Headers信息，不包含token ,token通过注入添加
return request({
url: '/login/login',
method: "post",
// header,
data: {
Account,
Password,
AccountType: 1,
AutoLoginId
}
});
}
export function getInfo(token) {
return request({
url: '/user/info',
method: 'get',
data: {}
})
return request({
url: '/user/info',
method: 'get',
data: {}
})
}
export function getSeatNewToken() {
return request({
url: '/user/GetSeatNewToken',
method: 'post',
data: {}
})
return request({
url: '/user/GetSeatNewToken',
method: 'post',
data: {}
})
}
export function logout() {
return request({
url: '/logout',
method: 'post',
data: {}
})
return request({
url: '/logout',
method: 'post',
data: {}
})
}
export function loginByWeChat({ AutoLoginWorkId, AutoLoginOpenId }) {
return request({
url: '/login/login',
method: "post",
// header,
data: {
Account: '',
Password: '',
AccountType: 1,
AutoLoginId: 0,
AutoLoginWorkId,
AutoLoginOpenId
}
});
export function loginByWeChat({
AutoLoginWorkId,
AutoLoginOpenId
}) {
return request({
url: '/login/login',
method: "post",
// header,
data: {
Account: '',
Password: '',
AccountType: 1,
AutoLoginId: 0,
AutoLoginWorkId,
AutoLoginOpenId
}
});
}
export function setUserCodeCallBack(data) {
return request({
url: '/QYWeChat/SetUserCodeCallBack',
method: 'post',
data
})
}
\ No newline at end of file
return request({
url: '/QYWeChat/SetUserCodeCallBack',
method: 'post',
data
})
}
export function setUserAutoLogin(data) {
return request({
url: '/QYWeChat/SetUserAutoLogin',
method: 'post',
data
})
}
src/pages/user/login.vue
View file @ 6d831a1d
......@@ -2,25 +2,12 @@
<div class="login">
<div class="login-box">
<div class="left-card">
<q-carousel
v-model="slide"
:autoplay="10000"
swipeable
animated
control-color="white"
:padding="false"
infinite
height="100%"
class="bg-primary text-white shadow-1"
>
<q-carousel v-model="slide" :autoplay="10000" swipeable animated control-color="white" :padding="false" infinite
height="100%" class="bg-primary text-white shadow-1">
<q-carousel-slide name="first" class="q-pa-none">
<div class="item-card">
<div class="head-icon">
<q-img
ratio="1"
:img-style="{ borderRadius: '50%' }"
src="../../assets/images/login/zhang.png"
/>
<q-img ratio="1" :img-style="{ borderRadius: '50%' }" src="../../assets/images/login/zhang.png" />
</div>
<div class="publisher">张载</div>
<div class="job">思想家、教育家</div>
......@@ -32,11 +19,7 @@
<q-carousel-slide name="tow" class="q-pa-none">
<div class="item-card">
<div class="head-icon">
<q-img
ratio="1"
:img-style="{ borderRadius: '50%' }"
src="../../assets/images/login/kong.jpg"
/>
<q-img ratio="1" :img-style="{ borderRadius: '50%' }" src="../../assets/images/login/kong.jpg" />
</div>
<div class="publisher">孔子</div>
<div class="job">儒家学派创始人，编纂《春秋》，创办私学</div>
......@@ -57,13 +40,8 @@
<div class="pwd_box">
<div class="mu-text-field has-label">
<div class="mu-text-field-content">
<q-input
v-model="account"
ref="account"
class="text-h6"
label="账号"
:rules="[val => !!val || '请输入账号信息']"
/>
<q-input v-model="account" ref="account" class="text-h6" label="账号"
:rules="[val => !!val || '请输入账号信息']" />
</div>
</div>
</div>
......@@ -72,28 +50,14 @@
<div class="pwd_box">
<div class="mu-text-field has-label">
<div class="mu-text-field-content">
<q-input
v-model="pwd"
ref="pwd"
class="text-h6"
@keyup.enter.native="gologin"
label="密码"
type="password"
:rules="[val => !!val || '请输入密码凭证']"
/>
<q-input v-model="pwd" ref="pwd" class="text-h6" @keyup.enter.native="gologin" label="密码"
type="password" :rules="[val => !!val || '请输入密码凭证']" />
</div>
</div>
</div>
</div>
<div class="field_wrap" style="margin-top:10px;">
<q-btn
:loading="isLogining"
size="lg"
label="立即登录"
@click="gologin"
class="full-width"
color="primary"
>
<q-btn :loading="isLogining" size="lg" label="立即登录" @click="gologin" class="full-width" color="primary">
<template v-slot:loading>
<q-spinner-facebook />
</template>
......@@ -110,17 +74,9 @@
</div>
</div>
</div>
<div
class="field_wrap"
style="margin-top:20px !important"
id="wechat"
v-if="!isAdminUser && !autoLoginLoading"
></div>
<div
class="field_wrap q-py-lg column justify-center"
style="height:300px"
v-if="autoLoginLoading"
>
<div class="field_wrap" style="margin-top:20px !important" id="wechat" v-if="!isAdminUser && !autoLoginLoading">
</div>
<div class="field_wrap q-py-lg column justify-center" style="height:300px" v-if="autoLoginLoading">
<div class="text-center">
<q-spinner-ios color="primary" size="4em" class="q-mb-md" />
</div>
......@@ -140,130 +96,114 @@
</template>
<script>
import { setUserCodeCallBack } from "../../api/login";
export default {
meta: {
title: "登录 - 麦子教育系统"
},
data() {
return {
accountStatus: false,
account: "",
pwdStatus: false,
pwd: "",
isLogining: false,
isAutoLogin: false,
slide: "first",
redirect: undefined,
isAdminUser: false,
autoLoginLoading: false
};
},
created() {
if (!this.$route.query.code) {
let autoLogin = localStorage.autoLogin
? JSON.parse(localStorage.autoLogin)
: null;
this.account = autoLogin ? autoLogin.acc : "";
this.pwd = autoLogin ? autoLogin.pwd : "";
this.isAutoLogin = autoLogin ? true : false;
if (
(!this.isAutoLogin && this.$route.query.isa == "0021") ||
process.env.NODE_ENV == "development"
) {
this.isAdminUser = true;
import {
setUserCodeCallBack,
setUserAutoLogin
} from "../../api/login";
export default {
meta: {
title: "登录 - 麦子教育系统"
},
data() {
return {
accountStatus: false,
account: "",
pwdStatus: false,
pwd: "",
isLogining: false,
isAutoLogin: false,
slide: "first",
redirect: undefined,
isAdminUser: false,
autoLoginLoading: false
};
},
created() {
if (!this.$route.query.code && !this.$route.query.wxworkAutoLogin) {
let autoLogin = localStorage.autoLogin ?
JSON.parse(localStorage.autoLogin) :
null;
this.account = autoLogin ? autoLogin.acc : "";
this.pwd = autoLogin ? autoLogin.pwd : "";
this.isAutoLogin = autoLogin ? true : false;
if (
(!this.isAutoLogin && this.$route.query.isa == "0021") ||
process.env.NODE_ENV == "development"
) {
this.isAdminUser = true;
} else {
this.isAdminUser = false;
this.getWeChat();
}
} else if (this.$route.query.wxworkAutoLogin &&
this.$route.query.wxworkAutoLogin == "1") {
this.autoLogin();
} else {
this.getWeChat();
this.autoLoginLoading = true;
this.callBackUserInfo(this.$route.query.code);
}
} else {
this.autoLoginLoading = true;
this.callBackUserInfo(this.$route.query.code);
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
if (route.query.code && route.query.appid) {
// this.callBackUserInfo(route.query.code);
}
},
immediate: true
}
},
mounted() {
if (tccc && tccc.Agent) {
tccc.Agent.offline();
}
},
methods: {
callBackUserInfo(code) {
setUserCodeCallBack({
appcode: "LinYangERP",
code: code
})
.then(r => {
this.loginErp(r.Data.UserId, r.Data.OpenId);
})
.catch(() => {
this.autoLoginLoading = false;
this.getWeChat();
window.location.href = `http://${window.location.host}/#/login`;
});
},
loginErp(AutoLoginWorkId, AutoLoginOpenId) {
this.$store
.dispatch("WeChatToLogin", {
AutoLoginWorkId,
AutoLoginOpenId
})
.then(res => {
this.$router.push({
path: this.redirect || "/home"
});
})
.catch(() => {
this.autoLoginLoading = false;
this.getWeChat();
window.location.href = `http://${window.location.host}/#/login`;
});
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
if (route.query.code && route.query.appid) {
// this.callBackUserInfo(route.query.code);
}
},
immediate: true
}
},
getWeChat() {
// 动态引入企业微信js文件
const s = document.createElement("script");
s.type = "text/javascript";
s.src =
"https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.5.js";
const wxElement = document.body.appendChild(s);
// 调用企业微信二维码方法
wxElement.onload = function() {
var wwLogin = new WwLogin({
id: "wechat",
appid: "ww8418f1889fdded76",
agentid: "1000016",
redirect_uri: encodeURIComponent(window.location.href),
state: new Date().getTime(),
href: "",
lang: "zh"
});
};
mounted() {
// if (tccc && tccc.Agent) {
// tccc.Agent.offline();
// }
},
gologin() {
this.isLogining = true;
this.$refs.account.validate();
this.$refs.pwd.validate();
if (!this.$refs.account.hasError && !this.$refs.pwd.hasError) {
// this.$q.notify({
// icon: 'error',
// color: 'negative',
// message: '账号或密码错误，请重新输入',
// position: 'top'
// })
methods: {
autoLogin() {
setUserAutoLogin({
mark: "LinYangERP"
}).then(r => {
if (r.Data != "") {
alert(r.data);
location.href = r.Data;
} else {
this.showErrorMsg(
"未获取到授权回调信息，这可能是没有配置应用信息导致，请联系管理员"
);
}
});
},
goToAutoLogin() {
if (document.URL.indexOf("?loginId=") != -1) {
let url = `http://${
window.location.host
}/#/autologin?${document.URL.substring(
document.URL.indexOf("?") + 1,
document.URL.length
)}`;
document.location.href = url;
}
},
callBackUserInfo(code) {
setUserCodeCallBack({
appcode: "LinYangERP",
code: code
})
.then(r => {
this.loginErp(r.Data.UserId, r.Data.OpenId);
})
.catch(() => {
this.autoLoginLoading = false;
this.getWeChat();
window.location.href = `http://${window.location.host}/#/login`;
});
},
loginErp(AutoLoginWorkId, AutoLoginOpenId) {
this.$store
.dispatch("Login", {
Account: this.account,
Password: this.pwd,
AutoLoginId: 0
.dispatch("WeChatToLogin", {
AutoLoginWorkId,
AutoLoginOpenId
})
.then(res => {
this.$router.push({
......@@ -271,275 +211,312 @@ export default {
});
})
.catch(() => {
this.isLogining = false;
this.autoLoginLoading = false;
this.getWeChat();
window.location.href = `http://${window.location.host}/#/login`;
});
} else {
},
getWeChat() {
// 动态引入企业微信js文件
const s = document.createElement("script");
s.type = "text/javascript";
s.src =
"https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.5.js";
const wxElement = document.body.appendChild(s);
// 调用企业微信二维码方法
wxElement.onload = function () {
var wwLogin = new WwLogin({
id: "wechat",
appid: "ww8418f1889fdded76",
agentid: "1000016",
redirect_uri: encodeURIComponent(window.location.href),
state: new Date().getTime(),
href: "",
lang: "zh"
});
};
},
gologin() {
this.isLogining = true;
this.$refs.account.validate();
this.$refs.pwd.validate();
if (!this.$refs.account.hasError && !this.$refs.pwd.hasError) {
// this.$q.notify({
// icon: 'error',
// color: 'negative',
// message: '账号或密码错误，请重新输入',
// position: 'top'
// })
this.$store
.dispatch("Login", {
Account: this.account,
Password: this.pwd,
AutoLoginId: 0
})
.then(res => {
this.$router.push({
path: this.redirect || "/home"
});
})
.catch(() => {
this.isLogining = false;
});
} else {}
setTimeout(() => {
this.isLogining = false;
}, 2000);
}
setTimeout(() => {
this.isLogining = false;
}, 2000);
}
}
};
};
</script>
<style scoped>
.login {
background: url("~assets/images/login/bg.jpg") no-repeat 100% 100%;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
font-size: 48px;
font-family: perfectFont;
color: #fff;
}
.login .login-box {
width: 1000px;
height: 560px;
box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
0 16px 24px 2px rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
display: flex;
overflow: hidden;
}
.login .login-box .left-card {
width: 440px;
height: 100%;
}
.login .login-box .left-card .item-card {
background: url("~assets/images/login/yinhao.png") right bottom/221px
no-repeat,
linear-gradient(180deg, #43e97b, #1aad19);
width: 100%;
height: 100%;
padding-top: 96px;
color: white;
box-sizing: border-box;
}
.impowerBox .title {
display: none;
}
.login .login-box .left-card .item-card .head-icon {
width: 104px;
height: 104px;
margin: 0 auto;
border-radius: 100%;
background: rgba(40, 120, 255, 0.5);
padding: 5px;
}
.login .login-box .left-card .item-card .head-icon img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.login .login-box .left-card .item-card .publisher,
.login .login-box .left-card .item-card .job {
margin-top: 20px;
font-size: 24px;
font-family: perfectFont;
text-align: center;
}
.login .login-box .left-card .item-card .publisher {
font-weight: bold;
}
.login .login-box .left-card .item-card .job {
font-size: 16px;
margin-top: 10px;
}
.login .login-box .left-card .item-card .content {
font-size: 13px;
font-family: perfectFont;
margin-top: 20px;
margin: 20px;
line-height: 24px;
text-indent: 28px;
}
.login .login-box .right-card {
flex: 1;
padding-top: 50px;
font-family: perfectFont;
}
.login .login-box .right-card .company {
font-size: 20px;
text-align: center;
font-weight: bold;
}
.login .login-box .right-card .t {
margin-top: 20px;
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
.field_wrap {
width: 330px;
margin: 0 auto;
font-family: perfectFont;
}
.field_wrap .pwd_box {
position: relative;
}
.field_wrap .pwd_box .mu-text-field {
width: 100%;
color: rgba(0, 0, 0, 0.54);
}
.field_wrap .pwd_box .mu-text-field.has-label {
min-height: 72px;
}
.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
display: block;
height: 100%;
padding-bottom: 12px;
padding-top: 4px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
padding-top: 28px;
padding-bottom: 12px;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field-label {
line-height: 20px;
transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
cursor: text;
transform: translateZ(0) scale(0.75);
transform-origin: left top;
user-select: none;
pointer-events: none;
backface-visibility: hidden;
font-size: 16px;
font-family: perfectFont;
font-weight: bold;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field.has-label
.mu-text-field-label {
top: 8px;
position: absolute;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field-input {
appearance: none;
outline: none;
border: none;
background: none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.87);
font-family: inherit;
position: relative;
}
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
border-radius: 0;
}
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
height: 1px;
border: none;
left: 0;
right: 0;
position: absolute;
box-sizing: content-box;
overflow: visible;
}
.mu-text-field-focus-line {
margin: 0;
height: 2px;
border: none;
background-color: #0d2481;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
transform: scaleX(0);
transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.mu-text-field-focus-line.focus {
transform: scaleX(1);
}
.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #0d2481 !important;
border-color: #0d2481 !important;
}
.login .login-box .right-card .forget {
margin-top: 12px;
display: flex;
}
.login .login-box .right-card .forget .item-forget {
flex: 1;
font-size: 14px;
font-family: perfectFont;
}
.login .login-box .right-card .forget .item-forget:last-child {
text-align: right;
}
.login .login-box .right-card .forget .item-forget a {
color: #000;
text-decoration: none;
}
.login .login-box .right-card .forget .item-forget a:hover {
color: #0d2481;
}
.login {
background: url("~assets/images/login/bg.jpg") no-repeat 100% 100%;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
font-size: 48px;
font-family: perfectFont;
color: #fff;
}
.login .login-box {
width: 1000px;
height: 560px;
box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
0 16px 24px 2px rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
display: flex;
overflow: hidden;
}
.login .login-box .left-card {
width: 440px;
height: 100%;
}
.login .login-box .left-card .item-card {
background: url("~assets/images/login/yinhao.png") right bottom/221px no-repeat,
linear-gradient(180deg, #43e97b, #1aad19);
width: 100%;
height: 100%;
padding-top: 96px;
color: white;
box-sizing: border-box;
}
.impowerBox .title {
display: none;
}
.login .login-box .left-card .item-card .head-icon {
width: 104px;
height: 104px;
margin: 0 auto;
border-radius: 100%;
background: rgba(40, 120, 255, 0.5);
padding: 5px;
}
.login .login-box .left-card .item-card .head-icon img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.login .login-box .left-card .item-card .publisher,
.login .login-box .left-card .item-card .job {
margin-top: 20px;
font-size: 24px;
font-family: perfectFont;
text-align: center;
}
.login .login-box .left-card .item-card .publisher {
font-weight: bold;
}
.login .login-box .left-card .item-card .job {
font-size: 16px;
margin-top: 10px;
}
.login .login-box .left-card .item-card .content {
font-size: 13px;
font-family: perfectFont;
margin-top: 20px;
margin: 20px;
line-height: 24px;
text-indent: 28px;
}
.login .login-box .right-card {
flex: 1;
padding-top: 50px;
font-family: perfectFont;
}
.login .login-box .right-card .company {
font-size: 20px;
text-align: center;
font-weight: bold;
}
.login .login-box .right-card .t {
margin-top: 20px;
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
.field_wrap {
width: 330px;
margin: 0 auto;
font-family: perfectFont;
}
.field_wrap .pwd_box {
position: relative;
}
.field_wrap .pwd_box .mu-text-field {
width: 100%;
color: rgba(0, 0, 0, 0.54);
}
.field_wrap .pwd_box .mu-text-field.has-label {
min-height: 72px;
}
.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
display: block;
height: 100%;
padding-bottom: 12px;
padding-top: 4px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
padding-top: 28px;
padding-bottom: 12px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-label {
line-height: 20px;
transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
cursor: text;
transform: translateZ(0) scale(0.75);
transform-origin: left top;
user-select: none;
pointer-events: none;
backface-visibility: hidden;
font-size: 16px;
font-family: perfectFont;
font-weight: bold;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field.has-label .mu-text-field-label {
top: 8px;
position: absolute;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-input {
appearance: none;
outline: none;
border: none;
background: none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.87);
font-family: inherit;
position: relative;
}
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
border-radius: 0;
}
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
height: 1px;
border: none;
left: 0;
right: 0;
position: absolute;
box-sizing: content-box;
overflow: visible;
}
.mu-text-field-focus-line {
margin: 0;
height: 2px;
border: none;
background-color: #0d2481;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
transform: scaleX(0);
transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.mu-text-field-focus-line.focus {
transform: scaleX(1);
}
.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #0d2481 !important;
border-color: #0d2481 !important;
}
.login .login-box .right-card .forget {
margin-top: 12px;
display: flex;
}
.login .login-box .right-card .forget .item-forget {
flex: 1;
font-size: 14px;
font-family: perfectFont;
}
.login .login-box .right-card .forget .item-forget:last-child {
text-align: right;
}
.login .login-box .right-card .forget .item-forget a {
color: #000;
text-decoration: none;
}
.login .login-box .right-card .forget .item-forget a:hover {
color: #0d2481;
}
</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