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" v-if="user.age && user.age !== '未知'">{{ user.age }}岁</text>
								<text class="user-detail" v-if="user.height">{{ user.height }}cm</text>
								<text class="user-detail" v-if="user.location && user.location !== '未填写'">{{ 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" v-if="user.job && user.job !== '未填写'">
								<text class="info-label">职业</text>
								<text class="info-value">{{ user.job }}</text>
							</view>
							<view class="info-item" v-if="user.education && user.education !== '未填写'">
								<text class="info-label">学历</text>
								<text class="info-value">{{ user.education }}</text>
							</view>
							<view class="info-item" v-if="user.constellation && user.constellation !== '未填写'">
								<text class="info-label">星座</text>
								<text class="info-value">{{ user.constellation }}</text>
							</view>
							<view class="info-item" v-if="user.salary && user.salary !== '未填写'">
								<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'
	import api from '@/utils/api.js'
	import { DEFAULT_IMAGES, EDUCATION_TEXT, SALARY_RANGE_TEXT } from '@/config/index.js'

	export default {
		data() {
			return {
				currentUserId: null,
				currentUserGender: null,

				// 推荐用户数据
				recommendUsers: []
			}
		},

		onLoad() {
		
			this.currentUserId = userAuth.getUserId()
			

			// 加载今日推荐
			this.loadTodayRecommend()
		},

		methods: {
			// 加载今日推荐
			async loadTodayRecommend() {
				try {
					uni.showLoading({
						title: '加载推荐中...'
					})
					const userId = this.currentUserId || parseInt(uni.getStorageSync('userId'))
					if (!userId) {
						uni.hideLoading()
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						return
					}
					await this.loadCurrentUserInfo()
					const data = await api.recommend.getUsers({
						userId,
						oppoOnly: 1,
						limit: 50
					})
					uni.hideLoading()
					if (data && data.length > 0) {
						const sortedUsers = data.filter(u => u.userId !== userId && u.compatibilityScore > 0 && (!this.currentUserGender || u.gender !== this.currentUserGender)).sort((a, b) => (b.compatibilityScore || 0) - (a.compatibilityScore || 0)).slice(0, 10)
						this.recommendUsers = sortedUsers.map(u => this.formatUserData(u))
						if (this.recommendUsers.length > 0) uni.showToast({
							title: `为您推荐了${this.recommendUsers.length}位高匹配度会员`,
							icon: 'success'
						})
						else uni.showToast({
							title: '暂无推荐用户',
							icon: 'none'
						})
					} else uni.showToast({
						title: '暂无推荐用户',
						icon: 'none'
					})
				} catch (e) {
					uni.hideLoading()
					console.error('获取推荐用户失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},

			// 加载当前用户信息
			async loadCurrentUserInfo() {
				try {
					const s = uni.getStorageSync('userInfo')
					if (s && s.gender !== undefined) this.currentUserGender = parseInt(s.gender)
					if (this.currentUserId) {
						const u = await api.user.getDetailInfo(this.currentUserId)
						if (u && u.gender !== undefined) this.currentUserGender = parseInt(u.gender)
					}
				} catch (e) {
					console.error('加载失败:', e)
				}
			},

			// 格式化用户数据
			formatUserData(u) {
				return {
					...u,
					id: u.userId || u.id,
					avatar: this.validateImageUrl(u.avatarUrl || u.avatar),
					nickname: u.nickname || '用户',
					age: this.calculateAge(u.birthDate || u.birth_date) || u.age || '未知',
					height: u.height || null,
					location: this.formatLocation(u),
					job: u.jobTitle || u.job || '未填写',
					education: this.formatEducation(u.education || u.education_lev || u.educationLevel),
					constellation: u.star || u.constellation || '未填写',
					salary: this.formatSalary(u.salaryRange),
					hobbies: this.parseHobbies(u.hobby),
					introduction: u.introduction || u.selfIntro || '',
					isVip: u.isVip || false,
					isOnline: u.isOnline || false,
					compatibilityScore: u.compatibilityScore || 0
				}
			},

			// 计算年龄
			calculateAge(d) {
				if (!d) return null
				try {
					const b = new Date(d),
						t = new Date()
					let a = t.getFullYear() - b.getFullYear()
					const m = t.getMonth() - b.getMonth()
					if (m < 0 || (m === 0 && t.getDate() < b.getDate())) a--
					return a > 0 && a < 120 ? a : null
				} catch (e) {
					return null
				}
			},

			// 格式化位置
			formatLocation(u) {
				const p = []
				if (u.provinceName) p.push(u.provinceName)
				if (u.cityName) p.push(u.cityName)
				if (p.length === 0 && u.location) return u.location
				if (p.length === 0 && u.city) return u.city
				return p.join(' ') || '未填写'
			},

			// 格式化学历
			formatEducation(e) {
				if (!e) return '未填写'
				return EDUCATION_TEXT[e] || e
			},

			// 格式化月收入
			formatSalary(s) {
				if (!s) return '未填写'
				return SALARY_RANGE_TEXT[s] || s
			},

			// 解析兴趣爱好
			parseHobbies(h) {
				if (!h) return []
				try {
					const hs = typeof h === 'string' ? JSON.parse(h) : h
					return Array.isArray(hs) ? hs.slice(0, 5) : []
				} catch (e) {
					return []
				}
			},

			// 验证图片地址
			validateImageUrl(url) {
				if (!url || url === 'null' || url === 'undefined') return DEFAULT_IMAGES.avatar
				let c = String(url).trim()
				const i = c.indexOf('http')
				if (i > 0) c = c.slice(i)
				if (!c) return DEFAULT_IMAGES.avatar
				if (c.startsWith('/')) return `http://115.190.125.125:9000${c}`
				if (c.startsWith('http://') || c.startsWith('https://')) return c
				return DEFAULT_IMAGES.avatar
			},

			// 格式化匹配度
			formatMatchScore(s) {
				if (!s) return '0.0'
				return Number(s).toFixed(1)
			},

			// 处理不感兴趣
			async handlePass(user, index) {
				uni.showModal({
					title: '确认操作',
					content: `确定对${user.nickname}不感兴趣吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								await api.recommend.feedback({
									userId: this.currentUserId,
									targetUserId: user.userId || user.id,
									type: 'dislike'
								})
								uni.showToast({
									title: '已记录您的偏好',
									icon: 'success'
								})
								this.recommendUsers.splice(index, 1)
							} catch (e) {
								console.error('失败:', e)
								uni.showToast({
									title: '操作失败，请重试',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 处理喜欢
			async handleLike(user, index) {
				try {
					await api.recommend.feedback({
						userId: this.currentUserId,
						targetUserId: user.userId || user.id,
						type: 'like'
					})
				} catch (e) {
					console.error('失败:', e)
				}
				uni.showToast({
					title: `已喜欢${user.nickname} ❤️`,
					icon: 'success'
				})
				setTimeout(() => {
					this.recommendUsers.splice(index, 1)

					
				}, 800)
			},

			// 处理打招呼
			handleChat(user) {
			

				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.navigateTo({
								url: `/pages/message/chat?targetUserId=${user.userId||user.id}&targetUserName=${encodeURIComponent(user.nickname)}&message=${encodeURIComponent(randomGreeting)}`
							})
						} else {
							uni.navigateTo({
								url: `/pages/message/chat?targetUserId=${user.userId||user.id}&targetUserName=${encodeURIComponent(user.nickname)}`
							})
						}
					}
				})
			},

			// 跳转到个人资料
			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>