Cxx0822/food-hub-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加美食朋友圈接口

Browse Source
This commit is contained in:
Cxx0822
2025-06-25 16:27:42 +08:00
parent 71c107f2e5
commit eff6078a98
17 changed files with 243 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Food/FoodCard.vue
View File

@@ -2,7 +2,7 @@
<div class="life-record-card card-item">
<el-carousel v-if="props.foodItem?.recordList.length > 0"
arrow="always" @change="changeFoodEvent">
<el-carousel-item v-for="(item, index) in getFoodRecord(props.foodItem?.recordList)"
<el-carousel-item v-for="(item, index) in getRecord(props.foodItem?.recordList)"
:key="index">
<el-image :src="serviceFileRootPath + item.imageUrl"
fit="contain" alt="暂无成果">
@@ -27,11 +27,11 @@
<div class="button-info">
<el-button type="primary" :icon="Edit" circle :size="'small'"
@click="editFoodRecipeClick"/>
@click="editClick"/>
<el-button type="primary" :icon="MoreFilled" circle :size="'small'"
@click="viewFoodRecipeClick()" />
@click="viewClick()" />
<el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
@click="deleteFoodRecipeClick()" />
@click="deleteClick()" />
</div>
</div>
@@ -63,7 +63,7 @@ import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food'
import { defineProps, onMounted, reactive } from 'vue'
import type { PropType } from 'vue'
import type { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
import type { IRecipe, IRecord } from '@/types/food.ts'
import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
@@ -81,7 +81,7 @@ const foodCardInfo = reactive({
const props = defineProps({
foodItem: {
required: true,
type: Object as PropType<IFoodRecipe>
type: Object as PropType<IRecipe>
}
})
@@ -89,14 +89,14 @@ onMounted(() => {
foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
})
const getFoodRecord = (recordList: IFoodRecord[]) => {
const getRecord = (recordList: IRecord[]) => {
return recordList.filter((item) => item.imageUrl)
}
const editFoodRecipeClick = async () => {
const editClick = async () => {
const id = props.foodItem?.id
foodStore.foodRecipeApiType = 'UPDATE'
await foodStore.queryFoodRecipe(id as number)
foodStore.recipeApiType = 'UPDATE'
await foodStore.queryRecipe(id as number)
// foodStore.foodRecipeDialog = {
// title: '编辑菜谱',
// visible: true,
@@ -104,14 +104,14 @@ const editFoodRecipeClick = async () => {
// }
}
const viewFoodRecipeClick = async () => {
const viewClick = async () => {
await router.push({ name: 'MobileHomeFoodDetailId', params: { id: props.foodItem?.id } })
}
const deleteFoodRecipeClick = () => {
foodStore.foodRecipeApiType = 'DELETE'
const deleteClick = () => {
foodStore.recipeApiType = 'DELETE'
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
foodStore.handleFoodRecipeApi(props.foodItem)
foodStore.handleRecipeApi(props.foodItem)
})
}

8
src/components/Food/FoodDaily.vue
View File

@@ -45,13 +45,13 @@ const updateInfo = () => {
const getCalendarMoveDate = () => {
dailyInfo.calendarDate = formatDate(new Date())
const foodLength = foodStore.foodRecordList.length
const foodLength = foodStore.recordList.length
if (foodLength > 0) {
const today = formatDate(new Date())
if (foodStore.foodRecordList.some((item) => item.date === today)) {
if (foodStore.recordList.some((item) => item.date === today)) {
dailyInfo.calendarDate = today
} else {
dailyInfo.calendarDate = formatDate(foodStore.foodRecordList[foodLength - 1].date)
dailyInfo.calendarDate = formatDate(foodStore.recordList[foodLength - 1].date)
}
} else {
dailyInfo.calendarDate = ''
@@ -66,7 +66,7 @@ const getCalendarAttrDates = () => {
dates: new Date()
})
const dateList = foodStore.foodRecordList.map((item) => item.date)
const dateList = foodStore.recordList.map((item) => item.date)
dailyInfo.attrs.push({
dot: 'red',
dates: [...new Set(dateList)]

10
src/components/Food/FoodDailyItem.vue
View File

@@ -28,7 +28,7 @@ import { useFoodStore } from '@/store/food.ts'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app.ts'
import { formatChineseDate } from 'vue3-common/utils/dateUtil'
import type { IFoodRecord } from '@/types/food.ts'
import type { IRecord } from '@/types/food.ts'
const foodStore = useFoodStore()
const appStore = useAppStore()
@@ -55,7 +55,7 @@ onMounted(() => {
const dailyItemInfo = reactive({
date: '',
itemList: [] as IFoodRecord[]
itemList: [] as IRecord[]
})
/**
@@ -67,7 +67,7 @@ const getFoodDailyByDate = (date: string) => {
dailyItemInfo.date = formatChineseDate(date, 'MM月DD日 dddd')
dailyItemInfo.itemList = []
foodStore.foodRecordList.forEach((item) => {
foodStore.recordList.forEach((item) => {
if (item.date === date) {
dailyItemInfo.itemList.push(item)
}
@@ -79,9 +79,9 @@ const getFoodDailyByDate = (date: string) => {
/**
* 点击美食记录按钮
* @param foodRecord 美食记录
* @param record 美食记录
*/
const selectFoodRecordClick = async (foodRecord: IFoodRecord) => {
const selectFoodRecordClick = async (record: IRecord) => {
// foodStore.foodRecordApiType = 'UPDATE'
// appStore.isShowMobileBack = true

24
src/components/Food/FoodMaterialForm.vue
View File

@@ -3,7 +3,7 @@
<div class="button-container">
<el-button type="primary" @click="addClick">新增</el-button>
</div>
<el-table :data="foodStore.currentFoodRecipe.materialList"
<el-table :data="foodStore.currentRecipe.materialList"
border stripe class="material-table">
<el-table-column type="index" align="center" width="40" />
<el-table-column prop="type" label="类型" align="center" min-width="10%"/>
@@ -15,35 +15,35 @@
<script setup lang="ts">
import { useFoodStore } from '@/store/food'
import { IFoodMaterial } from '@/types/food'
import { IMaterial } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
const foodStore = useFoodStore()
const addClick = () => {
foodStore.foodMaterialApiType = 'ADD'
foodStore.foodMaterialDialog = {
foodStore.materialApiType = 'ADD'
foodStore.materialDialog = {
title: '新增食材',
visible: true,
data: foodStore.getEmptyFoodMaterial()
data: foodStore.getEmptyMaterial()
}
}
const handleEditClick = (index: number, material: IFoodMaterial) => {
foodStore.editFoodMaterialIndex = index
foodStore.foodMaterialApiType = 'UPDATE'
foodStore.foodMaterialDialog = {
const editClick = (index: number, material: IMaterial) => {
foodStore.editMaterialIndex = index
foodStore.materialApiType = 'UPDATE'
foodStore.materialDialog = {
title: '编辑食材',
visible: true,
data: deepCopyObject(material)
}
}
const handleDeleteClick = (index: number, material: IFoodMaterial) => {
foodStore.foodMaterialApiType = 'DELETE'
const deleteClick = (index: number, material: IMaterial) => {
foodStore.materialApiType = 'DELETE'
commonElMessageBox(`确认删除该食材: ${material.name}?`).then(() => {
foodStore.currentFoodRecipe.materialList.splice(index, 1)
foodStore.currentRecipe.materialList.splice(index, 1)
})
}
</script>

16
src/components/Food/FoodRecipe.vue
View File

@@ -2,16 +2,16 @@
<div ref="foodRecipeRef" class="food-recipe">
<div class="query-item card-item">
<span>分类：</span>
<el-segmented v-model="foodStore.queryRecipe.category"
<el-segmented v-model="foodStore.queryRecipeSegment.category"
:options="queryCategoryList"
@change="queryFoodSegmented"/>
</div>
<div class="food-list">
<el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
<el-empty v-if="foodStore.recipeList.length === 0" description="暂无美食记录"/>
<div v-else class="list">
<food-card v-for="(item, index) in foodStore.foodRecipeList"
<food-card v-for="(item, index) in foodStore.recipeList"
:key="index" :food-item="item"/>
</div>
</div>
@@ -33,7 +33,7 @@ const foodStore = useFoodStore()
const queryCategoryList = ref([] as ICategory[])
onMounted(async () => {
await foodStore.queryFoodCategory()
await foodStore.queryCategory()
initCategoryList()
// foodStore.foodRecipeList = []
await foodStore.refreshInfo()
@@ -50,7 +50,7 @@ const initCategoryList = () => {
label: '全部',
value: ''
})
foodStore.foodCategoryList.forEach((item) => {
foodStore.categoryList.forEach((item) => {
queryCategoryList.value.push({
label: item,
value: item
@@ -60,8 +60,8 @@ const initCategoryList = () => {
const queryFoodSegmented = async () => {
// foodStore.pageInfo.currentPage = 1
foodStore.foodRecipeList = []
await foodStore.queryFoodRecipeList()
foodStore.recipeList = []
await foodStore.queryRecipeList()
}
const handleScroll = () => {
@@ -71,7 +71,7 @@ const handleScroll = () => {
foodStore.isScrollEnd = pageSize * currentPage > totalSize
if (!foodStore.isScrollEnd) {
foodStore.pageInfo.currentPage++
foodStore.queryFoodRecipeList()
foodStore.queryRecipeList()
}
}
}

26
src/components/Food/FoodStepForm.vue
View File

@@ -4,7 +4,7 @@
<el-button type="primary" @click="addClick">新增</el-button>
</div>
<el-table :data="foodStore.currentFoodRecipe.stepList"
<el-table :data="foodStore.currentRecipe.stepList"
border class="food-step-table">
<el-table-column type="index" align="center" width="40" />
<el-table-column prop="content" label="内容" align="center" min-width="20%" />
@@ -20,7 +20,7 @@
<script setup lang="ts">
import { useFoodStore } from '@/store/food'
import { IFoodStep } from '@/types/food'
import { IStep } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
@@ -28,30 +28,30 @@ import { serviceFileRootPath } from '@/utils'
const foodStore = useFoodStore()
const addClick = () => {
foodStore.foodStepApiType = 'ADD'
foodStore.stepApiType = 'ADD'
// foodStore.foodStepImageList = []
foodStore.foodStepDialog = {
foodStore.stepDialog = {
title: '新增步骤',
visible: true,
data: foodStore.getEmptyFoodStep()
data: foodStore.getEmptyStep()
}
}
const handleEditClick = (index: number, step: IFoodStep) => {
foodStore.editFoodStepIndex = index
foodStore.foodStepApiType = 'UPDATE'
foodStore.foodStepDialog = {
const editClick = (index: number, step: IStep) => {
foodStore.editStepIndex = index
foodStore.stepApiType = 'UPDATE'
foodStore.stepDialog = {
title: '编辑步骤',
visible: true,
data: deepCopyObject(step)
}
}
const handleDeleteClick = (index: number) => {
const deleteClick = (index: number) => {
commonElMessageBox('确认删除该步骤?').then(() => {
foodStore.foodStepApiType = 'DELETE'
foodStore.currentFoodRecipe.stepList.splice(index, 1)
foodStore.currentFoodRecipe.stepList.forEach((item) => {
foodStore.stepApiType = 'DELETE'
foodStore.currentRecipe.stepList.splice(index, 1)
foodStore.currentRecipe.stepList.forEach((item) => {
if (item.sort > index) {
item.sort -= 1
}

4
src/components/Food/FoodTimeline.vue
View File

@@ -7,8 +7,8 @@
@change="changeDateEvent"
/>
<el-timeline v-if="foodStore.foodRecordList.length > 0">
<el-timeline-item v-for="(item, index) in foodStore.foodRecordList"
<el-timeline v-if="foodStore.recordList.length > 0">
<el-timeline-item v-for="(item, index) in foodStore.recordList"
:key="index" :timestamp="formatDate(item.date)" placement="top">
<div class="timeline-info card-item">
<span>{{ item.name }}</span>

31
src/components/Moment/MomentCard.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="moment-card card-item">
<el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
<el-avatar :src="serviceFileRootPath + props.item.avatar" fit="contain"/>
<div class="moment-content">
<span class="username">Cxx0822</span>
<p>今天烧了个红烧鱼 非常不错！</p>
<span class="username">{{ props.item.username }}</span>
<p>{{ props.item.content }}</p>
<el-image style="width: 200px; height: 200px"
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
<p>1小时前</p>
<p>{{ props.item.date }}</p>
<div class="button-container">
<el-button circle size="small">
@@ -49,14 +49,10 @@
</div>
<div class="moment-comment-list">
<div class="moment-comment-item">
<span class="name">Cxx：</span>
<span>确实很不错</span>
</div>
<div class="moment-comment-item">
<span class="name">Cxx：</span>
<span>确实很不错阿</span>
<div v-for="(comment, index) in props.item.commentList" :key="index"
class="moment-comment-item">
<span class="name">{{ comment.username }}：</span>
<span>{{ comment.content }}</span>
</div>
</div>
</div>
@@ -67,7 +63,16 @@
import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'
import { Edit } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { defineProps, PropType, reactive } from 'vue'
import { IMoment } from '@/types/food'
import { serviceFileRootPath } from '@/utils'
const props = defineProps({
item: {
required: true,
type: Object as PropType<IMoment>
}
})
const momentInfo = reactive({
isShowComment: false,

6
src/components/Stats/FoodChart.vue
View File

@@ -54,12 +54,12 @@ const updateChart = () => {
const MAX_COUNT = 5
// 记录统计图
const dailyXAxis = foodStore.foodRecordStats.slice(0, MAX_COUNT).map((item) => item.name)
const dailyYAxis = foodStore.foodRecordStats.slice(0, MAX_COUNT).map((item) => item.value)
const dailyXAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.name)
const dailyYAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.value)
foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))
// 类别统计图
const foodCategoryData = foodStore.foodCategoryStats.slice(0, MAX_COUNT)
const foodCategoryData = foodStore.categoryStats.slice(0, MAX_COUNT)
foodCategoryChart.setOption(pieChartOptions('category', '个', foodCategoryData))
}
</script>

2
src/components/Stats/FoodRank.vue
View File

@@ -15,5 +15,5 @@ const foodStore = useFoodStore()
const MAX_RANK_COUNT = 10
const foodRankList = computed(() => foodStore.foodRankStats)
const foodRankList = computed(() => foodStore.rankStats)
</script>

14
src/components/Stats/FoodStats.vue
View File

@@ -2,15 +2,15 @@
<div class="common-statistics">
<stats-card
title="菜谱总数" color="#CA6C65" unit="个" icon="iconfont icon-caipu"
:value="foodStore.foodStats.recipeCount"/>
:value="foodStore.stats.recipeCount"/>
<stats-card
title="菜谱类别" color="#6FBB69" unit="种" icon="iconfont icon-leibie"
:value="foodStore.foodStats.categoryCount"/>
:value="foodStore.stats.categoryCount"/>
<stats-card
title="做菜次数" color="#E4BF62" unit="次" icon="iconfont icon-cishu"
:value="foodStore.foodStats.workCount"/>
:value="foodStore.stats.workCount"/>
<stats-card
title="平均次数" color="#5470C6" unit="次/月" icon="iconfont icon-pinlv"
@@ -26,17 +26,17 @@ import { useFoodStore } from '@/store/food'
const foodStore = useFoodStore()
onMounted(async () => {
await foodStore.queryFoodStats()
await foodStore.queryStats()
})
const getAverageCount = () => {
if (foodStore.queryDateType === 'month') {
return foodStore.foodRecordList.length
return foodStore.recordList.length
} else {
const result = {}
// 遍历数据，按月统计出现次数
foodStore.foodRecordList.forEach((item) => {
foodStore.recordList.forEach((item) => {
const date = new Date(item.date)
const month = String(date.getMonth() + 1)
@@ -47,7 +47,7 @@ const getAverageCount = () => {
}
})
return foodStore.foodRecordList.length / Object.keys(result).length
return foodStore.recordList.length / Object.keys(result).length
}
}
</script>