hookehuyr

feat(检查页面): 添加点赞功能交互和状态显示

- 在帖子底部添加点击事件处理函数 handLike
- 为点赞图标添加颜色状态显示(红色表示已点赞)
- 为 mock 数据添加 is_liked 字段记录点赞状态
- 使用可选链操作符优化视频暂停逻辑
1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-03 11:30:33 4 + * @LastEditTime: 2025-06-03 13:43:53
5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue 5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -125,8 +125,8 @@ ...@@ -125,8 +125,8 @@
125 /> 125 />
126 </div> 126 </div>
127 </div> 127 </div>
128 - <div class="post-footer"> 128 + <div class="post-footer" @click="handLike(post)">
129 - <van-icon name="like" class="like-icon" /> 129 + <van-icon name="like" class="like-icon" :color="post.is_liked ? 'red' : ''" />
130 <span class="like-count">{{ post.likes }}</span> 130 <span class="like-count">{{ post.likes }}</span>
131 </div> 131 </div>
132 </div> 132 </div>
...@@ -159,8 +159,8 @@ onBeforeUnmount(() => { ...@@ -159,8 +159,8 @@ onBeforeUnmount(() => {
159 // 停止所有视频和音频播放 159 // 停止所有视频和音频播放
160 if (videoPlayers.value) { 160 if (videoPlayers.value) {
161 videoPlayers.value.forEach(player => { 161 videoPlayers.value.forEach(player => {
162 - if (player && typeof player.pause === 'function') { 162 + if (player && typeof player?.pause === 'function') {
163 - player.pause(); 163 + player?.pause();
164 } 164 }
165 }); 165 });
166 } 166 }
...@@ -322,7 +322,8 @@ const mockPosts = ref([ ...@@ -322,7 +322,8 @@ const mockPosts = ref([
322 videoCover: '', 322 videoCover: '',
323 isPlaying: false, 323 isPlaying: false,
324 audio: [], 324 audio: [],
325 - likes: 12 325 + likes: 12,
326 + is_liked: false,
326 }, 327 },
327 { 328 {
328 id: 2, 329 id: 2,
...@@ -348,7 +349,8 @@ const mockPosts = ref([ ...@@ -348,7 +349,8 @@ const mockPosts = ref([
348 videoCover: '', 349 videoCover: '',
349 isPlaying: false, 350 isPlaying: false,
350 audio: [], 351 audio: [],
351 - likes: 12 352 + likes: 12,
353 + is_liked: false,
352 }, 354 },
353 { 355 {
354 id: 3, 356 id: 3,
...@@ -377,7 +379,8 @@ const mockPosts = ref([ ...@@ -377,7 +379,8 @@ const mockPosts = ref([
377 cover: '' 379 cover: ''
378 } 380 }
379 ], 381 ],
380 - likes: 12 382 + likes: 12,
383 + is_liked: false,
381 }, 384 },
382 { 385 {
383 id: 4, 386 id: 4,
...@@ -403,7 +406,8 @@ const mockPosts = ref([ ...@@ -403,7 +406,8 @@ const mockPosts = ref([
403 videoCover: '', 406 videoCover: '',
404 isPlaying: false, 407 isPlaying: false,
405 audio: [], 408 audio: [],
406 - likes: 12 409 + likes: 12,
410 + is_liked: false,
407 }, 411 },
408 { 412 {
409 id: 5, 413 id: 5,
...@@ -426,7 +430,8 @@ const mockPosts = ref([ ...@@ -426,7 +430,8 @@ const mockPosts = ref([
426 cover: '' 430 cover: ''
427 } 431 }
428 ], 432 ],
429 - likes: 12 433 + likes: 12,
434 + is_liked: false,
430 }, 435 },
431 ]); 436 ]);
432 437
...@@ -486,6 +491,11 @@ const goToCheckinImagePage = () => { ...@@ -486,6 +491,11 @@ const goToCheckinImagePage = () => {
486 const goToCheckinFilePage = () => { 491 const goToCheckinFilePage = () => {
487 router.push('/checkin/file'); 492 router.push('/checkin/file');
488 } 493 }
494 +
495 +const handLike = (post) => {
496 + post.is_liked = !post.is_liked;
497 + // TODO: 调用接口
498 +}
489 </script> 499 </script>
490 500
491 <style lang="less"> 501 <style lang="less">
......