joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

desc: 调整登陆页面样式

Browse Source
This commit is contained in:
zyy 2019-10-17 18:55:46 +08:00
parent 7b5255c3eb
commit 140d84bf56
7 changed files with 733 additions and 732 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/erCode.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

302
src/views/login/index.vue
View File

@ -1,77 +1,80 @@
<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="点击刷新"
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>浏览器：
<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="点击刷新"
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>
<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">
<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">
<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">
<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"
content="请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。"
class="popover_box"
>
<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>
</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>
</div>
</template>
<script>
@ -87,10 +90,11 @@ import { LoginParams } from '@/utils/login';
import bgImg from '@/assets/bg1.jpg';
import { setToken } from '@/utils/auth';
import { loginTitle } from '@/scripts/ConstDic';
import QCode from '@/assets/erCode.jpg';
export default {
name: 'Login',
components: { QrcodeVue },
components: { QrcodeVue },
data() {
const validateUsername = (rule, value, callback) => {
if (value.length < 5) {
@ -107,7 +111,8 @@ export default {
}
};
return {
bgImg: bgImg,
bgImg: bgImg,
QCode: QCode,
loginForm: {
username: '',
password: ''
@ -119,88 +124,88 @@ export default {
loading: false,
pwdType: 'password',
tipsMsg: '',
qrcodeClassName: 'login-qrcode',
sessionId: '',
loginUrl: '',
loadingCode: false,
checkLogin: null,
checkTimeout: null,
scanSuccess: false
qrcodeClassName: 'login-qrcode',
sessionId: '',
loginUrl: '',
loadingCode: false,
checkLogin: null,
checkTimeout: null,
scanSuccess: false
};
},
mounted() {
document.title = loginTitle[this.$route.params.project||'default'];
this.loginRefresh();
computed: {
project() {
return this.$route.params.project;
},
title() {
return loginTitle[this.$route.params.project||'default'];
}
},
mounted() {
document.title = loginTitle[this.$route.params.project||'default'];
this.loginRefresh();
},
computed: {
project() {
return this.$route.params.project;
},
title() {
return loginTitle[this.$route.params.project||'default'];
}
},
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('获取登录二维码失败，请刷新重试');
});
},
checkLoginStatus() {
const self = this;
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('获取登录二维码失败，请刷新重试');
});
},
checkLoginStatus() {
const self = this;
// 销毁则不再定时
if (this && this._isDestroyed) {
return;
}
// 销毁则不再定时
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);
let path = '/login';
if (project) {
path = path + '/' + project;
}
self.$router.push({ path: path });
self.$nextTick(() => {
self.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
});
}).catch(error => {
if (error.data && error.data.status == '1') {
self.scanSuccess = true;
}
self.checkLoginStatus();
});
}, 3000);
},
// 清空已存在的定时器
// 设置定时器检测
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);
let path = '/login';
if (this.project) {
path = path + '/' + this.project;
}
self.$router.push({ path: path });
self.$nextTick(() => {
self.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
});
}).catch(error => {
if (error.data && error.data.status == '1') {
self.scanSuccess = true;
}
self.checkLoginStatus();
});
}, 3000);
},
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = '';
@ -214,24 +219,24 @@ export default {
const model = Object.assign({}, this.loginForm);
model.password = md5(model.password);
model.type = 'class';
model.project = this.$route.params.project;
model.project = this.$route.params.project;
this.loading = true;
removeSessionStorage('againEnter');
removeSessionStorage('againEnter');
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
this.$store.dispatch('SetAccount', model.username);
this.$store.dispatch('SetAccount', model.username);
// 设置路由
this.loading = false;
this.tipsMsg = '';
let path = localStore.get('trainingPlatformRoute'+model.username);
if (!path || !path.startsWith('/trainingPlatform')) {
path = UrlConfig.trainingPlatform.trainingPlatformHome;
}
this.$nextTick(() => {
this.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
this.$router.push({ path: path });
path = UrlConfig.trainingPlatform.trainingPlatformHome;
}
this.$nextTick(() => {
this.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
this.$router.push({ path: path });
}).catch(error => {
this.tipsMsg = error.message;
this.loading = false;
@ -276,7 +281,6 @@ export default {
}
}
.item_form_box {
border: 1px solid #ccc;
border-radius: 5px;

266
src/views/login/loginDesign.vue
View File

@ -1,81 +1,83 @@
<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>浏览器：
<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>
<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">
<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" />
</el-form-item>
<el-form-item prop="password" class="item_form_box item_form_password">
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" />
</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">
<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"
content="请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。"
class="popover_box"
>
<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>
</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>
</div>
</template>
<script>
import { UrlConfig } from '@/router/index';
import { setSessionStorage,removeSessionStorage } from '@/utils/auth';
import md5 from 'js-md5';
import Cookies from 'js-cookie';
import QrcodeVue from 'qrcode.vue';
@ -86,7 +88,7 @@ import { setDesignToken } from '@/utils/auth';
export default {
name: 'LoginDesign',
components: { QrcodeVue },
components: { QrcodeVue },
data() {
const validateUsername = (rule, value, callback) => {
if (value.length < 5) {
@ -103,7 +105,7 @@ export default {
}
};
return {
bgImg: bgImg,
bgImg: bgImg,
loginForm: {
username: '',
password: ''
@ -115,76 +117,76 @@ export default {
loading: false,
pwdType: 'password',
tipsMsg: '',
qrcodeClassName: 'login-qrcode',
sessionId: '',
loginUrl: '',
loadingCode: false,
checkLogin: null,
checkTimeout: null,
scanSuccess: false
qrcodeClassName: 'login-qrcode',
sessionId: '',
loginUrl: '',
loadingCode: false,
checkLogin: null,
checkTimeout: null,
scanSuccess: false
};
},
mounted() {
document.title = '城市轨道交通设计平台';
this.loginRefresh();
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('获取登录二维码失败，请刷新重试');
});
},
checkLoginStatus() {
const self = this;
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('获取登录二维码失败，请刷新重试');
});
},
checkLoginStatus() {
const self = this;
// 销毁则不再定时
if (this && this._isDestroyed) {
return;
}
// 销毁则不再定时
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);
self.$router.push({ path: '/design/login' });
self.$nextTick(() => {
self.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
});
}).catch(error => {
if (error.data && error.data.status == '1') {
self.scanSuccess = true;
}
self.checkLoginStatus();
});
}, 3000);
},
// 清空已存在的定时器
// 设置定时器检测
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);
self.$router.push({ path: '/design/login' });
self.$nextTick(() => {
self.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
});
}).catch(error => {
if (error.data && error.data.status == '1') {
self.scanSuccess = true;
}
self.checkLoginStatus();
});
}, 3000);
},
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = '';
@ -197,19 +199,19 @@ export default {
if (valid) {
const model = Object.assign({}, this.loginForm);
model.password = md5(model.password);
// model.type = 'plan';
model.type = 'design';
// model.type = 'plan';
model.type = 'design';
this.loading = true;
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
this.$store.dispatch('GetUserConfigInfo');
// 设置路由
this.loading = false;
this.tipsMsg = '';
this.$nextTick(() => {
this.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
this.$nextTick(() => {
this.$i18n.locale = 'zh';
Cookies.set('user_lang', 'zh');
});
this.$router.push({ path: `${UrlConfig.design.prefix}` });
}).catch(error => {
this.tipsMsg = error.message;
@ -256,7 +258,6 @@ export default {
}
}
.item_form_box {
border: 1px solid #ccc;
border-radius: 5px;
@ -385,4 +386,3 @@ export default {
}
</style>

456
src/views/login/loginEn.vue
View File

@ -1,250 +1,253 @@
<template>
<div class="login-container" :style="{'background-image': 'url('+bgImg+')'}">
<div v-if="project" class="text-box">{{title}}</div>
<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:
<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>
<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">
<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" />
</el-form-item>
<el-form-item prop="password" class="item_form_box item_form_password">
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" />
</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"
@keyup.enter="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<el-input
v-model="loginForm.password"
name="password"
:type="pwdType"
placeholder="password"
@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"
content="Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email."
class="popover_box"
>
<div slot="reference">unable to login?</div>
</el-popover>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
login
</el-button>
</el-form-item>
</el-form>
</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;">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>
<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>
</div>
</template>
<script>
import { removeSessionStorage } from '@/utils/auth';
import { UrlConfig } from '@/router/index';
import localStore from 'storejs';
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 { removeSessionStorage } from '@/utils/auth';
import { UrlConfig } from '@/router/index';
import localStore from 'storejs';
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';
export default {
name: 'Login',
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 {
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 = loginTitle[this.$route.params.project||'default'];
this.loginRefresh();
},
computed: {
project() {
return this.$route.params.project;
},
title() {
return loginTitle[this.$route.params.project||'default'];
}
},
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;
export default {
name: 'Login',
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 {
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
};
},
computed: {
project() {
return this.$route.params.project;
},
title() {
return loginTitle[this.$route.params.project||'default'];
}
},
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;
}
// 销毁则不再定时
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);
let path = '/en/login';
if (project) {
path = path + '/' + project;
}
self.$router.push({ path: path });
self.$nextTick(() => {
self.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
});
}).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 = 'class';
model.project = this.$route.params.project;
this.loading = true;
removeSessionStorage('againEnter');
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
this.$store.dispatch('SetAccount', model.username);
// 设置路由
this.loading = false;
this.tipsMsg = '';
let path = localStore.get('trainingPlatformRoute'+model.username);
if (!path || !path.startsWith('/trainingPlatform')) {
path = UrlConfig.trainingPlatform.trainingPlatformHome;
}
this.$nextTick(() => {
this.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
this.$router.push({ path: path });
}).catch(error => {
this.tipsMsg = error.message;
this.loading = false;
setTimeout(() => { this.tipsMsg = ''; }, 5000);
});
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
// 清空已存在的定时器
// 设置定时器检测
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);
let path = '/en/login';
if (this.project) {
path = path + '/' + this.project;
}
self.$router.push({ path: path });
self.$nextTick(() => {
self.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
});
}).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 = 'class';
model.project = this.$route.params.project;
this.loading = true;
removeSessionStorage('againEnter');
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
this.$store.dispatch('SetAccount', model.username);
// 设置路由
this.loading = false;
this.tipsMsg = '';
let path = localStore.get('trainingPlatformRoute'+model.username);
if (!path || !path.startsWith('/trainingPlatform')) {
path = UrlConfig.trainingPlatform.trainingPlatformHome;
}
this.$nextTick(() => {
this.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
this.$router.push({ path: path });
}).catch(error => {
this.tipsMsg = error.message;
this.loading = false;
setTimeout(() => { this.tipsMsg = ''; }, 5000);
});
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
@ -276,7 +279,6 @@
}
}
.item_form_box {
border: 1px solid #ccc;
border-radius: 5px;

413
src/views/login/loginEnDesign.vue
View File

@ -1,229 +1,232 @@
<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:
<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>
<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">
<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" />
</el-form-item>
<el-form-item prop="password" class="item_form_box item_form_password">
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" />
</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"
@keyup.enter="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<el-input
v-model="loginForm.password"
name="password"
:type="pwdType"
placeholder="password"
@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"
content="Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email."
class="popover_box"
>
<div slot="reference">unable to login?</div>
</el-popover>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
login
</el-button>
</el-form-item>
</el-form>
</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;">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>
<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>
</div>
</template>
<script>
import { UrlConfig } from '@/router/index';
import { setSessionStorage,removeSessionStorage } from '@/utils/auth';
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 { 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';
export default {
name: 'LoginDesign',
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 {
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.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;
export default {
name: 'LoginDesign',
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 {
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.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;
}
// 销毁则不再定时
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);
self.$router.push({ path: '/design/login' });
self.$nextTick(() => {
self.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
});
}).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';
// 清空已存在的定时器
// 设置定时器检测
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);
self.$router.push({ path: '/design/login' });
self.$nextTick(() => {
self.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
});
}).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';
this.loading = true;
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
// 设置路由
this.loading = false;
this.tipsMsg = '';
this.$router.push({ path: `${UrlConfig.design.prefix}` });
this.$nextTick(() => {
this.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
}).catch(error => {
this.tipsMsg = error.message;
this.loading = false;
setTimeout(() => { this.tipsMsg = ''; }, 5000);
});
this.loading = true;
this.$store.dispatch('Login', model).then(() => {
this.$store.dispatch('GetUserConfigInfo');
// 设置路由
this.loading = false;
this.tipsMsg = '';
this.$router.push({ path: `${UrlConfig.design.prefix}` });
this.$nextTick(() => {
this.$i18n.locale = 'en';
Cookies.set('user_lang', 'en');
});
}).catch(error => {
this.tipsMsg = error.message;
this.loading = false;
setTimeout(() => { this.tipsMsg = ''; }, 5000);
});
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
@ -255,7 +258,6 @@
}
}
.item_form_box {
border: 1px solid #ccc;
border-radius: 5px;
@ -384,4 +386,3 @@
}
</style>

13
src/views/login/loginPlan.vue
View File

@ -53,14 +53,11 @@
</span>
</el-form-item>
<div class="tip-message">{{ tipsMsg }}</div>
<el-popover
placement="right"
title=""
width="200"
trigger="hover"
content="请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。"
class="popover_box"
>
<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>

15
src/views/login/loginScreen.vue
View File

@ -53,19 +53,16 @@
</span>
</el-form-item>
<div class="tip-message">{{ tipsMsg }}</div>
<el-popover
placement="right"
title=""
width="200"
trigger="hover"
content="请在琏课堂小程序助手，完善个人信息，设置登录密码，手机号或邮箱。"
class="popover_box"
>
<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>