<template>
|
<view class="bodyView">
|
<view class="topView">
|
<image src="/static/img/login_top.png" mode="aspectFill">
|
</image>
|
</view>
|
<view class="logoView">
|
<image src="/static/img/newLogo.png" mode="aspectFit">
|
</image>
|
</view>
|
<view class="bottomView">
|
<view class="itemView" style="margin-bottom: 40px;">
|
<view class="helloText">{{$t('index.hello')}}</view>
|
<view class="introText">{{$t('index.intro')}}</view>
|
</view>
|
<view class="itemView">
|
<view class="textType3">{{$t('login.user')}}:</view>
|
<view class="input-wrapper">
|
<input class="uni-input" v-model="user.userName" focus :placeholder="$t('login.inputUser')" />
|
</view>
|
</view>
|
<view class="itemView">
|
<view class="textType3">{{$t('login.pwd')}}:</view>
|
<view class="input-wrapper">
|
<input class="uni-input" v-model="user.password" :placeholder="$t('login.inputPwd')" :password="!showPassword" />
|
<image src="/static/img/login_noteye.png" class="eye-icon" v-if="showPassword"
|
@click="changePassword"></image>
|
<image src="/static/img/login_eye.png" class="eye-icon" v-if="!showPassword"
|
@click="changePassword"></image>
|
</view>
|
</view>
|
<view class="langAndRemView">
|
<view class="check">
|
<view >
|
<view>{{$t('login.remPwd')}}</view>
|
</view>
|
<view>
|
<switch :checked='remberPassword' color="#FFCC33" style="transform:scale(0.7)" @change="remberChange" />
|
</view>
|
</view>
|
<view class="langView">
|
<!-- 语言选择下拉菜单 -->
|
<view class="language-dropdown">
|
<view class="selected-language" @click="toggleLanguageDropdown">
|
<text>{{getCurrentLanguageText()}}</text>
|
<uni-icons type="bottom" size="14" color="#707070"></uni-icons>
|
</view>
|
<view class="language-options" v-if="showLanguageDropdown">
|
<view class="language-option" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
|
<text>{{item.text}}</text>
|
<uni-icons type="checkmarkempty" size="14" color="#007AFF" v-if="item.code == applicationLocale"></uni-icons>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="itemView">
|
<button class="loadingButton" @click="onLogin()" :loading="loading">{{btnText}}</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import md5 from '../../static/js/md5.js'
|
import {
|
request
|
} from '../../common/request.js'
|
export default{
|
data(){
|
return{
|
showPassword: false,
|
loading: false,
|
showLanguageDropdown: false,
|
loginButton: 'login.login',
|
systemLocale: '',
|
applicationLocale: '',
|
remberPassword: true,
|
user: {
|
userName: '',
|
password: '',
|
},
|
}
|
},
|
computed:{
|
locales() {
|
return [{
|
text: this.$t('locale.auto'),
|
code: 'auto'
|
}, {
|
text: this.$t('locale.en'),
|
code: 'en'
|
},
|
{
|
text: this.$t('locale.zh-hans'),
|
code: 'zh-Hans'
|
},
|
{
|
text: this.$t('locale.zh-hant'),
|
code: 'zh-Hant'
|
},
|
{
|
text: this.$t('locale.ja'),
|
code: 'ja'
|
}
|
]
|
},
|
btnText() {
|
return this.$t(this.loginButton);
|
}
|
},
|
onLoad(){
|
let systemInfo = uni.getSystemInfoSync();
|
this.systemLocale = systemInfo.language;
|
this.applicationLocale = uni.getLocale();
|
this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
|
uni.onLocaleChange((e) => {
|
this.applicationLocale = e.locale;
|
})
|
|
this.user = uni.getStorageSync('user')
|
if (!this.user) {
|
this.user = {
|
userName: '',
|
password: ''
|
}
|
}
|
},
|
methods:{
|
async onLogin() {
|
const {
|
code,
|
data,
|
msg
|
} = await request('/login', {
|
username: this.user.userName,
|
password: this.user.password,
|
})
|
if (code === 200) {
|
this.loading = true;
|
this.loginButton = 'login.loging';
|
uni.setStorageSync('token', data.accessToken);
|
uni.setStorageSync('userData', data.user);
|
if (this.remberPassword) {
|
uni.setStorageSync('user', this.user);
|
} else {
|
uni.removeStorageSync('user');
|
}
|
this.goHome()
|
} else {
|
uni.showToast({
|
title: msg
|
})
|
}
|
|
},
|
goHome() {
|
setTimeout(() => {
|
// this.getAuth2()
|
this.getFields()
|
uni.showToast({
|
title: '登录成功'
|
})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../home/index'
|
});
|
}, 300)
|
}, 700)
|
},
|
async getFields() {
|
const {
|
code,
|
data,
|
msg
|
} = await request('/dynamic/fields', {}, 'get')
|
if (code === 200) {
|
this.$store.commit('user/setFields', data)
|
} else {
|
uni.showToast({
|
title: msg
|
})
|
}
|
},
|
remberChange(e) {
|
this.remberPassword = !this.remberPassword
|
},
|
// 显示/隐藏密码
|
changePassword() {
|
this.showPassword = !this.showPassword;
|
},
|
localChange() {
|
console.log(this.local)
|
if (this.isAndroid) {
|
uni.showModal({
|
content: this.$t('index.language-change-confirm'),
|
success: (res) => {
|
if (res.confirm) {
|
uni.setLocale(this.local.value);
|
}
|
}
|
})
|
} else {
|
uni.setLocale(this.local.value);
|
this.$i18n.locale = this.local.value;
|
}
|
},
|
// 切换语言下拉菜单显示状态
|
toggleLanguageDropdown() {
|
this.showLanguageDropdown = !this.showLanguageDropdown;
|
},
|
|
// 获取当前选择的语言文本
|
getCurrentLanguageText() {
|
const currentLocale = this.locales.find(item => item.code === this.applicationLocale);
|
return currentLocale ? currentLocale.text : this.$t('locale.auto');
|
},
|
|
// 语言选择改变
|
onLocaleChange(e) {
|
if (this.isAndroid) {
|
uni.showModal({
|
content: this.$t('index.language-change-confirm'),
|
success: (res) => {
|
if (res.confirm) {
|
uni.setLocale(e.code);
|
this.showLanguageDropdown = false;
|
}
|
}
|
})
|
} else {
|
uni.setLocale(e.code);
|
this.$i18n.locale = e.code;
|
this.showLanguageDropdown = false;
|
}
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.helloText{
|
font-family: a2;
|
font-size: 20px;
|
margin-top: 10px;
|
margin-bottom: 5px;
|
}
|
.introText{
|
font-family: a3;
|
font-size: 15px;
|
color: #ababab;
|
}
|
.textType3{
|
font-family: a4;
|
}
|
.bodyView{
|
display: flex;
|
flex-direction: column;
|
background-image: url("/static/img/login_backg.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center;
|
height: 100vh;
|
width: 100%;
|
}
|
.topView{
|
flex: 7;
|
}
|
.topView image{
|
width: 100%;
|
}
|
.logoView{
|
flex: 1;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
|
}
|
.logoView image{
|
width: 33%;
|
height: 50px;
|
margin-right: 20px;
|
}
|
.bottomView{
|
flex: 15;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.itemView{
|
width: 90%;
|
height: 50px;
|
margin-bottom: 30px;
|
}
|
.langAndRemView{
|
width: 90%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.langView{
|
width: 30%;
|
}
|
.textImage{
|
width: 60%;
|
height: 42px;
|
object-fit: cover;
|
margin-top: 20px;
|
margin-bottom: 30px;
|
}
|
|
.input-wrapper {
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
padding: 8px 13px;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
background-color: #FFFFFF;
|
border-radius: 10px;
|
height: 45px;
|
align-items: center;
|
margin-top: 5px;
|
}
|
|
.uni-input {
|
height: 28px;
|
line-height: 28px;
|
font-size: 15px;
|
padding: 0px;
|
flex: 1;
|
background-color: #FFFFFF;
|
|
}
|
|
.uni-icon {
|
font-family: uniicons;
|
font-size: 24px;
|
font-weight: normal;
|
font-style: normal;
|
width: 24px;
|
height: 24px;
|
line-height: 24px;
|
color: #999999;
|
}
|
|
.uni-eye-active {
|
color: #007AFF;
|
}
|
|
.eye-icon {
|
width: 20px;
|
height: 13px;
|
margin-left: 5px;
|
}
|
.loadingButton{
|
background-color: #ffda1e;
|
font-family: a1;
|
}
|
.check {
|
|
height: 100%;
|
display: flex;
|
font-size: 18px;
|
color: #606266;
|
justify-content: flex-start;
|
align-items: center;
|
|
}
|
/* 语言选择下拉菜单 */
|
.language-dropdown {
|
position: relative;
|
margin-bottom: 20rpx;
|
z-index: 10;
|
}
|
|
.selected-language {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15rpx 20rpx;
|
background-color: #f8f8f8;
|
border-radius: 8rpx;
|
border: 1px solid #e0e0e0;
|
}
|
|
.language-options {
|
position: absolute;
|
bottom: 100%;
|
left: 0;
|
right: 0;
|
background-color: #ffffff;
|
border-radius: 8rpx;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
border: 1px solid #e0e0e0;
|
margin-bottom: 5rpx;
|
}
|
|
.language-option {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15rpx 20rpx;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.language-option:last-child {
|
border-bottom: none;
|
}
|
|
.language-option:active {
|
background-color: #f5f5f5;
|
}
|
</style>
|
