feat:更新图片模块
This commit is contained in:
@@ -12,6 +12,7 @@ import { defineProps, PropType } from 'vue'
|
|||||||
import { IAnniversaryCategory } from '@/types/anniversary.ts'
|
import { IAnniversaryCategory } from '@/types/anniversary.ts'
|
||||||
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
categoryItem: {
|
categoryItem: {
|
||||||
@@ -28,8 +29,12 @@ const router = useRouter()
|
|||||||
const anniversaryStore = useAnniversaryStore()
|
const anniversaryStore = useAnniversaryStore()
|
||||||
|
|
||||||
const selectCategoryClick = () => {
|
const selectCategoryClick = () => {
|
||||||
anniversaryStore.queryInfo.category = props.categoryItem?.name as string
|
if (props.count) {
|
||||||
router.push({ name: 'AnniversaryList' })
|
anniversaryStore.queryInfo.category = props.categoryItem?.name as string
|
||||||
|
router.push({ name: 'AnniversaryList' })
|
||||||
|
} else {
|
||||||
|
ElMessage.info('暂无纪念日')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -12,9 +12,8 @@
|
|||||||
<el-card class="record-card">
|
<el-card class="record-card">
|
||||||
<span class="record-content">完成人:{{ item.person }}</span>
|
<span class="record-content">完成人:{{ item.person }}</span>
|
||||||
<el-image v-if="item.imageUrl"
|
<el-image v-if="item.imageUrl"
|
||||||
:src="AListUrl + item.imageUrl"
|
:src="AListUrl + item.imageUrl" fit="cover" alt="暂无图片"
|
||||||
:preview-src-list="[AListUrl + item.imageUrl]"
|
@click="viewImageClick(item)" class="record-image"/>
|
||||||
fit="contain" alt="暂无图片" class="record-image"/>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-timeline-item>
|
</el-timeline-item>
|
||||||
</el-timeline>
|
</el-timeline>
|
||||||
@@ -27,6 +26,13 @@
|
|||||||
import { useFoodStore } from '@/store/food.ts'
|
import { useFoodStore } from '@/store/food.ts'
|
||||||
import { AListUrl } from '@/utils'
|
import { AListUrl } from '@/utils'
|
||||||
import { SvgIcon } from 'vue3-common'
|
import { SvgIcon } from 'vue3-common'
|
||||||
|
import { IFoodRecord } from '@/types/food.ts'
|
||||||
|
import { showImagePreview } from 'vant'
|
||||||
|
|
||||||
const foodStore = useFoodStore()
|
const foodStore = useFoodStore()
|
||||||
|
|
||||||
|
const viewImageClick = (item: IFoodRecord) => {
|
||||||
|
const imageList = [AListUrl + item.imageUrl]
|
||||||
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
<el-empty v-else description="暂无成果" />
|
<el-empty v-else description="暂无成果" />
|
||||||
|
|
||||||
<van-swipe-cell>
|
<van-swipe-cell>
|
||||||
<div class="record-info" @click="viewFoodRecipeClick()">
|
<div class="record-info" @click="viewClick()">
|
||||||
<div class="top-container">
|
<div class="top-container">
|
||||||
<div class="info-list">
|
<div class="info-list">
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
@@ -49,9 +49,9 @@
|
|||||||
|
|
||||||
<template #right>
|
<template #right>
|
||||||
<van-button square type="primary" text="编辑" style="height: 100%;"
|
<van-button square type="primary" text="编辑" style="height: 100%;"
|
||||||
@click="editFoodRecipeClick"/>
|
@click="editClick"/>
|
||||||
<van-button square type="danger" text="删除" style="height: 100%;"
|
<van-button square type="danger" text="删除" style="height: 100%;"
|
||||||
@click="deleteFoodRecipeClick()"/>
|
@click="deleteClick()"/>
|
||||||
</template>
|
</template>
|
||||||
</van-swipe-cell>
|
</van-swipe-cell>
|
||||||
</div>
|
</div>
|
||||||
@@ -88,21 +88,21 @@ onMounted(() => {
|
|||||||
|
|
||||||
const viewImageClick = () => {
|
const viewImageClick = () => {
|
||||||
const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
|
const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
|
||||||
showImagePreview(imageList)
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
const editFoodRecipeClick = async () => {
|
const editClick = async () => {
|
||||||
const id = props.foodItem?.id
|
const id = props.foodItem?.id
|
||||||
foodStore.foodRecipeApiType = 'UPDATE'
|
foodStore.foodRecipeApiType = 'UPDATE'
|
||||||
await foodStore.queryFoodRecipe(id as number)
|
await foodStore.queryFoodRecipe(id as number)
|
||||||
await router.push({ name: 'FoodRecipeForm' })
|
await router.push({ name: 'FoodRecipeForm' })
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewFoodRecipeClick = async () => {
|
const viewClick = async () => {
|
||||||
await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
|
await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteFoodRecipeClick = () => {
|
const deleteClick = () => {
|
||||||
foodStore.foodRecipeApiType = 'DELETE'
|
foodStore.foodRecipeApiType = 'DELETE'
|
||||||
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
|
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
|
||||||
foodStore.handleFoodRecipeApi(props.foodItem)
|
foodStore.handleFoodRecipeApi(props.foodItem)
|
||||||
|
|||||||
@@ -26,7 +26,14 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const changeFoodNameEvent = async (value: string) => {
|
const changeFoodNameEvent = async (value: string) => {
|
||||||
const result = await searchFoodRecipeApi(value)
|
if (value) {
|
||||||
foodStore.foodRecipeList = [result]
|
const result = await searchFoodRecipeApi(value)
|
||||||
|
foodStore.foodRecipeList = [result]
|
||||||
|
} else {
|
||||||
|
foodStore.pageInfo.currentPage = 1
|
||||||
|
foodStore.pageInfo.pageSize = 3
|
||||||
|
foodStore.foodRecipeList = []
|
||||||
|
await foodStore.queryMobileFoodRecipeList()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -38,8 +38,7 @@
|
|||||||
<el-image
|
<el-image
|
||||||
v-if="props.item?.imageUrl"
|
v-if="props.item?.imageUrl"
|
||||||
:src="AListUrl + props.item?.imageUrl"
|
:src="AListUrl + props.item?.imageUrl"
|
||||||
:preview-src-list="[AListUrl + props.item?.imageUrl]"
|
fit="contain" @click="viewImageClick"
|
||||||
fit="contain"
|
|
||||||
class="media-content"/>
|
class="media-content"/>
|
||||||
|
|
||||||
<video
|
<video
|
||||||
@@ -71,12 +70,11 @@ import { SvgIcon } from 'vue3-common'
|
|||||||
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
|
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
|
||||||
import { IJournal } from '@/types/journal.ts'
|
import { IJournal } from '@/types/journal.ts'
|
||||||
import { formatDate } from 'vue3-common/utils/dateUtil'
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
||||||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
|
||||||
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
|
||||||
import { useJournalStore } from '@/store/journal.ts'
|
import { useJournalStore } from '@/store/journal.ts'
|
||||||
import { useAppStore } from '@/store/app.ts'
|
import { useAppStore } from '@/store/app.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { AListUrl } from '@/utils'
|
import { AListUrl } from '@/utils'
|
||||||
|
import { showImagePreview } from 'vant'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
@@ -108,21 +106,18 @@ const showToggle = computed(() => overflowLines.value > 0)
|
|||||||
|
|
||||||
const toggleExpand = () => expanded.value = !expanded.value
|
const toggleExpand = () => expanded.value = !expanded.value
|
||||||
|
|
||||||
|
const viewImageClick = () => {
|
||||||
|
const imageList = [AListUrl + props.item?.imageUrl]
|
||||||
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
|
}
|
||||||
|
|
||||||
const editClick = async () => {
|
const editClick = async () => {
|
||||||
const id = props.item?.id
|
const id = props.item?.id
|
||||||
journalStore.journalApiType = 'UPDATE'
|
journalStore.journalApiType = 'UPDATE'
|
||||||
journalStore.currentJournal = props.item
|
journalStore.currentJournal = props.item
|
||||||
|
|
||||||
if (isMobile()) {
|
appStore.isShowMobileBack = true
|
||||||
appStore.isShowMobileBack = true
|
await router.push({ name: 'JournalDetailId', params: { id } })
|
||||||
await router.push({ name: 'JournalDetailId', params: { id } })
|
|
||||||
} else {
|
|
||||||
journalStore.journalDialog = {
|
|
||||||
title: '编辑日记',
|
|
||||||
visible: true,
|
|
||||||
data: deepCopyObject(journalStore.currentJournal)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="life-record-card card-item">
|
<div class="life-record-card card-item">
|
||||||
<el-image :src="AListUrl + props.productItem?.imageUrl"
|
<el-image :src="AListUrl + props.productItem?.imageUrl"
|
||||||
:preview-src-list="[AListUrl + props.productItem?.imageUrl]"
|
fit="contain" alt="暂无成果" @click="viewImageClick">
|
||||||
fit="contain" alt="暂无成果">
|
|
||||||
<template #error>
|
<template #error>
|
||||||
<div class="image-slot">
|
<div class="image-slot">
|
||||||
<span>暂无图片</span>
|
<span>暂无图片</span>
|
||||||
@@ -10,62 +9,64 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-image>
|
</el-image>
|
||||||
|
|
||||||
<div class="record-info">
|
<van-swipe-cell>
|
||||||
<div class="top-container">
|
<div class="record-info" @click="editClick()">
|
||||||
<div class="info-list">
|
<div class="top-container">
|
||||||
<div class="info-item">
|
<div class="info-list">
|
||||||
<span class="title">{{ props.productItem.name }}</span>
|
<div class="info-item">
|
||||||
</div>
|
<span class="title">{{ props.productItem.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="info-item amount-item">
|
<div class="info-item amount-item">
|
||||||
<i class="fa-solid fa-coins"></i>
|
<i class="fa-solid fa-coins"></i>
|
||||||
{{ props.productItem.price }}
|
{{ props.productItem.price }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="button-info">
|
<div class="bottom-container">
|
||||||
<el-button type="primary" :icon="Edit" circle :size="'small'"
|
<div class="info-list">
|
||||||
@click="editClick"/>
|
<div class="info-item">
|
||||||
<el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
|
<i class="fa-solid fa-clock" style="color: #6A5ACD"></i>
|
||||||
@click="deleteClick()" />
|
{{ props.productItem.totalDay }}天
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-item">
|
||||||
|
<i class="fa-solid fa-chart-line" style="color: #FFA500"></i>
|
||||||
|
{{ props.productItem.averagePrice }}元/天
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-list">
|
||||||
|
<div class="info-item">
|
||||||
|
<i class="fa-solid fa-flag"></i>
|
||||||
|
{{ props.productItem.purchaser }}
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<i class="fa-regular fa-calendar-check"></i>
|
||||||
|
{{ props.productItem.purchaseDate }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bottom-container">
|
<template #right>
|
||||||
<div class="info-list">
|
<van-button square type="primary" text="编辑" style="height: 100%;"
|
||||||
<div class="info-item">
|
@click="editClick"/>
|
||||||
<i class="fa-solid fa-clock" style="color: #6A5ACD"></i>
|
<van-button square type="danger" text="删除" style="height: 100%;"
|
||||||
{{ props.productItem.totalDay }}天
|
@click="deleteClick()"/>
|
||||||
</div>
|
</template>
|
||||||
|
</van-swipe-cell>
|
||||||
<div class="info-item">
|
|
||||||
<i class="fa-solid fa-chart-line" style="color: #FFA500"></i>
|
|
||||||
{{ props.productItem.averagePrice }}元/天
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-list">
|
|
||||||
<div class="info-item">
|
|
||||||
<i class="fa-solid fa-flag"></i>
|
|
||||||
{{ props.productItem.purchaser }}
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<i class="fa-regular fa-calendar-check"></i>
|
|
||||||
{{ props.productItem.purchaseDate }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Edit, DeleteFilled } from '@element-plus/icons-vue'
|
|
||||||
import { useProductStore } from '@/store/product.ts'
|
import { useProductStore } from '@/store/product.ts'
|
||||||
import { defineProps, onMounted, PropType } from 'vue'
|
import { defineProps, PropType } from 'vue'
|
||||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||||
import { IProduct } from '@/types/product.ts'
|
import { IProduct } from '@/types/product.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { AListUrl } from '@/utils'
|
import { AListUrl } from '@/utils'
|
||||||
|
import { showImagePreview } from 'vant'
|
||||||
|
|
||||||
const productStore = useProductStore()
|
const productStore = useProductStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -77,9 +78,10 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
const viewImageClick = () => {
|
||||||
|
const imageList = [AListUrl + props.productItem?.imageUrl]
|
||||||
})
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
|
}
|
||||||
|
|
||||||
const editClick = async () => {
|
const editClick = async () => {
|
||||||
const id = props.productItem?.id
|
const id = props.productItem?.id
|
||||||
|
|||||||
@@ -13,23 +13,14 @@
|
|||||||
<span class="record-content">旅行人:{{ item.persons.join('-') }}</span>
|
<span class="record-content">旅行人:{{ item.persons.join('-') }}</span>
|
||||||
<el-image v-for="(image, index) in item.imageList" :key="index"
|
<el-image v-for="(image, index) in item.imageList" :key="index"
|
||||||
:src="AListUrl + image"
|
:src="AListUrl + image"
|
||||||
:preview-src-list="[AListUrl + image]"
|
fit="cover" alt="暂无图片" class="record-image"
|
||||||
fit="contain" alt="暂无图片" class="record-image"/>
|
@click="viewImageClick(item, index)"/>
|
||||||
|
|
||||||
<video v-for="(video, index) in item.videoList"
|
<video v-for="(video, index) in item.videoList"
|
||||||
:key="index" controls style="width: 60%;min-height: 200px;">
|
:key="index" controls style="width: 60%;min-height: 200px;">
|
||||||
<source :src="AListUrl + video" type="video/mp4">
|
<source :src="AListUrl + video" type="video/mp4">
|
||||||
您的浏览器不支持 HTML5 视频
|
您的浏览器不支持 HTML5 视频
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<!-- <el-carousel v-if="item.imageList.length > 0"-->
|
|
||||||
<!-- arrow="always">-->
|
|
||||||
<!-- <el-carousel-item v-for="(item, index) in item.imageList" :key="index">-->
|
|
||||||
<!-- -->
|
|
||||||
<!-- </el-carousel-item>-->
|
|
||||||
<!-- </el-carousel>-->
|
|
||||||
|
|
||||||
<!-- <el-empty v-else description="暂无记录"/>-->
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-timeline-item>
|
</el-timeline-item>
|
||||||
</el-timeline>
|
</el-timeline>
|
||||||
@@ -42,6 +33,13 @@
|
|||||||
import { SvgIcon } from 'vue3-common'
|
import { SvgIcon } from 'vue3-common'
|
||||||
import { useTravelStore } from '@/store/travel.ts'
|
import { useTravelStore } from '@/store/travel.ts'
|
||||||
import { AListUrl } from '@/utils'
|
import { AListUrl } from '@/utils'
|
||||||
|
import { showImagePreview } from 'vant'
|
||||||
|
import { ITravelRecord } from '@/types/travel.ts'
|
||||||
|
|
||||||
const travelStore = useTravelStore()
|
const travelStore = useTravelStore()
|
||||||
|
|
||||||
|
const viewImageClick = (record: ITravelRecord, index: number) => {
|
||||||
|
const imageList = record.imageList.map((item) => `${AListUrl}${item}`)
|
||||||
|
showImagePreview({ images: imageList, closeable: true, startPosition: index })
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,10 +2,7 @@
|
|||||||
<div class="life-record-card card-item">
|
<div class="life-record-card card-item">
|
||||||
<el-image v-if="props.travelItem?.recordList.length > 0"
|
<el-image v-if="props.travelItem?.recordList.length > 0"
|
||||||
:src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
|
:src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
|
||||||
:preview-src-list="previewImageList"
|
fit="contain" alt="暂无成果" @click="viewImageClick">
|
||||||
:initial-index="0"
|
|
||||||
show-progress
|
|
||||||
fit="contain" alt="暂无成果">
|
|
||||||
<template #error>
|
<template #error>
|
||||||
<div class="image-slot">
|
<div class="image-slot">
|
||||||
<span>暂无图片</span>
|
<span>暂无图片</span>
|
||||||
@@ -15,62 +12,62 @@
|
|||||||
|
|
||||||
<el-empty v-else description="暂无记录"/>
|
<el-empty v-else description="暂无记录"/>
|
||||||
|
|
||||||
<div class="record-info">
|
<van-swipe-cell>
|
||||||
<div class="top-container">
|
<div class="record-info" @click="viewClick">
|
||||||
<div class="info-list">
|
<div class="top-container">
|
||||||
<div class="info-item">
|
<div class="info-list">
|
||||||
<span class="title">{{ props.travelItem.name }}</span>
|
<div class="info-item">
|
||||||
|
<span class="title">{{ props.travelItem.name }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="button-info">
|
<div class="bottom-container">
|
||||||
<el-button type="primary" :icon="Edit" circle :size="'small'"
|
<div class="info-list">
|
||||||
@click="editClick"/>
|
<div class="info-item location-item">
|
||||||
<el-button type="primary" :icon="MoreFilled" circle :size="'small'"
|
<i class="fa-solid fa-location-dot"></i>
|
||||||
@click="viewClick()"/>
|
{{ props.travelItem.area.join('-') }}
|
||||||
<el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
|
</div>
|
||||||
@click="deleteClick()"/>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="bottom-container">
|
<template #right>
|
||||||
<div class="info-list">
|
<van-button square type="primary" text="编辑" style="height: 100%;"
|
||||||
<div class="info-item location-item">
|
@click="editClick"/>
|
||||||
<i class="fa-solid fa-location-dot"></i>
|
<van-button square type="danger" text="删除" style="height: 100%;"
|
||||||
{{ props.travelItem.area.join('-') }}
|
@click="deleteClick()"/>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</van-swipe-cell>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
|
|
||||||
import { useTravelStore } from '@/store/travel.ts'
|
import { useTravelStore } from '@/store/travel.ts'
|
||||||
import { useAppStore } from '@/store/app.ts'
|
import { useAppStore } from '@/store/app.ts'
|
||||||
import { computed, defineProps, PropType, reactive } from 'vue'
|
import { defineProps, PropType, reactive } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { formatDate } from 'vue3-common/utils/dateUtil'
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
||||||
import { ITravelSpot } from '@/types/travel.ts'
|
import { ITravelSpot } from '@/types/travel.ts'
|
||||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||||
import { AListUrl } from '@/utils'
|
import { AListUrl } from '@/utils'
|
||||||
import { parsePerson } from '@/utils/home/travelUtil.ts'
|
import { parsePerson } from '@/utils/home/travelUtil.ts'
|
||||||
|
import { showImagePreview } from 'vant'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const travelStore = useTravelStore()
|
const travelStore = useTravelStore()
|
||||||
@@ -87,10 +84,10 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const previewImageList = computed(() => {
|
const viewImageClick = () => {
|
||||||
return props.travelItem.recordList.flatMap((record) =>
|
const imageList = props.travelItem.recordList.flatMap((record) => record.imageList.map((item) => `${AListUrl}${item}`))
|
||||||
record.imageList.map((item) => `${AListUrl}${item}`))
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
})
|
}
|
||||||
|
|
||||||
const editClick = async () => {
|
const editClick = async () => {
|
||||||
const id = props.travelItem?.id
|
const id = props.travelItem?.id
|
||||||
|
|||||||
@@ -32,7 +32,8 @@ export const useAnniversaryStore = defineStore('anniversary', {
|
|||||||
title: '',
|
title: '',
|
||||||
data: {}
|
data: {}
|
||||||
} as IDialog<IAnniversary>,
|
} as IDialog<IAnniversary>,
|
||||||
isRefresh: false
|
isRefresh: false,
|
||||||
|
isLoading: false
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
async queryAnniversaryList() {
|
async queryAnniversaryList() {
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ import type { IDialog } from 'vue3-common/types'
|
|||||||
import { IHandleApi } from 'vue3-common/types'
|
import { IHandleApi } from 'vue3-common/types'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
||||||
import { isLargeScreen } from '@/utils'
|
|
||||||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||||||
|
|
||||||
export const useFoodStore = defineStore('food', {
|
export const useFoodStore = defineStore('food', {
|
||||||
@@ -77,7 +76,7 @@ export const useFoodStore = defineStore('food', {
|
|||||||
rateColorList: ['#E2DEDC', '#F7BA2A', '#009FA8'],
|
rateColorList: ['#E2DEDC', '#F7BA2A', '#009FA8'],
|
||||||
pageInfo: {
|
pageInfo: {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: isLargeScreen() ? 6 : 2,
|
pageSize: 3,
|
||||||
totalSize: 1
|
totalSize: 1
|
||||||
},
|
},
|
||||||
isScrollEnd: false,
|
isScrollEnd: false,
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<el-empty v-if="anniversaryStore.anniversaryList.length === 0" />
|
<el-empty v-if="anniversaryStore.anniversaryList.length === 0" />
|
||||||
|
|
||||||
<div v-else class="anniversary-list">
|
<div v-else class="anniversary-list" v-loading="anniversaryStore.isLoading">
|
||||||
<anniversary-card v-for="(item, index) in anniversaryStore.anniversaryList"
|
<anniversary-card v-for="(item, index) in anniversaryStore.anniversaryList"
|
||||||
:key="index" :date-item="item" />
|
:key="index" :date-item="item" />
|
||||||
</div>
|
</div>
|
||||||
@@ -24,7 +24,9 @@ const anniversaryStore = useAnniversaryStore()
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
anniversaryStore.isLoading = true
|
||||||
await anniversaryStore.queryAnniversaryList()
|
await anniversaryStore.queryAnniversaryList()
|
||||||
|
anniversaryStore.isLoading = false
|
||||||
})
|
})
|
||||||
|
|
||||||
const addClick = () => {
|
const addClick = () => {
|
||||||
|
|||||||
@@ -23,9 +23,9 @@
|
|||||||
:key="index" :timestamp="formatDate(item.date)"
|
:key="index" :timestamp="formatDate(item.date)"
|
||||||
placement="top">
|
placement="top">
|
||||||
<div class="timeline-info card-item">
|
<div class="timeline-info card-item">
|
||||||
<span>{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<el-image :src="AListUrl + item.imageUrl"
|
<el-image :src="AListUrl + item.imageUrl"
|
||||||
fit="contain" alt="暂无成果"
|
fit="cover" alt="暂无成果"
|
||||||
@click="viewImageClick(item)">
|
@click="viewImageClick(item)">
|
||||||
<template #error>
|
<template #error>
|
||||||
<div class="image-slot">
|
<div class="image-slot">
|
||||||
@@ -59,7 +59,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
const viewImageClick = (item: IFoodRecord) => {
|
const viewImageClick = (item: IFoodRecord) => {
|
||||||
const imageList = [AListUrl + item.imageUrl]
|
const imageList = [AListUrl + item.imageUrl]
|
||||||
showImagePreview(imageList)
|
showImagePreview({ images: imageList, closeable: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeDateEvent = async (value: Date) => {
|
const changeDateEvent = async (value: Date) => {
|
||||||
@@ -106,6 +106,10 @@ const nextYearClick = async () => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.el-image {
|
.el-image {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mobile-kpi-detail common-mobile-view">
|
<div class="mobile-kpi-detail common-mobile-view">
|
||||||
<el-form ref="formRef" :model="kpiStore.currentKpi"
|
<el-form ref="formRef" :model="kpiStore.currentKpi"
|
||||||
:rules="rules" label-width="60px">
|
:rules="rules" label-position="top" label-width="60px"
|
||||||
|
class="form-item">
|
||||||
<el-form-item label="日期" prop="date">
|
<el-form-item label="日期" prop="date">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="kpiStore.currentKpi.date"
|
v-model="kpiStore.currentKpi.date"
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
|||||||
import { viteMockServe } from 'vite-plugin-mock'
|
import { viteMockServe } from 'vite-plugin-mock'
|
||||||
|
|
||||||
// const API_HOST = '14.103.235.151'
|
// const API_HOST = '14.103.235.151'
|
||||||
const API_HOST = '127.0.0.1'
|
const API_HOST = '192.168.1.7'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
|||||||
Reference in New Issue
Block a user