Commit f8a8900e authored by shirlyn.guo's avatar shirlyn.guo 🤡

style: 代码优化

parent 40801abf
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from 'vue' import { computed, onMounted, ref, watch, useTemplateRef, watchEffect } from 'vue'
import TemplatePreviewModal from './template-preview-modal.vue' import TemplatePreviewModal from './template-preview-modal.vue'
import { useScroll } from '@vueuse/core' import { useScroll } from '@vueuse/core'
import { DigitalTemplate, TemplateType } from '@/store/types/template' import { DigitalTemplate, TemplateType } from '@/store/types/template'
...@@ -13,6 +13,8 @@ interface PagingInfo { ...@@ -13,6 +13,8 @@ interface PagingInfo {
totalRows: number totalRows: number
} }
const templateListRef = useTemplateRef<HTMLDivElement>('templateListRef')
const router = useRouter() const router = useRouter()
const previewModalVisible = ref(false) const previewModalVisible = ref(false)
...@@ -32,12 +34,11 @@ const columnHeights = ref<number[]>([]) ...@@ -32,12 +34,11 @@ const columnHeights = ref<number[]>([])
const waterfallHeight = ref(900) const waterfallHeight = ref(900)
const templateClassifyIsLoading = ref(false) const templateClassifyIsLoading = ref(false)
const templateBottomIsLoading = ref(false) const templateBottomIsLoading = ref(false)
const templateListEl = ref(null)
const smooth = ref(false) const smooth = ref(false)
const behavior = computed(() => (smooth.value ? 'smooth' : 'auto')) const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
const { arrivedState } = useScroll(templateListEl, { behavior }) const { arrivedState } = useScroll(templateListRef, { behavior })
const { bottom } = toRefs(arrivedState)
const templateClassify = [ const templateClassify = [
{ value: '', label: '熱門' }, { value: '', label: '熱門' },
...@@ -60,12 +61,12 @@ watch(checkedClassifyValue, async () => { ...@@ -60,12 +61,12 @@ watch(checkedClassifyValue, async () => {
await getTemplateList(true) await getTemplateList(true)
}) })
watch(bottom, async (newBottom) => { watchEffect(() => {
if (newBottom) { if (arrivedState.bottom) {
if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) { if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
templateBottomIsLoading.value = true templateBottomIsLoading.value = true
pagingInfo.value.pageNo += 1 pagingInfo.value.pageNo += 1
await getTemplateList() getTemplateList()
} }
} }
}) })
...@@ -80,27 +81,25 @@ async function getTemplateList(refresh = false) { ...@@ -80,27 +81,25 @@ async function getTemplateList(refresh = false) {
if (templateClassifyIsLoading.value) return if (templateClassifyIsLoading.value) return
} }
try { fetchDigitalHumanTemplateStatusList<DigitalTemplate[]>(checkedClassifyValue.value, pagingInfo.value)
const res = await fetchDigitalHumanTemplateStatusList<DigitalTemplate[]>( .then((res) => {
checkedClassifyValue.value, if (res.code !== 0) return
pagingInfo.value,
) templateList.value = refresh ? res.data : [...templateList.value, ...res.data]
if (res.code !== 0) return
return calculatePositions(templateList.value).then((positions) => {
templateList.value = refresh ? res.data : [...templateList.value, ...res.data] newTemplateList.value = templateList.value.map((template, index) => ({
...template,
const positions = await calculatePositions(templateList.value) position: positions[index],
}))
newTemplateList.value = templateList.value.map((template, index) => ({
...template, pagingInfo.value = res.pagingInfo as PagingInfo
position: positions[index], })
})) })
.finally(() => {
pagingInfo.value = res.pagingInfo as PagingInfo templateClassifyIsLoading.value = false
} finally { templateBottomIsLoading.value = false
templateClassifyIsLoading.value = false })
templateBottomIsLoading.value = false
}
} }
async function calculatePositions(templates: any[]) { async function calculatePositions(templates: any[]) {
const columnHeights = Array(6).fill(0) const columnHeights = Array(6).fill(0)
...@@ -113,7 +112,7 @@ async function calculatePositions(templates: any[]) { ...@@ -113,7 +112,7 @@ async function calculatePositions(templates: any[]) {
const imgHeights = await Promise.all(heightPromises) const imgHeights = await Promise.all(heightPromises)
imgHeights.forEach((imgHeight) => { imgHeights.forEach((imgHeight) => {
const minColumnIndex = getMinColoumHeight(columnHeights) const minColumnIndex = getMincColumnHeight(columnHeights)
const itemTop = columnHeights[minColumnIndex] const itemTop = columnHeights[minColumnIndex]
let itemLeft = minColumnIndex * 170 let itemLeft = minColumnIndex * 170
if (itemLeft !== 0) itemLeft += 20 if (itemLeft !== 0) itemLeft += 20
...@@ -131,7 +130,7 @@ async function calculatePositions(templates: any[]) { ...@@ -131,7 +130,7 @@ async function calculatePositions(templates: any[]) {
return positions return positions
} }
function calculateImageHeight(template): Promise<number> { function calculateImageHeight(template: { videoParams: { width: number; height: number } }): Promise<number> {
return new Promise((resolve) => { return new Promise((resolve) => {
const renderWidth = 170 const renderWidth = 170
const renderHeight = (template.videoParams.height / template.videoParams.width) * renderWidth const renderHeight = (template.videoParams.height / template.videoParams.width) * renderWidth
...@@ -147,7 +146,7 @@ function handleOpenPreviewModal(template: DigitalTemplate) { ...@@ -147,7 +146,7 @@ function handleOpenPreviewModal(template: DigitalTemplate) {
} }
} }
function getMinColoumHeight(arr: number[]) { function getMincColumnHeight(arr: number[]) {
let min = Math.min(...arr) let min = Math.min(...arr)
return arr.indexOf(min) return arr.indexOf(min)
} }
...@@ -176,7 +175,7 @@ function handleToCreation(template: DigitalTemplate) { ...@@ -176,7 +175,7 @@ function handleToCreation(template: DigitalTemplate) {
</div> </div>
</div> </div>
<div <div
ref="templateListEl" ref="templateListRef"
class="h-screen min-h-[900px] w-full overflow-y-scroll bg-white px-[24px] pb-[16px]" class="h-screen min-h-[900px] w-full overflow-y-scroll bg-white px-[24px] pb-[16px]"
style="scrollbar-width: none" style="scrollbar-width: none"
> >
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment