wanzai_school_app/pages/myCenter/myCenter.vue

<template>
	<view class="container">
		<!-- 顶部个人信息区域 -->
		<view class="header">
			<img class="header_img" src="../../static/images/center-bg.png" />
			<!-- 头像区域 -->
			<img
				mode="aspectFill"
				class="user_photo"
				:src="userInfo.headImage || '../../static/images/header.png'"
				@click="previewImage(userInfo.headImage || '../../static/images/header.png')"
			/>
			<!-- 姓名区域 -->
			<view class="user_name">{{ userInfo.name }}</view>
			<!-- 班级区域 -->
			<view class="user_grade">{{ userInfo.departmentName }}</view>
			<!-- 切换身份按钮区域 -->
			<view v-if="showChange" class="user_change" @click="handleChange">
				<img class="img" src="@/static/images/2.png" />
				切换身份
			</view>
		</view>

		<!-- 列表区域 -->
		<view class="body">
			<!-- 每一个盒子区域 -->
			<view class="body_box" v-for="item in list" :key="item.id" @click="goPage(item.page)">
				<img class="box_img" :src="item.url" />
				<text class="box_title">{{ item.title }}</text>
				<img class="box_icon" src="../../static/images/right.png" />
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout" @click="handleLogout">退出登录</view>
	</view>
</template>

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

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

// 是否展示切换身份按钮
const showChange = ref(false)

onLoad(() => {
	userInfo.value = uni.getStorageSync('userInfo')
	let length = uni.getStorageSync('allData').user.length
	if (length > 1) {
		showChange.value = true
	}
})

// 列表信息
const list = ref([
	{
		id: 1,
		title: '我的信息',
		url: '../../static/images/message.png',
		page: '/pages/myMsg/myMsg'
	},
	{
		id: 2,
		title: '消息提醒',
		url: '../../static/images/warn.png',
		page: '/pages/msgWarn/msgWarn'
	}
])

// 跳转页面函数
const goPage = (url) => {
	uni.navigateTo({
		url
	})
}

// 切换身份按钮回调
const handleChange = () => {
	let info = encodeURIComponent(JSON.stringify(uni.getStorageSync('allData')))
	// console.log(info)
	uni.navigateTo({
		url: `/pages/switch/switch?info=${info}`
	})
}

// 退出登录按钮回调
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/main/main'
				})
			} else if (res.cancel) {
			}
		}
	})
}
</script>

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

	// 顶部个人信息区域样式
	.header {
		position: relative;
		width: 710rpx;
		height: 260rpx;
		text-align: end;

		.header_img {
			margin-top: -24rpx;
			margin-right: -45rpx;
			width: 589rpx;
			height: 320rpx;
		}

		.user_photo {
			position: absolute;
			top: 80rpx;
			left: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.user_name {
			position: absolute;
			top: 90rpx;
			left: 167rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.user_grade {
			position: absolute;
			top: 160rpx;
			left: 167rpx;
			font-size: 24rpx;
			color: #666666;
		}

		.user_change {
			position: absolute;
			right: -20rpx;
			top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 171rpx;
			height: 67rpx;
			font-size: 24rpx;
			border-radius: 173rpx 0 0 173rpx;
			background-color: rgba(0, 97, 255, 0.05);

			.img {
				margin-right: 10rpx;
				width: 29rpx;
				height: 29rpx;
			}
		}
	}

	// 列表区域样式
	.body {
		z-index: 1;
		position: relative;
		padding: 0 30rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.body_box {
			display: flex;
			align-items: center;
			height: 110rpx;

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

			.box_title {
				flex: 1;
				margin-left: 18rpx;
				font-size: 32rpx;
			}

			.box_icon {
				width: 31rpx;
				height: 31rpx;
			}
		}
	}

	.logout {
		position: absolute;
		bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 710rpx;
		height: 100rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}
}
</style>