shuhi-app/pages/my/page/user-info.vue

<template>
	<view class="user-info-page">
		<!-- 头像区域 -->
		<view class="avatar-section">
			<view class="avatar-wrap">
				<text>头像：</text>
				<u-avatar :size="50"
					src="https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png"></u-avatar>
				<u-button type="success" style="width:200rpx" size="small" @click="handleEditAvatar">去修改</u-button>
			</view>
		</view>

		<!-- 基本信息区域 -->
		<view class="info-section">
			<view class="section-title">基本信息</view>
			<view class="info-card">
				<u-cell-group :border="false">
					<u-cell title="姓名" :value="userInfo.name || '无'" />
					<u-cell title="性别" :value="userInfo.gender || '无'" />
					<u-cell title="生日" :value="userInfo.birthday || '无'" />
					<u-cell title="学历" :value="userInfo.education || '无'" />
					<u-cell title="毕业学校" :value="userInfo.school || '无'" :border="false" />
				</u-cell-group>
			</view>
		</view>

		<!-- 账号信息区域 -->
		<view class="info-section">
			<view class="section-title">用户账号</view>
			<view class="info-card">
				<u-cell-group :border="false">
					<u-cell title="账号" :value="userInfo.account" />
					<u-cell title="创建日期" :value="userInfo.createTime" />
					<u-cell title="最近登录" :value="userInfo.lastLogin || '--'" :border="false"  />
				</u-cell-group>
			</view>
		</view>

		<!-- 员工资料区域 -->
		<view class="info-section">
			<view class="section-title">员工资料</view>
			<view class="info-card">
				<u-cell-group :border="false">
					<u-cell title="公司" :value="userInfo.company || '无'" />
					<u-cell title="员工编号" :value="userInfo.employeeId || '无'" />
					<u-cell title="职位" :value="userInfo.position || '无'" :border="false" />
				</u-cell-group>
			</view>
		</view>

		<!-- 联系方式区域 -->
		<view class="info-section">
			<view class="section-title">联系方式</view>
			<view class="info-card">
				<u-cell-group :border="false">
					<u-cell title="电话" :value="userInfo.phone" />
					<u-cell title="邮箱" :value="userInfo.email || '无'" />
					<u-cell title="住址" :value="userInfo.address || '无'" :border="false" />
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const userInfo = ref({
		avatar: '/static/images/avatar.jpg',
		name: '无',
		gender: '无',
		birthday: '无',
		education: '无',
		school: '无',
		username: '用户账号',
		account: 'fxt',
		createTime: '2024-06-12 12:00:00',
		lastLogin: '',
		company: '无',
		employeeId: '无',
		position: '无',
		phone: '18888888888',
		email: '无',
		address: '无'
	})

	const handleEditAvatar = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				// 处理头像上传逻辑
				console.log('选择的图片:', res.tempFilePaths[0])
			}
		})
	}
</script>

<style>
	page {
		background: #F5F6FA;
	}
</style>
<style lang="scss" scoped>
	.user-info-page {
		padding: 20rpx;
		box-sizing: border-box;

		.avatar-section {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx;
			margin-bottom: 20rpx;

			.avatar-wrap {
				display: flex;
				align-items: center;
				gap: 30rpx;
			}
		}

		.info-section {
			margin-bottom: 20rpx;

			.section-title {
				font-size: 28rpx;
				color: #666;
				padding: 20rpx 10rpx;
				font-weight: 500;
			}

			.info-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
			}
		}
	}
</style>