You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
3.4 KiB
187 lines
3.4 KiB
<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人 / 最多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>
|