登录页面整合
This commit is contained in:
fan
parent
62de921294
commit
b6ffc55efd
@ -26,6 +26,7 @@ import menu from './menu';
|
||||
import ibp from './ibp';
|
||||
import approval from './approval';
|
||||
import systemGenerate from './systemGenerate';
|
||||
import login from './login';
|
||||
|
||||
export default {
|
||||
...enLocale,
|
||||
@ -55,5 +56,6 @@ export default {
|
||||
menu,
|
||||
ibp,
|
||||
approval,
|
||||
systemGenerate
|
||||
systemGenerate,
|
||||
login
|
||||
};
|
||||
|
||||
21
src/i18n/langs/en/login.js
Normal file
21
src/i18n/langs/en/login.js
Normal file
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
clickRefresh: 'Click the refresh',
|
||||
scanCodeLogin: 'Log in using mobile phone WeChat scan code',
|
||||
recommendedConfiguration: 'The recommended configuration',
|
||||
browser: 'browser：',
|
||||
googleChrome: 'Google Chrome',
|
||||
screenResolution: 'Screen resolution:',
|
||||
welcomeTo: 'Welcome to',
|
||||
mobilePhoneNumberOrEmail: 'Mobile phone number/email',
|
||||
password: 'Password',
|
||||
autoLogin: 'Auto Login',
|
||||
perfectInformation: 'Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email.',
|
||||
unableToLogin: 'Unable to login?',
|
||||
login: 'login',
|
||||
enterTheCorrectUserName: 'Please enter the correct user name',
|
||||
passwordHint: 'Password cannot be less than 5 digits',
|
||||
accountOrPasswordIsIncorrect: 'The account number or password is incorrect!',
|
||||
getLoginQrCode: 'Failed to get login qr code, please refresh and try again',
|
||||
language: 'Language',
|
||||
clickSwitchLanguage: 'Click switch language'
|
||||
};
|
||||
@ -26,6 +26,7 @@ import menu from './menu';
|
||||
import ibp from './ibp';
|
||||
import approval from './approval';
|
||||
import systemGenerate from './systemGenerate';
|
||||
import login from './login';
|
||||
|
||||
export default {
|
||||
...cnLocale,
|
||||
@ -55,5 +56,6 @@ export default {
|
||||
menu,
|
||||
ibp,
|
||||
approval,
|
||||
systemGenerate
|
||||
systemGenerate,
|
||||
login
|
||||
};
|
||||
|
||||
21
src/i18n/langs/zh/login.js
Normal file
21
src/i18n/langs/zh/login.js
Normal file
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
clickRefresh: '点击刷新',
|
||||
scanCodeLogin: '使用手机微信扫码登录',
|
||||
recommendedConfiguration: '推荐配置',
|
||||
browser: '浏览器：',
|
||||
googleChrome: '谷歌浏览器',
|
||||
screenResolution: '屏幕分辨率：',
|
||||
welcomeTo: '欢迎登录',
|
||||
mobilePhoneNumberOrEmail: '手机号/邮箱',
|
||||
password: '密码',
|
||||
autoLogin: '自动登录',
|
||||
perfectInformation: '请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。',
|
||||
unableToLogin: '无法登录?',
|
||||
login: '登录',
|
||||
enterTheCorrectUserName: '请输入正确的用户名',
|
||||
passwordHint: '密码不能小于5位',
|
||||
accountOrPasswordIsIncorrect: '账号或密码不正确！',
|
||||
getLoginQrCode: '获取登录二维码失败，请刷新重试',
|
||||
language: '语言',
|
||||
clickSwitchLanguage: '点击切换语言'
|
||||
};
|
||||
@ -4,7 +4,7 @@ import router from './router';
|
||||
import NProgress from 'nprogress'; // Progress 进度条
|
||||
import 'nprogress/nprogress.css';// Progress 进度条样式
|
||||
import { admin, userDesign} from './router';
|
||||
import { getToken, getScreenToken, getDesignToken} from '@/utils/auth'; // 验权
|
||||
import { getToken, getDesignToken} from '@/utils/auth'; // 验权
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import localStore from 'storejs';
|
||||
@ -15,13 +15,11 @@ function hasPermission(roles, permissionRoles) {
|
||||
return roles.some(role => permissionRoles.indexOf(role) >= 0);
|
||||
}
|
||||
|
||||
const whiteList = ['/login', '/dp/login', '/en/login', '/design/login', '/design/en/login', '/login/xty']; // 不重定向白名单
|
||||
const whiteList = ['/login', '/design/login', '/login/xty']; // 不重定向白名单
|
||||
|
||||
const loginPage = whiteList[0];
|
||||
|
||||
const loginScreenPage = whiteList[1];
|
||||
|
||||
const loginDesignPage = whiteList[3];
|
||||
const loginDesignPage = whiteList[1];
|
||||
|
||||
// 获取路径数据
|
||||
function getRouteInfo(to) {
|
||||
@ -29,11 +27,7 @@ function getRouteInfo(to) {
|
||||
let getTokenInfo = () => { };
|
||||
let clientId = '';
|
||||
const toRoutePath = to.redirectedFrom || to.path;
|
||||
if (/^\/dp/.test(toRoutePath) || /^\/display\/dp/.test(toRoutePath)) {
|
||||
loginPath = loginScreenPage;
|
||||
getTokenInfo = getScreenToken;
|
||||
clientId = LoginParams.DaPing.clientId;
|
||||
} else if (/^\/design/.test(toRoutePath) || /^\/scriptDisplay/.test(toRoutePath) || /^\/publish/.test(toRoutePath) || /^\/orderauthor/.test(toRoutePath) || /^\/system/.test(toRoutePath)|| /^\/display\/record/.test(toRoutePath) || /^\/display\/manage/.test(toRoutePath) || /^\/apply/.test(toRoutePath)) {
|
||||
if (/^\/design/.test(toRoutePath) || /^\/scriptDisplay/.test(toRoutePath) || /^\/publish/.test(toRoutePath) || /^\/orderauthor/.test(toRoutePath) || /^\/system/.test(toRoutePath)|| /^\/display\/record/.test(toRoutePath) || /^\/display\/manage/.test(toRoutePath) || /^\/apply/.test(toRoutePath)) {
|
||||
loginPath = loginDesignPage;
|
||||
getTokenInfo = getDesignToken;
|
||||
clientId = LoginParams.Design.clientId;
|
||||
|
||||
@ -7,10 +7,6 @@ Vue.use(Router);
|
||||
import Layout from '@/layout';
|
||||
import Login from '@/views/login/index';
|
||||
// 英文默认登陆窗口
|
||||
import LoginEn from '@/views/login/loginEn';
|
||||
import LoginScreen from '@/views/login/loginScreen';
|
||||
import LoginDesign from '@/views/login/loginDesign';
|
||||
import LoginDesignEn from '@/views/login/loginEnDesign';
|
||||
|
||||
import Jlmap3dedit from '@/views/jlmap3d/edit/jlmap3dedit';
|
||||
import Jlmap3d from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
@ -153,13 +149,6 @@ export const userPlan = '015'; // 计划系统
|
||||
export const userDesign='016'; // 设计系统
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
|
||||
// const design = getSessionStorage('design');
|
||||
// let redirectPath = '';
|
||||
// if (design === 'true') {
|
||||
// redirectPath = '/design/home';
|
||||
// } else {
|
||||
// redirectPath = '/trainingPlatform';
|
||||
// }
|
||||
|
||||
export const UrlConfig = {
|
||||
display: '/display',
|
||||
@ -288,32 +277,14 @@ export const constantRoutes = [
|
||||
},
|
||||
// 项目系统登录
|
||||
{
|
||||
path: '/login/:project',
|
||||
path: '/xty/login',
|
||||
component: Login,
|
||||
hidden: true
|
||||
},
|
||||
// 实训平台英文登录
|
||||
{
|
||||
path: '/en/login',
|
||||
component: LoginEn,
|
||||
hidden: true
|
||||
},
|
||||
// 大屏登录
|
||||
{
|
||||
path: '/dp/login',
|
||||
component: LoginScreen,
|
||||
hidden: true
|
||||
},
|
||||
// 设计平台登录
|
||||
{
|
||||
path: '/design/login',
|
||||
component: LoginDesign,
|
||||
hidden: true
|
||||
},
|
||||
// 设计平台英文登录
|
||||
{
|
||||
path: '/design/en/login',
|
||||
component: LoginDesignEn,
|
||||
component: Login,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
@ -321,11 +292,6 @@ export const constantRoutes = [
|
||||
component: Jlmap3dedit,
|
||||
hidden: true
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// redirect: redirectPath,
|
||||
// hidden: true
|
||||
// },
|
||||
{
|
||||
path: '/401',
|
||||
component: Error401,
|
||||
|
||||
@ -2199,5 +2199,6 @@ export const IbpOperation = {
|
||||
|
||||
export const loginTitle = {
|
||||
xty: '西铁院城市轨道交通实训平台',
|
||||
default: '城市轨道交通实训平台'
|
||||
login: '城市轨道交通实训平台',
|
||||
design: '城市轨道交通设计平台'
|
||||
};
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div v-if="project" class="text-box">{{ title }}</div>
|
||||
<div v-if="project==='xty'" class="text-box">{{ title }}</div>
|
||||
<div class="language_box">
|
||||
<el-tooltip effect="dark" :content="this.$t('login.clickSwitchLanguage')" placement="bottom-end">
|
||||
<el-button class="language_btn" type="text" @click="handleLanguage">{{ language }}</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
@ -9,44 +14,44 @@
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="点击刷新"
|
||||
:element-loading-text="this.$t('login.clickRefresh')"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">使用手机微信扫码登录</span>
|
||||
<span class="sub-title">{{ $t('login.scanCodeLogin') }}</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">谷歌浏览器</a>
|
||||
<legend>{{ $t('login.recommendedConfiguration') }}</legend>
|
||||
<span>{{ $t('login.browser') }}
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">{{ $t('login.googleChrome') }}</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
<span>{{ $t('login.screenResolution') + '1920*1080' }}</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">欢迎登录城市轨道交通实训平台</div>
|
||||
<div class="title_box">{{ $t('login.welcomeTo') + '城市轨道交通实训平台' }}</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" @keyup.enter.native="goToNext"/>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" :placeholder="this.$t('login.mobilePhoneNumberOrEmail')" @keyup.enter.native="goToNext" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="密码"
|
||||
ref="password"
|
||||
:placeholder="this.$t('login.password')"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
@ -57,7 +62,7 @@
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
||||
<div style="display:inline-block">
|
||||
<el-checkbox v-model="isAutoLogin">自动登录</el-checkbox>
|
||||
<el-checkbox v-model="isAutoLogin">{{ $t('login.autoLogin') }}</el-checkbox>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="right"
|
||||
@ -68,14 +73,14 @@
|
||||
>
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。</div>
|
||||
<div style="margin-top: 10px;">{{ $t('login.perfectInformation') }}</div>
|
||||
</div>
|
||||
<div slot="reference">无法登录?</div>
|
||||
<div slot="reference">{{ $t('login.unableToLogin') }}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
{{ $t('login.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -85,9 +90,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import md5 from 'js-md5';
|
||||
import QCode from '@/assets/erCode.jpg';
|
||||
import { removeSessionStorage } from '@/utils/auth';
|
||||
import { setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
||||
import Cookies from 'js-cookie';
|
||||
import md5 from 'js-md5';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
@ -97,6 +101,8 @@ import bgImg from '@/assets/bg1.jpg';
|
||||
import { setToken } from '@/utils/auth';
|
||||
import { loginTitle } from '@/scripts/ConstDic';
|
||||
import { removeToken, removeDesignToken} from '@/utils/auth';
|
||||
import LangStorage from '@/utils/lang';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
@ -104,14 +110,14 @@ export default {
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
callback(new Error(this.$t('login.enterTheCorrectUserName')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
callback(new Error(this.$t('login.passwordHint')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -125,7 +131,7 @@ export default {
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername },{ required: true, trigger: 'change', validator: validateUsername }],
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }, { required: true, trigger: 'change', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
@ -138,36 +144,42 @@ export default {
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false,
|
||||
pwdDisplay: true
|
||||
pwdDisplay: true,
|
||||
cookiesName: 'UserName',
|
||||
cookiesToken: 'UserToken',
|
||||
modelType: 'class',
|
||||
loginClient: 'LianKeTang',
|
||||
path: '/trainingPlatform',
|
||||
lang: 'zh',
|
||||
language: '中文'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return this.$route.params.project;
|
||||
return this.$route.path.split('/')[1];
|
||||
},
|
||||
title() {
|
||||
return loginTitle[this.$route.params.project||'default'];
|
||||
return loginTitle[this.$route.path.split('/')[1]];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = loginTitle[this.$route.params.project||'default'];
|
||||
document.title = loginTitle[this.project];
|
||||
this.loginRefresh();
|
||||
},
|
||||
beforeCreate() {
|
||||
removeToken();
|
||||
removeDesignToken();
|
||||
if (Cookies.get('UserName')&&Cookies.get('UserToken')) {
|
||||
const model = {'username': Cookies.get('UserName'), 'password': Cookies.get('UserToken')};
|
||||
model.type = 'class';
|
||||
model.project = this.$route.params.project;
|
||||
created() {
|
||||
this.computedAttribute();
|
||||
if (Cookies.get(this.cookiesName)&&Cookies.get(this.cookiesToken)) {
|
||||
const model = {'username': Cookies.get(this.cookiesName), 'password': Cookies.get(this.cookiesToken)};
|
||||
model.type = this.modelType;
|
||||
model.project = this.project;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.setProjectSession();
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = '账号或密码不正确！';
|
||||
}
|
||||
else{
|
||||
if (error.code==='30001') {
|
||||
this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
|
||||
} else {
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
@ -176,6 +188,28 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
computedAttribute() {
|
||||
if (this.project === 'design') {
|
||||
this.cookiesName = 'UserDesignName';
|
||||
this.cookiesToken = 'UserDesignToken';
|
||||
this.modelType = 'design';
|
||||
this.loginClient = 'Design';
|
||||
this.path = UrlConfig.design.prefix;
|
||||
}
|
||||
const nowLang = LangStorage.getLang('zh');
|
||||
if (nowLang === 'zh') {
|
||||
this.lang = 'en';
|
||||
this.language = 'English';
|
||||
}
|
||||
removeToken();
|
||||
removeDesignToken();
|
||||
},
|
||||
setProjectSession() {
|
||||
if (this.project === 'design') {
|
||||
removeSessionStorage('design');
|
||||
setSessionStorage('design', true);
|
||||
}
|
||||
},
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
@ -184,7 +218,7 @@ export default {
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.LianKeTang).then(response => {
|
||||
getLoginWmurl(LoginParams[this.loginClient]).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
@ -197,17 +231,15 @@ export default {
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('获取登录二维码失败，请刷新重试');
|
||||
this.$messageBox(this.$t('login.getLoginQrCode'));
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
@ -221,7 +253,7 @@ export default {
|
||||
this.handleLoginSucessRoute();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
if (error.data && error.data.status === '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
@ -237,10 +269,10 @@ export default {
|
||||
this.pwdDisplay=true;
|
||||
}
|
||||
},
|
||||
goToNext(){
|
||||
goToNext() {
|
||||
if (this.loginForm.username.length < 5) {
|
||||
return;
|
||||
}else{
|
||||
} else {
|
||||
this.$refs['password'].focus();
|
||||
}
|
||||
},
|
||||
@ -249,21 +281,21 @@ export default {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'class';
|
||||
model.project = this.$route.params.project;
|
||||
model.type = this.modelType;
|
||||
model.project = this.project;
|
||||
this.loading = true;
|
||||
if (this.isAutoLogin) {
|
||||
Cookies.set('UserName', model.username, { expires: 2});
|
||||
Cookies.set('UserToken', model.password, { expires: 2});
|
||||
Cookies.set(this.cookiesName, model.username, { expires: 2});
|
||||
Cookies.set(this.cookiesToken, model.password, { expires: 2});
|
||||
}
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.setProjectSession();
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = '账号或密码不正确！';
|
||||
}
|
||||
else{
|
||||
if (error.code==='30001') {
|
||||
this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
|
||||
} else {
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
@ -280,12 +312,11 @@ export default {
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
removeSessionStorage('againEnter');
|
||||
const path = '/trainingPlatform';
|
||||
this.$nextTick(() => {
|
||||
this.$i18n.locale = 'zh';
|
||||
Cookies.set('user_lang', 'zh');
|
||||
});
|
||||
this.$router.push({ path: path });
|
||||
this.$router.push({ path: this.path });
|
||||
},
|
||||
handleLanguage() {
|
||||
this.$i18n.locale = this.lang;
|
||||
LangStorage.setLang(this.lang);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -381,6 +412,16 @@ export default {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.language_box{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
.language_btn{
|
||||
/*font-weight: bold;*/
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
width: 420px;
|
||||
padding: 0 50px;
|
||||
|
||||
@ -1,456 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div class="content-box">
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loadingCode"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">欢迎登录城市轨道交通设计平台</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" @keyup.enter.native="goToNext"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="密码"
|
||||
ref="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon v-if="pwdDisplay" icon-class="eye" />
|
||||
<svg-icon v-else icon-class="eye-open" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
||||
<div style="display:inline-block">
|
||||
<el-checkbox v-model="isAutoLogin">自动登录</el-checkbox>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title=""
|
||||
width="200"
|
||||
trigger="hover"
|
||||
class="popover_box"
|
||||
>
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。</div>
|
||||
</div>
|
||||
<div slot="reference">无法登录?</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import md5 from 'js-md5';
|
||||
import Cookies from 'js-cookie';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { getLoginWmurl, checkLoginStatus } from '@/api/login';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import bgImg from '@/assets/bg1.jpg';
|
||||
import { setDesignToken } from '@/utils/auth';
|
||||
import QCode from '@/assets/erCode.jpg';
|
||||
import { removeToken, removeDesignToken} from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'LoginDesign',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
bgImg: bgImg,
|
||||
isAutoLogin: false,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername },{ required: true, trigger: 'change', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password',
|
||||
QCode: QCode,
|
||||
tipsMsg: '',
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false,
|
||||
pwdDisplay: true
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
removeToken();
|
||||
removeDesignToken();
|
||||
if (Cookies.get('UserDesignName')&&Cookies.get('UserDesignToken')) {
|
||||
const model = {'username': Cookies.get('UserDesignName'), 'password': Cookies.get('UserDesignToken')};
|
||||
model.type = 'design';
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
removeSessionStorage('design');
|
||||
setSessionStorage('design', true);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = '账号或密码不正确！';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '城市轨道交通设计平台';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
judgeAutoLogin() {
|
||||
|
||||
},
|
||||
goToNext(){
|
||||
if (this.loginForm.username.length < 5) {
|
||||
return;
|
||||
}else{
|
||||
this.$refs['password'].focus();
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.Design).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('获取登录二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setDesignToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENDESIGN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
removeSessionStorage('design');
|
||||
setSessionStorage('design', true);
|
||||
this.handleLoginSucessRoute();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdDisplay=false;
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
this.pwdDisplay=true;
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
|
||||
if (this.isAutoLogin) {
|
||||
Cookies.set('UserDesignName', model.username, { expires: 2});
|
||||
Cookies.set('UserDesignToken', model.password, { expires: 2});
|
||||
}
|
||||
// model.type = 'plan';
|
||||
model.type = 'design';
|
||||
|
||||
this.loading = true;
|
||||
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = '账号或密码不正确！';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLoginSucessRoute() {
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
removeSessionStorage('againEnter');
|
||||
const path = UrlConfig.design.prefix;
|
||||
this.$nextTick(() => {
|
||||
this.$i18n.locale = 'zh';
|
||||
Cookies.set('user_lang', 'zh');
|
||||
});
|
||||
this.$router.push({ path: path });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#fff;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
.el-form-item{
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
width: 85%;
|
||||
background: #fff;
|
||||
input {
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 8px 9px 7px 5px;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_form_box {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.item_form_password{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tip-message {
|
||||
color: #F56C61;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
height: 23px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#f0f0f0;
|
||||
$qrbg:#fff;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$qrcodeSize: 270px;
|
||||
// .popover_box {
|
||||
// position: absolute;
|
||||
// right: 80px;
|
||||
// bottom: 106px;
|
||||
// cursor: pointer;
|
||||
// color: #225592;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
.popover_box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
color: #225592;
|
||||
font-size: 14px;
|
||||
}
|
||||
.login-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
.content-box{
|
||||
width: 720px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
padding: 30px 30px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.text-box{
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.login-form {
|
||||
width: 420px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding-left: 14px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-main{
|
||||
width: 300px;
|
||||
background-color: $qrbg;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-code-box{
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system-type {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #353535;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,446 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div v-if="project" class="text-box">{{ title }}</div>
|
||||
|
||||
<div class="content-box">
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loadingCode"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="Click the refresh"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">Log in using mobile phone WeChat scan code</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>The recommended configuration</legend>
|
||||
<span>browser:
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">Google Chrome</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>screen resolution：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">Welcome to 城市轨道交通实训平台</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" @keyup.enter.native="goToNext"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="password"
|
||||
ref="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
||||
<div style="display:inline-block">
|
||||
<el-checkbox v-model="isAutoLogin">Auto Login</el-checkbox>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title=""
|
||||
width="200"
|
||||
trigger="hover"
|
||||
class="popover_box"
|
||||
>
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email.</div>
|
||||
</div>
|
||||
<div slot="reference">unable to login?</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
login
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QCode from '@/assets/erCode.jpg';
|
||||
import { removeSessionStorage } from '@/utils/auth';
|
||||
import Cookies from 'js-cookie';
|
||||
import md5 from 'js-md5';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { getLoginWmurl, checkLoginStatus } from '@/api/login';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import bgImg from '@/assets/bg1.jpg';
|
||||
import { setToken } from '@/utils/auth';
|
||||
import { loginTitle } from '@/scripts/ConstDic';
|
||||
import { removeToken, removeDesignToken} from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'LoginEn',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('Please enter the correct user name'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('Password cannot be less than 5 digits'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
QCode: QCode,
|
||||
isAutoLogin: false,
|
||||
bgImg: bgImg,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername },{ required: true, trigger: 'change', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password',
|
||||
tipsMsg: '',
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return this.$route.params.project;
|
||||
},
|
||||
title() {
|
||||
return loginTitle[this.$route.params.project||'default'];
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
removeToken();
|
||||
removeDesignToken();
|
||||
if (Cookies.get('UserName')&&Cookies.get('UserToken')) {
|
||||
const model = {'username': Cookies.get('UserName'), 'password': Cookies.get('UserToken')};
|
||||
model.type = 'class';
|
||||
model.project = this.$route.params.project;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = 'The account number or password is incorrect!';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = loginTitle[this.$route.params.project||'default'];
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.LianKeTang).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('Failed to get login qr code, please refresh and try again');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKEN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
this.handleLoginSucessRoute();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
goToNext(){
|
||||
if (this.loginForm.username.length < 5) {
|
||||
return;
|
||||
}else{
|
||||
this.$refs['password'].focus();
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'class';
|
||||
model.project = this.$route.params.project;
|
||||
this.loading = true;
|
||||
if (this.isAutoLogin) {
|
||||
Cookies.set('UserName', model.username, { expires: 2});
|
||||
Cookies.set('UserToken', model.password, { expires: 2});
|
||||
}
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = 'The account number or password is incorrect!';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleLoginSucessRoute() {
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
removeSessionStorage('againEnter');
|
||||
const path = '/trainingPlatform';
|
||||
this.$nextTick(() => {
|
||||
this.$i18n.locale = 'en';
|
||||
Cookies.set('user_lang', 'en');
|
||||
});
|
||||
this.$router.push({ path: path });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#fff;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
.el-form-item{
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
width: 85%;
|
||||
background: #fff;
|
||||
input {
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 8px 9px 7px 5px;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_form_box {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.item_form_password{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tip-message {
|
||||
color: #F56C61;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
height: 23px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#f0f0f0;
|
||||
$qrbg:#fff;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$qrcodeSize: 270px;
|
||||
.popover_box {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 106px;
|
||||
cursor: pointer;
|
||||
color: #225592;
|
||||
font-size: 14px;
|
||||
}
|
||||
.login-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
.content-box{
|
||||
width: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
padding: 30px 30px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.text-box{
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.login-form {
|
||||
width: 480px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding-left: 14px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-main{
|
||||
width: 300px;
|
||||
background-color: $qrbg;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-code-box{
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system-type {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #353535;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,441 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div class="content-box">
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loadingCode"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="Click the refresh"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">Log in using mobile phone WeChat scan code</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>The recommended configuration</legend>
|
||||
<span>browser:
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">Google Chrome</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>screen resolution：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">Welcome to 城市轨道交通设计平台</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" @keyup.enter.native="goToNext"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="password"
|
||||
ref="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
||||
<div style="display:inline-block">
|
||||
<el-checkbox v-model="isAutoLogin">Auto Login</el-checkbox>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title=""
|
||||
width="200"
|
||||
trigger="hover"
|
||||
class="popover_box"
|
||||
>
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email.</div>
|
||||
</div>
|
||||
<div slot="reference">unable to login?</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
login
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
||||
import QCode from '@/assets/erCode.jpg';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import Cookies from 'js-cookie';
|
||||
import md5 from 'js-md5';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { getLoginWmurl, checkLoginStatus } from '@/api/login';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import bgImg from '@/assets/bg1.jpg';
|
||||
import { setDesignToken } from '@/utils/auth';
|
||||
import { removeToken, removeDesignToken} from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'LoginEnDesign',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('Please enter the correct user name'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('Password cannot be less than 5 digits'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
QCode: QCode,
|
||||
isAutoLogin: false,
|
||||
bgImg: bgImg,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername },{ required: true, trigger: 'change', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password',
|
||||
tipsMsg: '',
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
removeToken();
|
||||
removeDesignToken();
|
||||
if (Cookies.get('UserDesignName')&&Cookies.get('UserDesignToken')) {
|
||||
const model = {'username': Cookies.get('UserDesignName'), 'password': Cookies.get('UserDesignToken')};
|
||||
model.type = 'design';
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
removeSessionStorage('design');
|
||||
setSessionStorage('design', true);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = 'The account number or password is incorrect!';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '城市轨道交通设计平台';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.Design).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('Failed to get login qr code, please refresh and try again');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setDesignToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENDESIGN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
removeSessionStorage('design');
|
||||
setSessionStorage('design', true);
|
||||
this.handleLoginSucessRoute();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
// model.type = 'plan';
|
||||
model.type = 'design';
|
||||
|
||||
if (this.isAutoLogin) {
|
||||
Cookies.set('UserDesignName', model.username, { expires: 2});
|
||||
Cookies.set('UserDesignToken', model.password, { expires: 2});
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.handleLoginSucessRoute();
|
||||
}).catch(error => {
|
||||
if(error.code=='30001'){
|
||||
this.tipsMsg = 'The account number or password is incorrect!';
|
||||
}
|
||||
else{
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
goToNext(){
|
||||
if (this.loginForm.username.length < 5) {
|
||||
return;
|
||||
}else{
|
||||
this.$refs['password'].focus();
|
||||
}
|
||||
},
|
||||
handleLoginSucessRoute() {
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
removeSessionStorage('againEnter');
|
||||
const path = UrlConfig.design.prefix;
|
||||
this.$nextTick(() => {
|
||||
this.$i18n.locale = 'en';
|
||||
Cookies.set('user_lang', 'en');
|
||||
});
|
||||
this.$router.push({ path: path });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#fff;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
.el-form-item{
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
width: 85%;
|
||||
background: #fff;
|
||||
input {
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 8px 9px 7px 5px;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_form_box {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.item_form_password{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tip-message {
|
||||
color: #F56C61;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
height: 23px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#f0f0f0;
|
||||
$qrbg:#fff;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$qrcodeSize: 270px;
|
||||
.popover_box {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 106px;
|
||||
cursor: pointer;
|
||||
color: #225592;
|
||||
font-size: 14px;
|
||||
}
|
||||
.login-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
.content-box{
|
||||
width: 720px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
padding: 30px 30px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.text-box{
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.login-form {
|
||||
width: 420px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding-left: 14px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-main{
|
||||
width: 300px;
|
||||
background-color: $qrbg;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-code-box{
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system-type {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #353535;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,322 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div class="content-box">
|
||||
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loadingCode"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">欢迎登录琏计划</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="密码"
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<el-popover placement="right" title="" width="200" trigger="hover" class="popover_box">
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。</div>
|
||||
</div>
|
||||
<div slot="reference">无法登录?</div>
|
||||
</el-popover>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登陆
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'js-md5';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { getLoginWmurl, checkLoginStatus } from '@/api/login';
|
||||
import { setPlanToken } from '@/utils/auth';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import bgImg from '@/assets/bg1.jpg';
|
||||
|
||||
// 登陆琏课堂
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
bgImg: bgImg,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password',
|
||||
tipsMsg: '',
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.LianJiHua).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('获取登录二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setPlanToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENPLAN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'plan';
|
||||
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
this.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.tipsMsg = '用户名或密码不正确，请重新输入。';
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#f0f0f0;
|
||||
$qrbg:#fff;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$qrcodeSize: 270px;
|
||||
|
||||
.popover_box {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 106px;
|
||||
cursor: pointer;
|
||||
color: #225592;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.content-box{
|
||||
width: 720px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
padding: 30px 30px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 420px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding-left: 14px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-main{
|
||||
width: 300px;
|
||||
background-color: $qrbg;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-code-box{
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system-type {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #353535;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,322 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
||||
<div class="content-box">
|
||||
|
||||
<div class="qrcode-main">
|
||||
<div class="login-code-box" @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loadingCode"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="150"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<span class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<div class="title_box">欢迎登录大屏系统</div>
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
placeholder="密码"
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<el-popover placement="right" title="" width="200" trigger="hover" class="popover_box">
|
||||
<div>
|
||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
||||
<div style="margin-top: 10px;">请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。</div>
|
||||
</div>
|
||||
<div slot="reference">无法登录?</div>
|
||||
</el-popover>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'js-md5';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { getLoginWmurl, checkLoginStatus } from '@/api/login';
|
||||
import { setScreenToken } from '@/utils/auth';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import bgImg from '@/assets/bg1.jpg';
|
||||
|
||||
// 登陆琏课堂
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
bgImg: bgImg,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password',
|
||||
tipsMsg: '',
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
loadingCode: false,
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loadingCode = true;
|
||||
getLoginWmurl(LoginParams.DaPing).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loadingCode = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loadingCode = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loadingCode = false;
|
||||
this.$messageBox('获取登录二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setScreenToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENSCREEN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'dp';
|
||||
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.tipsMsg = '';
|
||||
this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.tipsMsg = '用户名或密码不正确，请重新输入。';
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#f0f0f0;
|
||||
$qrbg:#fff;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$qrcodeSize: 270px;
|
||||
|
||||
.popover_box {
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 106px;
|
||||
cursor: pointer;
|
||||
color: #225592;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.content-box{
|
||||
width: 720px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
padding: 30px 30px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 420px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding-left: 14px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-main{
|
||||
width: 300px;
|
||||
background-color: $qrbg;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-code-box{
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system-type {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #353535;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
<filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
|
||||
<!-- v-if="project!=='xty' " -->
|
||||
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-(project?50:125)) +'px' }">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeList"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user