refactor journal-detail-popup

miniprogram/components/journal-detail-panel/index.ts

@@ -1,109 +0,0 @@
-// components/journal-detail-panel/index.ts
-
-interface JournalInfo {
-	id: number;
-	date: string;
-	time: string;
-	lat?: number;
-	lng?: number;
-	location?: string;
-	idea?: string;
-	items: Array<{
-		type: number;
-		thumbURL: string;
-		sourceURL: string;
-		mongoId: string;
-	}>;
-}
-
-interface JournalDetailPanelData {
-	currentJournalIndex: number;
-}
-
-Component({
-	properties: {
-		visible: {
-			type: Boolean,
-			value: false
-		},
-		title: {
-			type: String,
-			value: ""
-		},
-		journals: {
-			type: Array,
-			value: []
-		},
-		mode: {
-			type: String,
-			value: "DATE"
-		}
-	},
-	data: <JournalDetailPanelData>{
-		currentJournalIndex: 0,
-	},
-
-	observers: {
-		'journals, visible'(journals: JournalInfo[], visible: boolean) {
-			if (visible && journals && journals.length > 0) {
-				// 显示时重置索引和 margin
-				this.setData({
-					currentJournalIndex: 0,
-				});
-			}
-		}
-	},
-
-	methods: {
-		/** 关闭详情 */
-		closeDetail() {
-			this.triggerEvent("close");
-		},
-		/** swiper 切换事件 */
-		onSwiperChange(e: WechatMiniprogram.SwiperChange) {
-			this.setData({
-				currentJournalIndex: e.detail.current
-			});
-		},
-		openLocation(e: WechatMiniprogram.BaseEvent) {
-			const { journalIndex } = e.currentTarget.dataset;
-			if (!journalIndex && this.properties.mode !== "LOCATION") {
-				return;
-			}
-			const journals = this.properties.journals as JournalInfo[];
-			const journal = journals[journalIndex || 0];
-			if (journal.lat && journal.lng) {
-				wx.openLocation({
-					latitude: journal.lat,
-					longitude: journal.lng,
-				});
-			}
-		},
-
-		/** 预览媒体 */
-		previewMedia(e: WechatMiniprogram.BaseEvent) {
-			const journals = this.properties.journals as JournalInfo[];
-			if (!journals || journals.length === 0) {
-				return;
-			}
-			const { itemIndex } = e.currentTarget.dataset;
-			const items = journals[this.data.currentJournalIndex].items;
-			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) => {
-				return {
-					url: item.sourceURL,
-					type: item.type === 0 ? "image" : "video"
-				}
-			}) as any;
-			wx.previewMedia({
-				current: newCurrentIndex,
-				sources
-			})
-		}
-	}
-});

miniprogram/components/journal-detail-popup/index.less

@@ -12,12 +12,12 @@
 		overflow: hidden;
 		flex-direction: column;
 
-		.header {
+		> .header {
 			display: flex;
 			padding: 32rpx 32rpx 0 32rpx;
 			flex-shrink: 0;
-			margin-bottom: 24rpx;
 			align-items: flex-start;
+			margin-bottom: 24rpx;
 			justify-content: space-between;
 
 			.info {
@@ -30,13 +30,19 @@
 					font-size: 32rpx;
 					font-weight: 600;
 					align-items: center;
-					margin-bottom: 8rpx;
 
 					.icon {
 						color: var(--theme-wx);
 						font-size: 48rpx;
 						margin-right: 8rpx;
 					}
+
+					.text {
+						width: calc(100% - 90rpx);
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
 				}
 			}
 
@@ -50,9 +56,9 @@
 					color: var(--theme-wx);
 					padding: 4rpx 12rpx;
 					font-size: 24rpx;
-					font-weight: 600;
-					border-radius: 12rpx;
+					font-weight: bold;
 					background: var(--theme-bg-journal);
+					border-radius: 12rpx;
 				}
 			}
 		}
@@ -69,14 +75,24 @@
 					display: flex;
 					flex-direction: column;
 
-					.journal-header {
+					.header {
 						gap: 16rpx;
 						display: flex;
 						padding: 0 32rpx;
-						flex-wrap: wrap;
 						flex-shrink: 0;
+						align-items: center;
 						margin-bottom: 16rpx;
-						align-items: baseline;
+
+						.portfolio {
+							color: #FFF;
+							width: 52rpx;
+							padding: 4rpx 8rpx;
+							font-size: 24rpx;
+							background: var(--theme-wx);
+							text-align: center;
+							font-weight: bold;
+							border-radius: 8rpx;
+						}
 
 						.location {
 							gap: 8rpx;
@@ -95,14 +111,9 @@
 							}
 						}
 
-						.date {
-							flex: 1;
+						.datetime {
 							font-size: 28rpx;
-							font-weight: 600;
-						}
-
-						.time {
-							font-size: 24rpx;
+							font-weight: bold;
 						}
 					}
 

miniprogram/components/journal-detail-popup/index.ts

@@ -0,0 +1,146 @@
+// components/journal-detail-panel/index.ts
+import { Journal } from "../../types/Journal";
+import config from "../../config/index";
+import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
+import { MediaItem, MediaItemType } from "../../types/UI";
+import Time from "../../utils/Time";
+
+interface JournalDetailPanelData {
+	journals: Journal[];
+	currentJournalIndex: number;
+}
+
+Component({
+	properties: {
+		visible: {
+			type: Boolean,
+			value: false
+		},
+		ids: {
+			type: Array,
+			value: []
+		},
+		mode: {
+			type: String,
+			value: "DATE"
+		}
+	},
+	data: <JournalDetailPanelData>{
+		journals: [],
+		currentJournalIndex: 0,
+	},
+	observers: {
+		async 'ids, visible'(ids: number[], visible: boolean) {
+			if (visible && ids && 0 < ids.length) {
+				wx.showLoading({ title: "加载中...", mask: true });
+				try {
+					const journals: Journal[] = await new Promise((resolve, reject) => {
+						wx.request({
+							url: `${config.url}/journal/list/ids`,
+							method: "POST",
+							header: {
+								Key: wx.getStorageSync("key")
+							},
+							data: ids,
+							success: (resp: any) => {
+								if (resp.data.code === 20000) {
+									resolve(resp.data.data);
+								} else {
+									reject(new Error(resp.data.message || "加载失败"));
+								}
+							},
+							fail: reject
+						});
+					}) || [];
+					journals.forEach(journal => {
+						journal.date = Time.toPassedDate(journal.createdAt);
+						journal.time = Time.toTime(journal.createdAt);
+						journal.datetime  = Time.toPassedDateTime(journal.createdAt);
+
+						const thumbItems = journal.items?.filter((item) => item.attachType === MediaAttachType.THUMB);
+						if (!thumbItems) {
+							return;
+						}
+						const mediaItems: MediaItem[] = thumbItems.map((thumbItem) => {
+							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
+							} as MediaItem;
+						});
+						journal.mediaItems = mediaItems;
+					})
+					this.setData({
+						journals,
+						currentJournalIndex: 0,
+					});
+					wx.hideLoading();
+				} catch (err: any) {
+					wx.hideLoading();
+					wx.showToast({
+						title: err.message || "加载失败",
+						icon: "error"
+					});
+				}
+			}
+		}
+	},
+
+	methods: {
+		/** 关闭详情 */
+		closeDetail() {
+			this.triggerEvent("close");
+		},
+		/** swiper 切换事件 */
+		onSwiperChange(e: WechatMiniprogram.SwiperChange) {
+			this.setData({
+				currentJournalIndex: e.detail.current
+			});
+		},
+		/** 打开位置 */
+		openLocation(e: WechatMiniprogram.BaseEvent) {
+			const { journalIndex } = e.currentTarget.dataset;
+			if (!journalIndex && this.properties.mode !== "LOCATION") {
+				return;
+			}
+			const journals = this.properties.journals as Journal[];
+			const journal = journals[journalIndex || 0];
+			if (journal.lat && journal.lng) {
+				wx.openLocation({
+					latitude: journal.lat,
+					longitude: journal.lng,
+				});
+			}
+		},
+		/** 预览媒体 */
+		previewMedia(e: WechatMiniprogram.BaseEvent) {
+			const journals = this.properties.journals as Journal[];
+			if (!journals || journals.length === 0) {
+				return;
+			}
+			const { itemIndex } = e.currentTarget.dataset;
+			const items = journals[this.data.currentJournalIndex].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) => {
+				return {
+					url: item.sourceURL,
+					type: item.type === 0 ? "image" : "video"
+				}
+			}) as any;
+			wx.previewMedia({
+				current: newCurrentIndex,
+				sources
+			})
+		}
+	}
+});

miniprogram/components/journal-detail-popup/index.wxml

@@ -9,10 +9,11 @@
 		<view class="detail-content">
 			<view class="header">
 				<view class="info">
-					<view wx:if="{{title}}" class="title" catchtap="openLocation">
+					<view wx:if="{{mode === 'LOCATION'}}" class="title" catchtap="openLocation">
 						<t-icon wx:if="{{mode === 'LOCATION'}}" class="icon" name="location-filled" />
-						<text>{{title}}</text>
+						<text class="text">{{journals[currentJournalIndex].location}}</text>
 					</view>
+					<text wx:if="{{mode === 'DATE'}}" class="title">{{journals[currentJournalIndex].datetime}}</text>
 				</view>
 				<view class="actions">
 					<view wx:if="{{journals.length > 1}}" class="indicator">
@@ -25,7 +26,8 @@
 				<block wx:for="{{journals}}" wx:key="id">
 					<swiper-item class="swiper-item-wrapper">
 						<view class="journal-item">
-							<view class="journal-header">
+							<view class="header">
+								<view wx:if="{{item.type === 'PORTFOLIO'}}" class="portfolio">专拍</view>
 								<view
 									wx:if="{{item.location && mode === 'DATE'}}"
 									class="location"
@@ -35,13 +37,13 @@
 									<t-icon class="icon" name="location-filled" />
 									<text class="text">{{item.location}}</text>
 								</view>
-								<view wx:if="{{mode === 'LOCATION'}}" class="date">{{item.date}}</view>
+								<view wx:if="{{mode === 'LOCATION'}}" class="datetime">{{item.datetime}}</view>
 							</view>
 							<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
-							<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
+							<scroll-view wx:if="{{item.mediaItems && item.mediaItems.length > 0}}" scroll-y class="items-scroll">
 								<view class="items">
 									<view class="wrapper">
-										<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
+										<block wx:for="{{item.mediaItems}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
 											<image
 												class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
 												src="{{media.thumbURL}}"