XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复通知列表结束标记显示条件及图片懒加载问题

Browse Source 
修复系统通知列表在没有数据时仍显示结束标记的问题，添加对列表长度的判断
为收藏列表和图片浏览添加延迟布局刷新以解决渲染问题
修正图片路径中的多余斜杠并统一使用懒加载
为图片浏览组件添加ESC键关闭功能
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-08-26 18:53:39 +08:00
parent 7839c05c67
commit a3a305eeeb
4 changed files with 56 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ai/aiItem.vue
View File

@@ -47,7 +47,7 @@
<div class="star-box flex1 flexacenter">
<span class="spot-title">推荐星级：</span>
<img v-for="item in Number(item.score)" :key="item" class="star-item" src="@/assets/img/publicImage/star-icon.svg" />
<img v-if="item.scoreHalf" class="star-item" src="@/assets/img/publicImage//star-half.svg" />
<img v-if="item.scoreHalf" class="star-item" src="@/assets/img/publicImage/star-half.svg" />
</div>
</div>
<div class="spot flexflex" wx:if="{{ item.recommendation_reason }}">
@@ -56,7 +56,7 @@
</div>
<div class="spot" v-if="item.images.length > 0">
<div class="scroll-view">
<img class="img" @click="openImageShow(item.images, index)" v-for="(source, index) in item.images" :key="index" :src="source" alt="图片" />
<img class="img" @click="openImageShow(item.images, index)" v-for="(source, index) in item.images" :key="index" v-lazy="source" alt="图片" />
</div>
</div>
</div>

70
src/components/detail/imageWatch.vue
View File

@@ -6,7 +6,7 @@
<el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="index" indicator-position="none" ref="carousel" @change="carouselChange">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center;">
<div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center">
<video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box>
<!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->
</div>
@@ -23,14 +23,14 @@
<div class="tab-text">{{ `${imageTab + 1}/${list.length}` }}</div>
<div class="dis-f jus-x al-item">
<div class="list-img-box dis-f al-item jus-x">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px;">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px">
<div class="voide" v-if="item['type'] != 'attachment'">
<div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i, 'select-box': imageTab === i}">
<div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i, 'select-box': imageTab === i }">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="" />
</div>
</div>
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i && item.thumbnail }, { 'voide-img': !item.thumbnail }]">
<img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;" />
<img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover" />
</div>
</div>
</div>
@@ -40,10 +40,10 @@
</template>
<script setup>
import { set } from "nprogress"
import { set } from "nprogress";
import { reactive, onMounted, ref, defineProps, watchEffect, watch } from "vue"
import videoBox from "@/components/public/video-box.vue"
import { reactive, onMounted, ref, defineProps, watchEffect, watch, onBeforeUnmount } from "vue";
import videoBox from "@/components/public/video-box.vue";
// type 的类型代表 attachment 图片 videos 视频 lives 直播
const props = defineProps({
@@ -52,13 +52,13 @@ const props = defineProps({
list: {
type: Array,
default: function () {
return []
return [];
},
},
index: {
type: Number,
default: function () {
return 0
return 0;
},
},
close: {
@@ -68,47 +68,55 @@ const props = defineProps({
type: Boolean,
default: false,
},
})
});
let show = props.show
let list = ref([])
let close = props.close
let show = props.show;
let list = ref([]);
let close = props.close;
let carousel = ref(null)
let imageTab = ref(0)
let carousel = ref(null);
let imageTab = ref(0);
//上一张
let prev = () => carousel.value.prev()
let prev = () => carousel.value.prev();
// 轮播图滚动后事件
const carouselChange = value => {
imageTab.value = value
}
const carouselChange = (value) => {
imageTab.value = value;
};
//下一张
let next = () => carousel.value.next()
let next = () => carousel.value.next();
//点击预览图
let watchSet = num => {
carousel.value.setActiveItem(num)
}
let watchSet = (num) => {
carousel.value.setActiveItem(num);
};
const handleEscKey = e => (e.key == "Escape" && close())
onMounted(() => {
watchEffect(() => {
show = props.show
list.value = props.list
imageTab.value = props.index
show = props.show;
list.value = props.list;
imageTab.value = props.index;
// carousel.value.setActiveItem(props.index)
})
})
});
window.addEventListener("keydown", handleEscKey);
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", handleEscKey);
});
watch(
() => props.index,
(newValue, oldValue) => {
imageTab.value = newValue
watchSet(imageTab.value)
imageTab.value = newValue;
watchSet(imageTab.value);
}
)
);
</script>
<style scoped lang="less">
img {

2
src/components/user/systematic-notification-pop.vue
View File

@@ -171,7 +171,7 @@
</div>
</template>
<div class="end" v-if="page == 0">- end -</div>
<div class="end" v-if="page == 0 && list.length > 0">- end -</div>
</div>
</div>
</div>

13
src/views/user.vue
View File

@@ -381,6 +381,11 @@ const getFavData = () => {
masonryInstance.reloadItems();
masonryInstance.layout();
loading.close();
setTimeout(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
}, 1000);
});
})
.finally(() => {
@@ -432,6 +437,10 @@ let cancelCollection = (data) => {
masonryInstance.reloadItems();
masonryInstance.layout();
loading.close();
setTimeout(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
}, 1000);
});
});
};
@@ -464,6 +473,10 @@ const refillData = (index) => {
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
setTimeout(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
}, 1000);
});
});
};