feat:更新朋友圈点赞功能

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'
+  })

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()

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()
 

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>

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"/>
+      <i class="iconfont icon-buzhou" style="color: #F59E0B"></i>
-      <span class="sub-title">菜谱信息</span>
+      <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>

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">
+        <el-badge :value="props.item.likeList.length" :max="9">
-          <i class="fa-regular fa-thumbs-up"></i>
+          <el-button :type="isLike ? 'danger' : 'default'"
-        </el-button>
+                     circle size="small" @click="handleLikeClick()">
-        <el-button circle size="small"
+            <i class="fa-regular fa-thumbs-up"></i>
-                   @click="momentInfo.isShowComment = !momentInfo.isShowComment">
+          </el-button>
-          <i class="fa-regular fa-comment"></i>
+        </el-badge>
-        </el-button>
+        <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;

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()

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)

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";

src/types/food.ts

@@ -94,5 +94,6 @@ export interface IMoment {
   content: string;
   imageList: string[];
   date?: string;
+  likeList?: number[];
   commentList?: IComment[];
 }