add journal-map

miniprogram/app.json

@@ -5,6 +5,7 @@
 		"pages/main/journal-creater/index",
 		"pages/main/journal-search/index",
 		"pages/main/journal-editor/index",
+		"pages/main/journal-map/index",
 		"pages/main/portfolio/index",
 		"pages/main/travel/index",
 		"pages/main/about/index",

miniprogram/pages/main/journal-map/index.json

@@ -0,0 +1,6 @@
+{
+	"component": true,
+	"usingComponents": {
+		"t-navbar": "tdesign-miniprogram/navbar/navbar"
+	}
+}

miniprogram/pages/main/journal-map/index.less

@@ -0,0 +1,202 @@
+/* pages/main/journal-map/index.less */
+.container {
+	width: 100%;
+	height: 100vh;
+	position: fixed;
+	overflow: hidden;
+
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+
+	.custom-callout {
+		width: fit-content;
+		max-width: 400rpx;
+		background: #fff;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
+		border-radius: 6rpx;
+
+		.callout-content {
+			display: flex;
+			padding: 8rpx 16rpx 8rpx 8rpx;
+			align-items: flex-start;
+
+			.thumb-container {
+				width: 72rpx;
+				height: 72rpx;
+				flex-shrink: 0;
+				margin-right: 12rpx;
+				overflow: hidden;
+				border-radius: 6rpx;
+
+				.thumb {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.text-container {
+				flex: 1;
+				display: flex;
+				overflow: hidden;
+				flex-direction: column;
+
+				.location {
+					flex: 1;
+					color: #999;
+					display: flex;
+					overflow: hidden;
+					font-size: 24rpx;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					margin-bottom: 8rpx;
+				}
+
+				.idea {
+					color: #333;
+					display: -webkit-box;
+					font-size: 26rpx;
+					line-height: 1.4;
+					overflow: hidden;
+					-webkit-line-clamp: 3;
+					text-overflow: ellipsis;
+					-webkit-box-orient: vertical;
+				}
+			}
+		}
+	}
+
+	.loading {
+		top: 50%;
+		left: 50%;
+		z-index: 1000;
+		position: fixed;
+		transform: translate(-50%, -50%);
+
+		.loading-text {
+			color: #666;
+			padding: 24rpx 48rpx;
+			background: #fff;
+			border-radius: 8rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
+		}
+	}
+
+	.marker-detail {
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		display: flex;
+		position: fixed;
+		background: #FFF;
+		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .15);
+		border-radius: 24rpx 24rpx 0 0;
+		flex-direction: column;
+
+		.detail-content {
+			flex: 1;
+			display: flex;
+			padding: 32rpx;
+			flex-direction: column;
+
+			.header {
+				display: flex;
+				flex-shrink: 0;
+				margin-bottom: 16rpx;
+				align-items: flex-start;
+				justify-content: space-between;
+
+				.info {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+
+					.date {
+						color: #333;
+						font-size: 32rpx;
+						font-weight: 600;
+						margin-bottom: 8rpx;
+					}
+
+					.location {
+						color: #666;
+						display: flex;
+						font-size: 26rpx;
+						align-items: center;
+
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+						}
+					}
+				}
+
+				.close {
+					width: 48rpx;
+					height: 48rpx;
+					color: #999;
+					display: flex;
+					font-size: 48rpx;
+					line-height: 1;
+					flex-shrink: 0;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.idea {
+				color: #333;
+				display: block;
+				font-size: 28rpx;
+				line-height: 1.6;
+				flex-shrink: 0;
+				margin-bottom: 16rpx;
+			}
+
+			.items {
+				flex: 1;
+				overflow: scroll;
+
+				.wrapper {
+					position: relative;
+					column-gap: .25rem;
+					column-count: 3;
+					padding-bottom: 2rem;
+		
+					.item {
+						overflow: hidden;
+						background: var(--theme-bg-card);
+						break-inside: avoid;
+						margin-bottom: .25rem;
+		
+						&.thumbnail {
+							width: 100%;
+							display: block;
+						}
+		
+						&.video {
+							height: auto;
+							position: relative;
+		
+							&::after {
+								content: "";
+								top: 50%;
+								left: 53%;
+								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/journal-map/index.ts

@@ -0,0 +1,239 @@
+// pages/main/journal-map/index.ts
+import config from "../../../config/index";
+import Time from "../../../utils/Time";
+import { Journal, JournalPageType } from "../../../types/Journal";
+import { MediaAttachExt, MediaAttachType } from "../../../types/Attachment";
+
+interface MapMarker {
+	id: number;
+	latitude: number;
+	longitude: number;
+	width: number;
+	height: number;
+	customCallout: {
+		anchorY: number;
+		anchorX: number;
+		display: string;
+	};
+}
+
+interface JournalMarker {
+	id: number;
+	date: string;
+	location?: string;
+	lat: number;
+	lng: number;
+	idea?: string;
+	items: Array<{
+		type: number;
+		thumbURL: string;
+		sourceURL: string;
+		mongoId: string;
+	}>;
+}
+
+interface JournalMapData {
+	centerLat: number;
+	centerLng: number;
+	scale: number;
+	markers: MapMarker[];
+	journals: JournalMarker[];
+	customCalloutMarkerIds: number[];
+	selectedMarker: JournalMarker | null;
+	isLoading: boolean;
+	detailHeight: number;
+}
+
+Page({
+	data: <JournalMapData>{
+		centerLat: 39.908823,
+		centerLng: 116.397470,
+		scale: 13,
+		markers: [],
+		journals: [],
+		customCalloutMarkerIds: [],
+		selectedMarker: null,
+		isLoading: true,
+		detailHeight: 0
+	},
+	async onLoad() {
+		await this.loadJournals();
+		// 获取窗口高度，固定详情面板为 1/2 高度
+		const windowInfo = wx.getWindowInfo();
+		const windowHeight = windowInfo.windowHeight;
+		this.setData({
+			detailHeight: windowHeight * 0.5
+		});
+	},
+	/** 加载所有记录 */
+	async loadJournals() {
+		this.setData({ isLoading: true });
+		try {
+			const list: Journal[] = await new Promise((resolve, reject) => {
+				wx.request({
+					url: `${config.url}/journal/list`,
+					method: "POST",
+					header: {
+						Key: wx.getStorageSync("key")
+					},
+					data: {
+						page: 0,
+						size: 9007199254740992,
+						type: JournalPageType.PREVIEW
+					},
+					success: (resp: any) => {
+						if (resp.data.code === 20000) {
+							resolve(resp.data.data.list);
+						} else {
+							reject(new Error(resp.data.message || "加载失败"));
+						}
+					},
+					fail: reject
+				});
+			}) || [];
+			// 过滤有位置信息的记录
+			const journals: JournalMarker[] = list
+				.filter((journal: any) => journal.lat && journal.lng)
+				.map((journal: any) => ({
+					id: journal.id,
+					date: Time.toPassedDateTime(journal.createdAt),
+					location: journal.location,
+					lat: journal.lat,
+					lng: journal.lng,
+					idea: journal.idea,
+					items: journal.items.filter((item: any) => item.attachType === "THUMB")
+						.map((item: any) => {
+							const ext = JSON.parse(item.ext);
+							return {
+								type: ext.isVideo ? 1 : 0,
+								thumbURL: `${config.url}/attachment/read/${item.mongoId}`,
+								mongoId: item.mongoId,
+								source: journal.items.find((source: any) => source.id === ext.sourceId)
+							};
+						})
+				}));
+			if (journals.length === 0) {
+				wx.showToast({
+					title: "暂无位置记录",
+					icon: "none"
+				});
+				this.setData({ isLoading: false });
+				return;
+			}
+			// 生成地图标记
+			const markers: MapMarker[] = journals.map((journal) => ({
+				id: journal.id,
+				latitude: journal.lat,
+				longitude: journal.lng,
+				width: 24,
+				height: 30,
+				customCallout: {
+					anchorY: -2,
+					anchorX: 0,
+					display: "ALWAYS"
+				}
+			}));
+
+			// 所有标记的 ID 列表
+			const customCalloutMarkerIds = journals.map((j) => j.id);
+			// 计算中心点（所有标记的平均位置）
+			const centerLat = journals.reduce((sum, j) => sum + j.lat, 0) / journals.length;
+			const centerLng = journals.reduce((sum, j) => sum + j.lng, 0) / journals.length;
+
+			this.setData({
+				journals,
+				markers,
+				customCalloutMarkerIds,
+				centerLat,
+				centerLng,
+				isLoading: false
+			});
+		} catch (err: any) {
+			wx.showToast({
+				title: err.message || "加载失败",
+				icon: "error"
+			});
+			this.setData({ isLoading: false });
+		}
+	},
+	/** 标记点击事件 */
+	onMarkerTap(e: any) {
+		const markerId = e.detail.markerId || e.markerId;
+		this.loadMarkerDetail(markerId);
+	},
+	/** 气泡点击事件 */
+	onCalloutTap(e: any) {
+		const markerId = e.detail.markerId || e.markerId;
+		this.loadMarkerDetail(markerId);
+	},
+	/** 加载标记详情 */
+	async loadMarkerDetail(markerId: number) {
+		wx.showLoading({ title: "加载中...", mask: true });
+		try {
+			const journal: any = await new Promise((resolve, reject) => {
+				wx.request({
+					url: `${config.url}/journal/${markerId}`,
+					method: "POST",
+					header: {
+						Key: wx.getStorageSync("key")
+					},
+					success: (res: any) => {
+						if (res.data.code === 20000) {
+							resolve(res.data.data);
+						} else {
+							reject(new Error(res.data.message || "加载失败"));
+						}
+					},
+					fail: reject
+				});
+			});
+
+			const items = journal.items || [];
+			const thumbItems = items.filter((item: any) => item.attachType === MediaAttachType.THUMB);
+			const mediaItems = thumbItems.map((thumbItem: any) => {
+				const ext = JSON.parse(thumbItem.ext) as MediaAttachExt;
+				return {
+					type: ext.isVideo ? 1 : 0,
+					thumbURL: `${config.url}/attachment/read/${thumbItem.mongoId}`,
+					sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
+					mongoId: thumbItem.mongoId,
+				};
+			});
+			this.setData({
+				selectedMarker: {
+					id: journal.id,
+					date: Time.toPassedDateTime(journal.createdAt),
+					location: journal.location,
+					lat: journal.lat,
+					lng: journal.lng,
+					idea: journal.idea,
+					items: mediaItems
+				}
+			});
+			wx.hideLoading();
+		} catch (err: any) {
+			wx.hideLoading();
+			wx.showToast({
+				title: err.message || "加载失败",
+				icon: "error"
+			});
+		}
+	},
+	/** 关闭详情 */
+	closeDetail() {
+		this.setData({ selectedMarker: null });
+	},
+	/** 预览媒体 */
+	previewMedia(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		if (!this.data.selectedMarker) return;
+		const sources = this.data.selectedMarker.items.map((item: any) => ({
+			url: item.sourceURL,
+			type: item.type === 0 ? "image" : "video"
+		}));
+		wx.previewMedia({
+			current: index,
+			sources: sources as WechatMiniprogram.MediaSource[]
+		});
+	},
+});

miniprogram/pages/main/journal-map/index.wxml

@@ -0,0 +1,65 @@
+<!--pages/main/journal-map/index.wxml-->
+<t-navbar title="地图查找" left-arrow />
+<view class="container">
+	<map
+		id="journal-map"
+		class="map"
+		latitude="{{centerLat}}"
+		longitude="{{centerLng}}"
+		scale="{{scale}}"
+		markers="{{markers}}"
+		show-location
+		bindmarkertap="onMarkerTap"
+		bindcallouttap="onCalloutTap"
+	>
+		<cover-view slot="callout">
+			<block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
+				<cover-view class="custom-callout" marker-id="{{item}}">
+					<cover-view class="callout-content">
+						<cover-view wx:if="{{journals[index].items.length > 0}}" class="thumb-container">
+							<cover-image class="thumb" src="{{journals[index].items[0].thumbURL}}" />
+						</cover-view>
+						<cover-view class="text-container">
+							<cover-view wx:if="{{journals[index].location}}" class="location">{{journals[index].location}}</cover-view>
+							<cover-view wx:if="{{journals[index].idea}}" class="idea">{{journals[index].idea}}</cover-view>
+						</cover-view>
+					</cover-view>
+				</cover-view>
+			</block>
+		</cover-view>
+	</map>
+	<cover-view wx:if="{{isLoading}}" class="loading">
+		<cover-view class="loading-text">加载中...</cover-view>
+	</cover-view>
+	<cover-view
+		wx:if="{{selectedMarker}}"
+		class="marker-detail"
+		style="height: {{detailHeight}}px"
+	>
+		<cover-view class="detail-content">
+			<cover-view class="header">
+				<cover-view class="info">
+					<cover-view class="date">{{selectedMarker.date}}</cover-view>
+					<cover-view wx:if="{{selectedMarker.location}}" class="location">
+						<cover-image class="icon" src="../../../assets/image/location.png" />
+						<cover-view class="text">{{selectedMarker.location}}</cover-view>
+					</cover-view>
+				</cover-view>
+				<cover-view class="close" catchtap="closeDetail">×</cover-view>
+			</cover-view>
+			<cover-view wx:if="{{selectedMarker.idea}}" class="idea">{{selectedMarker.idea}}</cover-view>
+			<cover-view wx:if="{{selectedMarker.items && selectedMarker.items.length > 0}}" class="items">
+				<cover-view class="wrapper">
+					<block wx:for="{{selectedMarker.items}}" wx:key="mongoId">
+						<cover-image
+							class="item thumbnail {{item.type === 1 ? 'video' : 'image'}}"
+							src="{{item.thumbURL}}"
+							catchtap="previewMedia"
+							data-index="{{index}}"
+						/>
+					</block>
+				</cover-view>
+			</cover-view>
+		</cover-view>
+	</cover-view>
+</view>

miniprogram/pages/main/journal/index.ts

@@ -233,5 +233,10 @@ Page({
 		wx.navigateTo({
 			url: "/pages/main/journal-search/index"
 		})
+	},
+	toMap() {
+		wx.navigateTo({
+			url: "/pages/main/journal-map/index"
+		})
 	}
 });

miniprogram/pages/main/journal/index.wxml

@@ -7,7 +7,7 @@
 					<t-cell title="新纪录" leftIcon="add" bind:tap="toCreater" />
 					<t-cell title="按列表查找" leftIcon="view-list" bind:tap="toSearch" />
 					<t-cell title="按日期查找" leftIcon="calendar-1" bind:tap="openDateFilter" />
-					<t-cell title="按地图查找" leftIcon="location" />
+					<t-cell title="按地图查找" leftIcon="location" bind:tap="toMap" />
 				</t-cell-group>
 			</view>
 		</view>