timi/gaoYuJournal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add journal-detail-panel

Browse Source
This commit is contained in:
Timi
2025-12-10 16:45:29 +08:00
parent a5fb1d752b
commit 1e54782600
12 changed files with 496 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
miniprogram/pages/main/journal-map/index.ts
View File

@ -18,12 +18,11 @@ interface MapMarker {
};
}
interface JournalMarker {
interface JournalInfo {
id: number;
date: string;
time: string;
location?: string;
lat: number;
lng: number;
idea?: string;
items: Array<{
type: number;
@ -33,15 +32,30 @@ interface JournalMarker {
}>;
}
interface LocationMarker {
locationKey: string; // 位置键 "lat,lng"
lat: number;
lng: number;
location?: string;
journalIds: number[]; // 该位置的所有日记 ID
count: number; // 日记数量
previewThumb?: string; // 预览缩略图
}
interface SelectedLocationInfo {
location?: string;
journals: JournalInfo[];
}
interface JournalMapData {
centerLat: number;
centerLng: number;
scale: number;
markers: MapMarker[];
journals: JournalMarker[];
customCalloutMarkerIds: number[];
locations: LocationMarker[]; // 位置标记列表
customCalloutMarkerIds: string[]; // 改为 string[] 以支持 locationKey
includePoints: Array<{ latitude: number; longitude: number }>; // 缩放视野以包含所有点
selectedMarker: JournalMarker | null;
selectedLocation: SelectedLocationInfo | null; // 选中的位置信息
showDetail: boolean; // 是否显示详情（控制 DOM 存在）
detailVisible: boolean; // 详情是否可见（控制动画）
isLoading: boolean;
@ -53,10 +67,10 @@ Page({
centerLng: 116.397470,
scale: 13,
markers: [],
journals: [],
locations: [],
customCalloutMarkerIds: [],
includePoints: [],
selectedMarker: null,
selectedLocation: null,
showDetail: false,
detailVisible: false,
isLoading: true,
@ -90,28 +104,45 @@ Page({
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) {
// 过滤有位置信息的记录，并按位置分组
const locationMap = new Map<string, LocationMarker>();
list.filter((journal: any) => journal.lat && journal.lng).forEach((journal: any) => {
// 保留 6 位小数作为位置键，约等于 0.1 米精度
const lat = Number(journal.lat.toFixed(6));
const lng = Number(journal.lng.toFixed(6));
const locationKey = `${lat},${lng}`;
if (!locationMap.has(locationKey)) {
// 获取第一个有缩略图的日记
const thumbItem = journal.items.find((item: any) => item.attachType === "THUMB");
locationMap.set(locationKey, {
locationKey,
lat,
lng,
location: journal.location,
journalIds: [],
count: 0,
previewThumb: thumbItem ? `${config.url}/attachment/read/${thumbItem.mongoId}` : undefined
});
}
const marker = locationMap.get(locationKey)!;
marker.journalIds.push(journal.id);
marker.count++;
// 如果还没有预览图，尝试从当前日记获取
if (!marker.previewThumb) {
const thumbItem = journal.items.find((item: any) => item.attachType === "THUMB");
if (thumbItem) {
marker.previewThumb = `${config.url}/attachment/read/${thumbItem.mongoId}`;
}
}
});
const locations = Array.from(locationMap.values());
if (locations.length === 0) {
wx.showToast({
title: "暂无位置记录",
icon: "none"
@ -119,11 +150,12 @@ Page({
this.setData({ isLoading: false });
return;
}
// 生成地图标记
const markers: MapMarker[] = journals.map((journal) => ({
id: journal.id,
latitude: journal.lat,
longitude: journal.lng,
const markers: MapMarker[] = locations.map((location, index) => ({
id: index,
latitude: location.lat,
longitude: location.lng,
width: 24,
height: 30,
customCallout: {
@ -133,19 +165,19 @@ Page({
}
}));
// 所有标记的 ID 列表
const customCalloutMarkerIds = journals.map((j) => j.id);
// 所有标记的 locationKey 列表
const customCalloutMarkerIds = locations.map(l => l.locationKey);
// 计算中心点（所有标记的平均位置）
const centerLat = journals.reduce((sum, j) => sum + j.lat, 0) / journals.length;
const centerLng = journals.reduce((sum, j) => sum + j.lng, 0) / journals.length;
const centerLat = locations.reduce((sum, l) => sum + l.lat, 0) / locations.length;
const centerLng = locations.reduce((sum, l) => sum + l.lng, 0) / locations.length;
// 缩放视野以包含所有标记点
const includePoints = journals.map((j) => ({
latitude: j.lat,
longitude: j.lng
const includePoints = locations.map((l) => ({
latitude: l.lat,
longitude: l.lng
}));
this.setData({
journals,
locations,
markers,
customCalloutMarkerIds,
centerLat,
@ -164,58 +196,71 @@ Page({
/** 标记点击事件 */
onMarkerTap(e: any) {
const markerId = e.detail.markerId || e.markerId;
this.loadMarkerDetail(markerId);
this.loadLocationDetail(markerId);
},
/** 气泡点击事件 */
onCalloutTap(e: any) {
const markerId = e.detail.markerId || e.markerId;
this.loadMarkerDetail(markerId);
this.loadLocationDetail(markerId);
},
/** 加载标记详情 */
async loadMarkerDetail(markerId: number) {
/** 加载位置详情（该位置的所有日记） */
async loadLocationDetail(markerId: number) {
const location = this.data.locations[markerId];
if (!location) return;
wx.showLoading({ title: "加载中...", mask: true });
try {
const journal: any = await new Promise((resolve, reject) => {
// 根据 journalIds 加载日记详情
const list: Journal[] = await new Promise((resolve, reject) => {
wx.request({
url: `${config.url}/journal/${markerId}`,
url: `${config.url}/journal/list/ids`,
method: "POST",
header: {
Key: wx.getStorageSync("key")
},
success: (res: any) => {
if (res.data.code === 20000) {
resolve(res.data.data);
data: location.journalIds,
success: (resp: any) => {
if (resp.data.code === 20000) {
resolve(resp.data.data);
} else {
reject(new Error(res.data.message || "加载失败"));
reject(new Error(resp.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;
// 转换为 JournalInfo 格式
const journals: JournalInfo[] = list.map((journal: any) => {
const date = new Date(journal.createdAt);
return {
type: ext.isVideo ? 1 : 0,
thumbURL: `${config.url}/attachment/read/${thumbItem.mongoId}`,
sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
mongoId: thumbItem.mongoId,
id: journal.id,
date: Time.toPassedDateTime(journal.createdAt),
time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
location: journal.location,
idea: journal.idea,
items: journal.items
.filter((item: any) => item.attachType === MediaAttachType.THUMB)
.map((item: any) => {
const ext = JSON.parse(item.ext);
return {
type: ext.isVideo ? 1 : 0,
thumbURL: `${config.url}/attachment/read/${item.mongoId}`,
sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
mongoId: item.mongoId,
};
})
};
});
const selectedMarker = {
id: journal.id,
date: Time.toPassedDateTime(journal.createdAt),
location: journal.location,
lat: journal.lat,
lng: journal.lng,
idea: journal.idea,
items: mediaItems
};
// 先显示元素，再触发动画
this.setData({ selectedMarker, showDetail: true });
this.setData({
selectedLocation: {
location: location.location,
journals
},
showDetail: true
});
wx.nextTick(() => {
this.setData({ detailVisible: true });
});
@ -232,19 +277,9 @@ Page({
async closeDetail() {
this.setData({ detailVisible: false });
await Toolkit.sleep(350);
this.setData({ showDetail: false, 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[]
this.setData({
showDetail: false,
selectedLocation: null
});
},
});