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.desktop_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.sex || '暂无' }}</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'
	import { getUserInfo } from '@/api/mine.js'
	import { useUserStore } from '@/store/user.js'
	const userStore = useUserStore()
	const userInfo = ref({})
	// 监听页面加载
	onLoad((options) => {
		console.log('options.useId', options.useId);
		console.log('options', !options.useId);
		if (!options.useId) {
			// 获取传入的标题参数
			userInfo.value = userStore.user
		} else {
			getUserInfo(options.useId).then((res) => {
				userInfo.value = res.returnParams[0]
			})
		}
		const name = userInfo.value.name;
		if (name) {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: name + "的信息"
			});
		}
	})
</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>