xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/mine.vue

<template>
	<view class="matchmaker-mine">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack"></view>
			<text class="header-title">我的</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 个人信息卡片 -->
			<view class="profile-card">
				<view class="profile-header">
					<view class="profile-avatar"></view>
					<view class="profile-info">
						<text class="profile-name">高红娘</text>
						<view class="profile-badge">兼职红娘</view>
						<text class="profile-rating">红娘评分 5.0分</text>
					</view>
				</view>

				<!-- 等级和积分 -->
				<view class="level-points">
					<view class="level-info">
						<view class="level-icon"></view>
						<text class="level-name">青铜</text>
					</view>
					<text class="points-value">23</text>
					<text class="points-label">积分</text>
				</view>

				<!-- 等级进度 -->
				<view class="level-progress">
					<text class="progress-label">距离下一等级</text>
					<view class="progress-bar">
						<view class="progress-fill" style="width: 23%;"></view>
					</view>
					<view class="progress-values">
						<text class="current-value">当前23</text>
						<text class="target-value">目标100</text>
					</view>
					<view class="upgrade-tip">再获得77积分即可晋升白银等级</view>
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="function-grid">
				<view class="function-item" @click="handleSignIn">
					<view class="function-icon calendar">22</view>
					<text class="function-text">签到</text>
				</view>
				<view class="function-item" @click="handleMyResources">
					<view class="function-icon resources"></view>
					<text class="function-text">我的资源</text>
				</view>
				<view class="function-item" @click="handleActivityCenter">
					<view class="function-icon heart-book"></view>
					<text class="function-text">活动中心</text>
				</view>
				<view class="function-item" @click="handlePointsMall">
					<view class="function-icon money"></view>
					<text class="function-text">积分商城</text>
				</view>
			</view>

			<!-- 设置选项 -->
			<view class="settings-section">
				<view class="settings-item" @click="handleEditProfile">
					<view class="settings-icon user"></view>
					<text class="settings-text">编辑资料</text>
					<view class="arrow-right"></view>
				</view>

				<view class="settings-item" @click="handleAccountSettings">
					<view class="settings-icon gear"></view>
					<text class="settings-text">账户设置</text>
					<view class="arrow-right"></view>
				</view>

				<view class="settings-item" @click="handleLogout">
					<view class="settings-icon logout"></view>
					<text class="settings-text">退出登录</text>
					<view class="arrow-right"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tabbar-item" @click="navigateToWorkbench">
				<view class="tabbar-icon home"></view>
				<text class="tabbar-text">工作台</text>
			</view>
			<view class="tabbar-item" @click="navigateToMyResources">
				<view class="tabbar-icon resources"></view>
				<text class="tabbar-text">我的资源</text>
			</view>
			<view class="tabbar-item" @click="navigateToRanking">
				<view class="tabbar-icon trophy"></view>
				<text class="tabbar-text">排行榜</text>
			</view>
			<view class="tabbar-item" @click="navigateToMessage">
				<view class="tabbar-icon message">
					<view class="badge">3</view>
				</view>
				<text class="tabbar-text">消息</text>
			</view>
			<view class="tabbar-item active" @click="navigateToMine">
				<view class="tabbar-icon mine"></view>
				<text class="tabbar-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profile: {
					name: '高红娘',
					badge: '兼职红娘',
					rating: 5.0,
					level: '青铜',
					points: 23,
					targetPoints: 100
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 签到
			handleSignIn() {
				console.log('签到')
				uni.showToast({
					title: '签到成功',
					icon: 'success'
				})
			},
			// 我的资源
			handleMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 活动中心
			handleActivityCenter() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},
			// 积分商城
			handlePointsMall() {
				console.log('积分商城')
				uni.showToast({
					title: '积分商城开发中',
					icon: 'none'
				})
			},
			// 编辑资料
			handleEditProfile() {
				console.log('编辑资料')
				uni.showToast({
					title: '编辑资料开发中',
					icon: 'none'
				})
			},
			// 账户设置
			handleAccountSettings() {
				console.log('账户设置')
				uni.showToast({
					title: '账户设置开发中',
					icon: 'none'
				})
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							// 跳转到登录页
							uni.navigateTo({
								url: '/pages/page3/page3'
							})
						}
					}
				})
			},
			// 导航到工作台
			navigateToWorkbench() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/index'
				})
			},
			// 导航到我的资源
			navigateToMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 导航到排行榜
			navigateToRanking() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/ranking'
				})
			},
			// 导航到消息
			navigateToMessage() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/message'
				})
			},
			// 导航到我的
			navigateToMine() {
				// 已在我的页面，无需跳转
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matchmaker-mine {
		min-height: 100vh;
		background: #FFF9F9;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		padding-top: calc(25rpx + env(safe-area-inset-top));
		background: #FFF9F9;
		border-bottom: 1rpx solid #F0F0F0;

		.back-btn {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(240, 240, 240, 0.5);
			border-radius: 50%;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
			background-size: 40rpx 40rpx;
			background-repeat: no-repeat;
			background-position: center;
		}

		.header-title {
			font-size: 38rpx;
			font-weight: bold;
			color: #333;
		}

		.placeholder {
			width: 70rpx;
		}
	}

	.content {
		flex: 1;
		padding: 20rpx 20rpx 120rpx;
	}

	/* 个人信息卡片 */
	.profile-card {
		background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
		border-radius: 25rpx;
		padding: 35rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
	}

	.profile-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.profile-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.5);
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E91E63"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			background-size: 80rpx 80rpx;
			background-repeat: no-repeat;
			background-position: center;
			margin-right: 25rpx;
		}

		.profile-info {
			flex: 1;

			.profile-name {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.profile-badge {
				display: inline-block;
				background: #FFD700;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				padding: 6rpx 16rpx;
				border-radius: 15rpx;
				margin-bottom: 10rpx;
			}

			.profile-rating {
				display: block;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 等级和积分 */
	.level-points {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.level-info {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.level-icon {
				width: 44rpx;
				height: 44rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			.level-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF9800;
			}
		}

		.points-value {
			font-size: 48rpx;
			font-weight: bold;
			color: #E91E63;
		}

		.points-label {
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 等级进度 */
	.level-progress {
		.progress-label {
			display: block;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 15rpx;
		}

		.progress-bar {
			width: 100%;
			height: 12rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 6rpx;
			margin-bottom: 10rpx;

			.progress-fill {
				height: 100%;
				background: #FFB74D;
				border-radius: 6rpx;
			}
		}

		.progress-values {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.current-value,
			.target-value {
				font-size: 24rpx;
				color: #666;
			}
		}

		.upgrade-tip {
			display: block;
			background: rgba(255, 255, 255, 0.3);
			color: #E91E63;
			font-size: 26rpx;
			font-weight: bold;
			padding: 15rpx;
			border-radius: 15rpx;
			text-align: center;
		}
	}

	/* 功能菜单 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 30rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15rpx;

			.function-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				background-size: 50rpx 50rpx;
				background-repeat: no-repeat;
				background-position: center;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.function-icon.calendar {
				background: linear-gradient(135deg, #6BC5F8 0%, #87CEEB 100%);
			}

			.function-icon.resources {
				background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
			}

			.function-icon.heart-book {
				background: linear-gradient(135deg, #FF6B9D 0%, #FF8EAB 100%);
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
			}

			.function-icon.money {
				background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
			}

			.function-text {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	/* 设置选项 */
	.settings-section {
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx;
			margin-bottom: 10rpx;
			background: #FFFFFF;
			border-radius: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.settings-icon {
				width: 44rpx;
				height: 44rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				margin-right: 20rpx;
			}

			.settings-icon.user {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			}

			.settings-icon.gear {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
			}

			.settings-icon.logout {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>');
			}

			.settings-text {
				flex: 1;
				font-size: 30rpx;
				color: #333;
			}

			.arrow-right {
				width: 24rpx;
				height: 24rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}
		}
	}
	
	/* 底部导航 */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);

		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			padding: 10rpx 0;

			.tabbar-icon {
				width: 44rpx;
				height: 44rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				position: relative;

				.badge {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					background: #FF4444;
					color: #FFFFFF;
					font-size: 20rpx;
					font-weight: bold;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
				}
			}

			.tabbar-text {
				font-size: 20rpx;
				color: #999;
			}

			&.active {
				.tabbar-text {
					color: #9C27B0;
					font-weight: bold;
				}
			}

			&.home .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
			}

			&.active.home .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
			}

			&.resources .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
			}

			&.active.resources .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
			}

			&.trophy .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></svg>');
			}

			&.active.trophy .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></svg>');
			}

			&.message .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
			}

			&.active.message .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
			}

			&.mine .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			}
		}
	}
</style>