esswisdom_app/pages/personalInformation/index.vue

<template>
	<view class="container">
		<view class="account_number">
	     	<image @click="chooseImage" class="account_to" :src="user.user.avatar" mode=""></image>
		</view>
		<view class="toptabbar">
			<view class="toptabbar_">
				<view class="toptabbar_box">
								<view class="toptabbar_left">
									名称
								</view>
									<view class="toptabbar_right">
										{{user.user.loginName||''}}
									</view>
							</view>
				<view class="toptabbar_box">
					<view class="toptabbar_left">
						角色
					</view>
						<view class="toptabbar_right">
							{{user.user.roles[0].roleName||''}}
						</view>
				</view>
				<view class="toptabbar_box">
					<view class="toptabbar_left">
						公司
					</view>
						<view class="toptabbar_right">
							{{user.user.dept.deptName||''}}
						</view>
				</view>
				<view class="toptabbar_box">
					<view class="toptabbar_left">
						创建时间
					</view>
						<view class="toptabbar_right">
							{{user.user.createTime||''}}
						</view>
				</view>
			
			</view>
		
	</view>
	 
	</view>
</template>
<!--    -->
<script>
	import request from '@/utils/request';
	export default {
		data() {
			return {
				user:[],
				
			}
		},
	onLoad() {
	 this.getuserinfo()
	},
		methods: {
	async getuserinfo() {
				try {
					const response = await request({
						url: '/platform/user/selectaccountNumber',
						method: 'post',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					});
					this.user = response.data
				} catch (error) {
					console.error('登录失败:', error);
				}
			},
			  // 选择图片
			  chooseImage() {
			    uni.chooseImage({
			      count: 1,
			      sizeType: ['original', 'compressed'],
			      sourceType: ['album', 'camera'],
			      success: (res) => {
			        const tempFilePaths = res.tempFilePaths;
			        // 使用 uni.uploadFile 方式上传
			        this.uploadFile(tempFilePaths[0]);
			      },
			      fail: (err) => {
			        console.error('选择图片失败:', err);
			        uni.showToast({
			          title: '选择图片失败',
			          icon: 'none'
			        });
			      }
			    });
			  },
			 // 使用 uni.uploadFile 上传
			  async uploadFile(filePath) {
			    uni.showLoading({
			      title: '上传中...'
			    });
			    
			    try {
			      const response = await new Promise((resolve, reject) => {
			        uni.uploadFile({
			          url: 'https://esos-iot.bjdexn.cn/platform/shu/upload/webPost', // 如 '/platform/shu/upload/webPost'
			          filePath: filePath,
			          name: 'file', // 后端接收的字段名
			          formData: {},
			          success: resolve,
			          fail: reject
			        });
			      });
			      
			      const res = JSON.parse(response.data);
			      await this.updateAvatar(res.data.url);
			      
			      uni.hideLoading();
			      uni.showToast({
			        title: '上传成功',
			        icon: 'success'
			      });
			      
			    } catch (error) {
			      console.error('上传失败:', error);
			      uni.hideLoading();
			      uni.showToast({
			        title: '上传失败',
			        icon: 'none'
			      });
			    }
			  },
			 // 更新头像URL
			  async updateAvatar(url) {
				 
			    try {
			      const response = await request({
			        url: '/platform/user/profile/update',
			        method: 'post',
			        header: {
			         'Content-Type': 'application/x-www-form-urlencoded'
			        },
			        data:{avatar:url},
			      });
				  this.getuserinfo();
			      // 更新本地用户信息等操作
			      
			    } catch (error) {
			      console.error('头像更新失败:', error);
			      throw error;
			    }
				
			  }
			}
	}
</script>

<style scoped>
	  .uni-page{
	  		width: 100%;
	  		height: 100%;
	  	}
	  .container {
	  	height: 100%;
	    /* background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%); */
		background-color: #f5f5f5;
	    box-sizing: border-box;
	  }     
	  .account_number{
	    width: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	  }
	 .account_to{
		 width: 200rpx;
		 height: 200rpx;
		 border-radius: 100rpx;
	 }
 
	   .toptabbar {
	     width: 100%;
	     padding: 10rpx 40rpx;
	     box-sizing: border-box;
	   }
	   .toptabbar_{
		   border-radius: 10rpx;
		   overflow: hidden;
		   padding:0rpx 20rpx 20rpx 20rpx;
		   background-color: #ffffff;
	   }
		.toptabbar_box{
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx #f5f5f5 solid;
		}
        .toptabbar_left{
		 font-size: 28rpx;
		}

</style>