onlinenew_h5/pages/myMsg/myMsg.vue

<template>
	<view class="container">
		<!-- 图片区域 -->
		<image v-if="info.picture" class="image" :src="info.picture" mode="aspectFill" @click="handleImg(info.picture)"></image>
		<image v-else class="image" src="/static/7.png" mode="aspectFill" @click="handleImg('/static/7.png')"></image>

		<!-- 基本信息区域 -->
		<view class="basic">
			<view class="basic_title">
				<uni-icons type="staff" size="30" color="#000000"></uni-icons>
				<view class="text">基本信息</view>
			</view>
			<view class="basic_box">录取号：{{ info.admissNum }}</view>
			<view class="basic_box">姓名：{{ info.name }}</view>
			<view class="basic_box">身份证号：{{ info.cardId }}</view>
			<view class="basic_box">出生年月：{{ info.birthday }}</view>
			<view class="basic_box">性别：{{ info.sex }}</view>
			<view class="basic_box">院系：{{ info.college }}</view>
			<view class="basic_box">专业：{{ info.major }}</view>
			<view class="basic_box">班级：{{ info.classstr }}</view>
			<view class="basic_box">考生号：{{ info.examNum }}</view>
			<view class="basic_box">毕业中学：{{ info.graduationSchool }}</view>
			<view class="basic_box">政治面貌：{{ info.politicalStatu }}</view>
			<view class="basic_box">学制：{{ info.eduSystem }}</view>
			<view class="basic_box">批次：{{ info.batchValue }}</view>
			<view class="basic_box">民族：{{ info.nationality }}</view>
		</view>

		<!-- 填报明细区域 -->
		<view class="fill">
			<view class="fill_title">
				<uni-icons type="bars" size="25" color="#000000"></uni-icons>
				<view class="text">填报明细</view>
			</view>

			<view class="fill_box">手机号码：{{ info.phone }}</view>
			<view class="fill_box">籍贯：{{ info.oprovince + info.ocity + info.odistrict }}</view>
			<view class="fill_box">家庭住址：{{ info.province + info.city + info.district + info.address }}</view>
			<view class="fill_box">邮编：{{ info.zipCode }}</view>
			<view class="fill_box">按时报到：{{ info.registerOntime == 0 ? '否' : '是' }}</view>
			<view class="fill_box">交通方式：{{ info.trafficMethod }}</view>
			<view class="fill_box">到站地点：{{ info.arrive }}</view>
			<view class="fill_box">到站日期：{{ info.arrvieDate }}</view>
			<view class="fill_box">到站时间：{{ info.arriveTime }}</view>
		</view>

		<!-- 家庭成员区域 -->
		<view class="family">
			<view class="family_top">
				<uni-icons type="staff" size="30"></uni-icons>
				<view class="top_title">家庭成员</view>
			</view>

			<view class="family_table" v-if="info.fvs.length">
				<view class="table_box top">
					<view class="title">称谓</view>
					<view class="name">姓名</view>
					<view class="work">工作单位</view>
					<view class="phone">联系方式</view>
				</view>

				<view class="table_box" v-for="(item, index) in info.fvs" :key="index">
					<view class="title">{{ item.familyShip }}</view>
					<view class="name">{{ item.name }}</view>
					<view class="work">{{ item.workUnit }}</view>
					<view class="phone">{{ item.phone }}</view>
				</view>
			</view>
		</view>

		<!-- 陪同成员区域 -->
		<view class="family" v-if="info.avs.length">
			<view class="family_top">
				<uni-icons type="staff-filled" size="30"></uni-icons>
				<view class="top_title">陪同人员信息</view>
			</view>

			<view class="family_table">
				<view class="table_box top">
					<view class="title">序号</view>
					<view class="name">姓名</view>
					<view class="phone">联系电话</view>
				</view>

				<view class="table_box" v-for="(item, index) in info.avs" :key="index">
					<view class="title">{{ index + 1 }}</view>
					<view class="name">{{ item.name }}</view>
					<view class="phone">{{ item.phone }}</view>
				</view>
			</view>
		</view>

		<!-- 修改按钮 -->
		<view class="btn" @click="handleEdit">修改</view>
		<view class="btn" @click="handlePay">去缴费</view>
		<view class="btn margin" @click="logout">退出登录</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

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

onLoad(() => {
	info.value = uni.getStorageSync('studentInfo')
	// console.log(info.value)
})

// 修改按钮回调
const handleEdit = () => {
	uni.showModal({
		title: '提示',
		content: '确定修改吗？',
		success: (res) => {
			if (res.confirm) {
				uni.setStorageSync('editType', 1)
				uni.reLaunch({
					url: '/pages/family/family'
				})
			}
		}
	})
}

// 去缴费按钮回调
const handlePay = () => {
	uni.showModal({
		title: '提示',
		content: '确定去缴费吗？',
		success: (res) => {
			if (res.confirm) {
				window.location.href = `https://pay.ncjti.edu.cn`
			}
		}
	})
}

// 退出登录回调
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '确定退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				let urlstr = uni.getStorageSync('urlstr')
				uni.clearStorageSync()
				window.location.href = `https://chtech.ncjti.edu.cn/welcome/welcomeH5/#/?urlstr=${urlstr}`
			}
		}
	})
}

// 点击图片回调
const handleImg = (url) => {
	uni.previewImage({
		urls: [url]
	})
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;

	.image {
		width: 186rpx;
		height: 213rpx;
		border-radius: 8rpx;
	}

	.basic {
		margin-top: 20rpx;
		width: 100%;
		font-size: 28rpx;

		.basic_title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 30rpx;
			font-weight: bold;

			.text {
				margin-left: 15rpx;
			}
		}

		.basic_box {
			margin-bottom: 15rpx;
		}
	}

	.fill {
		margin-top: 20rpx;
		width: 100%;

		.fill_title {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 30rpx;
			font-weight: bold;

			.text {
				margin-left: 15rpx;
			}
		}

		.fill_box {
			margin-bottom: 15rpx;
		}
	}

	.family {
		margin-bottom: 15rpx;
		width: 100%;
		background-color: #fff;

		.family_top {
			display: flex;
			align-items: center;
			height: 90rpx;

			.top_title {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.family_table {
			font-size: 24rpx;

			.table_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70rpx;
				border-bottom: 2rpx solid #e6e6e6;

				.title {
					width: 140rpx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.name {
					width: 140rpx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.work {
					width: 200rpx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.phone {
					width: 200rpx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.top {
				background-color: #f0f3f7;
			}
		}
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #0061ff;
	}

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