esswisdom_app/pages/user/index.vue

<template>
	<view class="container">
	 <view class="setup">
	 <view style="width: 100%;height:30rpx"></view>
	 <view class="user">
		 
	 <image @click="onuser" class="user_to" :src="user.user.avatar" mode=""/>
	 <view class="user_name">
	 <view class="user_name1">姓名: {{user.user.loginName}}</view>
	 <view class="user_name2">电话: {{user.user.phonenumber}}</view>
	 </view>
	 </view>
	<!-- <view class="equipment">
	 <view class="equipment_1" @click ="onstation">
	 <view class="user_left">
	 <view class="user_leftname">{{$t('My.myDevices')}}</view>
	 <view class="user_lefteq">{{$t('My.viewDevices')}}</view>
	 </view>
	 <view class="equipment_rightdiv">
	 <image class="equipment_right1" src="https://esos-iot.bjdexn.cn/wx_images/104.png" mode=""/>
	 </view>
	 </view>
	 <view class="equipment_2" @click ="onpowerstation">
	 <view class="user_left">
	 <view class="user_leftname">{{$t('My.addDevice')}}</view>
	 <view class="user_lefteq">{{$t('My.scanToAdd')}}</view>
	 </view>
	 <view class="equipment_rightdiv1">
	 <image class="equipment_right" src="https://esos-iot.bjdexn.cn/wx_images/49.png" mode=""/></view>
	 </view>
	 
	 </view> -->
	<!-- <view class="allocation_box">
	 <view class="allocation" @click ="toconfigure">
	 <view class="allocation_3">配置Wi-Fi</view>
	 <view class="allocation_1">
	 <view class="allocation_2"></view>
	 </view>
	 </view>
	 <view class="allocation" @click ="device">
	 <view class="allocation_3">连接设备</view>
	 <view class="allocation_1">
	 <view class="allocation_2"></view>
	 </view>
	 </view>
	  
	 </view> -->
	 <view class="allocation_box">
	  
	 <view class="allocation">
	 <view class="allocation_3">{{$t('My.appVersion')}}</view>
	 <view class="allocation_1">
	 <view class="allocation_2" v-if="accountInfo!=''">V {{accountInfo}}</view>
	 <view class="allocation_2" v-else>V 1.0.0</view>
	 <!-- <t-icon name="chevron-right-s" size="40rpx" data-name="chevron-right-s"/> -->
	 </view>
	 </view>
	 <view class="allocation">
	<view class="allocation_31">
	 <button class="contact-button" open-type="contact" plain >
	 <view>{{$t('My.support')}}</view>
	 </button>
	 </view>
	 <view class="allocation_1">
	 <view class="allocation_2"></view>
	 <!-- <t-icon name="chevron-right-s" size="40rpx" data-name="chevron-right-s"/> -->
	 </view>
	 </view>
	 <view class="allocation" @click ="onsetup">
	 <view class="allocation_3">{{$t('My.settings')}}</view>
	 <view class="allocation_1">
	 <view class="allocation_2"></view>
	 <!-- <t-icon name="chevron-right-s" size="40rpx" data-name="chevron-right-s"/> -->
	 </view>
	 </view>
	 <view class="allocation">
	 <view class="allocation_3">中文/English</view>
	 <view class="allocation_1">
	 <view class="allocation_2"></view>
	 <!-- <t-icon name="chevron-right-s" size="40rpx" data-name="chevron-right-s"/> -->
	 <l-switch :value="defaultValue" :placeholder="['English', '中文']" dotSize="14px" height="22px" width="32px" @click="changeLanguage"></l-switch>
	 </view>
	 </view>
	 </view>
	 </view>
	 
	 
	</view>
</template>
<!--    -->
<script setup>
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
import { onShow } from '@dcloudio/uni-app';
	import request from '@/utils/request';
 const defaultValue=ref()
 onShow(() => {
	 getuserinfo()
 try {
     const language = uni.getStorageSync('userLanguage');
     console.log('Language:', language);
     defaultValue.value = language === 'en';
   } catch (error) {
     console.error('读取 Storage 失败:', error);
   }
 });
 const accountInfo=ref('');
 const user=ref({})
 const stationName=ref('')
 const getuserinfo = async () => {
 	try {
 		const response = await request({
 			url: '/platform/user/selectaccountNumber',
 			method: 'post',
 			header: {
 				'Content-Type': 'application/x-www-form-urlencoded'
 			},
 		});
 		user.value = response.data
  console.log(user.value);
 	} catch (error) {
 		console.error('登录失败:', error);
 	}
 };
	 onMounted(() => {
	getuserinfo()
		 });
		 
		 // 头像
		 const onuser=()=>{
		 	 uni.navigateTo({
		 	 url:"/pages/personalInformation/index"
		 	 })
		 	 
		  };
		  // 我的设备
		  const onstation=()=>{
		  	 
		  	 uni.navigateTo({
				 url:"/pages/deviceslist/index"
			 })
		   };
		  
		 // 配置WI-Fi
		 const toconfigure=()=>{
		 	 
		 	 
		  };
		 // 连接设备
		 const device=()=>{
		 	 
		 	 
		  };
		 // 设置
		 const onsetup=()=>{
		 	 
		 	 
		  };
	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 onpowerstation = () =>{
     uni.showToast({
       title: '暂未开放',
       icon: 'none'
     });
     
   }
   
</script>
<!--  -->
<style scoped>
	  .uni-page{
	  		width: 100%;
	  		height: 100%;
	  	}
	  .container {
	  	height: 92vh;
	    background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%);
	    box-sizing: border-box;
	  }     
	  .account_number{
	    width: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	  }
	 
 
	   .toptabbar {
	     width: 100%;
	     padding: 10rpx 20rpx;
	     box-sizing: border-box;
	   }
		
 .setup{
   width: 100%;
   height: 100vh;
   background: linear-gradient(to bottom, #007544 -40%, #F0F5F5 40%,#F0F5F5 100%);
   padding: 0rpx 30rpx;
   box-sizing: border-box;
 
 }
 .title{
   font-weight: 500;
   font-size: 36rpx;
 display: flex;
 align-items: center;
 margin-top: 20rpx;
 justify-content: center;
 }
 .user{
   display: flex;
   margin-top: 60rpx;
 }
 .user_to{
   width: 100rpx;
   height: 100rpx;
 border-radius: 100%;
 margin-right: 40rpx;
 }
 .user_name{
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 .user_name1{
   font-size: 28rpx;
   color: #ffffff;
 }
 .user_name2{
   font-size: 24rpx;
   color: #ffffff;
 }
 .equipment{
 width: 100%;
   display: flex;
  justify-content: space-between;
   box-sizing: border-box;
   margin-top: 40rpx;
   margin-bottom: 40rpx;
 }
 .equipment_1{
   width: 48%;
   background-color: #ffffff;
   border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0rpx 20rpx;
   box-sizing: border-box;
 
 }
 .user_left{
   display: flex;
   flex-direction: column;
   justify-content:space-around;
   padding: 20rpx 0rpx;
   box-sizing: border-box;
 }
 .equipment_2{
   width: 48%;
   background-color: #ffffff;
   border-radius: 10rpx;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
 
 }
 .equipment_rightdiv{
   width: 78rpx;
   height:78rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #E3F6F8;
   border-radius: 100%;
   overflow: hidden;
 }
 .equipment_rightdiv1{
   width: 78rpx;
   height:78rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #E2ECFF;
   border-radius: 100%;
   overflow: hidden;
 }
 .equipment_right1{
   width: 50rpx;
   height: 50rpx;
 }
 .equipment_right{
  width: 50rpx;
  height: 41.31rpx;
 }
 
  .user_leftname{
    font-size: 28rpx;
 
  }
  .user_lefteq{
    width: 200rpx;
    font-size: 26rpx;
    margin-top: 12rpx;
    color: #999999;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .equipment_2{
   width: 48%;
   background-color: #ffffff;
   border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0rpx 20rpx;
   box-sizing: border-box;
  }
  .allocation{
    width: 100%;
    height: 80rpx;
 display: flex;
 align-items: center;
 justify-content:space-between;
 padding: 0rpx 20rpx;
  overflow: hidden;
 box-sizing: border-box;
 
  }
  .allocation_1{
    display: flex;
    font-size:13px;
    align-items: center;
  }
  .allocation_box{
   border-radius: 16rpx;
   background-color: #ffffff;
    padding: 10rpx 0rpx;
    box-sizing: border-box;
    margin-top: 120rpx;
 box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
 
  }
  .allocation_2{
    color: #999999;
    
  }
  .allocation_3{
    font-size: 14px;
  }
  .content-container{
 margin-top: 40rpx;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
  }
  
  .ticon{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ticonright{
    margin-right: 10rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
  .contentadd{
   width: 100%;
   height: 100%;
   margin-top: 40rpx;
   padding: 0rpx 1rpx;
   box-sizing: border-box;
 }
  .weui-input{
    width: 99%;
    height: 80rpx;
   border: 1rpx solid #cccccc;
   padding: 0rpx 10rpx;
   border-radius: 10rpx;
   box-sizing: border-box;
  }
  .input-example {
    width: 99%;
   --td-input-vertical-padding: 16rpx;
   background-color: var(--bg-color-demo);
  border: 1rpx solid #cccccc;
  border-radius: 12rpx;
  padding: 1rpx;
  margin-top: 40rpx;
  box-sizing: border-box;
 }
 .inputbox{
   width: 100%;
   margin-top: 20rpx;
   font-size: 26rpx;
   color: #cccccc;
 
 }
 .t-dialog__footer--full{
   padding: 44rpx 0 0;
 }
 button{
   padding: 0rpx;
   margin: 0rpx;
   font-size: 28rpx;
   background-color: #ffffff;
   border:0rpx solid #ffffff !important;
   border: none !important;
 }
 .allocation_31{
   width: 100%;
  font-size: 14px;
 }
 .contact-button {
   width: 100%;
   border: none !important;
   display: flex;
 }
 .avatar-edit-container {
   display: inline-block;
   position: relative;
 }
 
 .avatar-wrapper {
   position: relative;
   border-radius: 50%;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .avatar-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.3s ease;
 }
 
 .avatar-wrapper:hover .avatar-img {
   transform: scale(1.05);
 }
 
 .edit-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   border-radius: 50%;
 }
 
 .edit-content {
   text-align: center;
 }
 
 .edit-icon {
   font-size: 24px;
   margin-bottom: 8px;
   display: block;
 }
 
 .edit-text {
   font-size: 14px;
   display: block;
   font-weight: 500;
 }
 
 .file-input {
   display: none;
 }
 
 /* 过渡动画 */
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.3s;
 }
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }
</style>