Merge branch 'devlop' of http://47.97.1.152:5880/r/pda-master into devlop

skyouc

3 天以前 a232dcf6d4a59c7c47e06b6619eb7566163f95b4

 pages/login/index.vue

New file
@@ -0,0 +1,415 @@
<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>