yifengyide-h5/pages/index/user.vue

<template>
	<view>
		<!-- 个人中心内容 -->
		<view class="content" v-if="currentTab === 'my'">
			<view class="user-info">
				<image class="avatar" src="/static/default-avatar.png"></image>
				<view class="user-name">{{ userInfo.user.nickname }}</view>
			</view>

			<view class="menu-list">
				<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
					<view class="menu-icon">
						<uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
					</view>
					<view class="menu-title">{{ item.title }}</view>
					<view class="menu-arrow">
						<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>

			<view class="logout-btn" @click="handleLogout">
				退出登录
			</view>
		</view>
		<!-- 添加底部TabBar -->
		<view class="custom-tabbar">
			<view class="tabbar-item" :class="{ active: currentTab === 'complaint' }" @click="switchTab('/pages/index/complaint')">
				<view class="tabbar-icon">
					<uni-icons type="chatboxes" size="24"
						:color="currentTab === 'complaint' ? '#4d5eff' : '#999'"></uni-icons>
				</view>
				<view class="tabbar-text" :style="{ color: currentTab === 'complaint' ? '#4d5eff' : '#999' }">投诉建议
				</view>
			</view>
			<view class="tabbar-item" :class="{ active: currentTab === 'my' }">
				<view class="tabbar-icon">
					<uni-icons type="person" size="24" :color="currentTab === 'my' ? '#4d5eff' : '#999'"></uni-icons>
				</view>
				<view class="tabbar-text" :style="{ color: currentTab === 'my' ? '#4d5eff' : '#999' }">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			currentTab: 'my',
			menuList: [
				{ title: '我的投诉', icon: 'chatbubble-filled', path: '/pages/index/list' },
				{ title: '消息通知', icon: 'notification-filled', path: '/pages/user/notifications' },
			]
		}
	},
	onLoad() {
		// 获取用户信息
		const userInfo = uni.getStorageSync('userInfo');
		console.log(1);

		if (userInfo) {
			this.userInfo = userInfo;
		} else {
			uni.navigateTo({
				url: "/pages/index/index"
			})
		}
	},
	methods: {
		switchTab(tab) {
			uni.redirectTo({
				url:tab
			})
		},
		handleMenuClick(item) {
			// 跳转到对应页面
			uni.navigateTo({
				url: item.path
			});
		},
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录信息
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');

						// 跳转到登录页
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				}
			});
		}
	}
}
</script>

<style scoped>
/* 内容区样式 */
.content {
	padding: 30rpx;
	padding-bottom: 120rpx;
	/* 为底部TabBar预留空间 */
}

/* 用户信息样式 */
.user-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 75rpx;
	margin-bottom: 20rpx;
}

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

/* 菜单列表样式 */
.menu-list {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

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

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	margin-right: 20rpx;
}

.menu-title {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

/* 退出登录按钮 */
.logout-btn {
	background-color: #fff;
	color: #ff4d4f;
	text-align: center;
	padding: 30rpx 0;
	border-radius: 12rpx;
	font-size: 32rpx;
}

/* 占位符 */
.placeholder {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
}

/* 添加TabBar样式 */
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ffffff;
	display: flex;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 999;
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10rpx 0;
}

.tabbar-icon {
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tabbar-text {
	font-size: 24rpx;
	margin-top: 6rpx;
}

.tabbar-item.active .tabbar-text {
	color: #4d5eff;
}

/* 为底部TabBar预留空间 */
.btn_bottom {
	margin-bottom: 120rpx;
}
</style>