feat:搭建基本框架
This commit is contained in:
13
src/components/ArriveButton.vue
Normal file
13
src/components/ArriveButton.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<span style="color: darkgrey; align-self: center;">
|
||||
已经到底咯~
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
111
src/components/DailyCard.vue
Normal file
111
src/components/DailyCard.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="daily-card record-card-item">
|
||||
<div class="card-item__icon">
|
||||
<slot name="icon"></slot>
|
||||
</div>
|
||||
|
||||
<div class="card-item__body">
|
||||
<span class="card-item__title">
|
||||
{{ props.title }}
|
||||
</span>
|
||||
<div class="card-item__content">
|
||||
<span>{{ props.content }}</span>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-item__extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.daily-card {
|
||||
padding: 0 5px;
|
||||
height: 60px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 100px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.card-item__icon {
|
||||
.iconfont {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
background: var(--el-color-primary);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item__body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
justify-self: left;
|
||||
|
||||
.card-item__title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-item__content {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
font-size: 0.9rem;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item__extra {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.card-item__extra span:nth-child(1) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-item__extra span:nth-child(2) {
|
||||
font-size: 0.9rem;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.daily-card:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
35
src/components/DailySummary.vue
Normal file
35
src/components/DailySummary.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="daily-summary">
|
||||
<span class="date">{{ props.date }}</span>
|
||||
<div class="daily-summary__extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
date: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.daily-summary {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: gray;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
|
||||
.daily-summary__extra {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/components/DraggableButton.vue
Normal file
101
src/components/DraggableButton.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-button ref="buttonRef" type="primary" :icon="Plus"
|
||||
circle size="large" :style="style" style="font-size: 1.8rem;"
|
||||
@mousedown="startDrag" @touchstart="startDrag"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineEmits, onMounted, reactive, ref } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
const buttonRef = ref()
|
||||
|
||||
const buttonPos = reactive({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
})
|
||||
|
||||
const startPos = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
|
||||
const offsetPos = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
|
||||
/**
|
||||
* 最小拖到阈值
|
||||
*/
|
||||
const dragThreshold = 5
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
/**
|
||||
* 实时更新位置
|
||||
*/
|
||||
const style = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: `${buttonPos.x}px`,
|
||||
top: `${buttonPos.y}px`,
|
||||
touchAction: 'none'
|
||||
}))
|
||||
|
||||
onMounted(() => {
|
||||
initButtonPosition()
|
||||
})
|
||||
|
||||
const initButtonPosition = () => {
|
||||
buttonPos.x = window.innerWidth - 50
|
||||
buttonPos.y = window.innerHeight - 120
|
||||
buttonPos.width = buttonRef.value.$el.offsetWidth
|
||||
buttonPos.height = buttonRef.value.$el.offsetHeight
|
||||
}
|
||||
|
||||
const startDrag = (event) => {
|
||||
event.preventDefault()
|
||||
|
||||
const touch = event.touches ? event.touches[0] : event
|
||||
|
||||
startPos.x = touch.clientX
|
||||
startPos.y = touch.clientY
|
||||
|
||||
offsetPos.x = touch.clientX - buttonPos.x
|
||||
offsetPos.y = touch.clientY - buttonPos.y
|
||||
|
||||
document.addEventListener('mousemove', onDrag)
|
||||
document.addEventListener('mouseup', stopDrag)
|
||||
document.addEventListener('touchmove', onDrag, { passive: false })
|
||||
document.addEventListener('touchend', stopDrag)
|
||||
}
|
||||
|
||||
const onDrag = (event) => {
|
||||
const touch = event.touches ? event.touches[0] : event
|
||||
|
||||
// 计算新位置，并限制在边界内
|
||||
const newX = touch.clientX - offsetPos.x
|
||||
const newY = touch.clientY - offsetPos.y
|
||||
|
||||
buttonPos.x = Math.max(0, Math.min(newX, window.innerWidth - buttonPos.width))
|
||||
buttonPos.y = Math.max(40, Math.min(newY, window.innerHeight - buttonPos.height - 70))
|
||||
}
|
||||
|
||||
const stopDrag = (event) => {
|
||||
document.removeEventListener('mousemove', onDrag)
|
||||
document.removeEventListener('mouseup', stopDrag)
|
||||
document.removeEventListener('touchmove', onDrag)
|
||||
document.removeEventListener('touchend', stopDrag)
|
||||
|
||||
const touch = event.changedTouches ? event.changedTouches[0] : event
|
||||
const deltaX = Math.abs(touch.clientX - startPos.x)
|
||||
const deltaY = Math.abs(touch.clientY - startPos.y)
|
||||
|
||||
// 此时为点击
|
||||
if (deltaX <= dragThreshold && deltaY <= dragThreshold) {
|
||||
emit('click', event)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
129
src/components/Food/FoodCard.vue
Normal file
129
src/components/Food/FoodCard.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<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)"
|
||||
:key="index">
|
||||
<el-image :src="serviceFileRootPath + item.imageUrl"
|
||||
fit="contain" alt="暂无成果">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<span>暂无图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
<el-empty v-else description="暂无成果" />
|
||||
|
||||
<div class="record-info">
|
||||
<div class="top-container">
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="title">{{ props.foodItem.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-info">
|
||||
<el-button type="primary" :icon="Edit" circle :size="'small'"
|
||||
@click="editFoodRecipeClick"/>
|
||||
<el-button type="primary" :icon="MoreFilled" circle :size="'small'"
|
||||
@click="viewFoodRecipeClick()" />
|
||||
<el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
|
||||
@click="deleteFoodRecipeClick()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-container">
|
||||
<div class="info-list">
|
||||
<div class="info-item category-item">
|
||||
<i class="fa-solid fa-utensils"></i>
|
||||
{{ props.foodItem.category }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="props.foodItem?.recordList.length > 0" class="info-list">
|
||||
<div class="info-item">
|
||||
<i class="fa-solid fa-flag"></i>
|
||||
{{ props.foodItem.recordList[foodCardInfo.currentFoodIndex].person}}
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fa-regular fa-calendar-check"></i>
|
||||
{{ formatDate(props.foodItem.recordList[foodCardInfo.currentFoodIndex].date) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<span>暂无成果</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
|
||||
import { useFoodStore } from '@/store/food'
|
||||
import { defineProps, onMounted, PropType, reactive } from 'vue'
|
||||
import { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { formatDate } from 'vue3-common/utils/dateUtil'
|
||||
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||
import { serviceFileRootPath } from '@/utils'
|
||||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||||
|
||||
const router = useRouter()
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
const foodCardInfo = reactive({
|
||||
recommendRate: 0,
|
||||
currentFoodIndex: 0
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
foodItem: {
|
||||
required: true,
|
||||
type: Object as PropType<IFoodRecipe>
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
|
||||
})
|
||||
|
||||
const getFoodRecord = (recordList: IFoodRecord[]) => {
|
||||
return recordList.filter((item) => item.imageUrl)
|
||||
}
|
||||
|
||||
const editFoodRecipeClick = async () => {
|
||||
const id = props.foodItem?.id
|
||||
foodStore.foodRecipeApiType = 'UPDATE'
|
||||
await foodStore.queryFoodRecipe(id as number)
|
||||
// foodStore.foodRecipeDialog = {
|
||||
// title: '编辑菜谱',
|
||||
// visible: true,
|
||||
// data: deepCopyObject(foodStore.currentFoodRecipe)
|
||||
// }
|
||||
}
|
||||
|
||||
const viewFoodRecipeClick = async () => {
|
||||
await router.push({ name: 'MobileHomeFoodDetailId', params: { id: props.foodItem?.id } })
|
||||
}
|
||||
|
||||
const deleteFoodRecipeClick = () => {
|
||||
foodStore.foodRecipeApiType = 'DELETE'
|
||||
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
|
||||
foodStore.handleFoodRecipeApi(props.foodItem?.id as number)
|
||||
})
|
||||
}
|
||||
|
||||
const changeFoodEvent = (current: number) => {
|
||||
foodCardInfo.currentFoodIndex = current
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/life.record.module.scss";
|
||||
</style>
|
||||
114
src/components/Food/FoodDaily.vue
Normal file
114
src/components/Food/FoodDaily.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="food-daily">
|
||||
<v-calendar ref="calendarRef" :attributes='dailyInfo.attrs'
|
||||
@dayclick="dateClick" @did-move="changeMonthClick"
|
||||
:is-dark="appStore.isDark"
|
||||
class="food-calendar card-item"/>
|
||||
|
||||
<food-daily-item :date="dailyInfo.calendarDate"/>
|
||||
|
||||
<draggable-button @click="addClick"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FoodDailyItem from '@/components/Food/FoodDailyItem.vue'
|
||||
import DraggableButton from '@/components/DraggableButton.vue'
|
||||
import { reactive, watch, ref, onMounted } from 'vue'
|
||||
import { useFoodStore } from '@/store/food.ts'
|
||||
import { formatDate } from 'vue3-common/utils/dateUtil'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const calendarRef = ref()
|
||||
const foodStore = useFoodStore()
|
||||
const appStore = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(() => {
|
||||
const { month } = foodStore.queryRecord
|
||||
calendarRef.value.move(new Date(month))
|
||||
})
|
||||
|
||||
watch(() => foodStore.isRefresh, () => {
|
||||
updateInfo()
|
||||
})
|
||||
|
||||
const dailyInfo = reactive({
|
||||
calendarDate: '',
|
||||
attrs: [] as any[]
|
||||
})
|
||||
|
||||
const addClick = () => {
|
||||
foodStore.foodRecordApiType = 'ADD'
|
||||
foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
|
||||
router.push({ name: 'MobileHomeFoodRecordForm' })
|
||||
}
|
||||
|
||||
const updateInfo = () => {
|
||||
getCalendarMoveDate()
|
||||
getCalendarAttrDates()
|
||||
}
|
||||
|
||||
const getCalendarMoveDate = () => {
|
||||
dailyInfo.calendarDate = formatDate(new Date())
|
||||
|
||||
const foodLength = foodStore.foodRecordList.length
|
||||
if (foodLength > 0) {
|
||||
const today = formatDate(new Date())
|
||||
if (foodStore.foodRecordList.some((item) => item.date === today)) {
|
||||
dailyInfo.calendarDate = today
|
||||
} else {
|
||||
dailyInfo.calendarDate = formatDate(foodStore.foodRecordList[foodLength - 1].date)
|
||||
}
|
||||
} else {
|
||||
dailyInfo.calendarDate = ''
|
||||
}
|
||||
}
|
||||
|
||||
const getCalendarAttrDates = () => {
|
||||
dailyInfo.attrs = []
|
||||
dailyInfo.attrs.push({
|
||||
key: 'today',
|
||||
highlight: true,
|
||||
dates: new Date()
|
||||
})
|
||||
|
||||
const dateList = foodStore.foodRecordList.map((item) => item.date)
|
||||
dailyInfo.attrs.push({
|
||||
dot: 'red',
|
||||
dates: [...new Set(dateList)]
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择日期事件
|
||||
* @param day 日期
|
||||
*/
|
||||
const dateClick = (day) => {
|
||||
dailyInfo.calendarDate = formatDate(day.date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择月份事件
|
||||
*/
|
||||
const changeMonthClick = async (value) => {
|
||||
foodStore.queryRecord.month = value[0].id
|
||||
await foodStore.refreshInfo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.food-daily {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vh;
|
||||
|
||||
.food-calendar {
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
src/components/Food/FoodDailyItem.vue
Normal file
108
src/components/Food/FoodDailyItem.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-empty v-if="dailyItemInfo.itemList.length === 0" />
|
||||
|
||||
<div v-else class="food-daily-item card-item">
|
||||
<daily-summary :date="dailyItemInfo.date"/>
|
||||
|
||||
<div class="daily-list">
|
||||
<daily-card v-for="(item, index) in dailyItemInfo.itemList"
|
||||
:key="index" @click="selectFoodRecordClick(item)"
|
||||
:title="item.name" :content="item.category">
|
||||
<template #icon>
|
||||
<el-avatar>{{ item.category.charAt(0) }}</el-avatar>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<span>{{ item.person }}</span>
|
||||
<span>{{ item.date }}</span>
|
||||
</template>
|
||||
</daily-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DailySummary from '@/components/DailySummary.vue'
|
||||
import DailyCard from '@/components/DailyCard.vue'
|
||||
import { defineProps, onMounted, reactive, watch } from 'vue'
|
||||
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 { IFoodRecord } from '@/types/food.ts'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
const appStore = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
date: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.date, () => {
|
||||
getFoodDailyByDate(props.date as string)
|
||||
})
|
||||
|
||||
watch(() => foodStore.isRefresh, () => {
|
||||
getFoodDailyByDate(props.date as string)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getFoodDailyByDate(props.date as string)
|
||||
})
|
||||
|
||||
const dailyItemInfo = reactive({
|
||||
date: '',
|
||||
itemList: [] as IFoodRecord[]
|
||||
})
|
||||
|
||||
/**
|
||||
* 根据日期获取当天的美食记录
|
||||
* @param date
|
||||
*/
|
||||
const getFoodDailyByDate = (date: string) => {
|
||||
if (date) {
|
||||
dailyItemInfo.date = formatChineseDate(date, 'MM月DD日 dddd')
|
||||
dailyItemInfo.itemList = []
|
||||
|
||||
foodStore.foodRecordList.forEach((item) => {
|
||||
if (item.date === date) {
|
||||
dailyItemInfo.itemList.push(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
dailyItemInfo.itemList = []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击美食记录按钮
|
||||
* @param foodRecord 美食记录
|
||||
*/
|
||||
const selectFoodRecordClick = async (foodRecord: IFoodRecord) => {
|
||||
foodStore.foodRecordApiType = 'UPDATE'
|
||||
|
||||
appStore.isShowMobileBack = true
|
||||
foodStore.currentFoodRecord = foodRecord
|
||||
await router.push({ name: 'MobileHomeFoodRecordForm' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.food-daily-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vh;
|
||||
padding: 1vh 0.5vw;
|
||||
|
||||
.daily-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
src/components/Food/FoodRecipe.vue
Normal file
97
src/components/Food/FoodRecipe.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div ref="foodRecipeRef" class="food-recipe">
|
||||
<div class="query-item card-item">
|
||||
<span>分类：</span>
|
||||
<el-segmented v-model="foodStore.queryRecipe.category"
|
||||
:options="foodCategoryList"
|
||||
@change="queryFoodSegmented"/>
|
||||
</div>
|
||||
|
||||
<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"/>
|
||||
|
||||
<draggable-button @click="addClick"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import FoodCard from '@/components/Food/FoodCard.vue'
|
||||
import ArriveBottom from '@/components/ArriveButton.vue'
|
||||
import DraggableButton from '@/components/DraggableButton.vue'
|
||||
import { useFoodStore } from '@/store/food.ts'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const foodRecipeRef = ref()
|
||||
const foodStore = useFoodStore()
|
||||
const router = useRouter()
|
||||
|
||||
const foodCategoryList = [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '家常菜',
|
||||
value: '家常菜'
|
||||
}]
|
||||
|
||||
onMounted(async () => {
|
||||
foodRecipeRef.value.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
foodRecipeRef.value.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
const addClick = () => {
|
||||
foodStore.foodRecordApiType = 'ADD'
|
||||
foodStore.currentFoodRecord = foodStore.getEmptyFoodRecord()
|
||||
router.push({ name: 'MobileHomeFoodRecordForm' })
|
||||
}
|
||||
|
||||
const queryFoodSegmented = async () => {
|
||||
foodStore.pageInfo.currentPage = 1
|
||||
foodStore.foodRecipeList = []
|
||||
await foodStore.queryFoodRecipeList()
|
||||
}
|
||||
|
||||
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.queryFoodRecipeList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.food-recipe {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.query-item {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.food-list {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/components/Food/FoodTimeline.vue
Normal file
75
src/components/Food/FoodTimeline.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="food-timeline">
|
||||
<el-date-picker
|
||||
v-model="currentYear"
|
||||
type="year" placeholder="请选择年份"
|
||||
style="width: 100px;"
|
||||
@change="changeDateEvent"
|
||||
/>
|
||||
|
||||
<el-timeline v-if="foodStore.foodRecordList.length > 0">
|
||||
<el-timeline-item v-for="(item, index) in foodStore.foodRecordList"
|
||||
:key="index" :timestamp="formatDate(item.date)" placement="top">
|
||||
<div class="timeline-info card-item">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-image :src="item.imageUrl"
|
||||
fit="contain" alt="暂无成果">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<span>暂无图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
||||
<el-empty v-else description="暂无日记"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useFoodStore } from '@/store/food.ts'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { formatDate, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
||||
import { serviceFileRootPath } from '@/utils'
|
||||
|
||||
const currentYear = ref(new Date())
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
onMounted(async () => {
|
||||
const dateInfo = getStartEndDate(getCurrentYear(), 'year')
|
||||
foodStore.queryDateList[0] = dateInfo[0]
|
||||
foodStore.queryDateList[1] = dateInfo[1]
|
||||
await foodStore.refreshInfo()
|
||||
})
|
||||
|
||||
const changeDateEvent = async (value: Date) => {
|
||||
const dateInfo = getStartEndDate(value, 'year')
|
||||
foodStore.queryDateList[0] = dateInfo[0]
|
||||
foodStore.queryDateList[1] = dateInfo[1]
|
||||
await foodStore.refreshInfo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.food-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-date-editor {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.el-timeline {
|
||||
padding: 10px;
|
||||
|
||||
.timeline-info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/components/Moment/MomentCard.vue
Normal file
105
src/components/Moment/MomentCard.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="moment-card card-item">
|
||||
<el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
|
||||
|
||||
<div class="moment-content">
|
||||
<span class="username">Cxx0822</span>
|
||||
<p>今天烧了个红烧鱼 非常不错！</p>
|
||||
|
||||
<el-image style="width: 200px; height: 200px"
|
||||
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
|
||||
|
||||
<p>1小时前</p>
|
||||
|
||||
<div class="button-container">
|
||||
<el-button circle size="small">
|
||||
<i class="fa-regular fa-thumbs-up"></i>
|
||||
</el-button>
|
||||
<el-button circle size="small"
|
||||
@click="momentInfo.isShowComment = !momentInfo.isShowComment">
|
||||
<i class="fa-regular fa-comment"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="momentInfo.isShowComment" class="moment-comment">
|
||||
<el-input
|
||||
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">
|
||||
<template #default>
|
||||
<div class="emoji-panel">
|
||||
<EmojiPicker :native="true" @select="onSelectEmoji" />
|
||||
</div>
|
||||
</template>
|
||||
<template #reference>
|
||||
<el-button circle>
|
||||
<i class="fa-regular fa-face-smile"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
||||
<el-button type="primary"
|
||||
:disabled="momentInfo.comment.length === 0"
|
||||
@click="sendCommentClick"
|
||||
class="send-button">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EmojiPicker from 'vue3-emoji-picker'
|
||||
import 'vue3-emoji-picker/css'
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const momentInfo = reactive({
|
||||
isShowComment: false,
|
||||
comment: ''
|
||||
})
|
||||
|
||||
const onSelectEmoji = (emoji) => {
|
||||
|
||||
}
|
||||
|
||||
const sendCommentClick = async () => {
|
||||
momentInfo.comment = ''
|
||||
momentInfo.isShowComment = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.moment-card {
|
||||
padding: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
gap: 10px;
|
||||
|
||||
.moment-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.moment-comment {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 40px 60px;
|
||||
justify-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
172
src/components/Stats/FoodChart.vue
Normal file
172
src/components/Stats/FoodChart.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="food-chart"
|
||||
element-loading-text="正在加载中...">
|
||||
<div class="chart-container card-item">
|
||||
<div class="content">
|
||||
<span class="title">📊记录统计</span>
|
||||
</div>
|
||||
<div class="chart" ref="foodDailyChartRef"/>
|
||||
</div>
|
||||
<div class="chart-container card-item">
|
||||
<div class="content">
|
||||
<span class="title">📊类别统计</span>
|
||||
</div>
|
||||
<div class="chart" ref="foodCategoryChartRef"/>
|
||||
</div>
|
||||
<div class="chart-container card-item">
|
||||
<div class="content">
|
||||
<span class="title">📊排行榜</span>
|
||||
</div>
|
||||
<div class="chart rank-chart">
|
||||
<food-rank />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FoodRank from '@/components/Stats/FoodRank.vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
|
||||
import { useFoodStore } from '@/store/food'
|
||||
import { useAppStore } from '@/store/app.ts'
|
||||
import type { IStatsChart } from 'vue3-common/types'
|
||||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const foodDailyChartRef = ref<HTMLElement>()
|
||||
const foodCategoryChartRef = ref<HTMLElement>()
|
||||
const billRankChartRef = ref<HTMLElement>()
|
||||
|
||||
let foodDailyChart: echarts.ECharts
|
||||
let foodCategoryChart: echarts.ECharts
|
||||
let billRankChart: echarts.ECharts
|
||||
|
||||
watch(() => foodStore.isRefresh, () => {
|
||||
updateChart()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
foodDailyChart = echarts.init(foodDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
||||
foodCategoryChart = echarts.init(foodCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
||||
// billRankChart = echarts.init(billRankChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
||||
})
|
||||
|
||||
const updateChart = () => {
|
||||
const MAX_CATEGORY_COUNT = 5
|
||||
const MAX_RANK_COUNT = 10
|
||||
|
||||
// 记录统计图
|
||||
// const dailyXAxis = foodStore.billDateStatsList.map((item) => item.name)
|
||||
// const dailyYAxis = foodStore.billDateStatsList.map((item) => item.value)
|
||||
const dailyXAxis = ['2024-01', '2024-02']
|
||||
const dailyYAxis = ['10', '6']
|
||||
foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))
|
||||
//
|
||||
// // 账本统计图
|
||||
// const bookXAxis = foodStore.billBookStatsList.map((item) => item.name)
|
||||
// const bookYAxis = foodStore.billBookStatsList.map((item) => item.value)
|
||||
// billBookChart.setOption(barChartOptions('账本', bookXAxis, '金额（元）', bookYAxis))
|
||||
// billBookChart.setOption({
|
||||
// series: [{
|
||||
// itemStyle: {
|
||||
// color: foodStore.billType === 'expensive' ? '#CA6C65' : '#6FBB69'
|
||||
// },
|
||||
// markPoint: {
|
||||
// label: {
|
||||
// color: '#FFFFFF'
|
||||
// }
|
||||
// }
|
||||
// }]
|
||||
// })
|
||||
//
|
||||
// 类别统计图
|
||||
const foodCategoryList = [
|
||||
{ value: 12, name: '家常菜' },
|
||||
{ value: 10, name: '鲁菜' },
|
||||
{ value: 8, name: '川菜' },
|
||||
{ value: 5, name: '淮扬菜' },
|
||||
{ value: 2, name: '其他' }
|
||||
]
|
||||
foodCategoryChart.setOption(pieChartOptions('category', '次', foodCategoryList))
|
||||
//
|
||||
// // 排行榜统计图
|
||||
// const billRankList: IStatsChart[] = []
|
||||
// const resultList = foodStore.billRecordList.filter((item) => item.type === foodStore.billType)
|
||||
// resultList.sort((a, b) => b.amount - a.amount).forEach((item) => {
|
||||
// billRankList.push({
|
||||
// name: item.content,
|
||||
// value: item.amount
|
||||
// })
|
||||
// })
|
||||
//
|
||||
// if (!isMobile()) {
|
||||
// billRankChart.setOption(pieChartOptions('rank', '元', billRankList.slice(0, MAX_RANK_COUNT)))
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.food-chart {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
.chart-container {
|
||||
display: grid;
|
||||
grid-template-rows: 40px 1fr;
|
||||
|
||||
.content {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #009FA8;
|
||||
|
||||
.title {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rank-chart {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.rank-item {
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr 80px;
|
||||
align-items: center;
|
||||
|
||||
.rank-amount {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-item:nth-child(1) {
|
||||
color: #d4af37;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rank-item:nth-child(2) {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
.rank-item:nth-child(3) {
|
||||
color: #b87333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/Stats/FoodRank.vue
Normal file
33
src/components/Stats/FoodRank.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div v-for="(item, index) in foodRankList.slice(0, MAX_RANK_COUNT)"
|
||||
:key="index" class="rank-item">
|
||||
<span class="rank-index">{{ index+1 }}.</span>
|
||||
<span class="rank-content">{{ item.value }}</span>
|
||||
<span class="rank-amount">{{ item.count }} 次</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useFoodStore } from '@/store/food'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
const MAX_RANK_COUNT = 10
|
||||
|
||||
const foodRankList = computed(() => {
|
||||
return [{
|
||||
value: '红烧肉',
|
||||
count: 10
|
||||
}, {
|
||||
value: '红烧鱼',
|
||||
count: 8
|
||||
}, {
|
||||
value: '排骨汤',
|
||||
count: 5
|
||||
}, {
|
||||
value: '红烧带鱼',
|
||||
count: 2
|
||||
}]
|
||||
})
|
||||
</script>
|
||||
53
src/components/Stats/FoodStats.vue
Normal file
53
src/components/Stats/FoodStats.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="common-statistics">
|
||||
<stats-card
|
||||
title="菜谱总数" color="#CA6C65" unit="个" icon="iconfont icon-caipu"
|
||||
:value="foodStore.foodStats.recipeCount"/>
|
||||
|
||||
<stats-card
|
||||
title="菜谱类别" color="#6FBB69" unit="种" icon="iconfont icon-leibie"
|
||||
:value="foodStore.foodStats.categoryCount"/>
|
||||
|
||||
<stats-card
|
||||
title="做菜次数" color="#E4BF62" unit="次" icon="iconfont icon-cishu"
|
||||
:value="foodStore.foodStats.workCount"/>
|
||||
|
||||
<stats-card
|
||||
title="平均次数" color="#5470C6" unit="次/月" icon="iconfont icon-pinlv"
|
||||
:value="getAverageCount()"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import StatsCard from '@/components/StatsCard.vue'
|
||||
import { onMounted } from 'vue'
|
||||
import { useFoodStore } from '@/store/food'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
|
||||
onMounted(async () => {
|
||||
await foodStore.queryFoodStats()
|
||||
})
|
||||
|
||||
const getAverageCount = () => {
|
||||
if (foodStore.queryDateType === 'month') {
|
||||
return foodStore.foodRecordList.length
|
||||
} else {
|
||||
const result = {}
|
||||
|
||||
// 遍历数据，按月统计出现次数
|
||||
foodStore.foodRecordList.forEach((item) => {
|
||||
const date = new Date(item.date)
|
||||
const month = String(date.getMonth() + 1)
|
||||
|
||||
if (result[month]) {
|
||||
result[month].count += 1
|
||||
} else {
|
||||
result[month] = { count: 1 }
|
||||
}
|
||||
})
|
||||
|
||||
return foodStore.foodRecordList.length / Object.keys(result).length
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
src/components/StatsCard.vue
Normal file
92
src/components/StatsCard.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="statistics-card card-item" :style="{color: props.color}">
|
||||
<span class="icon">
|
||||
<i :class="props.icon"></i>
|
||||
</span>
|
||||
|
||||
<div class="item">
|
||||
<span class="title">
|
||||
{{ props.title }}
|
||||
</span>
|
||||
|
||||
<div class="value">
|
||||
<span class="amount">
|
||||
{{ props.value }}
|
||||
</span>
|
||||
<span class="unit">
|
||||
{{ props.unit }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
title: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
required: true,
|
||||
type: [String, Number]
|
||||
},
|
||||
unit: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
color: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.statistics-card {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 30% 1fr;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
.iconfont, .icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1vh;
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5vw;
|
||||
|
||||
.amount {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user