update 1.5.4

miniprogram/pages/main/about/index.wxml

@@ -26,7 +26,7 @@
 			</view>
 			<view class="item">
 				<text class="label">版本：</text>
-				<text>1.5.2</text>
+				<text>1.5.4</text>
 			</view>
 			<view class="item copyright">
 				<text>{{copyright}}</text>

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 {
+		.column {
-			overflow: hidden;
+			flex: 1;
-			background: var(--theme-bg-card);
+			display: flex;
-			break-inside: avoid;
+			flex-direction: column;
-			margin-bottom: .25rem;
 
-			&.thumbnail {
+			.item {
-				width: 100%;
+				overflow: hidden;
-				display: block;
+				background: var(--theme-bg-card);
-			}
+				margin-bottom: .25rem;
 
-			&.video-container {
+				&.thumbnail {
-				height: auto;
+					width: 100%;
-				position: relative;
+					display: block;
+				}
 
-				.play-icon {
+				&.video {
-					top: 50%;
+					height: auto;
-					left: 50%;
+					position: relative;
-					width: 60rpx;
+
-					height: 60rpx;
+					&::after {
-					z-index: 2;
+						content: "";
-					position: absolute;
+						top: 50%;
-					transform: translate(-50%, -50%);
+						left: 53%;
-					pointer-events: none;
+						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;
+					}
 				}
 			}
 		}

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<Journal>;
+				const list = pageResult.list;
 				if (!list || list.length === 0) {
 					this.setData({
 						isFinished: true
 					})
 					return;
 				}
-				const result = list.map((journal: any) => {
+				list.forEach(journal => {
-					return {
+					const mediaItems = journal.items!.filter((item) => item.attachType === "THUMB").map((thumbItem, index) => {
-						date: Time.toPassedDate(journal.createdAt),
+						const metadata = thumbItem.metadata as ImageMetadata;
-						idea: journal.idea,
+						const ext = thumbItem.ext = JSON.parse(thumbItem.ext!.toString()) as MediaAttachExt;
-						lat: journal.lat,
+						const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
-						lng: journal.lng,
+						const sourceURL = `${config.url}/attachment/read/${ext.sourceMongoId}`;
-						location: journal.location,
+						return {
-						items: journal.items.filter((item: any) => item.attachType === "THUMB").map((item: any) => {
+							type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
-							const ext = JSON.parse(item.ext);
+							thumbURL,
-							return {
+							sourceURL,
-								type: ext.isVideo ? JournalItemType.VIDEO : JournalItemType.IMAGE,
+							size: thumbItem.size || 0,
-								thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
+							attachmentId: thumbItem.id,
-								mongoId: item.mongoId,
+							width: metadata.width,
-								source: journal.items.find((source: any) => source.id === ext.sourceId)
+							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}`,
+				url: item.sourceURL,
-				type: item.type === 0 ? "image" : "video"
+				type: item.type === MediaItemType.IMAGE ? "image" : "video"
 			}
 		}) as any;
 		wx.previewMedia({

miniprogram/pages/main/portfolio/index.wxml

@@ -14,22 +14,19 @@
 			wx:for-index="journalIndex"
 			wx:key="journalIndex"
 		>
-			<view wx:if="{{journal.items}}" class="items">
+			<view wx:if="{{journal.columnedItems}}" class="items">
-				<block
+				<view wx:for="{{journal.columnedItems}}" wx:for-item="column" wx:for-index="columnIndex" wx:key="columnIndex" class="column">
-					wx:for="{{journal.items}}"
+					<block wx:for="{{column}}" wx:for-item="item" wx:for-index="itemIndex" wx:key="attachmentId">
-					wx:for-item="item"
+						<image
-					wx:for-index="itemIndex"
+							class="item thumbnail {{item.type === 0 ? 'image' : 'video'}}"
-					wx:key="itemIndex"
+							src="{{item.thumbURL}}"
-				>
+							mode="widthFix"
-					<image
+							bindtap="preview"
-						class="item thumbnail"
+							data-item-index="{{item.originalIndex}}"
-						src="{{item.thumbUrl}}"
+							data-journal-index="{{journalIndex}}"
-						mode="widthFix"
+						></image>
-						bindtap="preview"
+					</block>
-						data-journal-index="{{journalIndex}}"
+				</view>
-						data-item-index="{{itemIndex}}"
-					></image>
-				</block>
 			</view>
 		</t-collapse-panel>
 	</t-collapse>