120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<template>
|
|
<div class="life-record-card card-item">
|
|
<el-carousel v-if="props.travelItem?.recordList.length > 0"
|
|
arrow="always" @change="changeTravelEvent">
|
|
<el-carousel-item v-for="(item, index) in props.travelItem?.recordList" :key="index">
|
|
<el-image :src="AListUrl + item.imageList[0]"
|
|
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.travelItem.name }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-info">
|
|
<el-button type="primary" :icon="Edit" circle :size="'small'"
|
|
@click="editClick"/>
|
|
<el-button type="primary" :icon="MoreFilled" circle :size="'small'"
|
|
@click="viewClick()"/>
|
|
<el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
|
|
@click="deleteClick()"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-container">
|
|
<div class="info-list">
|
|
<div class="info-item location-item">
|
|
<i class="fa-solid fa-location-dot"></i>
|
|
{{ props.travelItem.area.join('-') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="props.travelItem?.recordList.length > 0" class="info-list">
|
|
<div class="info-item">
|
|
<i class="fa-solid fa-flag"></i>
|
|
{{ parsePerson(props.travelItem.recordList[cardInfo.currentIndex].persons) }}
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fa-regular fa-calendar-check"></i>
|
|
{{ formatDate(props.travelItem.recordList[cardInfo.currentIndex].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 { useTravelStore } from '@/store/travel.ts'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { defineProps, PropType, reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
|
import { ITravelSpot } from '@/types/travel.ts'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
import { AListUrl } from '@/utils'
|
|
import { parsePerson } from '@/utils/home/travelUtil.ts'
|
|
|
|
const router = useRouter()
|
|
const travelStore = useTravelStore()
|
|
const appStore = useAppStore()
|
|
|
|
const cardInfo = reactive({
|
|
currentIndex: 0
|
|
})
|
|
|
|
const props = defineProps({
|
|
travelItem: {
|
|
required: true,
|
|
type: Object as PropType<ITravelSpot>
|
|
}
|
|
})
|
|
|
|
const editClick = async () => {
|
|
const id = props.travelItem?.id
|
|
travelStore.travelSpotApiType = 'UPDATE'
|
|
await travelStore.queryTravelSpot(id as number)
|
|
|
|
appStore.isShowMobileBack = true
|
|
await router.push({ name: 'TravelSpotForm' })
|
|
}
|
|
|
|
const viewClick = async () => {
|
|
appStore.isShowMobileBack = true
|
|
await router.push({ name: 'TravelDetailId', params: { id: props.travelItem?.id } })
|
|
}
|
|
|
|
const deleteClick = () => {
|
|
travelStore.travelSpotApiType = 'DELETE'
|
|
commonElMessageBox(`请确认是否删除该旅行: ${props.travelItem?.name}?`).then(() => {
|
|
travelStore.handleTravelSpotApi(props.travelItem)
|
|
})
|
|
}
|
|
|
|
const changeTravelEvent = (current: number) => {
|
|
cardInfo.currentIndex = current
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/styles/home/life.record.module";
|
|
</style>
|