fix media item sort

miniprogram/pages/main/journal/index.ts

@@ -3,27 +3,11 @@
 import Time from "../../../utils/Time";
 import config from "../../../config/index"
 import Events from "../../../utils/Events";
-import { JournalPage, JournalPageType } from "../../../types/Journal";
-import { OrderType } from "../../../types/Model";
-
-export type Journal = {
-	date: string;
-	location?: string;
-	lat?: number;
-	lng?: number;
-	idea?: string;
-	items: JournalItem[]
-}
-
-export type JournalItem = {
-	type: JournalItemType;
-	mongoId: string;
-}
-
-export enum JournalItemType {
-	IMAGE,
-	VIDEO
-}
+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 JournalData {
 	page: JournalPage;
@@ -174,30 +158,41 @@ Page({
 			},
 			data: this.data.page,
 			success: async (resp: any) => {
-				const list = resp.data.data.list;
+				const pageResult = resp.data.data as QueryPageResult<Journal>;
+				const list = pageResult.list;
 				if (!list || list.length === 0) {
 					this.setData({
 						isFinished: true
 					})
 					return;
 				}
-				const result = list.map((journal: any) => {
-					return {
-						date: Time.toPassedDateTime(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: {
@@ -211,7 +206,7 @@ Page({
 							createdAt: OrderType.DESC
 						}
 					},
-					list: this.data.list.concat(result),
+					list: this.data.list.concat(list),
 					isFinished: list.length < this.data.page.size
 				});
 			},
@@ -224,17 +219,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({