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" :key="index">
			{{ 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 { ref } from 'vue';
	import headImg from "@/static/images/mine/headImg.jpg";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 监听页面加载
	onLoad((options) => {
		// 获取传入的标题参数
		const name = options.name;
		const id = options.id;
		console.log('id', id);
		if (name) {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: name + "的信息"
			});
		userInfo.value.name = name
		}
	})
	// 定义个人信息数据
	const userInfo = ref({
		name: "张三",
		department: [{
				departmentName: "研发部",
				position: '软件开发工程师'
			},
			{
				departmentName: "业务部",
				position: '销售经理'
			},
		],
		phone: "13579543684",
		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>