ygoa_miniapp/pages/mine/personal_message/personal_message.vue

<template>
	<page-meta root-font-size="system" />
	<view class="container">
		<!-- 用户头像 -->
		<image :src="headImg" class="avatar"></image>

		<!-- 用户名及职位 -->
		<text class="username">{{ userInfo.name }}</text>
		<view class="position" v-for="(item,index) in userInfo.groupXUsers" :key="index">
			{{ item.groupName }}--{{item.posName||'暂无'}}
		</view>
		<!-- <view class="position" >
			{{ userInfo.deptName }}--{{userInfo.positionName}}
		</view> -->

		<!-- 联系方式 -->
		<view class="contact-info">
			<view class="info-item">
				<view>
					<uni-icons type="phone" size="20"></uni-icons>
					<text>手机</text>
				</view>
				<text v-if="userInfo.desktop_phone==null" class="lastText">{{ '暂无' }}</text>
				<text v-else class="copyText" @click="copyPhone">{{ 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">{{ sexDict[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 { onMounted, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getUserInfo } from '@/api/mine.js'
	import { useUserStore } from '@/store/user.js'
	import $modal from '@/plugins/modal.js'
	import config from '@/config';
	const sexDict = {
		'F': '女',
		'M': '男'
	}
	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
			setHeadImg()
		} else {
			getUserInfo(options.useId).then((res) => {
				userInfo.value = res.returnParams[0]
				setHeadImg()
			})
		}
		const name = userInfo.value.name;
		if (name) {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: name + "的信息"
			});
		}
	})
	const headImg=ref()
	function setHeadImg() { // TODO 直接返回 不创建变量
		headImg.value=config.baseUrlPre + (userInfo.value.photo==""?config.defaultAvatarPath:userInfo.value.photo)
	}
	function copyPhone() {
		uni.showModal({
		  title: '是否跳转拨号',
		  cancelText: '复制',
		  confirmText: '跳转',
		  success: function(res) {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: userInfo.value.desktop_phone,
						fail: (err) => {
							$modal.msgError('跳转失败，请重试')
						}
					})
				} else {
					wx.setClipboardData({
						data: userInfo.value.desktop_phone,
						success:  (res)=> {
							$modal.msgSuccess('复制成功')
						},
						fail: (err) => {
							$modal.msgError('复制失败，请重试')
						}
					});
				}
		  }
		})
	}
</script>

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

	.avatar {
		width: calc(6.25rem + 0px);
		height: calc(6.25rem + 0px);
		border-radius: 50%;
		margin-bottom: 15px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.username {
		font-size: calc(1.125rem + 0px);

	}

	.position {
		font-size: calc(0.875rem + 0px);
		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: calc(1rem + 0px);
		display: flex;
		justify-content: space-between;
		align-items: center;
		::v-deep .uni-icons {
			font-size: calc(1.25rem + 0px);
		}
	}

	.copyText {
		color: #2196f3;
		text-decoration: #2196f3;
	}
	.lastText {
		color: #999;
	}
</style>