refactor travel

miniprogram/components/travel-location-popup/index.ts

@@ -0,0 +1,141 @@
+// components/travel-location-popup/index.ts
+import { TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon } from "../../types/Travel";
+import { TravelLocationApi } from "../../api/TravelLocationApi";
+import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
+import { MediaItem, MediaItemType } from "../../types/UI";
+import config from "../../config/index";
+import Toolkit from "../../utils/Toolkit";
+
+interface TravelLocationPopupData {
+	locations: TravelLocation[];
+	currentLocationIndex: number;
+}
+
+Component({
+	properties: {
+		visible: {
+			type: Boolean,
+			value: false
+		},
+		ids: {
+			type: Array,
+			value: []
+		}
+	},
+	data: <TravelLocationPopupData>{
+		locations: [],
+		currentLocationIndex: 0,
+	},
+	observers: {
+		async 'ids, visible'(ids: number[], visible: boolean) {
+			if (visible && ids && 0 < ids.length) {
+				wx.showLoading({ title: "加载中...", mask: true });
+				try {
+					const locations = await TravelLocationApi.getListByIds(ids);
+
+					locations.forEach(location => {
+						location.typeLabel = location.type ? TravelLocationTypeLabel[location.type] : "";
+						location.typeIcon = location.type ? TravelLocationTypeIcon[location.type] : "";
+
+						// 处理附件数据
+						const attachments = location.items || [];
+						const thumbItems = attachments.filter((item: any) => item.attachType === MediaAttachType.THUMB);
+
+						if (0 < thumbItems.length) {
+							const mediaItems: MediaItem[] = thumbItems.map((thumbItem: any, index: number) => {
+								const metadata = thumbItem.metadata;
+								const ext = typeof thumbItem.ext === "string" ? JSON.parse(thumbItem.ext) : thumbItem.ext;
+								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;
+							});
+
+							location.mediaItems = mediaItems;
+							location.columnedItems = Toolkit.splitItemsIntoColumns(mediaItems, 3, (item) => {
+								if (item.width && item.height && 0 < item.width) {
+									return item.height / item.width;
+								}
+								return 1;
+							});
+						}
+					});
+
+					this.setData({
+						locations,
+						currentLocationIndex: 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({
+				currentLocationIndex: e.detail.current
+			});
+		},
+		/** 打开位置 */
+		openLocation() {
+			const location = this.data.locations[this.data.currentLocationIndex];
+			if (location && location.lat && location.lng) {
+				wx.openLocation({
+					latitude: location.lat,
+					longitude: location.lng,
+					name: location.title || "地点",
+					address: location.location || ""
+				});
+			}
+		},
+		/** 预览媒体 */
+		previewMedia(e: WechatMiniprogram.BaseEvent) {
+			const locations = this.data.locations;
+			if (!locations || locations.length === 0) {
+				return;
+			}
+			const { itemIndex } = e.currentTarget.dataset;
+			const location = locations[this.data.currentLocationIndex];
+			const items = (location as any).mediaItems;
+			if (!items || items.length === 0) {
+				return;
+			}
+			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: MediaItem) => {
+				return {
+					url: item.sourceURL,
+					type: item.type === MediaItemType.IMAGE ? "image" : "video"
+				};
+			}) as any;
+			wx.previewMedia({
+				current: newCurrentIndex,
+				sources
+			});
+		}
+	}
+});