hookehuyr

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

- 在帖子底部添加点击事件处理函数 handLike
- 为点赞图标添加颜色状态显示(红色表示已点赞)
- 为 mock 数据添加 is_liked 字段记录点赞状态
- 使用可选链操作符优化视频暂停逻辑
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-03 11:30:33
* @LastEditTime: 2025-06-03 13:43:53
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -125,8 +125,8 @@
/>
</div>
</div>
<div class="post-footer">
<van-icon name="like" class="like-icon" />
<div class="post-footer" @click="handLike(post)">
<van-icon name="like" class="like-icon" :color="post.is_liked ? 'red' : ''" />
<span class="like-count">{{ post.likes }}</span>
</div>
</div>
......@@ -159,8 +159,8 @@ onBeforeUnmount(() => {
// 停止所有视频和音频播放
if (videoPlayers.value) {
videoPlayers.value.forEach(player => {
if (player && typeof player.pause === 'function') {
player.pause();
if (player && typeof player?.pause === 'function') {
player?.pause();
}
});
}
......@@ -322,7 +322,8 @@ const mockPosts = ref([
videoCover: '',
isPlaying: false,
audio: [],
likes: 12
likes: 12,
is_liked: false,
},
{
id: 2,
......@@ -348,7 +349,8 @@ const mockPosts = ref([
videoCover: '',
isPlaying: false,
audio: [],
likes: 12
likes: 12,
is_liked: false,
},
{
id: 3,
......@@ -377,7 +379,8 @@ const mockPosts = ref([
cover: ''
}
],
likes: 12
likes: 12,
is_liked: false,
},
{
id: 4,
......@@ -403,7 +406,8 @@ const mockPosts = ref([
videoCover: '',
isPlaying: false,
audio: [],
likes: 12
likes: 12,
is_liked: false,
},
{
id: 5,
......@@ -426,7 +430,8 @@ const mockPosts = ref([
cover: ''
}
],
likes: 12
likes: 12,
is_liked: false,
},
]);
......@@ -486,6 +491,11 @@ const goToCheckinImagePage = () => {
const goToCheckinFilePage = () => {
router.push('/checkin/file');
}
const handLike = (post) => {
post.is_liked = !post.is_liked;
// TODO: 调用接口
}
</script>
<style lang="less">
......