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

7
miniprogram/pages/main/journal-map/index.json
View File

@ -1,6 +1,7 @@
{
"component": true,
"usingComponents": {
"t-navbar": "tdesign-miniprogram/navbar/navbar"
}
"t-navbar": "tdesign-miniprogram/navbar/navbar",
"journal-detail-panel": "/components/journal-detail-panel/index"
},
"navigationStyle": "custom"
}

152
miniprogram/pages/main/journal-map/index.less
View File

@ -25,6 +25,7 @@
.thumb-container {
width: 72rpx;
height: 72rpx;
position: relative;
flex-shrink: 0;
margin-right: 12rpx;
overflow: hidden;
@ -34,6 +35,17 @@
width: 100%;
height: 100%;
}
.count-badge {
top: 4rpx;
right: 4rpx;
color: #fff;
padding: 2rpx 6rpx;
position: absolute;
font-size: 20rpx;
background: rgba(0, 0, 0, .7);
border-radius: 8rpx;
}
}
.text-container {
@ -43,24 +55,18 @@
flex-direction: column;
.location {
flex: 1;
color: #999;
overflow: hidden;
font-size: 24rpx;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 8rpx;
margin-bottom: 4rpx;
}
.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;
.count-text {
color: var(--theme-wx);
font-size: 24rpx;
font-weight: 600;
}
}
}
@ -81,128 +87,4 @@
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
}
}
.marker-detail {
left: 0;
right: 0;
bottom: 0;
height: 61.8vh;
z-index: 999;
display: flex;
position: fixed;
transition: transform 350ms cubic-bezier(.19, .1, .22, 1);
transform: translateY(100%);
background: var(--theme-bg-card);
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .15);
border-radius: 24rpx 24rpx 0 0;
flex-direction: column;
&.visible {
transform: translateY(0);
}
.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;
}
}
}
}
}
}
}
}

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

56
miniprogram/pages/main/journal-map/index.wxml
View File

@ -13,49 +13,33 @@
bindcallouttap="onCalloutTap"
>
<cover-view slot="callout">
<block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
<cover-view class="custom-callout" marker-id="{{item}}">
<block wx:for="{{locations}}" wx:key="locationKey" wx:for-index="markerIndex">
<cover-view class="custom-callout" marker-id="{{markerIndex}}">
<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 wx:if="{{item.previewThumb}}" class="thumb-container">
<cover-image class="thumb" src="{{item.previewThumb}}" />
<cover-view wx:if="{{item.count > 1}}" class="count-badge">{{item.count}}</cover-view>
</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 wx:if="{{item.location}}" class="location">{{item.location}}</cover-view>
<cover-view wx:if="{{item.count > 1}}" class="count-text">{{item.count}} 条日记</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="{{showDetail}}" class="marker-detail {{detailVisible ? 'visible' : ''}}">
<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 wx:if="{{isLoading}}" class="loading">
<view class="loading-text">加载中...</view>
</view>
</view>
<!-- 详情面板 -->
<journal-detail-panel
visible="{{showDetail && detailVisible}}"
title="{{selectedLocation.location}}"
journals="{{selectedLocation.journals}}"
show-location-icon="{{true}}"
show-journal-date="{{true}}"
show-journal-location="{{false}}"
bind:close="closeDetail"
/>