refactor journal-detail-popup

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
+			})
+		}
+	}
+});