wanzai_school_app/pages/student/student.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- 学生信息区域 -->
		<view class="identity">学生</view>
		<view class="box">
			<img
				class="box_img"
				mode="aspectFill"
				:src="msg.headImage || '../../static/images/user-photo.png'"
				@click="previewImage(msg.headImage || '../../static/images/user-photo.png')"
			/>
			<view class="box_info">
				<view class="info_name">{{ msg.name }}</view>
				<view class="info_phone">{{ msg.cardNo }}</view>
			</view>
		</view>

		<!-- 家长信息区域 -->
		<view class="identity">家长</view>
		<view class="box mb-50" v-for="item in msg.userParents" :key="item.id">
			<img
				class="box_img"
				mode="aspectFill"
				:src="item.headImage || '../../static/images/user-photo.png'"
				@click="previewImage(item.headImage || '../../static/images/user-photo.png')"
			/>
			<view class="box_info">
				<view class="info_name">
					{{ item.name }}
					<view class="info_type">家长</view>
				</view>
				<view class="info_phone">{{ item.phone }}</view>
			</view>

			<view class="box_btn" @click="callPhone(item.phone)">呼叫</view>
		</view>

		<NoData v-if="!msg.userParents?.length" />
	</view>
</template>

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

onLoad((options) => {
	msg.value = JSON.parse(options.msg)
})

const msg = ref({})

// 点击呼叫按钮回调
const callPhone = (phoneNumber) => {
	uni.makePhoneCall({
		phoneNumber
	})
}
</script>

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

	// 背景图片区域样式
	.img_bg {
		position: absolute;
		top: -70rpx;
		right: 0;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	.identity {
		margin: 20rpx 0 40rpx 0;
		color: #808080;
		font-size: 28rpx;
	}

	.box {
		display: flex;
		margin-bottom: 30rpx;
		height: 120rpx;

		.box_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.box_info {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: 22rpx;

			.info_name {
				display: flex;
				align-items: center;
				font-size: 32rpx;

				.info_type {
					margin-left: 15rpx;
					padding: 0 14rpx;
					height: 37rpx;
					line-height: 37rpx;
					font-size: 20rpx;
					color: #0061ff;
					border: 1rpx solid #0061ff;
					border-radius: 6rpx;
					background-color: #d9e7ff;
				}
			}

			.info_phone {
				color: #808080;
				font-size: 28rpx;
			}
		}

		.box_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			align-self: center;
			margin-left: auto;
			width: 140rpx;
			height: 68rpx;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #0061ff;
		}
	}

	.mb-50 {
		margin-bottom: 50rpx;
	}
}
</style>