wanzai_school_app/pages/myMsg/myMsg.vue

<template>
	<view class="container">
		<view class="box">
			<!-- 编号区域 -->
			<view class="box_item">
				<view class="item_key">编号</view>
				<view class="item_value">{{ userInfo.cardNo }}</view>
			</view>

			<!-- 姓名区域 -->
			<view class="box_item">
				<view class="item_key">姓名</view>
				<view class="item_value">{{ userInfo.name }}</view>
			</view>
			<!-- 身份区域 -->
			<view class="box_item">
				<view class="item_key">身份</view>
				<view class="item_value" v-if="userInfo.identityId == 1">家长</view>
				<view class="item_value" v-if="userInfo.identityId == 2">学生</view>
				<view class="item_value" v-if="userInfo.identityId == 3">教师</view>
			</view>
			<!-- 身份证区域 -->
			<view class="box_item">
				<view class="item_key">身份证</view>
				<view class="item_value">{{ userInfo.idCard ? userInfo.idCard : '暂无' }}</view>
			</view>
			<!-- 性别区域 -->
			<view class="box_item">
				<view class="item_key">性别</view>
				<view class="item_value">{{ userInfo.sexId == 0 ? '女' : '男' }}</view>
			</view>
			<!-- 部门区域 -->
			<view class="box_item">
				<view class="item_key">部门</view>
				<view class="item_value">{{ userInfo.departmentName }}</view>
			</view>
			<!-- 角色区域 -->
			<view class="box_item">
				<view class="item_key">角色</view>
				<view class="item_value">暂无</view>
			</view>
			<!-- 人脸照片区域 -->
			<view class="box_item no_border">
				<view class="item_key">人脸照片</view>
				<view class="item_value" v-if="userInfo.headImage" @click="previewImage(userInfo.headImage)">
					<img class="img" mode="aspectFill" :src="userInfo.headImage" />
				</view>
				<view class="item_value" v-else>暂无</view>
			</view>
		</view>

		<view class="box">
			<!-- 年级区域 -->
			<view class="box_item">
				<view class="item_key">年级</view>
				<view class="item_value">
					{{ userInfo.grade ? userInfo.grade : '暂无' }}
					<!-- <img class="value_img" src="../../static/images/right.png" /> -->
				</view>
			</view>
			<!-- 学院区域 -->
			<view class="box_item">
				<view class="item_key">学院</view>
				<view class="item_value">
					{{ userInfo.college ? userInfo.college : '暂无' }}
					<!-- <img class="value_img" src="../../static/images/right.png" /> -->
				</view>
			</view>
			<!--  班级区域 -->
			<view class="box_item no_border">
				<view class="item_key">班级</view>
				<view class="item_value">
					{{ userInfo.school_class ? userInfo.school_class : '暂无' }}
					<!-- <img class="value_img" src="../../static/images/right.png" /> -->
				</view>
			</view>
		</view>

		<view class="box">
			<!-- 校区区域 -->
			<view class="box_item">
				<view class="item_key">校区</view>
				<view class="item_value">
					{{ userInfo.campus ? userInfo.campus : '暂无' }}
				</view>
			</view>
			<!-- 宿舍号区域 -->
			<view class="box_item">
				<view class="item_key">宿舍号</view>
				<view class="item_value">
					{{ userInfo.dormitoryNumber ? userInfo.dormitoryNumber : '暂无' }}
				</view>
			</view>
			<!--  手机号区域 -->
			<view class="box_item no_border">
				<view class="item_key">手机号</view>
				<view class="item_value">{{ userInfo.phone ? userInfo.phone : '暂无' }}</view>
			</view>
		</view>

		<view class="box">
			<!-- 关联人区域 -->
			<view class="box_item">
				<view class="item_key">关联人</view>
				<view class="item_value">{{ userInfo.affiliateName ? userInfo.affiliateName : '暂无' }}</view>
			</view>
			<!-- 职称区域 -->
			<view class="box_item">
				<view class="item_key">职称</view>
				<view class="item_value">
					{{ userInfo.title ? userInfo.title : '暂无' }}
				</view>
			</view>
			<!--  家庭地址区域 -->
			<view class="box_item">
				<view class="item_key">家庭地址</view>
				<view class="item_value">
					{{ userInfo.address ? userInfo.address : '暂无' }}
				</view>
			</view>
			<!-- 民族区域 -->
			<view class="box_item">
				<view class="item_key">民族</view>
				<view class="item_value">
					{{ userInfo.nation ? userInfo.nation : '暂无' }}
				</view>
			</view>
			<!-- 生源地区域 -->
			<view class="box_item">
				<view class="item_key">生源地</view>
				<view class="item_value">
					{{ userInfo.ofStudent ? userInfo.ofStudent : '暂无' }}
				</view>
			</view>
			<!--  毕业学校区域 -->
			<view class="box_item">
				<view class="item_key">毕业学校</view>
				<view class="item_value">{{ userInfo.graduate ? userInfo.graduate : '暂无' }}</view>
			</view>
			<!--  职务区域 -->
			<view class="box_item no_border">
				<view class="item_key">职务</view>
				<view class="item_value">{{ userInfo.zhiwu ? userInfo.zhiwu : '暂无' }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { previewImage } from '@/utils/previewImage.js'
import { myRequest } from '@/utils/api.js'

// 用户信息
const userInfo = ref({})

onLoad((options) => {
	if (options.id) {
		getUserInfo(options.id)
	} else {
		userInfo.value = uni.getStorageSync('userInfo')
	}
})

const getUserInfo = async (id) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/queryInfoData',
		data: {
			id
		}
	})
	// console.log(res)
	userInfo.value = res.data
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: 10rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	.box {
		margin-top: 20rpx;
		padding: 0 18rpx;
		background-color: #fff;

		.box_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.item_key {
				font-weight: bold;
			}

			.item_value {
				display: flex;
				align-items: center;
				color: #808080;

				.img {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}

				.value_img {
					margin-left: 10rpx;
					width: 31rpx;
					height: 31rpx;
				}
			}
		}

		.no_border {
			border: none;
		}
	}
}
</style>