46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="food-list card-item">
|
|
<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>
|
|
|
|
<el-pagination
|
|
v-model:current-page="foodStore.pageInfo.currentPage"
|
|
:page-size="foodStore.pageInfo.pageSize"
|
|
layout="total, prev, pager, next"
|
|
:total="foodStore.pageInfo.totalSize"
|
|
@change="changePageEvent"
|
|
/>
|
|
|
|
<el-button v-if="isLargeScreen()"
|
|
type="primary" :icon="Plus" circle
|
|
@click="addFoodRecipeClick" class="add-new" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import FoodCard from '@/components/Food/FoodCard.vue'
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { isLargeScreen } from '@/utils'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
const addFoodRecipeClick = () => {
|
|
foodStore.foodRecipeApiType = 'ADD'
|
|
foodStore.foodRecipeDialog = {
|
|
title: '新增菜谱',
|
|
visible: true,
|
|
data: foodStore.getEmptyFoodRecipe()
|
|
}
|
|
}
|
|
|
|
const changePageEvent = (value: number) => {
|
|
foodStore.pageInfo.currentPage = value
|
|
foodStore.queryFoodRecipeList()
|
|
}
|
|
</script>
|