cfc/cfc-frontend/components/HealthLikeButton.vue

<template>
  <view class="like-btn" :class="{ liked: isLikedVal }" @click="handleClick">
    <text class="like-icon">{{ isLikedVal ? '❤️' : '🤍' }}</text>
    <text class="like-count">{{ count }}</text>
  </view>
</template>

<script>
export default {
  props: {
    actionType: { type: String, default: '' },
    actionId: { type: [Number, String], default: '' },
    toUserId: { type: [Number, String], default: '' },
    isLiked: { type: Boolean, default: false },
    count: { type: Number, default: 0 }
  },
  data() {
    return {
      isLikedVal: this.isLiked
    }
  },
  watch: {
    isLiked: function(val) {
      this.isLikedVal = val
    }
  },
  methods: {
    handleClick: function() {
      if (this.isLikedVal) return
      this.isLikedVal = true
      this.$emit('like', {
        actionType: this.actionType,
        actionId: this.actionId,
        toUserId: this.toUserId
      })
    }
  }
}
</script>

<style scoped>
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  border: 1rpx solid #E2E8F0;
  background: #FAFAFA;
  transition: all 0.2s;
}
.like-btn.liked {
  border-color: #FECDD3;
  background: #FFF1F2;
}
.like-icon { font-size: 24rpx; }
.like-count {
  font-size: 22rpx;
  color: #64748B;
  min-width: 20rpx;
  text-align: center;
}
.liked .like-count { color: #E11D48; }
</style>