add journal-detail-panel

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

@@ -0,0 +1,102 @@
+// components/journal-detail-panel/index.ts
+
+interface JournalInfo {
+	id: number;
+	date: string;
+	time: string;
+	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
+		},
+		// 标题（如 "2024 年 1 月 1 日" 或位置名称）
+		title: {
+			type: String,
+			value: ""
+		},
+		// 日记列表
+		journals: {
+			type: Array,
+			value: []
+		},
+		// 是否显示标题位置图标
+		showLocationIcon: {
+			type: Boolean,
+			value: false
+		},
+		// 是否显示每条日记的日期
+		showJournalDate: {
+			type: Boolean,
+			value: true
+		},
+		// 是否显示每条日记的位置
+		showJournalLocation: {
+			type: Boolean,
+			value: true
+		}
+	},
+
+	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
+			});
+		},
+
+		/** 预览媒体 */
+		previewMedia(e: WechatMiniprogram.BaseEvent) {
+			const { mediaIndex } = e.currentTarget.dataset;
+			const journals = this.properties.journals as JournalInfo[];
+			if (!journals || journals.length === 0) return;
+
+			// 使用当前 swiper 的索引
+			const journal = journals[this.data.currentJournalIndex];
+			const sources = journal.items.map((item: any) => ({
+				url: item.sourceURL,
+				type: item.type === 0 ? "image" : "video"
+			}));
+
+			wx.previewMedia({
+				current: mediaIndex,
+				sources: sources as WechatMiniprogram.MediaSource[]
+			});
+		}
+	}
+});