feat:增加菜谱显示模块

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 { computed, ref, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+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.handleFoodRecipeApi(foodStore.currentFoodRecipe)
+    foodStore.recipeApiType = 'DELETE'
+    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.handleFoodRecordApi(foodStore.currentFoodRecord)
+    foodStore.recordApiType = 'DELETE'
+    foodStore.handleRecordApi(foodStore.currentRecord)
     history.back()
   })
 }