118 lines
3.6 KiB
Vue
118 lines
3.6 KiB
Vue
<template>
|
|
<div class="life-record-card card-item">
|
|
<el-image v-if="props.foodItem?.recordList.length > 0"
|
|
:src="AListPath + props.foodItem?.recordList[0].imageUrl"
|
|
:preview-src-list="previewImageList"
|
|
:initial-index="0"
|
|
show-progress
|
|
fit="contain" alt="暂无成果">
|
|
<template #error>
|
|
<div class="image-slot">
|
|
<span>暂无图片</span>
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
|
|
<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.ts'
|
|
import { computed, defineProps, onMounted, PropType, reactive } from 'vue'
|
|
import { IFoodRecipe } from '@/types/food.ts'
|
|
import { useRouter } from 'vue-router'
|
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
import { AListPath } from '@/utils'
|
|
|
|
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 previewImageList = computed(() => {
|
|
return props.foodItem?.recordList.map((item) => `${AListPath}${item.imageUrl}`)
|
|
})
|
|
|
|
const editFoodRecipeClick = async () => {
|
|
const id = props.foodItem?.id
|
|
foodStore.foodRecipeApiType = 'UPDATE'
|
|
await foodStore.queryFoodRecipe(id as number)
|
|
await router.push({ name: 'FoodRecipeForm' })
|
|
}
|
|
|
|
const viewFoodRecipeClick = async () => {
|
|
await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
|
|
}
|
|
|
|
const deleteFoodRecipeClick = () => {
|
|
foodStore.foodRecipeApiType = 'DELETE'
|
|
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
|
|
foodStore.handleFoodRecipeApi(props.foodItem)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/styles/home/life.record.module";
|
|
</style>
|