|
@@ -10,7 +10,12 @@
|
|
|
:src="detailData?.createImage"
|
|
|
alt=""
|
|
|
/>
|
|
|
- <img v-else class="w-full h-full object-cover" :src="defaultAvatar" alt="" />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="w-full h-full object-cover"
|
|
|
+ src="~/assets/img/default_avatar.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #title>
|
|
@@ -40,18 +45,19 @@
|
|
|
<div class="relative w-full">
|
|
|
<van-swipe
|
|
|
@change="(i) => (swipeItemIndex = i + 1)"
|
|
|
+ :loop="imgUrlsList.length > 1 ? true : false"
|
|
|
:autoplay="3000"
|
|
|
indicator-color="#FF9300"
|
|
|
style="--van-swipe-indicator-margin: 8px"
|
|
|
>
|
|
|
- <template v-if="detailData?.imgUrls && detailData?.imgUrls?.length">
|
|
|
+ <template v-if="imgUrlsList && imgUrlsList?.length">
|
|
|
<van-swipe-item
|
|
|
- v-for="image in detailData?.imgUrls"
|
|
|
+ v-for="image in imgUrlsList"
|
|
|
:key="image"
|
|
|
@click="
|
|
|
showImagePreview({
|
|
|
- images: detailData?.imgUrls,
|
|
|
- startPosition: swipeItemIndex
|
|
|
+ images: imgUrlsList,
|
|
|
+ startPosition: swipeItemIndex - 1
|
|
|
})
|
|
|
"
|
|
|
>
|
|
@@ -68,10 +74,10 @@
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
<div
|
|
|
- v-if="detailData?.imgUrls?.length"
|
|
|
+ v-if="imgUrlsList?.length"
|
|
|
class="absolute top-10 right-20 z-1 w-37 h-24 rounded-full bg-black/[0.3] text-white flex justify-center items-center text-sm"
|
|
|
>
|
|
|
- {{ swipeItemIndex }}/{{ detailData?.imgUrls?.length }}
|
|
|
+ {{ swipeItemIndex }}/{{ imgUrlsList?.length }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-10">
|
|
@@ -560,9 +566,10 @@ const { data: detailData, status } = useMyFetch(
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
-// // 计算数量
|
|
|
-// const collectCount = computed(() => detailData.value.collectCount)
|
|
|
-// const collectCount = ref(0)
|
|
|
+//
|
|
|
+const imgUrlsList = computed(
|
|
|
+ () => detailData.value.imgUrls.filter((i) => i.includes('https')) ?? []
|
|
|
+)
|
|
|
|
|
|
// 热门游记列表
|
|
|
const { data: dataList } = await useMyFetch(
|