studyTest/pages/userInfo/userInfo.vue

<template>
	<view class="userinfo-container">
		<view class="top-bar">
			<view class="title">个人信息</view>
		</view>

		<view class="avatar-all">
			<view class="avatar" />
			<view class="name">李慧琳</view>
			<view class="room">706宿舍</view>
		</view>

		<view class="info-list">
			<view class="info-item">
				<view class="info-label">学号</view>
				<view class="info-value">20030229</view>
			</view>

			<view class="info-item">
				<view class="info-label">性别</view>
				<view class="info-value">女</view>
			</view>

			<view class="info-item">
				<view class="info-label">联系电话</view>
				<view class="info-value">159****5202</view>
			</view>

			<view class="info-item">
				<view class="info-label">入住日期</view>
				<view class="info-value">2025-07-06</view>
			</view>

			<view class="info-item">
				<view class="info-label">住宿状态</view>
				<view class="info-value">
					<text class="status-in">在宿</text>
				</view>
			</view>

			<view class="info-item">
				<view class="info-label">宿舍地址</view>
				<view class="info-value">706</view>
			</view>

			<view class="info-item">
				<view class="info-label">宿舍人数</view>
				<view class="info-value">5人&nbsp;/&nbsp;最多12人</view>
			</view>
		</view>
	
	<button class="logout-btn" @click="handleLogout">
		<text>退出登录</text>
	</button>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'

	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.removeStorageSync('isLogin')
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
			}
		})
	}

	onShow(() => {
		const isLogin = uni.getStorageSync('isLogin')
		console.log(isLogin)
		if (!isLogin) {
			uni.redirectTo({
				url: '/pages/login/login'
			})
		}
	})
</script>

<style scoped>
	.userinfo-container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.top-bar {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.title {
		width: 100vw;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}

	.avatar-all {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #e6f7ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}


	.name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
	}

	.room {
		font-size: 28rpx;
		color: #666;
		background-color: #f0f9ff;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
	}

	.info-list {
		background-color: #fff;
		padding: 0 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
	}

	.info-label {
		font-size: 30rpx;
		color: #666;
	}

	.info-value {
		flex: 1;
		font-size: 30rpx;
		text-align: right;
	}

	.status-in {
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		background-color: #e6fffb;
		color: #00b42a;
	}

	.logout-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40vw;
		height: 4vh;
		background-color: #36bffa;
		color: #fff;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin-top:5vh;
	}
</style>