feat:重构模块
This commit is contained in:
46
src/views/food/detail[id].vue
Normal file
46
src/views/food/detail[id].vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="life-detail common-mobile-view">
|
||||
<span class="title">{{ foodStore.currentFoodRecipe.name }}</span>
|
||||
|
||||
<section>
|
||||
<div class="info-container">
|
||||
<food-basic-data/>
|
||||
|
||||
<food-material-data/>
|
||||
|
||||
<food-step-data/>
|
||||
|
||||
<food-others-data/>
|
||||
</div>
|
||||
|
||||
<div class="record-container card-item">
|
||||
<food-record-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/Data/FoodBasicData.vue'
|
||||
import FoodMaterialData from '@/components/Food/Data/FoodMaterialData.vue'
|
||||
import FoodStepData from '@/components/Food/Data/FoodStepData.vue'
|
||||
import FoodOthersData from '@/components/Food/Data/FoodOthersData.vue'
|
||||
import FoodRecordData from '@/components/Food/Data/FoodRecordData.vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
const appStore = useAppStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(() => {
|
||||
appStore.isShowMobileBack = true
|
||||
foodStore.queryFoodRecipe(route.params.id as number)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/home/life.detail.module";
|
||||
</style>
|
||||
58
src/views/food/recipe.vue
Normal file
58
src/views/food/recipe.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div ref="foodRecipeRef" class="mobile-food-view common-mobile-view">
|
||||
<food-query />
|
||||
|
||||
<div class="food-list">
|
||||
<el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
|
||||
|
||||
<div v-else class="list">
|
||||
<food-card v-for="(item, index) in foodStore.foodRecipeList"
|
||||
:key="index" :food-item="item"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<arrive-bottom v-if="foodStore.isScrollEnd"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import FoodQuery from '@/components/Food/FoodQuery.vue'
|
||||
import FoodCard from '@/components/Food/FoodCard.vue'
|
||||
import ArriveBottom from '@/components/Common/ArriveButton.vue'
|
||||
import { useFoodStore } from '@/store/food.ts'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const foodRecipeRef = ref()
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
onMounted(async () => {
|
||||
foodStore.pageInfo = {
|
||||
currentPage: 1,
|
||||
pageSize: 3,
|
||||
totalSize: 1
|
||||
}
|
||||
foodStore.foodRecipeList = []
|
||||
await foodStore.queryMobileFoodRecipeList()
|
||||
foodRecipeRef.value.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
foodRecipeRef.value.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
const handleScroll = () => {
|
||||
const el = foodRecipeRef.value
|
||||
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
|
||||
const { currentPage, pageSize, totalSize } = foodStore.pageInfo
|
||||
foodStore.isScrollEnd = pageSize * currentPage > totalSize
|
||||
if (!foodStore.isScrollEnd) {
|
||||
foodStore.pageInfo.currentPage++
|
||||
foodStore.queryMobileFoodRecipeList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/home/food.mobile.module";
|
||||
</style>
|
||||
35
src/views/food/record.vue
Normal file
35
src/views/food/record.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="mobile-food-view common-mobile-view">
|
||||
<food-stats />
|
||||
|
||||
<food-calendar />
|
||||
|
||||
<draggable-button @click="addClick"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import FoodStats from '@/components/Food/FoodStats.vue'
|
||||
import FoodCalendar from '@/components/Food/FoodCalendar.vue'
|
||||
import DraggableButton from '@/components/Common/DraggableButton.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useFoodStore } from '@/store/food.ts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
await foodStore.refreshInfo()
|
||||
})
|
||||
|
||||
const addClick = () => {
|
||||
foodStore.foodRecordApiType = 'ADD'
|
||||
foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
|
||||
router.push({ name: 'FoodRecordForm' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/home/food.mobile.module";
|
||||
</style>
|
||||
99
src/views/food/recordForm.vue
Normal file
99
src/views/food/recordForm.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="mobile-food-record-form common-mobile-view">
|
||||
<el-form ref="formRef" :model="foodStore.currentFoodRecord"
|
||||
:rules="rules" label-width="80">
|
||||
<el-form-item label="菜谱名称" prop="name">
|
||||
<el-select
|
||||
v-model="foodStore.currentFoodRecord.name"
|
||||
@focus="foodStore.queryFoodNameList()"
|
||||
:disabled="foodStore.foodRecordApiType === 'UPDATE'"
|
||||
placeholder="请选择菜谱名称">
|
||||
<el-option
|
||||
v-for="(item, index) in foodStore.foodNameList"
|
||||
:key="index" :label="item" :value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="完成时间" prop="date">
|
||||
<el-date-picker
|
||||
v-model="foodStore.currentFoodRecord.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"
|
||||
:service-url="fileServiceUrl"
|
||||
:image-limit="1"
|
||||
:service-file-root-path="serviceFileRootPath"
|
||||
:image-path="foodStore.foodImagePath"/>
|
||||
</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 { FormRules } from 'element-plus'
|
||||
import { foodRecordRules } from '@/utils/element/elRules.ts'
|
||||
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||
|
||||
const rules = reactive<FormRules>(foodRecordRules)
|
||||
|
||||
const formRef = ref()
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
const confirmClick = () => {
|
||||
formRef.value.validate().then(() => {
|
||||
foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
|
||||
history.back()
|
||||
})
|
||||
}
|
||||
|
||||
const cancelClick = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
const deleteClick = () => {
|
||||
commonElMessageBox('是否确认删除该记录?').then(() => {
|
||||
foodStore.foodRecordApiType = 'DELETE'
|
||||
foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
|
||||
history.back()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mobile-food-record-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.button-container {
|
||||
align-self: center;
|
||||
}
|
||||
}</style>
|
||||
Reference in New Issue
Block a user