zhjwxt/uniapp/pages-student/settings/index.vue

<!--学员端系统设置页面-->
<template>
	<view class="settings_container">
		<!-- 自定义导航栏 -->
		<view class="navbar_section">
			<view class="navbar_content">
				<view class="back_button" @click="goBack">
					<image src="/static/icon-img/back.png" class="back_icon"></image>
				</view>
				<view class="navbar_title">系统设置</view>
				<view class="navbar_placeholder"></view>
			</view>
		</view>

		<!-- 设置选项列表 -->
		<view class="settings_section">
			<view class="setting_item" @click="navigateToProfile">
				<view class="setting_left">
					<view class="setting_icon profile_setting">
						<image src="/static/icon-img/profile.png" class="icon_image"></image>
					</view>
					<view class="setting_text">个人资料</view>
				</view>
				<view class="setting_arrow">
					<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image>
				</view>
			</view>

			<view class="setting_item" @click="navigateToPassword">
				<view class="setting_left">
					<view class="setting_icon password_setting">
						<image src="/static/icon-img/lock.png" class="icon_image"></image>
					</view>
					<view class="setting_text">修改密码</view>
				</view>
				<view class="setting_arrow">
					<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image>
				</view>
			</view>

			<view class="setting_item" @click="navigateToAbout">
				<view class="setting_left">
					<view class="setting_icon about_setting">
						<image src="/static/icon-img/info.png" class="icon_image"></image>
					</view>
					<view class="setting_text">关于我们</view>
				</view>
				<view class="setting_arrow">
					<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image>
				</view>
			</view>

			<view class="setting_item" @click="navigateToPrivacy">
				<view class="setting_left">
					<view class="setting_icon privacy_setting">
						<image src="/static/icon-img/shield.png" class="icon_image"></image>
					</view>
					<view class="setting_text">隐私协议</view>
				</view>
				<view class="setting_arrow">
					<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image>
				</view>
			</view>
		</view>

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

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			navigateToProfile() {
				uni.navigateTo({
					url: '/pages-common/profile/personal_info'
				})
			},
			
			navigateToPassword() {
				uni.navigateTo({
					url: '/pages-student/my/update_pass'
				})
			},
			
			navigateToAbout() {
				uni.navigateTo({
					url: '/pages-student/settings/about'
				})
			},
			
			navigateToPrivacy() {
				uni.navigateTo({
					url: '/pages-common/privacy_agreement'
				})
			},
			
			logout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储
							uni.clearStorageSync()
							
							// 跳转到登录页
							uni.reLaunch({
								url: '/pages-student/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.settings_container {
	background: #f8f9fa;
	min-height: 100vh;
}

// 自定义导航栏
.navbar_section {
	background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%);
	padding: 40rpx 32rpx 32rpx;
	
	// 小程序端适配状态栏
	// #ifdef MP-WEIXIN
	padding-top: 80rpx;
	// #endif
	
	.navbar_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.back_button {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back_icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
		
		.navbar_title {
			color: #fff;
			font-size: 36rpx;
			font-weight: 600;
		}
		
		.navbar_placeholder {
			width: 40rpx;
		}
	}
}

// 设置选项
.settings_section {
	margin: 32rpx 20rpx;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	
	.setting_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1px solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.setting_left {
			display: flex;
			align-items: center;
			gap: 24rpx;
			
			.setting_icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.profile_setting { background: rgba(52, 152, 219, 0.15); }
				&.password_setting { background: rgba(231, 76, 60, 0.15); }
				&.about_setting { background: rgba(155, 89, 182, 0.15); }
				&.privacy_setting { background: rgba(46, 204, 113, 0.15); }
				
				.icon_image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			
			.setting_text {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
		
		.setting_arrow {
			.arrow_icon {
				width: 20rpx;
				height: 20rpx;
				opacity: 0.6;
			}
		}
	}
}

// 退出登录按钮
.logout_section {
	margin: 60rpx 20rpx;
	
	.logout_button {
		width: 100%;
		background: #ff4757;
		color: #fff;
		border: none;
		border-radius: 16rpx;
		padding: 24rpx 0;
		font-size: 28rpx;
		font-weight: 600;
		
		&:active {
			background: #ff3742;
		}
	}
}
</style>