refactor journal-detail-popup
This commit is contained in:
Timi
@ -1,7 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"journal-detail-panel": "/components/journal-detail-panel/index"
|
||||
"journal-detail-popup": "/components/journal-detail-popup/index"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import config from "../../../config/index";
|
||||
import Time from "../../../utils/Time";
|
||||
import { Journal, JournalPageType } from "../../../types/Journal";
|
||||
import { MediaAttachType } from "../../../types/Attachment";
|
||||
import Toolkit from "../../../utils/Toolkit";
|
||||
|
||||
interface MapMarker {
|
||||
@ -18,20 +17,6 @@ interface MapMarker {
|
||||
};
|
||||
}
|
||||
|
||||
interface JournalInfo {
|
||||
id: number;
|
||||
date: string;
|
||||
time: string;
|
||||
location?: string;
|
||||
idea?: string;
|
||||
items: Array<{
|
||||
type: number;
|
||||
thumbURL: string;
|
||||
sourceURL: string;
|
||||
mongoId: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface LocationMarker {
|
||||
locationKey: string; // 位置键 "lat,lng"
|
||||
lat: number;
|
||||
@ -43,11 +28,6 @@ interface LocationMarker {
|
||||
previewThumb?: string; // 预览缩略图
|
||||
}
|
||||
|
||||
interface SelectedLocationInfo {
|
||||
location?: string;
|
||||
journals: JournalInfo[];
|
||||
}
|
||||
|
||||
interface JournalMapData {
|
||||
centerLat: number;
|
||||
centerLng: number;
|
||||
@ -56,9 +36,8 @@ interface JournalMapData {
|
||||
locations: LocationMarker[]; // 位置标记列表
|
||||
customCalloutMarkerIds: string[]; // 改为 string[] 以支持 locationKey
|
||||
includePoints: Array<{ latitude: number; longitude: number }>; // 缩放视野以包含所有点
|
||||
selectedLocation: SelectedLocationInfo | null; // 选中的位置信息
|
||||
showDetail: boolean; // 是否显示详情（控制 DOM 存在）
|
||||
detailVisible: boolean; // 详情是否可见（控制动画）
|
||||
popupIds: number[];
|
||||
popupVisible: boolean;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
@ -72,8 +51,8 @@ Page({
|
||||
customCalloutMarkerIds: [],
|
||||
includePoints: [],
|
||||
selectedLocation: null,
|
||||
showDetail: false,
|
||||
detailVisible: false,
|
||||
popupIds: [],
|
||||
popupVisible: false,
|
||||
isLoading: true,
|
||||
},
|
||||
async onLoad() {
|
||||
@ -105,10 +84,8 @@ Page({
|
||||
fail: reject
|
||||
});
|
||||
}) || [];
|
||||
|
||||
// 过滤有位置信息的记录，并按位置分组
|
||||
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));
|
||||
@ -116,7 +93,6 @@ Page({
|
||||
const locationKey = `${lat},${lng}`;
|
||||
|
||||
if (!locationMap.has(locationKey)) {
|
||||
// 获取第一个有缩略图的日记
|
||||
const thumbItem = journal.items.find((item: any) => item.attachType === "THUMB");
|
||||
locationMap.set(locationKey, {
|
||||
locationKey,
|
||||
@ -129,7 +105,6 @@ Page({
|
||||
previewThumb: thumbItem ? `${config.url}/attachment/read/${thumbItem.mongoId}` : undefined
|
||||
});
|
||||
}
|
||||
|
||||
const marker = locationMap.get(locationKey)!;
|
||||
marker.journalIds.push(journal.id);
|
||||
marker.count++;
|
||||
@ -141,9 +116,7 @@ Page({
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const locations = Array.from(locationMap.values());
|
||||
|
||||
if (locations.length === 0) {
|
||||
wx.showToast({
|
||||
title: "暂无位置记录",
|
||||
@ -152,7 +125,6 @@ Page({
|
||||
this.setData({ isLoading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
// 生成地图标记
|
||||
const markers: MapMarker[] = locations.map((location, index) => ({
|
||||
id: index,
|
||||
@ -162,11 +134,11 @@ Page({
|
||||
height: 30,
|
||||
customCallout: {
|
||||
anchorY: -2,
|
||||
anchorX: 0,
|
||||
// 随机错位避免近距离重叠
|
||||
anchorX: Toolkit.random(-10, 10),
|
||||
display: "ALWAYS"
|
||||
}
|
||||
}));
|
||||
|
||||
// 所有标记的 locationKey 列表
|
||||
const customCalloutMarkerIds = locations.map(l => l.locationKey);
|
||||
// 计算中心点（所有标记的平均位置）
|
||||
@ -177,7 +149,6 @@ Page({
|
||||
latitude: l.lat,
|
||||
longitude: l.lng
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
locations,
|
||||
markers,
|
||||
@ -208,81 +179,18 @@ Page({
|
||||
/** 加载位置详情（该位置的所有日记） */
|
||||
async loadLocationDetail(markerId: number) {
|
||||
const location = this.data.locations[markerId];
|
||||
if (!location) return;
|
||||
|
||||
wx.showLoading({ title: "加载中...", mask: true });
|
||||
try {
|
||||
// 根据 journalIds 加载日记详情
|
||||
const list: Journal[] = await new Promise((resolve, reject) => {
|
||||
wx.request({
|
||||
url: `${config.url}/journal/list/ids`,
|
||||
method: "POST",
|
||||
header: {
|
||||
Key: wx.getStorageSync("key")
|
||||
},
|
||||
data: location.journalIds,
|
||||
success: (resp: any) => {
|
||||
if (resp.data.code === 20000) {
|
||||
resolve(resp.data.data);
|
||||
} else {
|
||||
reject(new Error(resp.data.message || "加载失败"));
|
||||
}
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
}) || [];
|
||||
|
||||
// 转换为 JournalInfo 格式
|
||||
const journals: JournalInfo[] = list.map((journal: any) => {
|
||||
const date = new Date(journal.createdAt);
|
||||
return {
|
||||
id: journal.id,
|
||||
date: Time.toPassedDateTime(journal.createdAt),
|
||||
time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
|
||||
lat: journal.lat,
|
||||
lng: journal.lng,
|
||||
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,
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
// 先显示元素，再触发动画
|
||||
this.setData({
|
||||
selectedLocation: {
|
||||
location: location.location,
|
||||
journals
|
||||
},
|
||||
showDetail: true
|
||||
});
|
||||
wx.nextTick(() => {
|
||||
this.setData({ detailVisible: true });
|
||||
});
|
||||
wx.hideLoading();
|
||||
} catch (err: any) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: err.message || "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
if (!location) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
popupIds: location.journalIds,
|
||||
popupVisible: true
|
||||
});
|
||||
},
|
||||
/** 关闭详情 */
|
||||
async closeDetail() {
|
||||
this.setData({ detailVisible: false });
|
||||
await Toolkit.sleep(350);
|
||||
this.setData({
|
||||
showDetail: false,
|
||||
popupVisible: false,
|
||||
selectedLocation: null
|
||||
});
|
||||
},
|
||||
|
||||
@ -37,10 +37,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情面板 -->
|
||||
<journal-detail-panel
|
||||
visible="{{showDetail && detailVisible}}"
|
||||
title="{{selectedLocation.location}}"
|
||||
journals="{{selectedLocation.journals}}"
|
||||
<journal-detail-popup
|
||||
visible="{{popupVisible}}"
|
||||
ids="{{popupIds}}"
|
||||
mode="LOCATION"
|
||||
bind:close="closeDetail"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user