From 03465865484b4e0b82c03f6c10f4245f1513e816 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Mon, 30 Jun 2025 19:19:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E6=9C=8B=E5=8F=8B?=
 =?UTF-8?q?=E5=9C=88=E7=82=B9=E8=B5=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/moment.ts                       | 14 ++++++++-
 src/components/Food/FoodBasicData.vue    |  3 +-
 src/components/Food/FoodMaterialData.vue |  3 +-
 src/components/Food/FoodOthersData.vue   |  3 +-
 src/components/Food/FoodStepData.vue     |  5 ++-
 src/components/Moment/MomentCard.vue     | 40 ++++++++++++++++++------
 src/store/food.ts                        | 18 ++++++++++-
 src/store/user.ts                        |  2 +-
 src/styles/index.module.scss             |  2 +-
 src/types/food.ts                        |  1 +
 10 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/apis/moment.ts b/src/apis/moment.ts
index cf3dc4b..7ae5de9 100644
--- a/src/apis/moment.ts
+++ b/src/apis/moment.ts
@@ -1,5 +1,5 @@
 import { cloudService } from './index'
-import type { IComment, IMoment } from '@/types/food'
+import type { IMoment } from '@/types/food'
 
 export const addMomentApi = (moment: IMoment): Promise<boolean> =>
   cloudService({
@@ -33,3 +33,15 @@ export const addCommentApi = (id: number, content: string): Promise<boolean> =>
     method: 'post',
     params: { content }
   })
+
+export const addLikeApi = (id: number): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/moment/${id}/like`,
+    method: 'post'
+  })
+
+export const deleteLikeApi = (id: number): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/moment/${id}/like`,
+    method: 'delete'
+  })
diff --git a/src/components/Food/FoodBasicData.vue b/src/components/Food/FoodBasicData.vue
index beda022..1c2df38 100644
--- a/src/components/Food/FoodBasicData.vue
+++ b/src/components/Food/FoodBasicData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-item card-item">
     <div class="title-info">
-      <svg-icon name="home-basic"/>
+      <i class="iconfont icon-jichu" style="color: #64748B"></i>
       <span class="sub-title">基础信息</span>
     </div>
 
@@ -14,7 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { SvgIcon } from 'vue3-common'
 import { useFoodStore } from '@/store/food.ts'
 
 const foodStore = useFoodStore()
diff --git a/src/components/Food/FoodMaterialData.vue b/src/components/Food/FoodMaterialData.vue
index 43de7e9..859e95c 100644
--- a/src/components/Food/FoodMaterialData.vue
+++ b/src/components/Food/FoodMaterialData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-item card-item">
     <div class="title-info">
-      <svg-icon name="home-material"/>
+      <i class="iconfont icon-shicai" style="color: #84CC16;"></i>
       <span class="sub-title">食材信息</span>
     </div>
 
@@ -47,7 +47,6 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { SvgIcon } from 'vue3-common'
 
 const foodStore = useFoodStore()
 
diff --git a/src/components/Food/FoodOthersData.vue b/src/components/Food/FoodOthersData.vue
index 1960f5c..d48582b 100644
--- a/src/components/Food/FoodOthersData.vue
+++ b/src/components/Food/FoodOthersData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-item card-item">
     <div class="title-info">
-      <svg-icon name="home-others"/>
+      <i class="iconfont icon-qita" style="color: #7C3AED"></i>
       <span class="sub-title">其他信息</span>
     </div>
 
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { SvgIcon } from 'vue3-common'
 
 const foodStore = useFoodStore()
 </script>
diff --git a/src/components/Food/FoodStepData.vue b/src/components/Food/FoodStepData.vue
index 5e4bdae..1b461a7 100644
--- a/src/components/Food/FoodStepData.vue
+++ b/src/components/Food/FoodStepData.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="info-item card-item">
     <div class="title-info">
-      <svg-icon name="home-step"/>
-      <span class="sub-title">菜谱信息</span>
+      <i class="iconfont icon-buzhou" style="color: #F59E0B"></i>
+      <span class="sub-title">步骤信息</span>
     </div>
 
     <div class="step-info">
@@ -22,7 +22,6 @@
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
 import { serviceFileRootPath } from '@/utils'
-import { SvgIcon } from 'vue3-common'
 
 const foodStore = useFoodStore()
 </script>
diff --git a/src/components/Moment/MomentCard.vue b/src/components/Moment/MomentCard.vue
index cad1151..5cea334 100644
--- a/src/components/Moment/MomentCard.vue
+++ b/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;
diff --git a/src/store/food.ts b/src/store/food.ts
index 8926844..099eeba 100644
--- a/src/store/food.ts
+++ b/src/store/food.ts
@@ -21,7 +21,15 @@ import {
 import type { IDialog, IHandleApi, IStatsChart } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
 import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
-import { addCommentApi, addMomentApi, deleteMomentApi, queryMomentApi, updateMomentApi } from '@/apis/moment'
+import {
+  addCommentApi,
+  addLikeApi,
+  addMomentApi,
+  deleteLikeApi,
+  deleteMomentApi,
+  queryMomentApi,
+  updateMomentApi
+} from '@/apis/moment'
 
 export const useFoodStore = defineStore('food', {
   state: () => ({
@@ -193,6 +201,14 @@ export const useFoodStore = defineStore('food', {
       await addCommentApi(id, content)
       await this.queryMomentList()
     },
+    async addLike(id: number) {
+      await addLikeApi(id)
+      await this.queryMomentList()
+    },
+    async deleteLike(id: number) {
+      await deleteLikeApi(id)
+      await this.queryMomentList()
+    },
     async refreshInfo() {
       await this.queryRecipeList()
       await this.queryRecordList()
diff --git a/src/store/user.ts b/src/store/user.ts
index 2324f7a..e0d1774 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -58,7 +58,7 @@ export const useUserStore = defineStore('user', {
       setLocalStorage('userId', String(userId))
     },
     getUserId() {
-      return getLocalStorage('userId')
+      return Number(getLocalStorage('userId'))
     },
     setAccount(accountName: string) {
       setLocalStorage('account', accountName)
diff --git a/src/styles/index.module.scss b/src/styles/index.module.scss
index a1d1cf0..75e7a26 100644
--- a/src/styles/index.module.scss
+++ b/src/styles/index.module.scss
@@ -84,4 +84,4 @@ span, input {
   font-style: normal;
 }
 
-@import "//at.alicdn.com/t/c/font_4956432_suiec1b32.css";
+@import "//at.alicdn.com/t/c/font_4956432_h3acdgp5k3p.css";
diff --git a/src/types/food.ts b/src/types/food.ts
index 275c756..a11b61b 100644
--- a/src/types/food.ts
+++ b/src/types/food.ts
@@ -94,5 +94,6 @@ export interface IMoment {
   content: string;
   imageList: string[];
   date?: string;
+  likeList?: number[];
   commentList?: IComment[];
 }