update: 点赞事件、收藏事件

cloudroam

2025-06-12 b0bfc153bf3c9aa430ee6a86588648cdd1c27132

update: 点赞事件、收藏事件

 components/card/flow-card.vue

@@ -17,7 +17,7 @@
            </view>
            <view class="opera-info">
                <up-icon name="heart" size="30rpx" color="#999" />
                <text>{{ item.likeCount }}</text>
                <text>{{ item.voLikeCount }}</text>
            </view>
        </view>
    </view>

 sub-pages/film-list/film-detail.vue

@@ -72,9 +72,31 @@
                    <view class="comment-input" @click="showCommentLayer">
                        <up-text size="12px" text="说点什么......" margin="0 0 0 20rpx" color="#B9B9B9" />
                    </view>
                    <up-icon name="heart" size="60rpx" color="#B9B9B9" label="11" />
                    <up-icon name="star" size="60rpx" color="#B9B9B9" label="22" />
                    <up-icon name="chat" size="60rpx" color="#B9B9B9" label="33" />
<!--                    <up-icon name="heart" size="60rpx" color="#B9B9B9" label="11" />-->
<!--                    <up-icon name="star" size="60rpx" color="#B9B9B9" label="22" />-->
                        <up-icon
                            name="heart"
                            size="60rpx"
                            :color="liked ? '#FF0000' : '#B9B9B9'"
                            :label="filmInfo?.voLikeCount || 0"
                            @click="toggleLike"
                        />
                        <up-icon
                            name="star"
                            size="60rpx"
                            :color="collected ? '#FFD700' : '#B9B9B9'"
                            :label="filmInfo?.voCollectCount || 0"
                            @click="toggleFavorite"
                        />
						
                        <up-icon
                            name="chat"
                            size="60rpx"
                            color="#B9B9B9"
                            :label="filmInfo?.voCommentCount || 0"
                            @click="showCommentLayer"
                        />
                    <!-- <up-icon name="chat" size="60rpx" color="#B9B9B9" label="33" /> -->
                </view>
            </view>
        </view>
@@ -109,6 +131,9 @@
    username: '图墙精选',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
})

const liked = ref(false)      // 是否已点赞
const collected = ref(false)  // 是否已收藏


onLoad((options: any) => {
@@ -193,6 +218,10 @@
    if (code == 0) {
        filmInfo.value = data
        console.log("详情", filmInfo.value)
      // 设置初始状态
       console.log("filmInfo.value.isLiked",  data.liked)
        liked.value =data.liked || false
        collected.value = data.collected || false
        if (data && data.filmPictures) {
            // 只获取里面的url
            // filmPictureList.value=JSON.parse(data.filmPictures) as Array<FilmPicture>
@@ -214,6 +243,56 @@
        return null;
    }
}

const toggleLike = async () => {
  console.log("toggleLike",filmInfo.value)
  if (!filmInfo.value) return

  const api = liked.value ? '/v2/film-likes/filmLikes/edit' : '/v2/film-likes/filmLikes/edit'

  try {
    const res = await $http.request('post', api, {
      data: { filmId: filmInfo.value.id }
    })

    if (res.code === 0) {
      // 更新本地状态
      liked.value = !liked.value
      filmInfo.value.voLikeCount += liked.value ? 1 : -1

      // 提示信息
      $message.showToast(liked.value ? '点赞成功' : '取消点赞')
    }
  } catch (error) {
    console.error('点赞失败:', error)
    $message.showToast('操作失败')
  }
}

const toggleFavorite = async () => {
  console.log("toggleFavorite",filmInfo.value)
  if (!filmInfo.value) return

  const api = collected.value ? '/v2/film-collects/filmCollects/edit' : '/v2/film-collects/filmCollects/edit'

  try {
    const res = await $http.request('post', api, {
      data: { filmId: filmInfo.value.id }
    })

    if (res.code === 0) {
      // 更新本地状态
      collected.value = !collected.value
      filmInfo.value.voCollectCount += collected.value ? 1 : -1

      // 提示信息
      $message.showToast(collected.value ? '收藏成功' : '取消收藏')
    }
  } catch (error) {
    console.error('收藏失败:', error)
    $message.showToast('操作失败')
  }
}
</script>



 types/index.ts

@@ -228,6 +228,11 @@
    createBy: string;
    createTime: string;
    updateBy: string | null;
    liked: boolean;
    collected: boolean;
    voLikeCount: number;
    voCollectCount: number;
    voCommentCount: number;
}