feat:增加查询用户菜谱记录功能

src/apis/food.ts

@@ -28,6 +28,12 @@ export const queryRecipeByIdApi = (id: number): Promise<IRecipe> =>
     method: 'get'
   })
 
+export const queryRecipeByUserApi = (id: number): Promise<IRecipe[]> =>
+  cloudService({
+    url: `/food-service/food/recipe/user/${id}`,
+    method: 'get'
+  })
+
 export const queryRecipeApi = (query: IFoodQuery): Promise<IRecipe[]> =>
   cloudService({
     url: '/food-service/food/recipe',
@@ -69,6 +75,25 @@ export const deleteRecordApi = (id: number): Promise<boolean> =>
     method: 'DELETE'
   })
 
+export const addRecipeCommentApi = (id: number, content: string): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/food/recipe/${id}/comment`,
+    method: 'post',
+    params: { content }
+  })
+
+export const addRecipeLikeApi = (id: number): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/food/recipe/${id}/like`,
+    method: 'post'
+  })
+
+export const deleteRecipeLikeApi = (id: number): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/food/recipe/${id}/like`,
+    method: 'delete'
+  })
+
 export const queryRecordApi = (startDate: string, endDate: string): Promise<IRecord[]> =>
   cloudService({
     url: '/food-service/food/record',

src/apis/moment.ts

@@ -33,20 +33,20 @@ export const queryMomentByIdApi = (id: number): Promise<IMoment[]> =>
     method: 'get'
   })
 
-export const addCommentApi = (id: number, content: string): Promise<boolean> =>
+export const addMomentCommentApi = (id: number, content: string): Promise<boolean> =>
   cloudService({
     url: `/food-service/moment/${id}/comment`,
     method: 'post',
     params: { content }
   })
 
-export const addLikeApi = (id: number): Promise<boolean> =>
+export const addMomentLikeApi = (id: number): Promise<boolean> =>
   cloudService({
     url: `/food-service/moment/${id}/like`,
     method: 'post'
   })
 
-export const deleteLikeApi = (id: number): Promise<boolean> =>
+export const deleteMomentLikeApi = (id: number): Promise<boolean> =>
   cloudService({
     url: `/food-service/moment/${id}/like`,
     method: 'delete'

src/components/Food/FoodCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="life-record-card card-item">
-    <el-carousel v-if="props.foodItem?.recordList.length > 0"
+    <el-carousel v-if="props.item?.recordList.length > 0"
                  arrow="always" @change="changeFoodEvent">
-      <el-carousel-item v-for="(item, index) in getRecord(props.foodItem?.recordList)"
+      <el-carousel-item v-for="(item, index) in getRecord(props.item?.recordList)"
                         :key="index">
         <el-image :src="serviceFileRootPath + item.imageUrl"
                   fit="contain" alt="暂无成果">
@@ -21,16 +21,18 @@
       <div class="top-container">
         <div class="info-list">
           <div class="info-item">
-            <span class="title">{{ props.foodItem.name }}</span>
+            <span class="title">{{ props.item.name }}</span>
           </div>
         </div>
 
         <div class="button-info">
-          <el-button type="primary" :icon="Edit" circle :size="'small'"
+          <el-button v-if="isCurrentUser"
+                     type="primary" :icon="Edit" circle :size="'small'"
                      @click="editClick"/>
           <el-button type="primary" :icon="Collection" circle :size="'small'"
                      @click="viewClick()" />
-          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
+          <el-button v-if="isCurrentUser"
+                     type="danger" :icon="DeleteFilled" circle :size="'small'"
                      @click="deleteClick()" />
         </div>
       </div>
@@ -39,15 +41,15 @@
         <div class="info-list">
           <div class="info-item category-item">
             <i class="fa-solid fa-utensils"></i>
-            {{ props.foodItem.category }}
+            {{ props.item.category }}
           </div>
           <div class="info-item like-item">
             <i class="fa-regular fa-thumbs-up"></i>
-            {{ props.foodItem.likeCount }}
+            {{ props.item.likeCount }}
           </div>
           <div class="info-item comment-item">
             <i class="fa-regular fa-comment"></i>
-            {{ props.foodItem.commentCount }}
+            {{ props.item.commentCount }}
           </div>
           <div class="info-item start-item">
             <i class="fa-solid fa-star"></i>
@@ -55,10 +57,10 @@
           </div>
         </div>
 
-        <div v-if="props.foodItem?.recordList.length > 0" class="info-list">
+        <div v-if="props.item?.recordList.length > 0" class="info-list">
           <div class="info-item">
             <i class="fa-regular fa-calendar-check"></i>
-            {{ formatDate(props.foodItem.recordList[foodCardInfo.currentFoodIndex].date) }}
+            {{ formatDate(props.item.recordList[foodCardInfo.currentFoodIndex].date) }}
           </div>
         </div>
 
@@ -73,15 +75,16 @@
 <script setup lang="ts">
 import { Edit, Collection, DeleteFilled } from '@element-plus/icons-vue'
 import { useFoodStore } from '@/store/food'
-import { defineProps, onMounted, reactive } from 'vue'
+import { computed, defineProps, onMounted, reactive } from 'vue'
 import type { PropType } from 'vue'
 import type { IRecipe, IRecord } from '@/types/food.ts'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'
 
 const router = useRouter()
+const route = useRoute()
 const foodStore = useFoodStore()
 
 const foodCardInfo = reactive({
@@ -90,34 +93,36 @@ const foodCardInfo = reactive({
 })
 
 const props = defineProps({
-  foodItem: {
+  item: {
     required: true,
     type: Object as PropType<IRecipe>
   }
 })
 
 onMounted(() => {
-  foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
+  foodCardInfo.recommendRate = props.item?.recommendRate as number
 })
 
+const isCurrentUser = computed(() => route.path.includes('record'))
+
 const getRecord = (recordList: IRecord[]) => {
   return recordList.filter((item) => item.imageUrl)
 }
 
 const editClick = async () => {
   foodStore.recipeApiType = 'UPDATE'
-  await foodStore.queryRecipe(props.foodItem.id as number)
+  await foodStore.queryRecipe(props.item.id as number)
   await router.push('/record/recipeForm')
 }
 
 const viewClick = async () => {
-  await router.push({ name: 'RecordDetailId', params: { id: props.foodItem?.id } })
+  await router.push({ name: 'RecordDetailId', params: { id: props.item?.id } })
 }
 
 const deleteClick = () => {
   foodStore.recipeApiType = 'DELETE'
-  commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    foodStore.handleRecipeApi(props.foodItem as IRecipe)
+  commonElMessageBox(`请确认是否删除该菜谱: ${props.item?.name}?`).then(() => {
+    foodStore.handleRecipeApi(props.item as IRecipe)
   })
 }
 

src/components/Food/FoodRecipe.vue

@@ -7,21 +7,14 @@
                     @change="queryFoodSegmented"/>
     </div>
 
-    <div class="food-list">
-      <el-empty v-if="foodStore.recipeList.length === 0" description="暂无记录"/>
-
-      <div v-else class="list">
-        <food-card v-for="(item, index) in foodStore.recipeList"
-                   :key="index" :food-item="item"/>
-      </div>
-    </div>
+    <recipe-list />
 
     <arrive-bottom v-if="foodStore.isScrollEnd"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import FoodCard from '@/components/Food/FoodCard.vue'
+import RecipeList from '@/components/Food/RecipeList.vue'
 import ArriveBottom from '@/components/ArriveButton.vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -88,13 +81,5 @@ const handleScroll = () => {
   .query-item {
     padding: 5px 10px;
   }
-
-  .food-list {
-    .list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-  }
 }
 </style>

src/components/Food/RecipeList.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="food-list">
+    <el-empty v-if="foodStore.recipeList.length === 0" description="暂无记录"/>
+
+    <div v-else class="list">
+      <food-card v-for="(item, index) in foodStore.recipeList"
+                 :key="index" :item="item"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FoodCard from '@/components/Food/FoodCard.vue'
+import { useFoodStore } from '@/store/food'
+
+const foodStore = useFoodStore()
+</script>
+
+
+<style lang="scss">
+.food-list {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/components/Moment/MomentCard.vue

@@ -124,9 +124,9 @@ const editClick = () => {
 
 const handleLikeClick = () => {
   if (isLike.value) {
-    foodStore.deleteLike(props.item?.id as number)
+    foodStore.deleteMomentLike(props.item?.id as number)
   } else {
-    foodStore.addLike(props.item?.id as number)
+    foodStore.addMomentLike(props.item?.id as number)
   }
 }
 
@@ -135,7 +135,7 @@ const onSelectEmoji = (emoji) => {
 }
 
 const sendCommentClick = async () => {
-  await foodStore.addComment(props.item?.id as number, momentInfo.comment)
+  await foodStore.addMomentComment(props.item?.id as number, momentInfo.comment)
 
   momentInfo.comment = ''
   momentInfo.isShowComment = false

src/components/Moment/MomentList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="food-moment"
        v-loading="foodStore.isLoading" element-loading-text="加载中">
-    <el-empty v-if="foodStore.momentList.length === 0" description="暂无朋友圈记录"/>
+    <el-empty v-if="foodStore.momentList.length === 0" description="暂无记录"/>
 
     <div v-else class="moment-list">
       <moment-card v-for="(item, index) in foodStore.momentList"

src/components/Stats/FoodChart.vue

@@ -18,7 +18,8 @@
         <span class="title">📊排行榜</span>
       </div>
       <div class="chart rank-chart">
-        <food-rank />
+        <food-rank v-if="foodStore.rankStats.length > 0"/>
+        <el-empty v-else description="暂无数据"/>
       </div>
     </div>
   </div>

src/store/food.ts

@@ -16,16 +16,21 @@ import {
   updateRecordApi,
   queryCategoryApi,
   queryRecordStatsApi,
-  queryCategoryStatsApi, queryRankStatsApi, queryRecipeApi
+  queryCategoryStatsApi,
+  queryRankStatsApi,
+  queryRecipeApi,
+  queryRecipeByUserApi,
+  deleteRecipeLikeApi,
+  addRecipeLikeApi,
+  addRecipeCommentApi
 } from '@/apis/food.ts'
 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,
-  addLikeApi,
-  addMomentApi,
-  deleteLikeApi,
+  addMomentLikeApi,
+  addMomentApi, addMomentCommentApi,
+  deleteMomentLikeApi,
   deleteMomentApi, queryMomentByIdApi,
   queryMomentListApi,
   updateMomentApi
@@ -42,7 +47,11 @@ export const useFoodStore = defineStore('food', {
       remark: '',
       materialList: [],
       stepList: [],
-      recordList: []
+      recordList: [],
+      likeCount: 0,
+      likeList: [],
+      commentCount: 0,
+      commentList: []
     } as IRecipe,
     recordList: [] as IRecord[],
     currentRecord: {
@@ -119,6 +128,11 @@ export const useFoodStore = defineStore('food', {
       this.isRefresh = !this.isRefresh
       this.isLoading = false
     },
+    async queryRecipeByUser(id: number) {
+      this.isLoading = true
+      this.recipeList = await queryRecipeByUserApi(id)
+      this.isLoading = false
+    },
     async queryRecordList() {
       const { year, month } = this.queryRecord
       const date = this.queryDateType === 'year' ? year : month
@@ -211,20 +225,36 @@ export const useFoodStore = defineStore('food', {
       }
       await this.queryMomentList()
     },
-    async addComment(id: number, content: string) {
-      await addCommentApi(id, content)
+    async addMomentComment(id: number, content: string) {
+      await addMomentCommentApi(id, content)
       await this.queryMomentList()
     },
-    async addLike(id: number) {
-      await addLikeApi(id)
+    async addMomentLike(id: number) {
+      await addMomentLikeApi(id)
       await this.queryMomentList()
     },
-    async deleteLike(id: number) {
-      await deleteLikeApi(id)
+    async deleteMomentLike(id: number) {
+      await deleteMomentLikeApi(id)
       await this.queryMomentList()
     },
+    async addRecipeComment(id: number, content: string) {
+      await addRecipeCommentApi(id, content)
+      await this.queryRecipe(this.currentRecipe.id as number)
+    },
+    async addRecipeLike(id: number) {
+      await addRecipeLikeApi(id)
+      await this.queryRecipe(this.currentRecipe.id as number)
+    },
+    async deleteRecipeLike(id: number) {
+      await deleteRecipeLikeApi(id)
+      await this.queryRecipe(this.currentRecipe.id as number)
+    },
     getEmptyRecipe(): IRecipe {
       return {
+        commentCount: 0,
+        commentList: [],
+        likeCount: 0,
+        likeList: [],
         category: '',
         materialList: [],
         name: '',

src/styles/life.detail.module.scss

@@ -204,6 +204,9 @@
 
     .button-container {
       align-self: center;
+
+      display: flex;
+      gap: 20px;
     }
 
     .food-comment-list {

src/types/food.ts

@@ -71,7 +71,7 @@ export interface IRecipe {
    * 成果
    */
   recordList: IRecord[];
-  likeList: string[];
+  likeList: number[];
   likeCount: number;
   commentList: IComment[];
   commentCount: number;

src/views/moment/profile.vue

@@ -9,13 +9,14 @@
         <moment-list />
       </el-tab-pane>
       <el-tab-pane label="菜谱记录" name="recipe">
-
+        <recipe-list />
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script lang="ts" setup>
+import RecipeList from '@/components/Food/RecipeList.vue'
 import ProfileCard from '@/components/Profile/ProfileCard.vue'
 import { useFoodStore } from '@/store/food.ts'
 import { onMounted, ref } from 'vue'
@@ -35,6 +36,9 @@ const handleClick = async (tab: TabsPaneContext) => {
     case 'moment':
       await foodStore.queryMoment(foodStore.currentMomentUserId)
       break
+    case 'recipe':
+      await foodStore.queryRecipeByUser(foodStore.currentMomentUserId)
+      break
     default:
       break
   }

src/views/record/detail[id].vue

@@ -14,7 +14,12 @@
       </div>
 
       <div class="button-container">
-        <el-button circle><i class="fa-regular fa-thumbs-up"></i></el-button>
+        <el-badge :value="foodStore.currentRecipe.likeList.length" :max="9">
+          <el-button :type="isLike ? 'danger' : 'default'"
+                     circle @click="handleLikeClick()">
+            <i class="fa-regular fa-thumbs-up"></i>
+          </el-button>
+        </el-badge>
         <el-button circle><i class="fa-regular fa-star"></i></el-button>
 <!--        <el-button circle><i class="fa-regular fa-comment"></i></el-button>-->
       </div>
@@ -23,23 +28,35 @@
 </template>
 
 <script setup lang="ts">
-import { useFoodStore } from '@/store/food.ts'
-import { useAppStore } from '@/store/app.ts'
-import { useRoute } from 'vue-router'
 import FoodBasicData from '@/components/Food/FoodBasicData.vue'
 import FoodMaterialData from '@/components/Food/FoodMaterialData.vue'
 import FoodStepData from '@/components/Food/FoodStepData.vue'
 import FoodOthersData from '@/components/Food/FoodOthersData.vue'
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useUserStore } from '@/store/user.ts'
+import { useFoodStore } from '@/store/food.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useRoute } from 'vue-router'
 
 const foodStore = useFoodStore()
 const appStore = useAppStore()
 const route = useRoute()
+const userStore = useUserStore()
 
 onMounted(() => {
   appStore.isShowMobileBack = true
   foodStore.queryRecipe(route.params.id as number)
 })
+
+const isLike = computed(() => foodStore.currentRecipe.likeList.includes(userStore.getUserId()))
+
+const handleLikeClick = () => {
+  if (isLike.value) {
+    foodStore.deleteRecipeLike(foodStore.currentRecipe.id as number)
+  } else {
+    foodStore.addRecipeLike(foodStore.currentRecipe.id as number)
+  }
+}
 </script>
 
 <style lang="scss">