account/resources/mobile/pages/ucenter/profile/index.vue

<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="个人设置"
		:show-back="true"
		:show-tab-bar="false"
	>
		<view class="profile-container">
			<!-- 设置选项 -->
			<view class="settings-section">
				<view class="section-title">账户设置</view>
				<view class="settings-list">
					<view class="setting-item" @tap="navigateToEdit">
						<view class="setting-left">
							<view class="setting-icon">
								<uni-icons type="person" size="20" color="#667eea"></uni-icons>
							</view>
							<view class="setting-content">
								<text class="setting-title">个人资料</text>
								<text class="setting-desc">修改头像、昵称、邮箱</text>
							</view>
						</view>
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>

					<view class="setting-item" @tap="navigateToPassword">
						<view class="setting-left">
							<view class="setting-icon">
								<uni-icons type="locked" size="20" color="#667eea"></uni-icons>
							</view>
							<view class="setting-content">
								<text class="setting-title">修改密码</text>
								<text class="setting-desc">定期更换密码保护账户安全</text>
							</view>
						</view>
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 安全提示 -->
			<view class="security-tips">
				<view class="tip-header">
					<uni-icons type="info-filled" size="18" color="#ffa500"></uni-icons>
					<text class="tip-title">安全提示</text>
				</view>
				<view class="tip-content">
					<text class="tip-text">1. 请勿将密码告知他人</text>
					<text class="tip-text">2. 定期修改密码以确保账户安全</text>
					<text class="tip-text">3. 如遇异常请及时联系客服</text>
				</view>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {}
		}
	},

	onLoad() {
		this.loadUserInfo()
	},

	methods: {
		// 加载用户信息
		loadUserInfo() {
			// 从本地存储获取用户信息
			this.userInfo = this.$store.state.user.userInfo || {}
		},

		// 跳转到编辑资料页面
		navigateToEdit() {
			uni.navigateTo({
				url: '/pages/ucenter/profile/edit'
			})
		},

		// 跳转到修改密码页面
		navigateToPassword() {
			uni.navigateTo({
				url: '/pages/ucenter/profile/password'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 40rpx;
}

.user-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	padding: 40rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
	animation: fadeInDown 0.6s ease-out;

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10rpx);

		.avatar-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			object-fit: cover;
		}
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;

		.user-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 12rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.user-nickname {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.85);
			font-weight: 500;
		}
	}
}

.settings-section {
	margin: 20rpx 30rpx;
	animation: fadeInUp 0.6s ease-out 0.1s both;

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	.settings-list {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.setting-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			transition: all 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: #f8f8f8;
			}

			.setting-left {
				display: flex;
				align-items: center;
				flex: 1;

				.setting-icon {
					width: 64rpx;
					height: 64rpx;
					background: rgba(102, 126, 234, 0.1);
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
				}

				.setting-content {
					display: flex;
					flex-direction: column;

					.setting-title {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 6rpx;
					}

					.setting-desc {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
}

.security-tips {
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	animation: fadeInUp 0.6s ease-out 0.2s both;

	.tip-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.tip-title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-left: 10rpx;
		}
	}

	.tip-content {
		display: flex;
		flex-direction: column;

		.tip-text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.8;
			margin-bottom: 8rpx;
			padding-left: 8rpx;
		}
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>