#i18n

zjj

2025-05-16 65897d713fe067744326e9b0a6bbac98f495838c

 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>


   /* 语言选择下拉菜单 */

   .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>