xiangqinxiangmu/LiangZhiYUMao/pages/today-recommend/index.vue

<template>
	<view class="today-recommend-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">💕 今日推荐</view>
			<view class="navbar-right"></view>
		</view>

		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 推荐用户卡片 -->
			<view class="recommend-list">
				<view class="recommend-card" v-for="(user, index) in recommendUsers" :key="index">
					<view class="card-header">
						<image class="user-avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="user-basic-info">
							<view class="user-name-row">
								<text class="user-name">{{ user.nickname }}</text>
								<view class="vip-badge" v-if="user.isVip">VIP</view>
							</view>
							<view class="user-details">
								<text class="user-detail">{{ user.age }}岁</text>
								<text class="user-detail">{{ user.height }}cm</text>
								<text class="user-detail">{{ user.location }}</text>
							</view>
						</view>
						<view class="online-status" :class="{ online: user.isOnline }">
							<text class="status-dot"></text>
							<text class="status-text">{{ user.isOnline ? '在线' : '离线' }}</text>
						</view>
					</view>

					<view class="card-content">
						<view class="user-info-grid">
							<view class="info-item">
								<text class="info-label">职业</text>
								<text class="info-value">{{ user.job }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">学历</text>
								<text class="info-value">{{ user.education }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">星座</text>
								<text class="info-value">{{ user.constellation }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">月收入</text>
								<text class="info-value">{{ user.salary }}</text>
							</view>
						</view>

						<view class="user-tags">
							<text class="tag" v-for="(tag, tagIndex) in user.hobbies" :key="tagIndex">{{ tag }}</text>
						</view>

						<view class="personal-intro" v-if="user.introduction">
							<text class="intro-label">个人简介：</text>
							<text class="intro-text">{{ user.introduction }}</text>
						</view>
					</view>

					<view class="card-actions">
						<view class="action-btn pass-btn" @click="handlePass(user, index)">
							<text class="action-icon">👎</text>
							<text class="action-text">不感兴趣</text>
						</view>
						<view class="action-btn like-btn" @click="handleLike(user, index)">
							<text class="action-icon">❤️</text>
							<text class="action-text">喜欢</text>
						</view>
						<view class="action-btn chat-btn" @click="handleChat(user)">
							<text class="action-icon">💬</text>
							<text class="action-text">打招呼</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 暂无推荐 -->
			<view class="no-recommend" v-if="recommendUsers.length === 0">
				<text class="no-recommend-icon">💭</text>
				<text class="no-recommend-title">今日暂无新推荐</text>
				<text class="no-recommend-tip">明天再来看看吧~</text>
				<view class="complete-profile-btn" @click="goToProfile">
					<text class="btn-text">完善资料获得更多推荐</text>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import userAuth from '@/utils/userAuth.js'

	export default {
		data() {
			return {
				currentUserId: null,
				
				// 推荐用户数据
				recommendUsers: [
					{
						id: 2,
						nickname: '小红',
						age: 25,
						height: 165,
						location: '杭州市',
						job: '设计师',
						education: '本科',
						constellation: '水瓶座',
						salary: '10-20K',
						avatar: 'https://via.placeholder.com/200x200/FFB6C1/FFFFFF?text=小红',
						isVip: true,
						isOnline: true,
						hobbies: ['旅游', '美食', '电影', '摄影'],
						introduction: '热爱生活，喜欢旅游和美食。希望找到一个有趣的灵魂，一起探索世界的美好。'
					},
					{
						id: 3,
						nickname: '小李',
						age: 28,
						height: 175,
						location: '上海市',
						job: '软件工程师',
						education: '硕士',
						constellation: '天秤座',
						salary: '20-30K',
						avatar: 'https://via.placeholder.com/200x200/87CEEB/FFFFFF?text=小李',
						isVip: false,
						isOnline: false,
						hobbies: ['运动', '阅读', '音乐'],
						introduction: '喜欢安静，热爱阅读和音乐。希望找到一个能够理解我的人，一起度过美好的时光。'
					},
					{
						id: 4,
						nickname: '小王',
						age: 26,
						height: 170,
						location: '深圳市',
						job: '市场经理',
						education: '本科',
						constellation: '狮子座',
						salary: '15-25K',
						avatar: 'https://via.placeholder.com/200x200/DDA0DD/FFFFFF?text=小王',
						isVip: true,
						isOnline: true,
						hobbies: ['健身', '烘焙', '瑜伽', '旅游'],
						introduction: '积极向上的生活态度，喜欢健身和烘焙。希望找到一个同样热爱生活的伴侣。'
					}
				]
			}
		},

		onLoad() {
			console.log('今日推荐页面加载')
			this.currentUserId = userAuth.getUserId()
			console.log('当前用户ID:', this.currentUserId)
			
			// 模拟加载推荐数据
			this.loadTodayRecommend()
		},

		methods: {
			// 加载今日推荐
			loadTodayRecommend() {
				uni.showLoading({
					title: '加载推荐中...'
				})
				
				// 模拟API调用延迟
				setTimeout(() => {
					uni.hideLoading()
					
					if (this.recommendUsers.length > 0) {
						uni.showToast({
							title: `为您推荐了${this.recommendUsers.length}位会员`,
							icon: 'success'
						})
					}
				}, 1000)
			},

			// 处理不感兴趣
			handlePass(user, index) {
				uni.showModal({
					title: '确认操作',
					content: `确定对${user.nickname}不感兴趣吗？`,
					success: (res) => {
						if (res.confirm) {
							console.log('不感兴趣:', user.nickname)
							uni.showToast({
								title: '已记录您的偏好',
								icon: 'success'
							})
							
							// 从列表中移除
							this.recommendUsers.splice(index, 1)
						}
					}
				})
			},

			// 处理喜欢
			handleLike(user, index) {
				console.log('喜欢:', user.nickname)
				
				// 动画效果
				uni.showToast({
					title: `已喜欢${user.nickname} ❤️`,
					icon: 'success'
				})
				
				// 从列表中移除
				setTimeout(() => {
					this.recommendUsers.splice(index, 1)
					
					// 检查是否匹配成功（模拟）
					const isMatch = Math.random() > 0.7 // 30%几率匹配成功
					if (isMatch) {
						setTimeout(() => {
							uni.showModal({
								title: '🎉 匹配成功！',
								content: `恭喜您与${user.nickname}互相喜欢，现在可以开始聊天了！`,
								showCancel: false,
								confirmText: '开始聊天',
								success: (modalRes) => {
									if (modalRes.confirm) {
										// TODO: 跳转到聊天页面
										uni.showToast({
											title: '聊天功能开发中',
											icon: 'none'
										})
									}
								}
							})
						}, 1000)
					}
				}, 800)
			},

			// 处理打招呼
			handleChat(user) {
				console.log('打招呼:', user.nickname)
				
				const greetings = [
					'你好，很高兴认识你！',
					'Hi，看了你的资料很不错呢~',
					'你好，我们聊聊天吧！',
					'Hello，可以交个朋友吗？'
				]
				
				const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)]
				
				uni.showModal({
					title: `向${user.nickname}打招呼`,
					content: `发送消息："${randomGreeting}"`,
					showCancel: true,
					cancelText: '自定义',
					confirmText: '发送',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '招呼已发送！',
								icon: 'success'
							})
							// TODO: 调用发送消息API
						} else {
							// 自定义消息
							uni.navigateTo({
								url: `/pages/message/chat?userId=${user.id}&nickname=${user.nickname}`
							}).catch(() => {
								uni.showToast({
									title: '聊天功能开发中',
									icon: 'none'
								})
							})
						}
					}
				})
			},

			// 跳转到个人资料
			goToProfile() {
				uni.navigateTo({
					url: '/pages/profile/index'
				})
			},

			// 返回
			goBack() {
				uni.navigateBack({
					fail: () => {
						// 返回失败时跳转首页
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.today-recommend-page {
		min-height: 100vh;
		background: linear-gradient(180deg, #FFE5EE 0%, #FFF9F9 100%);
		padding-top: 90rpx;
		padding-bottom: 40rpx;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background: linear-gradient(135deg, #FF6B9D 0%, #FF8FAB 100%);
		z-index: 999;

		.navbar-left,
		.navbar-right {
			width: 80rpx;
		}

		.back-icon {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
		}

		.navbar-title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	/* 页面内容 */
	.page-content {
		padding: 20rpx 30rpx;
	}

	/* 推荐列表 */
	.recommend-list {
		.recommend-card {
			background: #FFFFFF;
			border-radius: 25rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			box-shadow: 0 8rpx 25rpx rgba(255, 107, 157, 0.15);
			border: 2rpx solid rgba(255, 107, 157, 0.1);

			.card-header {
				padding: 30rpx;
				display: flex;
				align-items: center;
				position: relative;
				background: linear-gradient(135deg, #FFF9FC 0%, #FFFFFF 100%);

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					margin-right: 25rpx;
					border: 4rpx solid #FFE5EE;
					box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.2);
				}

				.user-basic-info {
					flex: 1;

					.user-name-row {
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;

						.user-name {
							font-size: 34rpx;
							font-weight: bold;
							color: #333333;
							margin-right: 15rpx;
						}

						.vip-badge {
							background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: bold;
							padding: 6rpx 15rpx;
							border-radius: 20rpx;
							box-shadow: 0 2rpx 8rpx rgba(255, 165, 0, 0.3);
						}
					}

					.user-details {
						display: flex;
						gap: 20rpx;

						.user-detail {
							font-size: 26rpx;
							color: #666666;
							background: rgba(255, 107, 157, 0.1);
							padding: 8rpx 16rpx;
							border-radius: 15rpx;
						}
					}
				}

				.online-status {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					display: flex;
					align-items: center;
					gap: 8rpx;

					.status-dot {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #CCCCCC;
					}

					.status-text {
						font-size: 22rpx;
						color: #999999;
					}

					&.online {
						.status-dot {
							background: #4CAF50;
							animation: blink 2s infinite;
						}

						.status-text {
							color: #4CAF50;
						}
					}
				}
			}

			.card-content {
				padding: 0 30rpx 20rpx;

				.user-info-grid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 20rpx;
					margin-bottom: 25rpx;

					.info-item {
						background: #F8F9FA;
						padding: 20rpx;
						border-radius: 15rpx;

						.info-label {
							font-size: 22rpx;
							color: #999999;
							display: block;
							margin-bottom: 8rpx;
						}

						.info-value {
							font-size: 26rpx;
							color: #333333;
							font-weight: 500;
						}
					}
				}

				.user-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;
					margin-bottom: 25rpx;

					.tag {
						background: linear-gradient(135deg, #FFE5EE 0%, #FFD0DC 100%);
						color: #FF6B8A;
						font-size: 22rpx;
						padding: 10rpx 18rpx;
						border-radius: 20rpx;
						font-weight: 500;
					}
				}

				.personal-intro {
					background: rgba(255, 107, 157, 0.05);
					padding: 20rpx;
					border-radius: 15rpx;
					border-left: 4rpx solid #FF6B9D;

					.intro-label {
						font-size: 24rpx;
						color: #FF6B9D;
						font-weight: bold;
						display: block;
						margin-bottom: 10rpx;
					}

					.intro-text {
						font-size: 26rpx;
						color: #666666;
						line-height: 1.6;
					}
				}
			}

			.card-actions {
				display: flex;
				padding: 25rpx 30rpx 30rpx;
				gap: 15rpx;
				background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);

				.action-btn {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 25rpx 0;
					border-radius: 20rpx;
					font-weight: 500;
					transition: all 0.3s;

					.action-icon {
						font-size: 36rpx;
						margin-bottom: 8rpx;
					}

					.action-text {
						font-size: 24rpx;
					}

					&.pass-btn {
						background: #FFFFFF;
						color: #666666;
						border: 2rpx solid #E9ECEF;

						&:active {
							background: #F8F9FA;
							transform: scale(0.95);
						}
					}

					&.like-btn {
						background: linear-gradient(135deg, #FF6B9D 0%, #FF8FAB 100%);
						color: #FFFFFF;
						box-shadow: 0 6rpx 20rpx rgba(255, 107, 157, 0.3);

						&:active {
							transform: scale(0.95);
						}
					}

					&.chat-btn {
						background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
						color: #FFFFFF;
						box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);

						&:active {
							transform: scale(0.95);
						}
					}
				}
			}
		}
	}

	@keyframes blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}

	/* 暂无推荐 */
	.no-recommend {
		text-align: center;
		padding: 100rpx 40rpx;

		.no-recommend-icon {
			font-size: 120rpx;
			display: block;
			margin-bottom: 30rpx;
		}

		.no-recommend-title {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			display: block;
			margin-bottom: 15rpx;
		}

		.no-recommend-tip {
			font-size: 28rpx;
			color: #666666;
			display: block;
			margin-bottom: 50rpx;
		}

		.complete-profile-btn {
			background: linear-gradient(135deg, #FF6B9D 0%, #FF8FAB 100%);
			color: #FFFFFF;
			padding: 25rpx 45rpx;
			border-radius: 35rpx;
			box-shadow: 0 8rpx 20rpx rgba(255, 107, 157, 0.3);
			display: inline-block;

			.btn-text {
				font-size: 28rpx;
				font-weight: bold;
			}

			&:active {
				transform: scale(0.95);
			}
		}
	}

	.bottom-placeholder {
		height: 60rpx;
	}
</style>