Selaa lähdekoodia

feat(recommend): 实现推荐页面喜欢功能的完整交互

- 添加喜欢状态切换功能,按钮显示对应状态文本
- 实现页面显示时更新喜欢状态的逻辑
- 新增updateLikedStatus方法从后端获取用户喜欢列表
- 调用toggleLike方法切换喜欢状态并更新UI
- 添加已喜欢按钮的样式显示
- 修复后端查询喜欢用户列表的重复数据问题
李思佳 1 viikko sitten
vanhempi
commit
a55960ec55

+ 47 - 16
LiangZhiYUMao/pages/recommend/index.vue

@@ -215,7 +215,9 @@
 					</view>
 					<view class="actions">
 						<!-- <button size="mini" class="act-btn ghost" @click.stop="dislike(idx)">不喜欢</button> -->
-						<button size="mini" class="act-btn primary" @click.stop="like(idx)">喜欢</button>
+						<button size="mini" :class="['act-btn', u.liked ? 'liked' : 'primary']" @click.stop="toggleLike(idx)">
+							{{ u.liked ? '我的喜欢' : '喜欢' }}
+						</button>
 					</view>
 				</view>
 				<view v-if="!list.length" class="empty">暂无推荐</view>
@@ -316,16 +318,16 @@ export default {
 	
 	// 页面显示时重新加载用户信息和推荐列表
 	async onShow() {
-		
 		const genderChanged = await this.loadCurrentUserInfo();
-		
 		// 如果性别发生变化,或者列表为空,则刷新推荐列表
 		if (genderChanged || this.list.length === 0) {
-			
 			if (genderChanged) {
 				this.shownUserIds = [];
 			}
 			this.refresh(false);
+		} else {
+			// 列表已存在,只更新喜欢状态
+			await this.updateLikedStatus();
 		}
 	},
 	methods: {
@@ -492,6 +494,28 @@ export default {
 			} finally { this.loading = false }
 		},
 		
+		// 更新喜欢状态:从后端获取当前用户喜欢的用户列表,更新本地liked状态
+		async updateLikedStatus() {
+		  try {
+		    const uid = parseInt(uni.getStorageSync('userId') || 1);
+		    // 调用API获取用户喜欢的列表
+		    const likedUsers = await api.recommend.getLikedUsers(uid);
+		    if (likedUsers && likedUsers.length > 0) {
+		      // 提取喜欢的用户ID集合
+		      const likedUserIds = new Set(likedUsers.map(user => user.userId));
+		      // 更新本地liked状态
+		      for (let i = 0; i < this.list.length; i++) {
+		        const u = this.list[i];
+		        if (u.userId) {
+		          this.$set(this.list[i], 'liked', likedUserIds.has(u.userId));
+		        }
+		      }
+		    }
+		  } catch (e) {
+		    console.error('获取喜欢状态失败', e);
+		  }
+		},
+		
 		// 处理推荐数据:过滤并记录已显示的用户ID
 		processRecommendData(data, userId) {
 		  const seen = new Set();
@@ -500,13 +524,11 @@ export default {
 		  for (const it of (data || [])) { 
 		    // 过滤:排除当前用户和未完善性别信息的用户
 		    if (!it.userId || it.userId === userId || !it.gender || it.gender === 0) {
-		     
 		      continue;
 		    }
 		    // 如果当前用户性别已设置,只保留异性
 		    if (this.currentUserGender && this.currentUserGender !== 0) {
 		      if (it.gender === this.currentUserGender) {
-		      
 		        continue; // 排除同性
 		      }
 		    }
@@ -520,8 +542,9 @@ export default {
 		    } 
 		  }
 		  
-		
-		  this.list = merged.map(it=>({ ...it, avatarUrl: this.getSafeAvatar(it.avatarUrl) }));
+		  this.list = merged.map(it=>({ ...it, avatarUrl: this.getSafeAvatar(it.avatarUrl), liked: false }));
+		  // 更新喜欢状态
+		  this.updateLikedStatus();
 		},
 		// 换一批功能
 		changeBatch() {
@@ -720,18 +743,20 @@ export default {
 		fmtEdu(v){ const map={1:'高中',2:'大专',3:'本科',4:'硕士',5:'博士'}; return map[v]||'-' },
 		fmtSalary(v){ const map={1:'<5k',2:'5-10k',3:'10-20k',4:'20-50k',5:'50k+'}; return map[v]||'-' },
 		parseHobby(h){ try{ const arr = typeof h === 'string' ? JSON.parse(h) : h; return Array.isArray(arr)?arr.slice(0,6):[] }catch{return []} },
-		async like(i){ 
+		async toggleLike(i){ 
 			const u=this.list[i]; 
 			if(!u) return; 
-			
 			const uid = parseInt(uni.getStorageSync('userId')||1); 
-			
-			// 调用 API 记录喜欢
+			// 切换喜欢状态
+			const newType = u.liked ? 'dislike' : 'like';
+			// 调用 API 记录反馈
 			if(u.userId){ 
-				try {
-					await api.recommend.feedback({ userId: uid, targetUserId: u.userId, type: 'like' });
-					// 直接显示成功提示,不弹出聊天确认框
-					uni.showToast({ title:'已记录', icon:'success' });
+				try { 
+					await api.recommend.feedback({ userId: uid, targetUserId: u.userId, type: newType });
+					// 更新本地状态
+					this.$set(this.list[i], 'liked', !u.liked);
+					// 显示成功提示
+					uni.showToast({ title: newType === 'like' ? '已喜欢' : '已取消喜欢', icon: 'success' });
 				} catch(e) {
 					console.error('反馈失败', e);
 				}
@@ -1222,6 +1247,12 @@ export default {
 		color: #FFFFFF;
 		border: none;
 	}
+	
+	.act-btn.liked{ 
+		background: #FFB3C6; 
+		color: #E91E63;
+		border: 2rpx solid #E91E63;
+	}
 
 	/* 底部导航栏 - 扁平化 */
 	.tabbar {

+ 1 - 1
service/Recommend/src/main/resources/mapper/RecommendMapper.xml

@@ -567,7 +567,7 @@
     <!-- 查询用户喜欢的列表 -->
     <select id="selectLikedUsers" resultMap="RecommendUserMap">
         <![CDATA[
-        SELECT
+        SELECT DISTINCT
           u.user_id,
           u.nickname,
           u.gender,