From 0df10f5b35a0056ee3fd99eb8264487362aa6278 Mon Sep 17 00:00:00 2001 From: Timi Date: Thu, 11 Dec 2025 21:01:40 +0800 Subject: [PATCH] fix list portfolio fail --- miniprogram/pages/main/portfolio/index.less | 72 ++++++++++++------ miniprogram/pages/main/portfolio/index.ts | 81 +++++++++++++-------- miniprogram/pages/main/portfolio/index.wxml | 29 ++++---- 3 files changed, 113 insertions(+), 69 deletions(-) diff --git a/miniprogram/pages/main/portfolio/index.less b/miniprogram/pages/main/portfolio/index.less index 39d5cd6..93cd64a 100644 --- a/miniprogram/pages/main/portfolio/index.less +++ b/miniprogram/pages/main/portfolio/index.less @@ -1,38 +1,62 @@ /* pages/main/portfolio/index.wxss */ .portfolio-list { width: 100vw; - + + .location { + gap: 6rpx; + display: flex; + padding: 16rpx; + align-items: center; + + .icon { + color: var(--theme-wx); + } + + .text { + color: var(--theme-text-secondary); + } + } + .items { + gap: .25rem; + display: flex; position: relative; font-size: 14px; - column-gap: .25rem; - column-count: 3; padding-bottom: 2rem; + align-items: flex-start; - .item { - overflow: hidden; - background: var(--theme-bg-card); - break-inside: avoid; - margin-bottom: .25rem; + .column { + flex: 1; + display: flex; + flex-direction: column; - &.thumbnail { - width: 100%; - display: block; - } + .item { + overflow: hidden; + background: var(--theme-bg-card); + margin-bottom: .25rem; - &.video-container { - height: auto; - position: relative; + &.thumbnail { + width: 100%; + display: block; + } - .play-icon { - top: 50%; - left: 50%; - width: 60rpx; - height: 60rpx; - z-index: 2; - position: absolute; - transform: translate(-50%, -50%); - pointer-events: none; + &.video { + height: auto; + position: relative; + + &::after { + content: ""; + top: 50%; + left: 53%; + width: 0; + height: 0; + position: absolute; + transform: translate(-50%, -50%); + border-top: 16px solid transparent; + border-left: 24px solid var(--theme-video-play); + border-bottom: 16px solid transparent; + pointer-events: none; + } } } } diff --git a/miniprogram/pages/main/portfolio/index.ts b/miniprogram/pages/main/portfolio/index.ts index 2303d62..9ed195c 100644 --- a/miniprogram/pages/main/portfolio/index.ts +++ b/miniprogram/pages/main/portfolio/index.ts @@ -1,11 +1,13 @@ // pages/main/portfolio/index.ts -import config from "../../../config/index"; -import { JournalPage, JournalPageType } from "../../../types/Journal"; -import { QueryPage } from "../../../types/Model"; -import Events from "../../../utils/Events"; import Time from "../../../utils/Time"; -import { Journal, JournalItemType } from "../journal/index"; +import config from "../../../config/index" +import Events from "../../../utils/Events"; +import Toolkit from "../../../utils/Toolkit"; +import { Journal, JournalPage, JournalPageType } from "../../../types/Journal"; +import { OrderType, QueryPageResult } from "../../../types/Model"; +import { ImageMetadata, MediaAttachExt } from "../../../types/Attachment"; +import { MediaItem, MediaItemType } from "../../../types/UI"; interface IPortfolioData { page: JournalPage; @@ -23,6 +25,9 @@ Page({ type: JournalPageType.NORMAL, equalsExample: { type: "PORTFOLIO" + }, + orderMap: { + createdAt: OrderType.DESC } }, list: [], @@ -39,6 +44,9 @@ Page({ type: JournalPageType.NORMAL, equalsExample: { type: "PORTFOLIO" + }, + orderMap: { + createdAt: OrderType.DESC } }, list: [], @@ -79,30 +87,41 @@ Page({ }, data: this.data.page, success: async (resp: any) => { - const list = resp.data.data.list; + const pageResult = resp.data.data as QueryPageResult; + const list = pageResult.list; if (!list || list.length === 0) { this.setData({ isFinished: true }) return; } - const result = list.map((journal: any) => { - return { - date: Time.toPassedDate(journal.createdAt), - idea: journal.idea, - lat: journal.lat, - lng: journal.lng, - location: journal.location, - items: journal.items.filter((item: any) => item.attachType === "THUMB").map((item: any) => { - const ext = JSON.parse(item.ext); - return { - type: ext.isVideo ? JournalItemType.VIDEO : JournalItemType.IMAGE, - thumbUrl: `${config.url}/attachment/read/${item.mongoId}`, - mongoId: item.mongoId, - source: journal.items.find((source: any) => source.id === ext.sourceId) - } - }) - } + list.forEach(journal => { + const mediaItems = journal.items!.filter((item) => item.attachType === "THUMB").map((thumbItem, index) => { + const metadata = thumbItem.metadata as ImageMetadata; + const ext = thumbItem.ext = JSON.parse(thumbItem.ext!.toString()) as MediaAttachExt; + const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`; + const sourceURL = `${config.url}/attachment/read/${ext.sourceMongoId}`; + return { + type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE, + thumbURL, + sourceURL, + size: thumbItem.size || 0, + attachmentId: thumbItem.id, + width: metadata.width, + height: metadata.height, + originalIndex: index + } as MediaItem; + }); + journal.date = Time.toDate(journal.createdAt); + journal.time = Time.toTime(journal.createdAt); + journal.datetime = Time.toPassedDateTime(journal.createdAt); + journal.mediaItems = mediaItems; + journal.columnedItems = Toolkit.splitItemsIntoColumns(mediaItems, 3, (item) => { + if (item.width && item.height && 0 < item.width) { + return item.height / item.width; + } + return 1; + }) }) this.setData({ page: { @@ -111,9 +130,12 @@ Page({ type: JournalPageType.NORMAL, equalsExample: { type: "PORTFOLIO" + }, + orderMap: { + createdAt: OrderType.DESC } }, - list: this.data.list.concat(result), + list: this.data.list.concat(list), isFinished: list.length < this.data.page.size }); }, @@ -126,17 +148,18 @@ Page({ }, preview(e: WechatMiniprogram.BaseEvent) { const { journalIndex, itemIndex } = e.currentTarget.dataset; - const items = this.data.list[journalIndex].items; + const journal = this.data.list[journalIndex]; + const items = journal.mediaItems!; const total = items.length; - + const startIndex = Math.max(0, itemIndex - 25); const endIndex = Math.min(total, startIndex + 50); const newCurrentIndex = itemIndex - startIndex; - const sources = items.slice(startIndex, endIndex).map((item: any) => { + const sources = items.slice(startIndex, endIndex).map((item) => { return { - url: `${config.url}/attachment/read/${item.source.mongoId}`, - type: item.type === 0 ? "image" : "video" + url: item.sourceURL, + type: item.type === MediaItemType.IMAGE ? "image" : "video" } }) as any; wx.previewMedia({ diff --git a/miniprogram/pages/main/portfolio/index.wxml b/miniprogram/pages/main/portfolio/index.wxml index a59597b..ffb7972 100644 --- a/miniprogram/pages/main/portfolio/index.wxml +++ b/miniprogram/pages/main/portfolio/index.wxml @@ -14,22 +14,19 @@ wx:for-index="journalIndex" wx:key="journalIndex" > - - - - + + + + + +