|
|
|
@ -1,9 +1,10 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, onMounted, onUpdated, reactive, ref, watch } from 'vue'
|
|
|
|
|
import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue'
|
|
|
|
|
import Masonry from 'masonry-layout'
|
|
|
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
|
import { timeOptions, viewOptions } from '@/config/home'
|
|
|
|
|
import { off, on } from '@/utils/domUtils'
|
|
|
|
|
import { useTask } from '@/store/modules/task'
|
|
|
|
@ -46,10 +47,10 @@ const el = ref<HTMLDivElement | null>(null)
|
|
|
|
|
const listData = ref<any[]>([])
|
|
|
|
|
const taskDetailInfo = ref<any>({})
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageNo: 0,
|
|
|
|
|
pageSize: 30,
|
|
|
|
|
})
|
|
|
|
|
let loading = false
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
let _masonry: null | Masonry = null
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
const sortBy: PictureSortParam = {
|
|
|
|
@ -57,6 +58,8 @@ const sortBy: PictureSortParam = {
|
|
|
|
|
orderbyvalue: 'fromuptime',
|
|
|
|
|
}
|
|
|
|
|
const batch = ref(false)
|
|
|
|
|
let _imagesload: any
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
|
if (!show.value)
|
|
|
|
@ -72,13 +75,18 @@ const layout = debounce(() => {
|
|
|
|
|
stagger: 10,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
imagesloaded('.grid-item', () => {
|
|
|
|
|
_imagesload = imagesloaded('.grid-item')
|
|
|
|
|
|
|
|
|
|
_imagesload.on('done', (instance) => {
|
|
|
|
|
(_masonry as any).layout()
|
|
|
|
|
const scrollHeight = el.value!.scrollHeight
|
|
|
|
|
const clientHeight = el.value!.clientHeight
|
|
|
|
|
const top = scrollHeight - clientHeight - 20
|
|
|
|
|
el.value!.scrollTo({ top, behavior: 'instant' })
|
|
|
|
|
loading = false
|
|
|
|
|
if (!el.value)
|
|
|
|
|
return
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
_imagesload.on('fail', (instance) => {
|
|
|
|
|
message.error('图片错误')
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
@ -96,27 +104,8 @@ useInfiniteScroll(
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
async function featchList() {
|
|
|
|
|
loading = true
|
|
|
|
|
try {
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
|
const taskId = taskStore.getActiveId
|
|
|
|
|
|
|
|
|
|
const res = await getTaskDetailPictureList(packageid, taskId, { ...pagination, ...sortBy })
|
|
|
|
|
|
|
|
|
|
const { data, pageCount } = res
|
|
|
|
|
pagination.pageNo += 1
|
|
|
|
|
canloadMore = pageCount >= pagination.pageNo
|
|
|
|
|
|
|
|
|
|
return data
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
|
if (loading || el.value == null)
|
|
|
|
|
if (loading.value || el.value == null)
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
@ -127,11 +116,28 @@ async function loadMore() {
|
|
|
|
|
|
|
|
|
|
const more = await featchList()
|
|
|
|
|
listData.value.push(...more)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onUpdated(() => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
layout()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function featchList() {
|
|
|
|
|
loading.value = true
|
|
|
|
|
try {
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
|
const taskId = taskStore.getActiveId
|
|
|
|
|
|
|
|
|
|
pagination.pageNo += 1
|
|
|
|
|
const { data, pageCount } = await getTaskDetailPictureList(packageid, taskId, { ...pagination, ...sortBy })
|
|
|
|
|
canloadMore = pageCount >= pagination.pageNo && pageCount > 0
|
|
|
|
|
|
|
|
|
|
return data
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
canloadMore = false
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let start: { x: number, y: number } | null = null
|
|
|
|
|
let selectionBox: HTMLDivElement | null
|
|
|
|
@ -292,7 +298,17 @@ function getSelectItems() {
|
|
|
|
|
return listData.value.filter(item => selectIds.value.includes(item.id))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
|
pagination.pageNo = 0
|
|
|
|
|
pagination.pageSize = 30
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
loading.value = false
|
|
|
|
|
canloadMore = true
|
|
|
|
|
layout()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function refreshHandler() {
|
|
|
|
|
reset()
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
|
const taskId = taskStore.getActiveId
|
|
|
|
|
|
|
|
|
@ -301,13 +317,15 @@ async function refreshHandler() {
|
|
|
|
|
|
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
|
|
|
|
|
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
pagination.pageSize = 30
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loadMore()
|
|
|
|
|
},
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
@ -418,7 +436,7 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
class="wrapper-content-item-img"
|
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgurl"
|
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.thumburl"
|
|
|
|
|
>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<n-checkbox
|
|
|
|
@ -614,7 +632,7 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
|
|
|
|
|
|
.scroll {
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: calc(100vh - 320px);
|
|
|
|
|
height: calc(100vh - 420px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|