feat:更新朋友圈点赞功能

src/components/Moment/MomentCard.vue

@@ -15,15 +15,20 @@
       <p>{{ formatTimeAgo(props.item.date) }}</p>
 
       <div class="button-container">
-        <el-button v-if="props.item.userId === userStore.userInfo.id"
+        <el-button v-if="isCurrentUser"
                    :icon="Edit" circle size="small" @click="editClick()"/>
-        <el-button circle size="small">
-          <i class="fa-regular fa-thumbs-up"></i>
-        </el-button>
-        <el-button circle size="small"
-                   @click="momentInfo.isShowComment = !momentInfo.isShowComment">
-          <i class="fa-regular fa-comment"></i>
-        </el-button>
+        <el-badge :value="props.item.likeList.length" :max="9">
+          <el-button :type="isLike ? 'danger' : 'default'"
+                     circle size="small" @click="handleLikeClick()">
+            <i class="fa-regular fa-thumbs-up"></i>
+          </el-button>
+        </el-badge>
+        <el-badge :value="props.item.commentList.length" :max="9">
+          <el-button circle size="small"
+                     @click="momentInfo.isShowComment = !momentInfo.isShowComment">
+            <i class="fa-regular fa-comment"></i>
+          </el-button>
+        </el-badge>
       </div>
 
       <div v-if="momentInfo.isShowComment" class="moment-comment">
@@ -92,6 +97,7 @@ const foodStore = useFoodStore()
 
 const momentInfo = reactive({
   isShowComment: false,
+  isLike: false,
   comment: ''
 })
 
@@ -103,6 +109,9 @@ const avatarUrl = computed(() => {
   }
 })
 
+const isCurrentUser = computed(() => props.item?.userId === userStore.getUserId())
+const isLike = computed(() => props.item?.likeList.includes(userStore.getUserId()))
+
 const previewList = computed(() => {
   return props.item?.imageList.map((item) => serviceFileRootPath + item)
 })
@@ -113,6 +122,14 @@ const editClick = () => {
   router.push('/moment/form')
 }
 
+const handleLikeClick = () => {
+  if (isLike.value) {
+    foodStore.deleteLike(props.item?.id as number)
+  } else {
+    foodStore.addLike(props.item?.id as number)
+  }
+}
+
 const onSelectEmoji = (emoji) => {
   momentInfo.comment += emoji.i
 }
@@ -125,7 +142,7 @@ const sendCommentClick = async () => {
 }
 
 const viewProfileClick = async () => {
-  if (props.item?.userId !== userStore.userInfo.id) {
+  if (!isCurrentUser.value) {
     appStore.isShowMobileBack = true
     foodStore.currentMomentUserId = props.item?.userId as number
     await userStore.queryUser(foodStore.currentMomentUserId)
@@ -162,6 +179,11 @@ const viewProfileClick = async () => {
       gap: 10px;
     }
 
+    .button-container {
+      display: flex;
+      gap: 20px;
+    }
+
     .moment-comment {
       display: grid;
       grid-template-columns: 1fr 40px 60px;