登录页面整合
This commit is contained in:
fan
parent
62de921294
commit
b6ffc55efd
@ -26,6 +26,7 @@ import menu from './menu';
|
|||||||
import ibp from './ibp';
|
import ibp from './ibp';
|
||||||
import approval from './approval';
|
import approval from './approval';
|
||||||
import systemGenerate from './systemGenerate';
|
import systemGenerate from './systemGenerate';
|
||||||
|
import login from './login';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
...enLocale,
|
...enLocale,
|
||||||
@ -55,5 +56,6 @@ export default {
|
|||||||
menu,
|
menu,
|
||||||
ibp,
|
ibp,
|
||||||
approval,
|
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 ibp from './ibp';
|
||||||
import approval from './approval';
|
import approval from './approval';
|
||||||
import systemGenerate from './systemGenerate';
|
import systemGenerate from './systemGenerate';
|
||||||
|
import login from './login';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
...cnLocale,
|
...cnLocale,
|
||||||
@ -55,5 +56,6 @@ export default {
|
|||||||
menu,
|
menu,
|
||||||
ibp,
|
ibp,
|
||||||
approval,
|
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 from 'nprogress'; // Progress 进度条
|
||||||
import 'nprogress/nprogress.css';// Progress 进度条样式
|
import 'nprogress/nprogress.css';// Progress 进度条样式
|
||||||
import { admin, userDesign} from './router';
|
import { admin, userDesign} from './router';
|
||||||
import { getToken, getScreenToken, getDesignToken} from '@/utils/auth'; // 验权
|
import { getToken, getDesignToken} from '@/utils/auth'; // 验权
|
||||||
import { LoginParams } from '@/utils/login';
|
import { LoginParams } from '@/utils/login';
|
||||||
import { getSessionStorage } from '@/utils/auth';
|
import { getSessionStorage } from '@/utils/auth';
|
||||||
import localStore from 'storejs';
|
import localStore from 'storejs';
|
||||||
@ -15,13 +15,11 @@ function hasPermission(roles, permissionRoles) {
|
|||||||
return roles.some(role => permissionRoles.indexOf(role) >= 0);
|
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 loginPage = whiteList[0];
|
||||||
|
|
||||||
const loginScreenPage = whiteList[1];
|
const loginDesignPage = whiteList[1];
|
||||||
|
|
||||||
const loginDesignPage = whiteList[3];
|
|
||||||
|
|
||||||
// 获取路径数据
|
// 获取路径数据
|
||||||
function getRouteInfo(to) {
|
function getRouteInfo(to) {
|
||||||
@ -29,11 +27,7 @@ function getRouteInfo(to) {
|
|||||||
let getTokenInfo = () => { };
|
let getTokenInfo = () => { };
|
||||||
let clientId = '';
|
let clientId = '';
|
||||||
const toRoutePath = to.redirectedFrom || to.path;
|
const toRoutePath = to.redirectedFrom || to.path;
|
||||||
if (/^\/dp/.test(toRoutePath) || /^\/display\/dp/.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 = 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)) {
|
|
||||||
loginPath = loginDesignPage;
|
loginPath = loginDesignPage;
|
||||||
getTokenInfo = getDesignToken;
|
getTokenInfo = getDesignToken;
|
||||||
clientId = LoginParams.Design.clientId;
|
clientId = LoginParams.Design.clientId;
|
||||||
|
|||||||
@ -7,10 +7,6 @@ Vue.use(Router);
|
|||||||
import Layout from '@/layout';
|
import Layout from '@/layout';
|
||||||
import Login from '@/views/login/index';
|
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 Jlmap3dedit from '@/views/jlmap3d/edit/jlmap3dedit';
|
||||||
import Jlmap3d from '@/views/jlmap3d/drive/jl3ddrive';
|
import Jlmap3d from '@/views/jlmap3d/drive/jl3ddrive';
|
||||||
@ -153,13 +149,6 @@ export const userPlan = '015'; // 计划系统
|
|||||||
export const userDesign='016'; // 设计系统
|
export const userDesign='016'; // 设计系统
|
||||||
const isDev = process.env.NODE_ENV === 'development';
|
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 = {
|
export const UrlConfig = {
|
||||||
display: '/display',
|
display: '/display',
|
||||||
@ -288,32 +277,14 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
// 项目系统登录
|
// 项目系统登录
|
||||||
{
|
{
|
||||||
path: '/login/:project',
|
path: '/xty/login',
|
||||||
component: Login,
|
component: Login,
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
// 实训平台英文登录
|
|
||||||
{
|
|
||||||
path: '/en/login',
|
|
||||||
component: LoginEn,
|
|
||||||
hidden: true
|
|
||||||
},
|
|
||||||
// 大屏登录
|
|
||||||
{
|
|
||||||
path: '/dp/login',
|
|
||||||
component: LoginScreen,
|
|
||||||
hidden: true
|
|
||||||
},
|
|
||||||
// 设计平台登录
|
// 设计平台登录
|
||||||
{
|
{
|
||||||
path: '/design/login',
|
path: '/design/login',
|
||||||
component: LoginDesign,
|
component: Login,
|
||||||
hidden: true
|
|
||||||
},
|
|
||||||
// 设计平台英文登录
|
|
||||||
{
|
|
||||||
path: '/design/en/login',
|
|
||||||
component: LoginDesignEn,
|
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -321,11 +292,6 @@ export const constantRoutes = [
|
|||||||
component: Jlmap3dedit,
|
component: Jlmap3dedit,
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/',
|
|
||||||
// redirect: redirectPath,
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: '/401',
|
path: '/401',
|
||||||
component: Error401,
|
component: Error401,
|
||||||
|
|||||||
@ -2199,5 +2199,6 @@ export const IbpOperation = {
|
|||||||
|
|
||||||
export const loginTitle = {
|
export const loginTitle = {
|
||||||
xty: '西铁院城市轨道交通实训平台',
|
xty: '西铁院城市轨道交通实训平台',
|
||||||
default: '城市轨道交通实训平台'
|
login: '城市轨道交通实训平台',
|
||||||
|
design: '城市轨道交通设计平台'
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
|
<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="content-box">
|
||||||
<div class="qrcode-main">
|
<div class="qrcode-main">
|
||||||
<div class="login-code-box" @click="loginRefresh">
|
<div class="login-code-box" @click="loginRefresh">
|
||||||
@ -9,44 +14,44 @@
|
|||||||
:value="loginUrl"
|
:value="loginUrl"
|
||||||
:class-name="qrcodeClassName"
|
:class-name="qrcodeClassName"
|
||||||
:size="150"
|
:size="150"
|
||||||
element-loading-text="点击刷新"
|
:element-loading-text="this.$t('login.clickRefresh')"
|
||||||
element-loading-spinner="el-icon-refresh"
|
element-loading-spinner="el-icon-refresh"
|
||||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-tip">
|
<div class="login-tip">
|
||||||
<span class="sub-title">使用手机微信扫码登录</span>
|
<span class="sub-title">{{ $t('login.scanCodeLogin') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tip-info">
|
<div class="tip-info">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>推荐配置</legend>
|
<legend>{{ $t('login.recommendedConfiguration') }}</legend>
|
||||||
<span>浏览器：
|
<span>{{ $t('login.browser') }}
|
||||||
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">谷歌浏览器</a>
|
<a href="https://www.google.cn/chrome/" target="_blank" style="text-decoration: underline;">{{ $t('login.googleChrome') }}</a>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<span>屏幕分辨率：1920*1080</span>
|
<span>{{ $t('login.screenResolution') + '1920*1080' }}</span>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form ref="loginForm" class="login-form" :model="loginForm" :rules="loginRules" label-position="left">
|
<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">
|
<el-form-item prop="username" class="item_form_box">
|
||||||
<span class="svg-container svg-container_login">
|
<span class="svg-container svg-container_login">
|
||||||
<svg-icon icon-class="user" />
|
<svg-icon icon-class="user" />
|
||||||
</span>
|
</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>
|
||||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="password" />
|
<svg-icon icon-class="password" />
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
|
ref="password"
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
name="password"
|
name="password"
|
||||||
:type="pwdType"
|
:type="pwdType"
|
||||||
placeholder="密码"
|
:placeholder="this.$t('login.password')"
|
||||||
ref="password"
|
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
/>
|
/>
|
||||||
<span class="show-pwd" @click="showPwd">
|
<span class="show-pwd" @click="showPwd">
|
||||||
@ -57,7 +62,7 @@
|
|||||||
<div class="tip-message">{{ tipsMsg }}</div>
|
<div class="tip-message">{{ tipsMsg }}</div>
|
||||||
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
<div style="display: inline-block;width: 100%;margin-bottom: 10px;">
|
||||||
<div style="display:inline-block">
|
<div style="display:inline-block">
|
||||||
<el-checkbox v-model="isAutoLogin">自动登录</el-checkbox>
|
<el-checkbox v-model="isAutoLogin">{{ $t('login.autoLogin') }}</el-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="right"
|
placement="right"
|
||||||
@ -68,14 +73,14 @@
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<img :src="QCode" alt="" style="width: 100px; height: 100px; display: block; margin:0 auto;">
|
<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>
|
||||||
<div slot="reference">无法登录?</div>
|
<div slot="reference">{{ $t('login.unableToLogin') }}</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||||
登录
|
{{ $t('login.login') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -85,9 +90,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import md5 from 'js-md5';
|
|
||||||
import QCode from '@/assets/erCode.jpg';
|
import QCode from '@/assets/erCode.jpg';
|
||||||
import { removeSessionStorage } from '@/utils/auth';
|
import { setSessionStorage, removeSessionStorage } from '@/utils/auth';
|
||||||
import Cookies from 'js-cookie';
|
import Cookies from 'js-cookie';
|
||||||
import md5 from 'js-md5';
|
import md5 from 'js-md5';
|
||||||
import QrcodeVue from 'qrcode.vue';
|
import QrcodeVue from 'qrcode.vue';
|
||||||
@ -97,6 +101,8 @@ import bgImg from '@/assets/bg1.jpg';
|
|||||||
import { setToken } from '@/utils/auth';
|
import { setToken } from '@/utils/auth';
|
||||||
import { loginTitle } from '@/scripts/ConstDic';
|
import { loginTitle } from '@/scripts/ConstDic';
|
||||||
import { removeToken, removeDesignToken} from '@/utils/auth';
|
import { removeToken, removeDesignToken} from '@/utils/auth';
|
||||||
|
import LangStorage from '@/utils/lang';
|
||||||
|
import { UrlConfig } from '@/router/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
@ -104,14 +110,14 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
const validateUsername = (rule, value, callback) => {
|
const validateUsername = (rule, value, callback) => {
|
||||||
if (value.length < 5) {
|
if (value.length < 5) {
|
||||||
callback(new Error('请输入正确的用户名'));
|
callback(new Error(this.$t('login.enterTheCorrectUserName')));
|
||||||
} else {
|
} else {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const validatePass = (rule, value, callback) => {
|
const validatePass = (rule, value, callback) => {
|
||||||
if (value.length < 5) {
|
if (value.length < 5) {
|
||||||
callback(new Error('密码不能小于5位'));
|
callback(new Error(this.$t('login.passwordHint')));
|
||||||
} else {
|
} else {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
@ -123,9 +129,9 @@ export default {
|
|||||||
loginForm: {
|
loginForm: {
|
||||||
username: '',
|
username: '',
|
||||||
password: ''
|
password: ''
|
||||||
},
|
},
|
||||||
loginRules: {
|
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 }]
|
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||||
},
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -138,44 +144,72 @@ export default {
|
|||||||
checkLogin: null,
|
checkLogin: null,
|
||||||
checkTimeout: null,
|
checkTimeout: null,
|
||||||
scanSuccess: false,
|
scanSuccess: false,
|
||||||
pwdDisplay: true
|
pwdDisplay: true,
|
||||||
|
cookiesName: 'UserName',
|
||||||
|
cookiesToken: 'UserToken',
|
||||||
|
modelType: 'class',
|
||||||
|
loginClient: 'LianKeTang',
|
||||||
|
path: '/trainingPlatform',
|
||||||
|
lang: 'zh',
|
||||||
|
language: '中文'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
project() {
|
project() {
|
||||||
return this.$route.params.project;
|
return this.$route.path.split('/')[1];
|
||||||
},
|
},
|
||||||
title() {
|
title() {
|
||||||
return loginTitle[this.$route.params.project||'default'];
|
return loginTitle[this.$route.path.split('/')[1]];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
document.title = loginTitle[this.$route.params.project||'default'];
|
document.title = loginTitle[this.project];
|
||||||
this.loginRefresh();
|
this.loginRefresh();
|
||||||
},
|
},
|
||||||
beforeCreate() {
|
created() {
|
||||||
removeToken();
|
this.computedAttribute();
|
||||||
removeDesignToken();
|
if (Cookies.get(this.cookiesName)&&Cookies.get(this.cookiesToken)) {
|
||||||
if (Cookies.get('UserName')&&Cookies.get('UserToken')) {
|
const model = {'username': Cookies.get(this.cookiesName), 'password': Cookies.get(this.cookiesToken)};
|
||||||
const model = {'username': Cookies.get('UserName'), 'password': Cookies.get('UserToken')};
|
model.type = this.modelType;
|
||||||
model.type = 'class';
|
model.project = this.project;
|
||||||
model.project = this.$route.params.project;
|
|
||||||
this.$store.dispatch('Login', model).then(() => {
|
this.$store.dispatch('Login', model).then(() => {
|
||||||
this.$store.dispatch('SetAccount', model.username);
|
this.$store.dispatch('SetAccount', model.username);
|
||||||
|
this.setProjectSession();
|
||||||
this.handleLoginSucessRoute();
|
this.handleLoginSucessRoute();
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
if(error.code=='30001'){
|
if (error.code==='30001') {
|
||||||
this.tipsMsg = '账号或密码不正确！';
|
this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
|
||||||
}
|
} else {
|
||||||
else{
|
this.tipsMsg = error.message;
|
||||||
this.tipsMsg = error.message;
|
}
|
||||||
}
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
clearTimer(timer) {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
@ -184,7 +218,7 @@ export default {
|
|||||||
},
|
},
|
||||||
loginRefresh() {
|
loginRefresh() {
|
||||||
this.loadingCode = true;
|
this.loadingCode = true;
|
||||||
getLoginWmurl(LoginParams.LianKeTang).then(response => {
|
getLoginWmurl(LoginParams[this.loginClient]).then(response => {
|
||||||
this.sessionId = response.data.sessionId;
|
this.sessionId = response.data.sessionId;
|
||||||
this.loginUrl = response.data.url;
|
this.loginUrl = response.data.url;
|
||||||
this.loadingCode = false;
|
this.loadingCode = false;
|
||||||
@ -197,17 +231,15 @@ export default {
|
|||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
this.loadingCode = false;
|
this.loadingCode = false;
|
||||||
this.$messageBox('获取登录二维码失败，请刷新重试');
|
this.$messageBox(this.$t('login.getLoginQrCode'));
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
checkLoginStatus() {
|
checkLoginStatus() {
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
// 销毁则不再定时
|
// 销毁则不再定时
|
||||||
if (this && this._isDestroyed) {
|
if (this && this._isDestroyed) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清空已存在的定时器
|
// 清空已存在的定时器
|
||||||
// 设置定时器检测
|
// 设置定时器检测
|
||||||
this.clearTimer(this.checkLogin);
|
this.clearTimer(this.checkLogin);
|
||||||
@ -217,11 +249,11 @@ export default {
|
|||||||
// 设置扫码登录
|
// 设置扫码登录
|
||||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKEN', value: response.data.token }).then(() => {
|
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKEN', value: response.data.token }).then(() => {
|
||||||
// 清除定时器，设置路由
|
// 清除定时器，设置路由
|
||||||
self.clearTimer(self.checkLogin);
|
self.clearTimer(self.checkLogin);
|
||||||
this.handleLoginSucessRoute();
|
this.handleLoginSucessRoute();
|
||||||
});
|
});
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
if (error.data && error.data.status == '1') {
|
if (error.data && error.data.status === '1') {
|
||||||
self.scanSuccess = true;
|
self.scanSuccess = true;
|
||||||
}
|
}
|
||||||
self.checkLoginStatus();
|
self.checkLoginStatus();
|
||||||
@ -236,36 +268,36 @@ export default {
|
|||||||
this.pwdType = 'password';
|
this.pwdType = 'password';
|
||||||
this.pwdDisplay=true;
|
this.pwdDisplay=true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
goToNext(){
|
goToNext() {
|
||||||
if (this.loginForm.username.length < 5) {
|
if (this.loginForm.username.length < 5) {
|
||||||
return;
|
return;
|
||||||
}else{
|
} else {
|
||||||
this.$refs['password'].focus();
|
this.$refs['password'].focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleLogin() {
|
handleLogin() {
|
||||||
this.$refs.loginForm.validate(valid => {
|
this.$refs.loginForm.validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
const model = Object.assign({}, this.loginForm);
|
const model = Object.assign({}, this.loginForm);
|
||||||
model.password = md5(model.password);
|
model.password = md5(model.password);
|
||||||
model.type = 'class';
|
model.type = this.modelType;
|
||||||
model.project = this.$route.params.project;
|
model.project = this.project;
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if (this.isAutoLogin) {
|
if (this.isAutoLogin) {
|
||||||
Cookies.set('UserName', model.username, { expires: 2});
|
Cookies.set(this.cookiesName, model.username, { expires: 2});
|
||||||
Cookies.set('UserToken', model.password, { expires: 2});
|
Cookies.set(this.cookiesToken, model.password, { expires: 2});
|
||||||
}
|
}
|
||||||
this.$store.dispatch('Login', model).then(() => {
|
this.$store.dispatch('Login', model).then(() => {
|
||||||
this.$store.dispatch('SetAccount', model.username);
|
this.$store.dispatch('SetAccount', model.username);
|
||||||
|
this.setProjectSession();
|
||||||
this.handleLoginSucessRoute();
|
this.handleLoginSucessRoute();
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
if(error.code=='30001'){
|
if (error.code==='30001') {
|
||||||
this.tipsMsg = '账号或密码不正确！';
|
this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
|
||||||
}
|
} else {
|
||||||
else{
|
this.tipsMsg = error.message;
|
||||||
this.tipsMsg = error.message;
|
}
|
||||||
}
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||||
});
|
});
|
||||||
@ -278,14 +310,13 @@ export default {
|
|||||||
handleLoginSucessRoute() {
|
handleLoginSucessRoute() {
|
||||||
// 设置路由
|
// 设置路由
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.tipsMsg = '';
|
this.tipsMsg = '';
|
||||||
removeSessionStorage('againEnter');
|
removeSessionStorage('againEnter');
|
||||||
const path = '/trainingPlatform';
|
this.$router.push({ path: this.path });
|
||||||
this.$nextTick(() => {
|
},
|
||||||
this.$i18n.locale = 'zh';
|
handleLanguage() {
|
||||||
Cookies.set('user_lang', 'zh');
|
this.$i18n.locale = this.lang;
|
||||||
});
|
LangStorage.setLang(this.lang);
|
||||||
this.$router.push({ path: path });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -381,6 +412,16 @@ export default {
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
.language_box{
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 40px;
|
||||||
|
.language_btn{
|
||||||
|
/*font-weight: bold;*/
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.login-form {
|
.login-form {
|
||||||
width: 420px;
|
width: 420px;
|
||||||
padding: 0 50px;
|
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" />
|
<filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
|
||||||
<!-- v-if="project!=='xty' " -->
|
<!-- v-if="project!=='xty' " -->
|
||||||
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
<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
|
<el-tree
|
||||||
ref="tree"
|
ref="tree"
|
||||||
:data="treeList"
|
:data="treeList"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user