From 32b10def2b0944c4afbe4d89e55261c39a690f1d Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期四, 17 七月 2025 13:40:09 +0800
Subject: [PATCH] #
---
pages/login/login.vue | 259 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 219 insertions(+), 40 deletions(-)
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 7426ae2..3430788 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,11 +1,11 @@
<template>
<view>
<!-- 璁剧疆 -->
- <!-- <view class="settings">
+ <view class="settings">
<view class="settings-btn">
<uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
</view>
- </view> -->
+ </view>
<!-- logo -->
<view class="logo">
<view class="logo-box">
@@ -13,14 +13,27 @@
</view>
</view>
<view class="content">
+ <!-- 璇█閫夋嫨涓嬫媺鑿滃崟 -->
+ <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 class="box shadow-warp">
<view class="box-icon">
<uni-icons type="person" size="20" color="#707070"></uni-icons>
</view>
- <view class="box-text">璐﹀彿:</view>
+ <view class="box-text">{{$t('login.user')}}:</view>
<view class="box-input">
- <input type="text" placeholder="璇疯緭鍏ヨ处鍙�" v-model="user.userName"
+ <input type="text" :placeholder="$t('login.inputUser')" v-model="user.userName"
placeholder-style="font-size:14px;color:#ccc;">
</view>
<view class="box-show"></view>
@@ -30,9 +43,9 @@
<view class="box-icon">
<uni-icons type="locked" size="20" color="#707070"></uni-icons>
</view>
- <view class="box-text">瀵嗙爜:</view>
+ <view class="box-text">{{$t('login.pwd')}}:</view>
<view class="box-input">
- <input :password="!showPassword" placeholder="璇疯緭鍏ュ瘑鐮�" v-model="user.password"
+ <input :password="!showPassword" :placeholder="$t('login.inputPwd')" v-model="user.password"
placeholder-style="font-size:14px;color:#ccc;">
</view>
<view class="box-show">
@@ -45,7 +58,7 @@
<!-- 璁颁綇瀵嗙爜 -->
<view class="check">
<view class="check-left">
- <view>璁颁綇瀵嗙爜</view>
+ <view>{{$t('login.remPwd')}}</view>
</view>
<view class="check-right">
<switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange" />
@@ -55,9 +68,9 @@
<!-- 鐧诲綍鎸夐挳 -->
<view class="submit">
<view class="" style="width: 400rpx;">
- <button type="primary" @click="onLogin()" :loading="load.loading">{{load.btnText}}</button>
+
+ <button type="primary" @click="onLogin()" :loading="loading">{{btnText}}</button>
</view>
-
</view>
<!-- 璁剧疆寮圭獥鍖哄煙 -->
@@ -77,7 +90,7 @@
<view class="popup-item">
<view class="popup-item-left">椤圭洰:</view>
<view class="popup-item-right"><input type="text" v-model="url.project"></view>
- </view>
+ </view>
<view class="btn">
<view class="btn-left" @click="close">鍙栨秷</view>
<view class="btn-right" @click="settingConfirm">纭</view>
@@ -110,7 +123,9 @@
} from '../../common/request.js'
export default {
data() {
- return {
+ return {
+ systemLocale: '',
+ applicationLocale: '',
version: '',
showPassword: false,
value: '',
@@ -125,20 +140,55 @@
userName: '',
password: '',
},
- load: {
- loading: false,
- btnText: '鐧诲綍'
- },
+ loading: false,
msgType: 'success',
filename: '',
dialogContent: '',
elements: [],
colorList: ['cyan', 'blue', 'purple', 'mauve', 'pink', 'brown', 'red', 'orange', 'yellow', 'olive',
'olive', 'grey'
- ]
+ ],
+ showLanguageDropdown: false,
+ loginButton: 'login.login'
+ }
+ },
+ 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')
this.url = uni.getStorageSync('url')
this.baseUrl = uni.getStorageSync('baseUrl')
@@ -155,11 +205,56 @@
project: ''
}
}
- },
+ },
onShow() {
this.getVersion()
},
methods: {
+ 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;
+ }
+ },
// 鏄剧ず/闅愯棌瀵嗙爜
changePassword() {
this.showPassword = !this.showPassword;
@@ -169,7 +264,7 @@
},
// 璁剧疆绐楀彛寮�鍚寜閽�
settings() {
- this.$refs.inputDialog.open()
+ this.$refs.inputDialog.open('')
},
// 璁剧疆绐楀彛纭淇敼鎸夐挳
dialogInputConfirm() {
@@ -197,8 +292,8 @@
password: this.user.password,
})
if (code === 200) {
- this.load.loading = true;
- this.load.btnText = '鐧诲綍涓�';
+ this.loading = true;
+ this.loginButton = 'login.loging';
uni.setStorageSync('token', data.accessToken);
uni.setStorageSync('userData', data.user);
if (this.remberPassword) {
@@ -413,7 +508,8 @@
</script>
<style>
@import url('../../static/css/wms.css/wms.css');
-
+
+
/* 璁剧疆鍖哄煙 */
.settings {
min-height: 100rpx;
@@ -466,8 +562,7 @@
text-align: center;
}
- .box-text {
- width: 100rpx;
+ .box-text {
text-align: center;
}
@@ -512,22 +607,6 @@
font-size: 12px;
color: #909399;
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
/* ------ */
.shadow-warp {
@@ -553,4 +632,104 @@
left: auto;
transform: rotate(3deg);
}
-</style>
\ No newline at end of file
+
+ /* 璇█閫夋嫨涓嬫媺鑿滃崟 */
+ .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;
+ top: 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-top: 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;
+ }
+
+ /* 鍏朵粬鏍峰紡 */
+ .check {
+ width: 78%;
+ display: flex;
+ font-size: 12px;
+ color: #606266;
+ margin-top: 10rpx;
+ }
+
+ .check-right {
+ margin-left: auto;
+ }
+
+ .submit {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ width: 100%;
+ bottom: 100rpx;
+ }
+
+ .version {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ text-align: center;
+ font-size: 12px;
+ color: #909399;
+ }
+ /* ------ */
+
+ .shadow-warp {
+ position: relative;
+ box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
+ }
+
+ .shadow-warp:before,
+ .shadow-warp:after {
+ position: absolute;
+ content: "";
+ top: 20upx;
+ bottom: 30upx;
+ left: 20upx;
+ width: 50%;
+ box-shadow: 0 30upx 20upx rgba(0, 0, 0, 0.2);
+ transform: rotate(-3deg);
+ z-index: -1;
+ }
+
+ .shadow-warp:after {
+ right: 20upx;
+ left: auto;
+ transform: rotate(3deg);
+ }
+</style>
--
Gitblit v1.9.1