esswisdom_app/pages/login/index.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navigation"></view>
<view class="log">
 <view class="log_title">
 <view>{{$t('login.welcome')}},</view>
 <view class="log_titlefull">{{$t('login.full')}}</view>
 </view>
 <view><image class="log_image" src="https://esos-iot.bjdexn.cn/wx_images/logo.png" mode=""/></view>
 </view>
 <view class="log_bottom">
	 <view class="lswitch">
	 <l-switch :value="defaultValue" :placeholder="['English', '中文']" dotSize="14px" height="22px" width="32px" @click="changeLanguage"></l-switch>
	 </view>
 <view class="account_number">
  <view class="account">{{$t('login.username')}}</view>
  <view class="password">
  <image class="login_imgae1" src="https://esos-iot.bjdexn.cn/wx_images/login_user.png" mode=""/>
  <input class="weui-input"	:value="account" :placeholder="$t('login.username_placeholder')"  @input="bindKeyInput1"/></view>
 </view>
 <view class="number">
  <view class="account">{{$t('login.password')}}</view>
  <view class="password"> 
    <image class="login_imgae1" src="https://esos-iot.bjdexn.cn/wx_images/password.png" mode=""/>
  <input class="weui-input"	:value="password" :password="passwordtype" :placeholder="$t('login.password_placeholder')" @input="bindKeyInput2"/>
    <image class="login_imgae" src="https://esos-iot.bjdexn.cn/wx_images/password_1.png" v-if="passwordtype" @click="onpassword" mode=""/>
    <image class="login_imgae" src="https://esos-iot.bjdexn.cn/wx_images/password_2.png" v-else @click="onpassword" mode=""/>
  </view>
 </view>
 <view class="button_button">
 <button class="button_button" color="#F0F5F5" @click="onLogin">{{$t('login.submit')}}</button>
 </view>
 <view class="agreement">
  <radio @click.stop="checkboxChange" value="1" :checked="checked" color="#007545" />
 {{$t('login.terms')}}<text class="agreement_color" data-name="服务协议" @click="onprivacy"> {{$t('login.Terms')}}</text> {{$t('login.&')}}<text class="agreement_color" data-name="隐私政策" @click="onprivacy"> {{$t('login.Privacy')}}</text> </view>
 </view>
			
  </view>
</template>

<script setup>
	import request from '@/utils/request';
	import { useI18n } from 'vue-i18n'; 
 
	const { t } = useI18n()
import { onMounted,ref } from 'vue';

      const account = ref('')
      const password = ref('')
      const passwordtype = ref(true)
      const checked = ref(false)
	  const defaultValue=ref()
	 const bindKeyInput1 = (e) => {
		 account.value = e.detail.value
	 };
	 const bindKeyInput2 = (e) => {
			 password.value = e.detail.value
	 };
	 const onpassword = () => {
			 passwordtype.value = !passwordtype.value
	 };
	 const onLogin = async () => {
		 if (!checked.value) {
		   return uni.showToast({
		     title: '请先阅读协议并勾选同意按钮',
		   icon: 'none',
		 
		   });
		 }else if(account.value==''||password.value=='' ){
			return uni.showToast({
			  title: '请输入正确的账户与密码',
			icon: 'none',
					 
			}); 
		 }
	 try {
	    const response = await request({
	      url: '/platform/login',
	      method: 'POST',
	 	 header:{'Content-Type': 'application/x-www-form-urlencoded'},
		 withCredentials: true, // 启用凭证
		 data: {
		   username: account.value,
		   password: password.value,
		   tenantNo: '',
		   rememberMe: false,
		 },
	    });
	    console.log('登录成功:', response);
	     uni.switchTab({
	     	url:'/pages/index/index'
	     })
	  } catch (error) {
	    console.error('登录失败:', error);
	  }
	 
	 };
	 const checkboxChange = (e) => {
		 checked.value = !checked.value
	 };
	 const onprivacy = (e) => {
			 // uni.navigateTo({
			 //   url: `/pages/privacy/index?name=${e.target.dataset.name}`,
			 // })
			 // if (options.name=='服务协议') {
			 //   this.setData({
			 //    URL:'https://esos-iot.bjdexn.cn/wx_images/service.png'
			 //   })
			 // }else{
			 //  this.setData({
			 //    URL:'https://esos-iot.bjdexn.cn/wx_images/privacy.png'
			 //   })
			 // }
	 };
	 
     onMounted(() => {
	try {
	    const language = uni.getStorageSync('userLanguage');
	    defaultValue.value = language === 'en';
			   getServerData();
	  } catch (error) {
	    console.error('读取 Storage 失败:', error);
	  }
   	});
	const { locale } = useI18n(); // 使用 Composition API
	const changeLanguage=()=>{
			 if(defaultValue.value){
				 locale.value = 'zh-Hans'; // 使用响应式 locale
				 	  uni.setStorageSync('userLanguage', 'zh-Hans');
					  defaultValue.value = false
					 
			 }else{
				locale.value = 'en'; // 使用响应式 locale
				 	  uni.setStorageSync('userLanguage', 'en');
					  defaultValue.value = true
					 
			 }
			uni.setTabBarItem({
				index:0,
					text:t('tabBar.publicize')
			})
			uni.setTabBarItem({
				index:1,
					text:t('tabBar.products')
			})
			uni.setTabBarItem({
				index:2,
					text:t('tabBar.Devices')
			})
			uni.setTabBarItem({
				index:3,
				text:t('tabBar.My')
			})	
			  
	 
	 };
	 const getServerData = () => {
			 
			}

</script>
<!-- 

 --> 
<style scoped>
	.uni-page{
		width: 100%;
		height: 100%;
	}
.container {
	height: 100vh;
  background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%);
  box-sizing: border-box;
}

.navigation {
  width: 100%;
  height: 100px;
}


 .title{
   font-size: 36rpx;
   text-align: center;
  margin-top: 16rpx;
  }
 .log{
   width: 100%;
   height: 440rpx;
   display: flex;
   justify-content: space-around;
align-items: center;  
padding: 0rpx 30rpx;
box-sizing: border-box;
  }
  .log_title{
    font-size: 36rpx;
    line-height:72rpx;
    font-weight: 600;
  }
  .log_titlefull{
	  font-size: 32rpx;
	  line-height:72rpx;
	  font-weight: 600;
  }
  .log_image{
    width: 194rpx;
    height: 232rpx;
  }
 .log_bottom{
width: 100%;
height: 100%;
border-radius: 40rpx;
background-color: #fff;
padding: 0rpx 40rpx;
box-sizing: border-box;
 }
 .account_number{
   width: 100%;
   padding-top: 80rpx;
 }
 .lswitch{
	 float: right;
	 margin-top: 20rpx;
 }
 .number{
   margin-top: 40rpx;
 }
 .account{
 font-size: 32rpx;
 }
 .weui-input{
   flex: 1;
   height: 100rpx;
 }
 .password{
   display: flex;
   align-items: center;
 font-size: 28rpx;
margin-top: 10rpx;
padding-bottom: 0rpx;
border-bottom:1rpx #cccccc solid;
 }
 .login_imgae1{
 margin-right: 20rpx;
 width: 40rpx;
height: 40rpx;
}
 .login_imgae{
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
 }
 .button_button{
   margin-top: 100rpx;
   color: #fff;
 background-color: #007545;
 background-color: rgba(0,117,68, 0.3); /* 红色，50%透明度 */
  }
.agreement{
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}
.agreement_color{
  color:#26B1A1;
  margin:0rpx 6rpx;
}
.checkbox-group__icon-dot::after{
  background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #26B1A1))) !important;
}
.checkbox-group__icon--checked {
  color: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #26B1A1))) !important;
}
.checkbox-group__icon-dot{
  border: 3px solid var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #26B1A1))) !important;
}
.checkbox-group--block{
  padding: var(--td-radio-vertical-padding, 0rpx) !important;
}
/* index.wxss */
 

.radio-group {
  margin-bottom: 20px;
}

.radio-label {
  font-size: 16px;
}

.login-button {
  width: 100px;
  height: 40px;
}

/* 定义晃动动画 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radio-group {
  margin-bottom: 20px;
}

.radio-label {
  font-size: 16px;
}

.login-button {
  width: 100px;
  height: 40px;
}

/* 定义晃动动画 */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.5s;
}
.uni-checkbox-input svg{
	color: #007545 !important;
}

</style>