提交 44f01c65 authored 作者: 王鹏飞's avatar 王鹏飞

支持国际化

上级 cb8f63a0
......@@ -42,6 +42,9 @@ module.exports = {
wmp: {
url: 'http://wmp-learning2.ezijing.com'
},
seg: {
url: 'http://seg-learning2.ezijing.com'
},
ciis: {
url: 'http://ciis-learning2.ezijing.com'
},
......
......@@ -23,6 +23,9 @@ module.exports = {
wmp: {
url: 'http://wmp-learning.ezijing.com'
},
seg: {
url: 'http://seg-learning.ezijing.com'
},
ciis: {
url: 'http://ciis-learning.ezijing.com'
},
......
......@@ -24,6 +24,9 @@ module.exports = {
wmp: {
url: 'http://wmp-learning2.ezijing.com'
},
seg: {
url: 'http://seg-learning2.ezijing.com'
},
ciis: {
url: 'http://ciis-learning2.ezijing.com'
},
......
export default {
main: {
title: 'Online Learning System'
},
login: {
rememberMe: 'Remember Me',
submitText: 'Log in',
pwdLogin: 'Password login',
codeLogin: 'Verification code login',
forgetPassword: 'Forget password'
},
loginPwd: {
account: { placeholder: 'Mobile / Email', rule: 'Please input user ID' },
password: { placeholder: 'Password', rule: 'Please enter the password' },
successMessage: 'Login successfully'
},
loginCode: {
account: { placeholder: 'Mobile / Email', rule: 'Please input user ID' },
code: { placeholder: 'Verification code', rule: 'Enter 4-digit verification code' },
sendCodeText: 'Send the verification code',
sendCodeMessage: 'Verification code sent',
successMessage: 'Login successfully'
},
password: {
title: 'Forget password',
backText: 'Back to login',
account: { title: 'Account', placeholder: 'Mobile / Email', rule: 'Please input user ID' },
code: { title: 'Verification code', placeholder: 'Verification code', rule: 'Enter 4-digit verification code' },
newPassword: {
title: 'Password',
placeholder: 'Password',
rule: 'Please enter a new password',
rule2: 'Please enter 6-20 letters, numbers and punctuation marks'
},
confirmPassword: {
title: 'Confirm password',
placeholder: 'Confirm password',
rule: 'Please re-enter the new password',
rule2: 'Enter the password twice is not the same'
},
sendCodeText: 'Send the verification code',
sendCodeMessage: 'Verification code sent',
submitText: 'Submit',
alertTitle: 'Tip',
successMessage: 'Password reset successfully',
confirmButtonText: 'Go to login'
}
}
{
"common": {
"title": "theme"
},
"action": {
"interface": "interface back test"
},
"components": {
"errorPages": {
"404page": {
"errStr": "很抱歉,您访问的页面已经断开",
"goBack": "返回首页",
"goNext": "返回上一页"
}
}
}
}
import Cookies from 'js-cookie'
import VueI18n from 'vue-i18n'
import language from './language'
import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'
import elZhCN from 'element-ui/lib/locale/lang/zh-CN'
import elEN from 'element-ui/lib/locale/lang/en'
import zhCN from './zh-CN'
import en from './en'
export default () => {
let _locale = 'zh-CN'
......@@ -34,8 +37,8 @@ export default () => {
return new VueI18n({
locale: _locale, // 定义默认语言为中文
messages: {
'zh-CN': Object.assign(require('./zh-CN.json'), zhCNLocale),
en: Object.assign(require('./en.json'), enLocale)
'zh-CN': Object.assign(zhCN, elZhCN),
en: Object.assign(en, elEN)
}
})
}
export default {
main: {
title: '在线学习系统'
},
login: {
rememberMe: '记住我',
submitText: '登录',
pwdLogin: '密码登录',
codeLogin: '验证码登录',
forgetPassword: '忘记密码'
},
loginPwd: {
account: { placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
password: { placeholder: '密码', rule: '请输入密码' },
successMessage: '登录成功'
},
loginCode: {
account: { placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
code: { placeholder: '验证码', rule: '请输入验证码' },
sendCodeText: '获取验证码',
sendCodeMessage: '验证码已发送',
successMessage: '登录成功'
},
password: {
title: '忘记密码',
backText: '返回登录',
account: { title: '账号', placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
code: { title: '验证码', placeholder: '验证码', rule: '请输入验证码' },
newPassword: { title: '密码', placeholder: '密码', rule: '请输入登录密码', rule2: '长度为6-20个字符' },
confirmPassword: {
title: '确认密码',
placeholder: '确认密码',
rule: '请再次输入密码',
rule2: '两次输入密码不一致'
},
sendCodeText: '获取验证码',
sendCodeMessage: '验证码已发送',
submitText: '提交',
alertTitle: '提示',
successMessage: '密码修改成功,快去登录吧',
confirmButtonText: '去登录'
}
}
{
"common": {
"title": "主题"
},
"action": {
"interface": "接口返回数据测试"
},
"components": {
"errorPages": {
"404page": {
"errStr": "很抱歉,您访问的页面已经断开",
"goBack": "返回首页",
"goNext": "返回上一页"
}
}
}
}
......@@ -9,7 +9,12 @@ export default {
step: { type: Number, default: 1000 },
disabled: { type: Boolean, default: false },
seconds: { type: Number, default: 60 },
defaultValue: { type: String, default: '获取验证码' }
defaultValue: {
type: String,
default() {
return this.$t('loginCode.sendCodeText')
}
}
},
data() {
return {
......@@ -29,7 +34,7 @@ export default {
computed: {
curretnValue() {
const longTime = this.seconds - this.currentSeconds
return longTime < this.seconds ? `${longTime}秒后重发` : this.defaultValue
return longTime < this.seconds ? `${longTime}S` : this.defaultValue
}
},
methods: {
......
<template>
<div class="tap-language-switch">
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-submenu index="1">
<template slot="title">{{ show }}</template>
<template v-for="item in language.arr">
<template v-for="(v, k) in item">
<el-menu-item :key="k" :index="k">{{ v }}</el-menu-item>
</template>
</template>
</el-submenu>
</el-menu>
<div class="language-switch">
<el-select size="medium" v-model="value" @change="handleChange">
<el-option v-for="item in languages" :key="item.value" :label="item.name" :value="item.value"> </el-option>
</el-select>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import language from '@/assets/languages/language'
export default {
name: 'LanguageSwitch',
data() {
const _defaultLocale = 'zh-CN'
const _lang = Cookies.get('lang') || window.navigator.language || window.navigator.userLanguage || ''
if (_lang) {
if (language[_lang]) {
this.$i18n.locale = _lang
} else {
let flag = true
/* 做一下 兼容性处理 */
for (const k in language) {
const reg = new RegExp(k, 'gi')
if (reg.test(_lang)) {
this.$i18n.locale = k
flag = false
break
}
}
if (flag) {
/* 当前语言版本 - 不再我们的语言库中,那么默认 en */
this.$i18n.locale = _defaultLocale
Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
}
}
} else {
this.$i18n.locale = _defaultLocale
Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
}
let show = language[this.$i18n.locale].show
language[this.$i18n.locale].arr.forEach((item, i) => {
if (item[this.$i18n.locale]) {
show = item[this.$i18n.locale]
}
})
return {
show: show,
language: language[this.$i18n.locale]
value: this.$i18n.locale,
languages: [
{ name: '中文', value: 'zh-CN' },
{ name: 'English', value: 'en' }
]
}
},
mounted() {},
methods: {
handleSelect(key, val) {
Cookies.set('lang', key, { expires: 30, domain: '.ezijing.com' })
this.$i18n.locale = key
handleChange(value) {
Cookies.set('lang', value, { expires: 30, domain: '.ezijing.com' })
this.$i18n.locale = value
/* 刷新页面 */
this.$router.go(0)
}
......@@ -70,13 +32,7 @@ export default {
</script>
<style lang="scss" scoped>
.tap-language-switch {
position: absolute;
top: 5px;
right: 100px;
height: 70px;
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border: none;
}
.language-switch {
width: 100px;
}
</style>
......@@ -2,7 +2,11 @@
<div>
<el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="邮箱/手机号" @keyup.enter.native="handleSubmit">
<el-input
v-model="ruleForm.account"
:placeholder="$t('loginPwd.account.placeholder')"
@keyup.enter.native="handleSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-form-item>
......@@ -10,18 +14,20 @@
<el-input
type="password"
v-model="ruleForm.password"
placeholder="请输入登录密码"
:placeholder="$t('loginPwd.password.placeholder')"
@keyup.enter.native="handleSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
<el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">记住我</el-checkbox>
<el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">登录</el-button>
<el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
<el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
{{ $t('login.submitText') }}
</el-button>
</el-form>
<div class="login-footer">
<router-link to="code">验证码登录</router-link>
<router-link to="../password">忘记密码</router-link>
<router-link to="code">{{ $t('login.codeLogin') }}</router-link>
<router-link to="../password">{{ $t('login.forgetPassword') }}</router-link>
</div>
</div>
</template>
......@@ -35,8 +41,8 @@ export default {
return {
ruleForm: { type: 1, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
rules: {
account: [{ required: true, message: '请输入账号', trigger: 'change' }],
password: [{ required: true, message: '请输入密码', trigger: 'change' }]
account: [{ required: true, message: this.$t('loginPwd.account.rule'), trigger: 'change' }],
password: [{ required: true, message: this.$t('loginPwd.password.rule'), trigger: 'change' }]
},
loading: false
}
......@@ -63,7 +69,7 @@ export default {
},
// 登录成功
handleSuccess(response) {
this.$message({ type: 'success', message: '登录成功' })
this.$message({ type: 'success', message: this.$t('loginPwd.successMessage') })
if (this.nextUrl) {
window.location.href = this.nextUrl
} else {
......
......@@ -2,12 +2,20 @@
<div>
<el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
<el-form-item prop="account">
<el-input v-model="ruleForm.account" placeholder="邮箱/手机号" @keyup.enter.native="handleSubmit">
<el-input
v-model="ruleForm.account"
:placeholder="$t('loginCode.account.placeholder')"
@keyup.enter.native="handleSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" placeholder="请输入验证码" @keyup.enter.native="handleSubmit">
<el-input
v-model="ruleForm.password"
:placeholder="$t('loginCode.code.placeholder')"
@keyup.enter.native="handleSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-unlock"></i>
<countdown
slot="suffix"
......@@ -18,12 +26,12 @@
></countdown>
</el-input>
</el-form-item>
<el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">记住我</el-checkbox>
<el-button type="primary" class="submit-button" @click="handleSubmit">登录</el-button>
<el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
<el-button type="primary" class="submit-button" @click="handleSubmit">{{ $t('login.submitText') }}</el-button>
</el-form>
<div class="login-footer">
<router-link to="index">密码登录</router-link>
<router-link to="../password">忘记密码</router-link>
<router-link to="index">{{ $t('login.pwdLogin') }}</router-link>
<router-link to="../password">{{ $t('login.forgetPassword') }}</router-link>
</div>
</div>
</template>
......@@ -42,8 +50,8 @@ export default {
return {
ruleForm: { type: 2, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
rules: {
account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'change' }],
password: [{ required: true, message: '请输入验证码', trigger: 'change' }]
account: [{ required: true, message: this.$t('loginCode.account.rule'), trigger: 'change' }],
password: [{ required: true, message: this.$t('loginCode.code.rule'), trigger: 'change' }]
},
loading: false
}
......@@ -73,7 +81,7 @@ export default {
},
// 登录成功
handleSuccess(response) {
this.$message({ type: 'success', message: '登录成功' })
this.$message({ type: 'success', message: this.$t('loginCode.successMessage') })
if (this.nextUrl) {
window.location.href = this.nextUrl
} else {
......@@ -88,7 +96,7 @@ export default {
.then(response => {
console.log(response)
if (response.code === 0) {
this.$message({ type: 'success', message: '验证码已发送' })
this.$message({ type: 'success', message: this.$t('loginCode.sendCodeMessage') })
} else {
// 停止计时
this.$refs.countdown.stop()
......
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
<el-form-item prop="account" label="账号">
<el-input v-model="ruleForm.account" placeholder="邮箱/手机号">
<el-form-item prop="account" :label="$t('password.account.title')">
<el-input v-model="ruleForm.account" :placeholder="$t('password.account.placeholder')">
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" label="验证码">
<el-input v-model="ruleForm.code" placeholder="请输入验证码">
<el-form-item prop="code" :label="$t('password.code.title')">
<el-input v-model="ruleForm.code" :placeholder="$t('password.code.placeholder')">
<i slot="prefix" class="el-input__icon el-icon-unlock"></i>
<countdown
slot="suffix"
......@@ -18,17 +18,23 @@
></countdown>
</el-input>
</el-form-item>
<el-form-item prop="password" label="新密码">
<el-input type="password" v-model="ruleForm.password" placeholder="请输入新登录密码">
<el-form-item prop="password" :label="$t('password.newPassword.title')">
<el-input type="password" v-model="ruleForm.password" :placeholder="$t('password.newPassword.placeholder')">
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
<el-form-item prop="passwordR" label="确认新密码">
<el-input type="password" v-model="ruleForm.passwordR" placeholder="请输入新登录密码">
<el-form-item prop="passwordR" :label="$t('password.confirmPassword.title')">
<el-input
type="password"
v-model="ruleForm.passwordR"
:placeholder="$t('password.confirmPassword.placeholder')"
>
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</el-form-item>
<el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">提交</el-button>
<el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
{{ $t('password.submitText') }}
</el-button>
</el-form>
</div>
</template>
......@@ -46,9 +52,9 @@ export default {
data() {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
callback(new Error(this.$t('password.confirmPassword.rule')))
} else if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致!'))
callback(new Error(this.$t('password.confirmPassword.rule2')))
} else {
callback()
}
......@@ -56,14 +62,14 @@ export default {
return {
ruleForm: { account: '', code: '', password: '', passwordR: '' },
rules: {
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
account: [{ required: true, message: this.$t('password.account.rule'), trigger: 'blur' }],
code: [{ required: true, message: this.$t('password.code.rule'), trigger: 'blur' }],
password: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
{ required: true, message: this.$t('password.newPassword.rule'), trigger: 'blur' },
{ min: 6, max: 20, message: this.$t('password.newPassword.rule2'), trigger: 'blur' }
],
passwordR: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ required: true, message: this.$t('password.confirmPassword.rule'), trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
},
......@@ -91,9 +97,9 @@ export default {
},
// 成功
handleSuccess(response) {
this.$alert('密码修改成功,快去登录吧', '提示', {
this.$alert(this.$t('password.successMessage'), this.$t('password.alertTitle'), {
type: 'success',
confirmButtonText: '去登录',
confirmButtonText: this.$t('password.confirmButtonText'),
callback: action => {
this.$router.push('login')
}
......@@ -107,7 +113,7 @@ export default {
.then(response => {
console.log(response)
if (response.code === 0) {
this.$message({ type: 'success', message: '验证码已发送' })
this.$message({ type: 'success', message: this.$t('password.sendCodeMessage') })
} else {
// 停止计时
this.$refs.countdown.stop()
......
......@@ -5,6 +5,7 @@
<div class="header-logo">
<a :href="url"><img src="../assets/logo.png" /></a>
</div>
<language-switch />
</div>
</header>
<section class="main">
......@@ -12,7 +13,7 @@
<div class="inner">
<div class="main-hd hidden-xs-only">
<img src="../assets/login_logo.png" class="login-logo" />
<h1 class="login-title">在线学习系统</h1>
<h1 class="login-title">{{ $t('main.title') }}</h1>
</div>
<div class="main-bd">
<router-view></router-view>
......@@ -29,7 +30,9 @@
</template>
<script>
import languageSwitch from '@/components/languageSwitch.vue'
export default {
components: { languageSwitch },
data() {
return {
url: webConf.others.campbellsville.url
......@@ -42,8 +45,11 @@ export default {
.header {
padding: 15px 20px;
.inner {
max-width: 980px;
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.header-title {
......
<template>
<div class="password">
<el-page-header @back="$router.push('login')" title="返回登录" content="忘记密码"></el-page-header>
<el-page-header
@back="$router.push('login')"
:title="$t('password.backText')"
:content="$t('password.title')"
></el-page-header>
<div class="password-form">
<router-view></router-view>
</div>
......
......@@ -5,6 +5,7 @@
<div class="header-logo">
<a :href="url"><img src="../assets/logo.png" /></a>
</div>
<language-switch />
</div>
</header>
<section class="main">
......@@ -12,7 +13,7 @@
<div class="inner">
<div class="main-hd hidden-xs-only">
<img src="../assets/login_logo.png" class="login-logo" />
<h1 class="login-title">在线学习系统</h1>
<h1 class="login-title">{{ $t('main.title') }}</h1>
</div>
<div class="main-bd">
<router-view></router-view>
......@@ -29,7 +30,9 @@
</template>
<script>
import languageSwitch from '@/components/languageSwitch.vue'
export default {
components: { languageSwitch },
data() {
return {
url: webConf.others.ciis.url
......@@ -42,16 +45,13 @@ export default {
.header {
padding: 15px 20px;
.inner {
max-width: 980px;
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.header-title {
margin-top: 5px;
font-size: 32px;
font-weight: 700;
letter-spacing: 5px;
}
.main {
position: relative;
.inner {
......
<template>
<div class="password">
<el-page-header @back="$router.push('login')" title="返回登录" content="忘记密码"></el-page-header>
<el-page-header
@back="$router.push('login')"
:title="$t('password.backText')"
:content="$t('password.title')"
></el-page-header>
<div class="password-form">
<router-view></router-view>
</div>
......
<template>
<div class="wrapper">
<header class="header">
<div class="inner">
<div class="header-logo">
<a :href="url"><img src="../assets/logo.png" /></a>
</div>
<language-switch />
</div>
</header>
<section class="main">
<div class="bg"></div>
<div class="inner">
<div class="main-hd hidden-xs-only">
<img src="../assets/login_logo.png" class="login-logo" width="40" />
<h1 class="login-title">{{ $t('main.title') }}</h1>
</div>
<div class="main-bd">
<router-view></router-view>
</div>
</div>
</section>
<footer class="footer">
<p class="t2">
Copyright © 2020 Zijing Education. All rights reserved.
<br />清控紫荆(北京)教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号
</p>
</footer>
</div>
</template>
<script>
import languageSwitch from '@/components/languageSwitch.vue'
export default {
components: { languageSwitch },
data() {
return {
url: webConf.others.seg.url
}
}
}
</script>
<style lang="scss" scoped>
.header {
padding: 15px 20px;
.inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.main {
position: relative;
.inner {
position: relative;
display: flex;
max-width: 700px;
margin: -200px auto 0;
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}
}
.bg {
height: 360px;
background: url(../assets/login_bg.png) no-repeat center center;
background-size: cover;
}
.main-hd {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 260px;
text-align: center;
background-color: #bb133e;
color: #fff;
}
.login-logo {
margin-bottom: 30px;
}
.login-title {
font-weight: normal;
font-size: 20px;
line-height: 28px;
color: #fff;
margin: 0;
}
.main-bd {
flex: 1;
padding: 40px;
}
.footer {
padding: 20px 10px;
text-align: center;
.t1 {
color: #535353;
}
.t2 {
margin-top: 10px;
color: #898989;
}
}
@media (max-width: 768px) {
.bg {
height: 215px;
}
.main .inner {
margin: -120px 20px 0;
}
.main-bd {
padding: 20px;
}
}
</style>
<template>
<router-view @success="handleSuccess"></router-view>
</template>
<script>
export default {
methods: {
handleSuccess(response) {
const { url } = webConf.others.seg
window.location.href = url
}
}
}
</script>
<template>
<div class="password">
<el-page-header
@back="$router.push('login')"
:title="$t('password.backText')"
:content="$t('password.title')"
></el-page-header>
<div class="password-form">
<router-view></router-view>
</div>
</div>
</template>
<style lang="scss" scoped>
.password-form {
margin-top: 20px;
}
</style>
......@@ -100,6 +100,27 @@ export default [
}
]
},
{
path: '/seg',
component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/components/layout.vue'),
children: [
{ path: '', redirect: 'login/index' },
{
path: 'login',
component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/login.vue'),
children: [
{ path: '', redirect: 'index' },
{ path: 'index', component: loginAccount },
{ path: 'code', component: loginCode }
]
},
{
path: 'password',
component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/password.vue'),
children: [{ path: '', component: password }]
}
]
},
{
path: '/ciis',
component: () => import(/* webpackChunkName: "ciis" */ '../pages/ciis/components/layout.vue'),
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论