feat:重构模块

src/components/Travel/TravelCard.vue

@@ -0,0 +1,119 @@
+<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="serviceFileRootPath + 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 { serviceFileRootPath } 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>