feat:增加菜谱显示模块

src/apis/moment.ts

@@ -1,13 +1,6 @@
 import { cloudService } from './index'
 import type { IComment, IMoment } from '@/types/food'
 
-export const addCommentApi = (id: number, comment: IComment): Promise<boolean> =>
-  cloudService({
-    url: `/food-service/moment/${id}/comment`,
-    method: 'post',
-    data: comment
-  })
-
 export const addMomentApi = (moment: IMoment): Promise<boolean> =>
   cloudService({
     url: '/food-service/moment',
@@ -15,9 +8,22 @@ export const addMomentApi = (moment: IMoment): Promise<boolean> =>
     data: moment
   })
 
+export const updateMomentApi = (id: number, moment: IMoment): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/moment/${id}`,
+    method: 'put',
+    data: moment
+  })
+
 export const queryMomentApi = (): Promise<IMoment[]> =>
   cloudService({
     url: '/food-service/moment',
     method: 'get'
   })
 
+export const addCommentApi = (id: number, content: string): Promise<boolean> =>
+  cloudService({
+    url: `/food-service/moment/${id}/comment`,
+    method: 'post',
+    params: { content }
+  })

src/components/Food/FoodBasicData.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-basic"/>
+      <span class="sub-title">基础信息</span>
+    </div>
+
+    <div class="info food-basic-info">
+      <el-tag v-if="foodStore.currentRecipe.category">
+        {{ foodStore.currentRecipe.category }}
+      </el-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodCard.vue

@@ -96,7 +96,7 @@ const getRecord = (recordList: IRecord[]) => {
 const editClick = async () => {
   const id = props.foodItem?.id
   foodStore.recipeApiType = 'UPDATE'
-  await foodStore.queryRecipe(id as number)
+  // await foodStore.queryRecipe(id as number)
   // foodStore.foodRecipeDialog = {
   //   title: '编辑菜谱',
   //   visible: true,
@@ -105,13 +105,13 @@ const editClick = async () => {
 }
 
 const viewClick = async () => {
-  await router.push({ name: 'MobileHomeFoodDetailId', params: { id: props.foodItem?.id } })
+  await router.push({ name: 'RecordDetailId', params: { id: props.foodItem?.id } })
 }
 
 const deleteClick = () => {
   foodStore.recipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
-    foodStore.handleRecipeApi(props.foodItem)
+    // foodStore.handleRecipeApi(props.foodItem as IRecipe)
   })
 }
 

src/components/Food/FoodMaterialData.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-material"/>
+      <span class="sub-title">食材信息</span>
+    </div>
+
+    <div class="info material-info">
+      <div class="material-item">
+        <span class="material-title">主料</span>
+        <div v-if="getFoodMaterial('主料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('主料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">配料</span>
+        <div v-if="getFoodMaterial('辅料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('辅料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+
+      <div class="material-item">
+        <span class="material-title">辅料</span>
+        <div v-if="getFoodMaterial('调料').length > 0" class="material-content">
+          <el-tag v-for="(item, index) in getFoodMaterial('调料')"
+                  :key="index">{{ `${item.name} ${item.amount}` }}
+          </el-tag>
+        </div>
+        <div v-else class="material-content">
+          <el-tag>无</el-tag>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+
+const getFoodMaterial = (type: string) => {
+  return foodStore.currentRecipe.materialList.filter((item) => {
+    return item.type === type
+  })
+}
+</script>

src/components/Food/FoodMaterialForm.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IMaterial } from '@/types/food'
+import type { IMaterial } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 

src/components/Food/FoodOthersData.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-others"/>
+      <span class="sub-title">其他信息</span>
+    </div>
+
+    <div class="others-info">
+      <span class="others-title">备注：</span>
+      <span v-if="foodStore.currentRecipe.remark">
+        {{ foodStore.currentRecipe.remark }}
+      </span>
+      <span v-else>
+        无
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { SvgIcon } from 'vue3-common'
+
+const foodStore = useFoodStore()
+</script>

src/components/Food/FoodRecordData.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="info-item">
+    <div class="title-info">
+      <svg-icon name="home-work"/>
+      <span class="sub-title">成果展示</span>
+    </div>
+
+    <div v-if="foodStore.currentRecipe.recordList.length > 0" class="info record-info">
+      <el-timeline>
+        <el-timeline-item v-for="(item, index) in foodStore.currentRecipe.recordList"
+                          :key="index" :timestamp="item.date" placement="top">
+          <el-card class="record-card">
+            <span class="record-content">完成人：{{ item.person }}</span>
+            <el-image v-if="item.imageUrl"
+                      :src="serviceFileRootPath + item.imageUrl"
+                      :preview-src-list="[serviceFileRootPath + item.imageUrl]"
+                      fit="contain" alt="暂无图片" class="record-image"/>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    <el-empty v-else description="暂无成果"/>
+  </div>
+</template>
+
+<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/Food/FoodStepData.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="info-item card-item">
+    <div class="title-info">
+      <svg-icon name="home-step"/>
+      <span class="sub-title">菜谱信息</span>
+    </div>
+
+    <div class="step-info">
+      <div v-for="(item, index) in foodStore.currentRecipe.stepList"
+           :key="index" class="step-container">
+        <span class="step-number">第{{ index + 1 }}步</span>
+        <div class="step-body">
+          <span class="step-content">{{ item.content }}</span>
+          <img v-if="item.imageUrl"
+               :src="serviceFileRootPath + item.imageUrl" alt="暂无图片" class="step-image"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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/Food/FoodStepForm.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food'
-import { IStep } from '@/types/food'
+import type { IStep } from '@/types/food'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { serviceFileRootPath } from '@/utils'

src/components/Food/FoodTimeline.vue

@@ -3,6 +3,7 @@
     <el-date-picker
         v-model="currentYear"
         type="year" placeholder="请选择年份"
+        :editable="false"
         style="width: 100px;"
         @change="changeDateEvent"
     />

src/components/Moment/MomentCard.vue

@@ -9,9 +9,10 @@
       <el-image style="width: 200px; height: 200px"
                 src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
 
-      <p>{{ props.item.date }}</p>
+      <p>{{ formatTimeAgo(props.item.date) }}</p>
 
       <div class="button-container">
+        <el-button :icon="Edit" circle size="small" @click="editClick()"/>
         <el-button circle size="small">
           <i class="fa-regular fa-thumbs-up"></i>
         </el-button>
@@ -26,7 +27,6 @@
             v-model="momentInfo.comment"
             maxlength="100" placeholder="平等表达 友善交流"
             show-word-limit type="textarea" :rows="3"
-            @blur="momentInfo.isShowComment = false"
         />
 
         <el-popover ref="emojiPopoverRef" placement="bottom" :width="300" trigger="click">
@@ -44,11 +44,11 @@
 
         <el-button type="primary"
                    :disabled="momentInfo.comment.length === 0"
-                   @click="sendCommentClick"
+                   @click="sendCommentClick()"
                    class="send-button">发送</el-button>
       </div>
 
-      <div class="moment-comment-list">
+      <div v-if="props.item.commentList.length > 0" class="moment-comment-list">
         <div v-for="(comment, index) in props.item.commentList" :key="index"
              class="moment-comment-item">
           <span class="name">{{ comment.username }}：</span>
@@ -63,9 +63,15 @@
 import EmojiPicker from 'vue3-emoji-picker'
 import 'vue3-emoji-picker/css'
 import { Edit } from '@element-plus/icons-vue'
-import { defineProps, PropType, reactive } from 'vue'
+import { defineProps, reactive } from 'vue'
-import { IMoment } from '@/types/food'
+import type { PropType } from 'vue'
+import type { IMoment } from '@/types/food'
 import { serviceFileRootPath } from '@/utils'
+import { formatTimeAgo } from '@/utils/dateUtils'
+import { useFoodStore } from '@/store/food'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps({
   item: {
@@ -74,16 +80,26 @@ const props = defineProps({
   }
 })
 
+const foodStore = useFoodStore()
+
 const momentInfo = reactive({
   isShowComment: false,
   comment: ''
 })
 
-const onSelectEmoji = (emoji) => {
+const editClick = () => {
+  foodStore.momentApiType = 'UPDATE'
+  foodStore.currentMoment = props.item as IMoment
+  router.push('/moment/momentForm')
+}
 
+const onSelectEmoji = (emoji) => {
+  momentInfo.comment += emoji.i
 }
 
 const sendCommentClick = async () => {
+  await foodStore.addComment(props.item?.id as number, momentInfo.comment)
+
   momentInfo.comment = ''
   momentInfo.isShowComment = false
 }

src/layout/index.vue

@@ -5,12 +5,58 @@
     <router-view />
 
     <tab-bar />
+
+    <draggable-button v-show="checkIsShow()" @click="addClick"/>
   </section>
 </template>
 
 <script lang="ts" setup>
 import TitleBar from '@/layout/TitleBar.vue'
 import TabBar from '@/layout/TabBar.vue'
+import DraggableButton from '@/components/DraggableButton.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAppStore } from '@/store/app'
+import { useFoodStore } from '@/store/food'
+
+const router = useRouter()
+const route = useRoute()
+const appStore = useAppStore()
+const foodStore = useFoodStore()
+
+const checkIsShow = (): boolean => {
+  if (route.path.includes('Form') || route.path.includes('detail')) {
+    return false
+  }
+
+  return route.path.includes('record') || route.path.includes('moment')
+}
+
+const addClick = () => {
+  appStore.isShowMobileBack = true
+
+  if (route.path.includes('record')) {
+    switch (foodStore.recordSegment) {
+      case 'recipe':
+        foodStore.recipeApiType = 'ADD'
+        foodStore.currentRecipe = foodStore.getEmptyRecipe()
+        router.push('/record/recipeForm')
+        break
+      case 'daily':
+        foodStore.recordApiType = 'ADD'
+        foodStore.currentRecord = foodStore.getEmptyRecord()
+        router.push('/record/recordForm')
+        break
+      default:
+        break
+    }
+  }
+
+  if (route.path.includes('moment')) {
+    foodStore.momentApiType = 'ADD'
+    foodStore.currentMoment = foodStore.getEmptyMoment()
+    router.push('/moment/momentForm')
+  }
+}
 </script>
 
 <style lang="scss">

src/store/food.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import type {
   IRecipe, IMaterial, IStep,
-  IStats, IRecord, IMoment
+  IStats, IRecord, IMoment, IFoodSegment, IComment
 } from '@/types/food'
 import {
   addRecipeApi,
@@ -21,7 +21,7 @@ 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 { queryMomentApi } from '@/apis/moment'
+import { addCommentApi, addMomentApi, queryMomentApi, updateMomentApi } from '@/apis/moment'
 
 export const useFoodStore = defineStore('food', {
   state: () => ({
@@ -45,6 +45,7 @@ export const useFoodStore = defineStore('food', {
       person: '',
       imageUrl: ''
     } as IRecord,
+    recordSegment: 'recipe' as IFoodSegment,
     momentList: [] as IMoment[],
     foodNameList: [] as string[],
     queryRecipeSegment: {
@@ -73,6 +74,10 @@ export const useFoodStore = defineStore('food', {
     editStepIndex: 0,
     recordApiType: 'ADD' as IHandleApi,
     editRecordIndex: 0,
+    currentMoment: {
+      content: ''
+    } as IMoment,
+    momentApiType: 'ADD' as IHandleApi,
     imagePath: 'food',
     rateColorList: ['#E2DEDC', '#F7BA2A', '#009FA8'],
     pageInfo: {
@@ -98,7 +103,7 @@ export const useFoodStore = defineStore('food', {
       // const result = await queryFoodRecipeByPageApi(currentPage, pageSize, this.queryRecipe)
       // this.foodRecipeList.push(...result.records)
       // this.pageInfo.totalSize = result.total
-      this.recipeList = await queryRecipeApi(this.queryRecipe)
+      this.recipeList = await queryRecipeApi(this.queryRecipeSegment)
     },
     async queryRecordList() {
       const { year, month } = this.queryRecord
@@ -163,6 +168,29 @@ export const useFoodStore = defineStore('food', {
       }
       await this.refreshInfo()
     },
+    async handleMomentApi(moment: IMoment) {
+      switch (this.momentApiType) {
+        case 'ADD':
+          await addMomentApi(moment)
+          ElMessage.success('发布朋友圈成功')
+          break
+        case 'UPDATE':
+          await updateMomentApi(moment.id as number, moment)
+          ElMessage.success('更新朋友圈成功')
+          break
+        case 'DELETE':
+          // await deleteRecordApi(record.id as number)
+          ElMessage.success('删除朋友圈成功')
+          break
+        default:
+          break
+      }
+      await queryMomentApi()
+    },
+    async addComment(id: number, content: string) {
+      await addCommentApi(id, content)
+      await this.queryMomentList()
+    },
     async refreshInfo() {
       await this.queryRecipeList()
       await this.queryRecordList()
@@ -202,6 +230,11 @@ export const useFoodStore = defineStore('food', {
         imageUrl: '',
         name: ''
       }
+    },
+    getEmptyMoment(): IMoment {
+      return {
+        content: ''
+      }
     }
   }
 })

src/styles/life.detail.module.scss

@@ -0,0 +1,232 @@
+.life-detail {
+  position: relative;
+  display: grid;
+  grid-template-rows: 40px 1fr;
+  align-items: center;
+
+  .title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.4rem;
+  }
+
+  section {
+    .info-container, .record-container {
+      .info-item {
+        padding: 1vh 1vw;
+        display: flex;
+        flex-direction: column;
+        gap: 1vh;
+
+        .title-info {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          svg {
+            height: 1.4em;
+            width: 1.4em;
+          }
+
+          .sub-title {
+            font-size: large;
+            font-weight: bold;
+          }
+        }
+
+        .info {
+          margin-left: 2vw;
+        }
+      }
+    }
+
+    .info-container {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .food-basic-info {
+        display: flex;
+        gap: 1vh;
+      }
+
+      .travel-basic-info {
+        display: flex;
+        flex-direction: column;
+        gap: 1vh;
+
+        .basic-item {
+          display: flex;
+          flex-direction: column;
+          gap: 1vh;
+
+          .basic-title {
+            font-weight: bold;
+          }
+
+          .basic-content {
+            margin-left: 1vw;
+            display: flex;
+            gap: 1vh;
+          }
+        }
+      }
+
+      .material-info {
+        display: flex;
+        flex-direction: column;
+        gap: 1vh;
+
+        .material-item {
+          display: flex;
+          flex-direction: column;
+          gap: 1vh;
+
+          .material-title {
+            font-weight: bold;
+          }
+
+          .material-content {
+            margin-left: 1vw;
+            display: flex;
+            gap: 1vh;
+          }
+        }
+      }
+
+      .step-info {
+        margin-left: 1vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 1vh;
+        min-height: 28vh;
+
+        .step-container {
+          display: grid;
+          grid-template-columns: 50px 1fr;
+          gap: 1vw;
+
+          .step-body {
+            display: flex;
+            flex-direction: column;
+            gap: 1vh;
+
+            .step-content {
+              font-weight: bold;
+            }
+
+            .step-image {
+              height: 100%;
+              width: 100%;
+
+              max-height: 300px;
+              max-width: 300px;
+            }
+          }
+        }
+
+      }
+
+      .others-info {
+        margin-left: 1vw;
+        display: flex;
+        gap: 1vw;
+
+        .others-title {
+          font-weight: bold;
+        }
+      }
+
+      .guide-info {
+        display: flex;
+        flex-direction: column;
+        gap: 1vh;
+
+        .guide-item {
+          display: flex;
+          flex-direction: column;
+          gap: 1vh;
+
+          .guide-title {
+            font-weight: bold;
+          }
+
+          .guide-content {
+            min-height: 6vh;
+            margin-left: 1vw;
+            display: flex;
+            gap: 1vh;
+          }
+        }
+      }
+    }
+
+    .info-container .info-item:last-child {
+      flex-grow: 1;
+    }
+
+    .record-container {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 2vh;
+
+      .record-info {
+        .el-timeline {
+          .el-timeline-item__wrapper {
+            .el-timeline-item__timestamp {
+              color: #000000;
+              font-weight: bold;
+            }
+          }
+        }
+
+        .record-card {
+          .el-card__body {
+            display: grid;
+            grid-template-rows: 20px 250px;
+            gap: 10px;
+
+            .record-content {
+              font-weight: bold;
+            }
+
+            .el-carousel {
+              .el-carousel__container {
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .back-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .life-detail {
+    section {
+      height: calc(100vh - 40px - 40px - 4vh);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .life-detail {
+    section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+}

src/types/food.ts

@@ -87,10 +87,10 @@ export interface IComment {
 }
 
 export interface IMoment {
-  id: number;
+  id?: number;
-  username: string;
+  username?: string;
-  avatar: string;
+  avatar?: string;
   content: string;
-  date: string;
+  date?: string;
-  commentList: IComment[];
+  commentList?: IComment[];
 }

src/utils/dateUtils.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+export const formatTimeAgo = (date: string | Date) => {
+  return dayjs(date).locale('zh-cn').fromNow()
+}

src/utils/element/elRules.ts

@@ -69,3 +69,9 @@ export const foodRecordRules = {
     { required: true, message: '请选择完成人', trigger: 'change' }
   ]
 }
+
+export const foodMomentRules = {
+  content: [
+    { required: true, message: '请输入内容', trigger: 'blur' }
+  ]
+}

src/views/moment/momentForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="moment-form common-mobile-view">
+    <el-form ref="formRef" :model="foodStore.currentMoment"
+             :rules="rules" label-width="80">
+      <el-form-item label="发布内容" prop="content">
+        <el-input v-model="foodStore.currentMoment.content"
+                  type="textarea" :rows="3"
+                  :maxlength="100" show-word-limit
+                  placeholder="请输入内容"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="danger" @click="deleteClick">删除</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+import { ref, reactive } from 'vue'
+import type { FormRules } from 'element-plus'
+import { foodMomentRules } from '@/utils/element/elRules'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(foodMomentRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await foodStore.handleMomentApi(foodStore.currentMoment)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该朋友圈?').then(() => {
+    foodStore.momentApiType = 'DELETE'
+    foodStore.handleMomentApi(foodStore.currentMoment)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.moment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="life-detail common-mobile-view">
+    <span class="title">{{ foodStore.currentRecipe.name }}</span>
+
+    <section>
+      <div class="info-container">
+        <food-basic-data/>
+
+        <food-material-data/>
+
+        <food-step-data/>
+
+        <food-others-data/>
+      </div>
+    </section>
+  </div>
+</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'
+
+const foodStore = useFoodStore()
+const appStore = useAppStore()
+const route = useRoute()
+
+onMounted(() => {
+  appStore.isShowMobileBack = true
+  foodStore.queryRecipe(route.params.id as number)
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/life.detail.module.scss";
+</style>

src/views/record/index.vue

@@ -9,26 +9,24 @@
 
       <div class="query-item">
         <span>查看类型：</span>
-        <el-segmented v-model="foodInfo.recordSegment"
+        <el-segmented v-model="foodStore.recordSegment"
                       :options="recordSegmentList"/>
       </div>
     </div>
 
     <hr style="width: 100%;"/>
 
-    <div v-if="foodInfo.recordSegment === 'recipe'" class="food-calendar">
+    <div v-if="foodStore.recordSegment === 'recipe'" class="food-calendar">
       <food-recipe />
     </div>
 
-    <div v-if="foodInfo.recordSegment === 'daily'" class="food-calendar">
+    <div v-if="foodStore.recordSegment === 'daily'" class="food-calendar">
       <food-daily />
     </div>
 
-    <div v-if="foodInfo.recordSegment === 'timeline'" class="food-calendar">
+    <div v-if="foodStore.recordSegment === 'timeline'" class="food-calendar">
       <food-timeline />
     </div>
-
-    <draggable-button v-show="foodInfo.recordSegment !== 'timeline'" @click="addClick"/>
   </div>
 </template>
 
@@ -36,20 +34,13 @@
 import FoodRecipe from '@/components/Food/FoodRecipe.vue'
 import FoodDaily from '@/components/Food/FoodDaily.vue'
 import FoodTimeline from '@/components/Food/FoodTimeline.vue'
-import DraggableButton from '@/components/DraggableButton.vue'
 import { Search } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
 import { useFoodStore } from '@/store/food'
-import type { IFoodSegment } from '@/types/food'
-import { useRouter } from 'vue-router'
-import { useAppStore } from '@/store/app'
 
 const foodStore = useFoodStore()
-const router = useRouter()
-const appStore = useAppStore()
 
 const foodInfo = reactive({
-  recordSegment: 'recipe' as IFoodSegment,
   query: ''
 })
 
@@ -65,25 +56,6 @@ const recordSegmentList = [{
   label: '时间轴',
   value: 'timeline'
 }]
-
-const addClick = () => {
-  appStore.isShowMobileBack = true
-
-  switch (foodInfo.recordSegment) {
-    case 'recipe':
-      foodStore.recipeApiType = 'ADD'
-      foodStore.currentRecipe = foodStore.getEmptyRecipe()
-      router.push('/record/recipeForm')
-      break
-    case 'daily':
-      foodStore.recordApiType = 'ADD'
-      foodStore.currentRecord = foodStore.getEmptyRecord()
-      router.push('/record/recordForm')
-      break
-    default:
-      break
-  }
-}
 </script>
 
 <style scoped lang="scss">

src/views/record/recipeForm.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="food-recipe-form common-mobile-view">
-    <el-form ref="formRef" :model="foodStore.currentFoodRecipe"
+    <el-form ref="formRef" :model="foodStore.currentRecipe"
              :rules="rules" label-width="80px">
       <el-form-item label="美食名称" prop="name">
-        <el-input v-model="foodStore.currentFoodRecipe.name" autocomplete="off"
+        <el-input v-model="foodStore.currentRecipe.name" autocomplete="off"
                   placeholder="请输入名称" clearable
                   show-word-limit maxlength="20">
         </el-input>
       </el-form-item>
 
       <el-form-item label="美食菜系" prop="category">
-        <el-select v-model="foodStore.currentFoodRecipe.category"
+        <el-select v-model="foodStore.currentRecipe.category"
                    placeholder="请选择或输入菜系">
           <el-option v-for="(item, index) in foodCategoryList"
                      :key="index" :label="item" :value="item"/>
@@ -18,7 +18,7 @@
       </el-form-item>
 
       <el-form-item label="推荐指数" prop="recommendRate">
-        <el-rate v-model="foodStore.currentFoodRecipe.recommendRate"
+        <el-rate v-model="foodStore.currentRecipe.recommendRate"
                  :colors="foodStore.rateColorList"/>
       </el-form-item>
 
@@ -31,7 +31,7 @@
       </el-form-item>
 
       <el-form-item label="备注">
-        <el-input v-model="foodStore.currentFoodRecipe.remark" autocomplete="off"
+        <el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
                   placeholder="请输入备注" clearable
                   show-word-limit maxlength="20">
         </el-input>
@@ -50,8 +50,8 @@
 import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
 import FoodStepForm from '@/components/Food/FoodStepForm.vue'
 import { useFoodStore } from '@/store/food'
-import { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
-import { computed, ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { foodRules } from '@/utils/element/elRules'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 
@@ -61,14 +61,12 @@ const foodStore = useFoodStore()
 
 const foodCategoryList = ['家常菜', '淮扬菜', '鲁菜', '川菜', '粤菜', '闽菜', '浙菜', '湘菜', '徽菜', '其他']
 
-const dialogData = computed(() => foodStore.foodRecipeDialog)
-
 /**
  * 点击确认按钮
  */
 const confirmClick = () => {
   formRef.value.validate().then(() => {
-    foodStore.handleFoodRecipeApi(foodStore.currentFoodRecipe)
+    foodStore.handleRecipeApi(foodStore.currentRecipe)
     history.back()
   })
 }
@@ -79,8 +77,8 @@ const cancelClick = () => {
 
 const deleteClick = () => {
   commonElMessageBox('是否确认删除该菜谱?').then(() => {
-    foodStore.foodRecipeApiType = 'DELETE'
+    foodStore.recipeApiType = 'DELETE'
-    foodStore.handleFoodRecipeApi(foodStore.currentFoodRecipe)
+    foodStore.handleRecipeApi(foodStore.currentRecipe)
     history.back()
   })
 }

src/views/record/recordForm.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="food-record-form common-mobile-view">
-    <el-form ref="formRef" :model="foodStore.currentFoodRecord"
+    <el-form ref="formRef" :model="foodStore.currentRecord"
              :rules="rules" label-width="80">
       <el-form-item label="菜谱名称" prop="name">
         <el-select
-            v-model="foodStore.currentFoodRecord.name"
+            v-model="foodStore.currentRecord.name"
             @focus="foodStore.queryFoodNameList()"
             allow-create filterable
-            :disabled="foodStore.foodRecordApiType === 'UPDATE'"
+            :disabled="foodStore.recordApiType === 'UPDATE'"
             placeholder="请输入或选择菜谱名称">
           <el-option
               v-for="(item, index) in foodStore.foodNameList"
@@ -18,28 +18,17 @@
 
       <el-form-item label="完成时间" prop="date">
         <el-date-picker
-            v-model="foodStore.currentFoodRecord.date"
+            v-model="foodStore.currentRecord.date"
             type="date" :editable="false" placeholder="请选择完成时间"
             value-format="YYYY-MM-DD"/>
       </el-form-item>
 
-      <el-form-item label="完成人" prop="person">
-        <el-select
-            v-model="foodStore.currentFoodRecord.person"
-            placeholder="请选择完成人">
-          <el-option
-              v-for="(item, index) in ['哥哥', '宝宝']"
-              :key="index" :label="item" :value="item"
-          />
-        </el-select>
-      </el-form-item>
-
       <el-form-item label="图片">
-        <upload-image v-model="foodStore.currentFoodRecord.imageUrl"
+        <upload-image v-model="foodStore.currentRecord.imageUrl"
                       :service-url="fileServiceUrl"
                       :image-limit="1"
                       :service-file-root-path="serviceFileRootPath"
-                      :image-path="foodStore.foodImagePath"/>
+                      :image-path="foodStore.imagePath"/>
       </el-form-item>
     </el-form>
 
@@ -55,7 +44,7 @@
 import { UploadImage } from 'vue3-common'
 import { useFoodStore } from '@/store/food.ts'
 import { ref, reactive } from 'vue'
-import { FormRules } from 'element-plus'
+import type { FormRules } from 'element-plus'
 import { foodRecordRules } from '@/utils/element/elRules'
 import { fileServiceUrl, serviceFileRootPath } from '@/utils'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
@@ -70,7 +59,7 @@ const foodStore = useFoodStore()
  */
 const confirmClick = () => {
   formRef.value.validate().then(() => {
-    foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
+    foodStore.handleRecordApi(foodStore.currentRecord)
     history.back()
   })
 }
@@ -81,8 +70,8 @@ const cancelClick = () => {
 
 const deleteClick = () => {
   commonElMessageBox('是否确认删除该记录?').then(() => {
-    foodStore.foodRecordApiType = 'DELETE'
+    foodStore.recordApiType = 'DELETE'
-    foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
+    foodStore.handleRecordApi(foodStore.currentRecord)
     history.back()
   })
 }