ygoa_miniapp/pages/mine/personal_message/personal_message.vue

<template>
	<view class="container">
		<!-- 用户头像 -->
		<image :src="headImg" class="avatar"></image>
		
		<!-- 用户名及职位 -->
		<text class="username">{{ userInfo.name }}</text>
		<view class="position" v-for="(item,index) in userInfo.department">
			{{ item.departmentName }}--{{item.position}}
		</view>
		
		
		<!-- 联系方式 -->
		<view class="contact-info">
			<view class="info-item">
				<view>
					<uni-icons type="phone" size="20"></uni-icons>
					<text>手机</text>
				</view>
				<text class="lastText">{{ userInfo.phone || '暂无' }}</text>
			</view>
			<view class="info-item">
				<view>
					<uni-icons type="email" size="20"></uni-icons>
					<text>邮箱</text>
				</view>
				<text class="lastText">{{ userInfo.email || '暂无' }}</text>
			</view>
		</view>
		
		<!-- 个人信息 -->
		<view class="personal-info">
			<view class="info-item">
				<view>
					<uni-icons type="person" size="20"></uni-icons>
					<text>性别</text>
				</view>
				<text class="lastText">{{ userInfo.gender || '暂无' }}</text>
			</view>
			<view class="info-item">
				<view>
					<uni-icons type="star" size="20"></uni-icons>
					<text>生日</text>
				</view>
				<text class="lastText">{{ userInfo.birthday || '暂无' }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import headImg from "/static/images/mine/headImg.jpg";
	const userInfo=reactive({
					name: "张三",
					department: [{
							value: 0,
							departmentName: "研发部",
							position: '软件开发工程师'
						},
						{
							value: 1,
							departmentName: "业务部",
							position: '销售经理'
						},
					],
					phone: "",
					email: "",
					gender: "男",
					birthday: "2000-01-10"
				});
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		background-color: #f8f8f8;
		height: 100vh;
		box-sizing: border-box;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-bottom: 15px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.username {
		font-size: 18px;
		
	}

	.position {
		font-size: 14px;
		color: #666;
		margin: 10px auto;
	}

	.contact-info,
	.personal-info {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.info-item {
		padding: 12px 16px;
		border-top: 1px solid #eee;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.lastText {
		color: #999;
	}
</style>