From 47ebd76c024d57e034c2c553cc2fb5e4b60cbec0 Mon Sep 17 00:00:00 2001 From: raoyongjun <785755591@qq.com> Date: Fri, 26 Apr 2024 08:20:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/content/Content.vue | 386 +++++++++++++++-------------- 1 file changed, 198 insertions(+), 188 deletions(-) diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue index 37ce72e..3805e0c 100644 --- a/src/views/home/content/Content.vue +++ b/src/views/home/content/Content.vue @@ -4,15 +4,18 @@ import { Download as DownloadIcon, Upload as UploadIcon } from '@vicons/tabler' import { Icon } from '@vicons/utils' import { useInfiniteScroll } from '@vueuse/core' import dayjs from 'dayjs' -import imagesloaded from 'imagesloaded' + +// import imagesloaded from 'imagesloaded' import { cloneDeep, debounce } from 'lodash-es' -import Masonry from 'masonry-layout' + +// import Masonry from 'masonry-layout' import { NIcon, useMessage } from 'naive-ui' import type { Component } from 'vue' import { computed, h, nextTick, + onBeforeMount, onMounted, onUnmounted, onUpdated, @@ -54,9 +57,9 @@ const listData = ref([]) const timer = ref() const showClose = ref(false) const deviceHeight = ref(600) -let _masonry: null | Masonry = null -let _imagesload: any -const masonryRef = ref(null) +// let _masonry: null | Masonry = null +// let _imagesload: any +// const masonryRef = ref(null) const el = ref(null) const viewMode = ref('masonry') const pagination = reactive({ @@ -101,36 +104,36 @@ const listStyle = computed(() => { } }) -const layout = debounce(() => { - if (masonryRef.value == null || el.value == null) - return - - if (_masonry !== null) - (_masonry as any).addItems() - - _masonry = new Masonry(masonryRef.value as any, { - itemSelector: '.grid-item', - gutter: 17, - columnWidth: 182, - percentPosition: true, - stagger: 10, - }) - loading.value = false - // 暂时注释，请忽略 - _imagesload = imagesloaded('.grid-item') - - _imagesload.on('done', (instance) => { - (_masonry as any).layout() - if (!el.value) - return - loading.value = false - }) - - _imagesload.on('fail', (instance) => { - message.error('图片错误') - loading.value = false - }) -}, 300) +// const layout = debounce(() => { +// if (masonryRef.value == null || el.value == null) +// return + +// if (_masonry !== null) +// (_masonry as any).addItems() + +// _masonry = new Masonry(masonryRef.value as any, { +// itemSelector: '.grid-item', +// gutter: 17, +// columnWidth: 182, +// percentPosition: true, +// stagger: 10, +// }) +// loading.value = false +// // 暂时注释，请忽略 +// _imagesload = imagesloaded('.grid-item') + +// _imagesload.on('done', (instance) => { +// (_masonry as any).layout() +// if (!el.value) +// return +// loading.value = false +// }) + +// _imagesload.on('fail', (instance) => { +// message.error('图片错误') +// loading.value = false +// }) +// }, 300) useInfiniteScroll( el as any, @@ -140,12 +143,25 @@ useInfiniteScroll( { distance: 10, canLoadMore: () => canloadMore }, ) -onUpdated(() => { - nextTick(() => { - setTimeout(() => { - layout() - }, 50) +onBeforeMount(async () => { + const more = await featchList() + more.forEach((item) => { + item.calHeight = 182 * item.high / item.wide + }) + listData.value = more + const tmore = await featchList() + tmore.forEach((item) => { + item.calHeight = 182 * item.high / item.wide }) + listData.value = listData.value.concat(tmore) +}) + +onUpdated(() => { + // nextTick(() => { + // setTimeout(() => { + // layout() + // }, 50) + // }) }) const timeRange = ref('') @@ -157,14 +173,6 @@ const timeLabel = computed(() => { return item?.label }) -const viewLabel = computed(() => { - const item = viewOptions.find((option) => { - return option.value === viewMode.value - }) - - return item?.label -}) - const isAllowDownload = ref(true) const calNum = ref(0) const searchValue = ref('') @@ -254,46 +262,48 @@ async function featchList(userSearchId?: string) { const list = data.map((item) => { return { + calHeight: 0, imgUrl: item.imgurl, - thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg, + thumburl: item.serverThumbnailUrl, upname: item.upname, ocrPictureclass: item.ocrPictureclass, uphead: item.uphead, similar: item.similarityscore || -1, imgName: item.imgname, states: item.states, + wide: item.wide, + high: item.high, loadOver: false, - isRepeatHis: item.isRepeatHis, } }) - + loading.value = false return list } catch (error) { canloadMore = false + loading.value = false return [] } } async function loadMore() { + console.log('loading.value加兹安', loading.value, el.value) if (loading.value || el.value == null) return - + canloadMore = false const more = await featchList() - // if(isInitSeaerch.value) { - // listData.value = [] - // isInitSeaerch.value = false - // } - - console.log(more) - listData.value.push(...more) - console.log(listData.value) + more.forEach((item) => { + item.calHeight = 182 * item.high / item.wide + }) + // listData.value.push(...more) + listData.value = listData.value.concat(more) + console.log('listData.value出来了', listData.value) } const gridHeight = computed(() => { let height = '' if (viewMode.value === 'masonry') - height = '' + height = 'auto' else if (viewMode.value === 'horizontalVersion') height = '145px' else if (viewMode.value === 'verticalVersion') @@ -481,9 +491,13 @@ function reset() { canloadMore = true filterId = null - layout() + // layout() } +watch(listData.value, (newVal, oldVal) => { + console.log('最新的val', newVal) +}) + async function refreshHandler(filtersearchId?: any) { reset() @@ -643,6 +657,16 @@ const dropdownOptions = ref([ }, ]) +function finish() { + console.log('finish') +} + +function scroll() { + +} + +const masonryRef = ref(null) + defineExpose({ showLoginSuccessModal, closeLoginSuccessModal, @@ -715,137 +739,117 @@ defineExpose({ {{ totalCount }} 项 - -
- -
-
--> +
+ +
+ 加载错误 - - - - - - - - - - - -
- -
- {{ `${item.similar}%` }} -
-
-
- + +
+
@@ -869,7 +873,6 @@ defineExpose({ flex-direction: column; box-sizing: border-box; margin-left: 16px; - margin-right: 16px; width: 100%; &-header { @@ -916,19 +919,26 @@ defineExpose({ padding-bottom: 16px; } + .grid{ + display: block !important; + } + .img { + width: 182px; + max-width: 182px; border-radius: 7px; display: block; - height: calc(100% - 25px); + opacity: 1 !important; + // height: calc(100% - 25px); } .img-fit { - width: 100%; + width: 182px; overflow: hidden; } .img-full { - width: 100%; + width: 182px; overflow: hidden; ::v-deep(img) {