40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<template>
|
|
<div class="travel-spot-list card-item">
|
|
<el-empty v-if="travelStore.travelSpotList.length === 0" description="暂无旅行记录"/>
|
|
|
|
<div v-else class="list">
|
|
<travel-card v-for="(item, index) in travelStore.travelSpotList"
|
|
:key="index" :travel-item="item"/>
|
|
</div>
|
|
|
|
<el-pagination
|
|
v-model="travelStore.pageInfo.currentPage"
|
|
:page-size="travelStore.pageInfo.pageSize"
|
|
layout="total, prev, pager, next"
|
|
:total="travelStore.pageInfo.totalSize"
|
|
/>
|
|
|
|
<el-button v-if="isLargeScreen()"
|
|
type="primary" :icon="Plus" circle
|
|
@click="addTravelSpotClick" class="add-new" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import TravelCard from '@/components/Travel/TravelCard.vue'
|
|
import { useTravelStore } from '@/store/travel.ts'
|
|
import { isLargeScreen } from '@/utils'
|
|
|
|
const travelStore = useTravelStore()
|
|
|
|
const addTravelSpotClick = () => {
|
|
travelStore.travelSpotApiType = 'ADD'
|
|
travelStore.travelSpotDialog = {
|
|
title: '新增景点',
|
|
visible: true,
|
|
data: travelStore.getEmptyTravelSpot()
|
|
}
|
|
}
|
|
</script>
|