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

<template>
	<view class="matchmaker-workbench">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="header-title">红娘工作台</text>
			<view class="header-right">
				<view class="search-icon" @click="handleSearch"></view>
				<!-- 退出红娘工作台按钮 -->
				<view class="exit-workbench-btn" @click="openExitPopup">
					<view class="arrow-container">
						<view class="arrow arrow-top"></view>
						<view class="arrow arrow-bottom"></view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 欢迎卡片 -->
			<view class="welcome-card">
				<view class="welcome-text">
					<text class="welcome-title">欢迎回来</text>
					<text class="heart-icon">❤️</text>
					<text class="matchmaker-name">高红娘</text>
				</view>
				<view class="avatar"></view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-cards">
				<view class="stats-card success">
					<text class="stats-number">520</text>
					<text class="stats-label">成功撮合</text>
					<text class="stats-subtitle">匹配数</text>
				</view>
				<view class="stats-card points">
					<text class="stats-number">23</text>
					<text class="stats-label">积分可兑礼</text>
					<text class="stats-subtitle">我的积分</text>
					<text class="stats-extra">可兑换</text>
				</view>
			</view>

			<!-- 公告卡片 -->
			<view class="announcement-card" @click="handleAnnouncement">
				<text class="announcement-tag">公告</text>
				<text class="announcement-content">恭喜高红娘成功助力丁先生和贾女士牵手成功！</text>
				<view class="arrow-right"></view>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-grid">
				<view class="menu-item" @click="navigateToMyResources">
					<view class="menu-icon resources"></view>
					<text class="menu-text">我的资源</text>
				</view>
				<view class="menu-item" @click="navigateToQualityResources">
					<view class="menu-icon quality"></view>
					<text class="menu-text">优质资源</text>
				</view>
				<view class="menu-item" @click="navigateToCourses">
					<view class="menu-icon courses"></view>
					<text class="menu-text">课程培训</text>
				</view>
				<view class="menu-item" @click="navigateToPointsMall">
					<view class="menu-icon mall"></view>
					<text class="menu-text">积分商城</text>
				</view>
				<view class="menu-item" @click="navigateToActivityCenter">
					<view class="menu-icon activity"></view>
					<text class="menu-text">活动中心</text>
				</view>
			</view>

			<!-- 本周最佳红娘 -->
			<view class="best-matchmaker-section">
				<view class="section-header">
					<text class="section-title">
						<text class="crown-icon">👑</text>
						本周最佳红娘
					</text>
					<text class="section-more" @click="navigateToRanking">排行榜 ></text>
				</view>
				<view class="best-matchmaker-list">
					<view class="best-matchmaker-item" v-for="(item, index) in bestMatchmakers" :key="index">
						<text class="rank-number">{{ item.rank }}</text>
						<view class="avatar-small"></view>
						<view class="matchmaker-info">
							<text class="matchmaker-name-small">{{ item.name }}</text>
							<text class="success-count">成功人数: {{ item.successCount }}</text>
						</view>
						<view class="likes-info">
							<text class="heart-small">❤️</text>
							<text class="like-count">{{ item.likes }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tabbar-item active" @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" @click="navigateToMine">
				<view class="tabbar-icon mine"></view>
				<text class="tabbar-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	
export default {
		data() {
			return {
				bestMatchmakers: [
					{ rank: 1, name: '小超超', successCount: 12, likes: 28 },
					{ rank: 2, name: '小颖颖', successCount: 11, likes: 25 },
					{ rank: 3, name: '小魏魏', successCount: 10, likes: 22 }
				]
			}
		},
		onLoad() {
			// 加载工作台数据
			this.loadWorkbenchData()
		},
		methods: {
			// 加载工作台数据
			async loadWorkbenchData() {
				try {
					const res = await api.matchmaker.getWorkbenchData()
					// 处理返回数据
				} catch (e) {
					console.error('加载工作台数据失败:', e)
				}
			},
			// 搜索
			handleSearch() {
				// 实现搜索功能
			},
			// 设置
			handleSettings() {
				// 实现设置功能
			},
			// 公告点击
			handleAnnouncement() {
				// 跳转到公告详情
			},
			// 导航到我的资源
			navigateToMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 导航到优质资源
			navigateToQualityResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/quality-resources'
				})
			},
			// 导航到课程培训
			navigateToCourses() {
				uni.navigateTo({
					url: '/pages/courses/list'
				})
			},
			// 导航到积分商城
			navigateToPointsMall() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/points-mall'
				})
			},
			// 导航到活动中心
			navigateToActivityCenter() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},
			// 导航到排行榜
			navigateToRanking() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/ranking'
				})
			},
			// 导航到工作台
			navigateToWorkbench() {
				// 已在工作台，无需跳转
			},
			// 导航到消息
			navigateToMessage() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/message'
				})
			},
			// 导航到我的
			navigateToMine() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/mine'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matchmaker-workbench {
		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;

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

		.header-right {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.search-icon,
			.settings-icon {
				width: 44rpx;
				height: 44rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			.search-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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
			}

			.settings-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="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>');
			}
		}
	}

	.content {
		flex: 1;
		padding-bottom: 120rpx;
	}

	/* 欢迎卡片 */
	.welcome-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
		border-radius: 20rpx;
		margin: 20rpx;

		.welcome-text {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.welcome-title {
				font-size: 32rpx;
				color: #333;
			}

			.heart-icon {
				font-size: 28rpx;
			}

			.matchmaker-name {
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
		}
	}

	/* 统计卡片 */
	.stats-cards {
		display: flex;
		gap: 20rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.stats-card {
			flex: 1;
			padding: 25rpx;
			border-radius: 15rpx;
			background: #FFFFFF;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.stats-number {
				display: block;
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.stats-label {
				display: block;
				font-size: 28rpx;
				margin-bottom: 8rpx;
			}

			.stats-subtitle {
				display: block;
				font-size: 24rpx;
				color: #999;
			}

			.stats-extra {
			display: block;
			font-size: 22rpx;
			color: #999;
			margin-top: 8rpx;
			}

			&.success {
				.stats-number {
					color: #FF6B8A;
				}
				.stats-label {
					color: #333;
				}
			}

			&.points {
				.stats-number {
					color: #9C27B0;
				}
				.stats-label {
					color: #333;
				}
			}
		}
	}

	/* 公告卡片 */
	.announcement-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx;
		background: #FFF3E0;
		border-radius: 15rpx;
		margin: 0 20rpx 20rpx;
		position: relative;

		.announcement-tag {
			display: inline-block;
			background: #FF9800;
			color: #FFFFFF;
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 12rpx;
			margin-right: 15rpx;
			font-weight: bold;
		}

		.announcement-content {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			line-height: 1.4;
		}

		.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;
			margin-left: 15rpx;
		}
	}

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

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12rpx;

			.menu-icon {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-size: 40rpx 40rpx;
				background-repeat: no-repeat;
				background-position: center;
			}

			.menu-text {
				font-size: 24rpx;
				color: #333;
			}

			&.resources .menu-icon {
				background-color: #E8F5E8;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><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>');
			}

			&.quality .menu-icon {
				background-color: #FFF3E0;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><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>');
			}

			&.courses .menu-icon {
				background-color: #E3F2FD;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm3-4H7v-2h11v2zm0-4H7V7h11v2z"/></svg>');
			}

			&.mall .menu-icon {
				background-color: #F3E5F5;
				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="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
			}

			&.activity .menu-icon {
				background-color: #FFEBEE;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
			}
		}
	}

	/* 本周最佳红娘 */
	.best-matchmaker-section {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		margin: 0 20rpx 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.section-title {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;

				.crown-icon {
					font-size: 32rpx;
					margin-right: 10rpx;
				}
			}

			.section-more {
				font-size: 24rpx;
				color: #9C27B0;
			}
		}

		.best-matchmaker-list {
			.display: flex;
			flex-direction: column;
			gap: 20rpx;

			.best-matchmaker-item {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.rank-number {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFF;
					border-radius: 50%;
					background: #FFD700;
				}

				.avatar-small {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #F0F0F0;
				}

				.matchmaker-info {
					flex: 1;

					.matchmaker-name-small {
						display: block;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 4rpx;
					}

					.success-count {
						display: block;
						font-size: 22rpx;
						color: #999;
					}
				}

				.likes-info {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.heart-small {
						font-size: 24rpx;
					}

					.like-count {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}

	/* 底部导航 */
	.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="%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="%23999"><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>');
			}

			&.active.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>