Skip to content

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

登录修改

parent b5880f11
Show whitespace changes
Inline Side-by-side
Showing with 482 additions and 490 deletions
src/api/login.js
View file @ 6d831a1d
......@@ -3,7 +3,11 @@
*/
import request from '../utils/request'
export function login({ Account, Password, AutoLoginId }) {
export function login({
Account,
Password,
AutoLoginId
}) {
AutoLoginId = AutoLoginId ? AutoLoginId : 0
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8'
......@@ -45,7 +49,10 @@ export function logout() {
})
}
export function loginByWeChat({ AutoLoginWorkId, AutoLoginOpenId }) {
export function loginByWeChat({
AutoLoginWorkId,
AutoLoginOpenId
}) {
return request({
url: '/login/login',
method: "post",
......@@ -68,3 +75,11 @@ export function setUserCodeCallBack(data) {
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,8 +96,11 @@
</template>
<script>
import { setUserCodeCallBack } from "../../api/login";
export default {
import {
setUserCodeCallBack,
setUserAutoLogin
} from "../../api/login";
export default {
meta: {
title: "登录 - 麦子教育系统"
},
......@@ -160,10 +119,10 @@ export default {
};
},
created() {
if (!this.$route.query.code) {
let autoLogin = localStorage.autoLogin
? JSON.parse(localStorage.autoLogin)
: null;
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;
......@@ -173,8 +132,12 @@ export default {
) {
this.isAdminUser = true;
} else {
this.isAdminUser = false;
this.getWeChat();
}
} else if (this.$route.query.wxworkAutoLogin &&
this.$route.query.wxworkAutoLogin == "1") {
this.autoLogin();
} else {
this.autoLoginLoading = true;
this.callBackUserInfo(this.$route.query.code);
......@@ -182,7 +145,7 @@ export default {
},
watch: {
$route: {
handler: function(route) {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
if (route.query.code && route.query.appid) {
// this.callBackUserInfo(route.query.code);
......@@ -192,11 +155,36 @@ export default {
}
},
mounted() {
if (tccc && tccc.Agent) {
tccc.Agent.offline();
}
// if (tccc && tccc.Agent) {
// tccc.Agent.offline();
// }
},
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",
......@@ -236,7 +224,7 @@ export default {
"https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.5.js";
const wxElement = document.body.appendChild(s);
// 调用企业微信二维码方法
wxElement.onload = function() {
wxElement.onload = function () {
var wwLogin = new WwLogin({
id: "wechat",
appid: "ww8418f1889fdded76",
......@@ -273,18 +261,18 @@ export default {
.catch(() => {
this.isLogining = false;
});
} else {
}
} else {}
setTimeout(() => {
this.isLogining = false;
}, 2000);
}
}
};
};
</script>
<style scoped>
.login {
.login {
background: url("~assets/images/login/bg.jpg") no-repeat 100% 100%;
width: 100%;
height: 100vh;
......@@ -292,9 +280,9 @@ export default {
display: flex;
align-items: center;
justify-content: center;
}
}
.logo-box {
.logo-box {
position: absolute;
top: 30px;
left: 30px;
......@@ -302,9 +290,9 @@ export default {
font-size: 48px;
font-family: perfectFont;
color: #fff;
}
}
.login .login-box {
.login .login-box {
width: 1000px;
height: 560px;
box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
......@@ -313,123 +301,120 @@ export default {
background: #fff;
display: flex;
overflow: hidden;
}
}
.login .login-box .left-card {
.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,
.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 {
}
.impowerBox .title {
display: none;
}
.login .login-box .left-card .item-card .head-icon {
}
.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 {
.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 {
.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 {
.login .login-box .left-card .item-card .publisher {
font-weight: bold;
}
}
.login .login-box .left-card .item-card .job {
.login .login-box .left-card .item-card .job {
font-size: 16px;
margin-top: 10px;
}
}
.login .login-box .left-card .item-card .content {
.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 {
.login .login-box .right-card {
flex: 1;
padding-top: 50px;
font-family: perfectFont;
}
}
.login .login-box .right-card .company {
.login .login-box .right-card .company {
font-size: 20px;
text-align: center;
font-weight: bold;
}
}
.login .login-box .right-card .t {
.login .login-box .right-card .t {
margin-top: 20px;
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
}
.field_wrap {
.field_wrap {
width: 330px;
margin: 0 auto;
font-family: perfectFont;
}
}
.field_wrap .pwd_box {
.field_wrap .pwd_box {
position: relative;
}
}
.field_wrap .pwd_box .mu-text-field {
.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 {
.field_wrap .pwd_box .mu-text-field.has-label {
min-height: 72px;
}
}
.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
.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 {
.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 {
.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;
......@@ -442,23 +427,14 @@ export default {
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 {
}
.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 {
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-input {
appearance: none;
outline: none;
border: none;
......@@ -473,14 +449,14 @@ export default {
color: rgba(0, 0, 0, 0.87);
font-family: inherit;
position: relative;
}
}
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
border-radius: 0;
}
}
.mu-text-field-line {
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
height: 1px;
......@@ -490,9 +466,9 @@ export default {
position: absolute;
box-sizing: content-box;
overflow: visible;
}
}
.mu-text-field-focus-line {
.mu-text-field-focus-line {
margin: 0;
height: 2px;
border: none;
......@@ -506,40 +482,41 @@ export default {
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 {
.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 {
.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 {
.login .login-box .right-card .forget {
margin-top: 12px;
display: flex;
}
}
.login .login-box .right-card .forget .item-forget {
.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 {
.login .login-box .right-card .forget .item-forget:last-child {
text-align: right;
}
}
.login .login-box .right-card .forget .item-forget a {
.login .login-box .right-card .forget .item-forget a {
color: #000;
text-decoration: none;
}
}
.login .login-box .right-card .forget .item-forget a:hover {
.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