refactor pages struct
This commit is contained in:
Timi
7
miniprogram/pages/main/journal/map/index.json
Normal file
7
miniprogram/pages/main/journal/map/index.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"journal-detail-popup": "/components/journal-detail-popup/index"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
100
miniprogram/pages/main/journal/map/index.less
Normal file
100
miniprogram/pages/main/journal/map/index.less
Normal file
@@ -0,0 +1,100 @@
|
||||
/* pages/main/journal/map/index.less */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.location {
|
||||
width: fit-content;
|
||||
background: var(--theme-bg-card);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
border-radius: 6rpx;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 8rpx 16rpx 8rpx 8rpx;
|
||||
align-items: flex-start;
|
||||
|
||||
.thumb {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 6rpx;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
.value {
|
||||
color: var(--theme-text-primary);
|
||||
width: calc(var(--title-length) * 30rpx);
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.date-count {
|
||||
display: flex;
|
||||
|
||||
.date {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--theme-wx);
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
170
miniprogram/pages/main/journal/map/index.ts
Normal file
170
miniprogram/pages/main/journal/map/index.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
// pages/main/journal/map/index.ts
|
||||
import config from "../../../../config/index";
|
||||
import Time from "../../../../utils/Time";
|
||||
import { JournalPageType } from "../../../../types/Journal";
|
||||
import Toolkit from "../../../../utils/Toolkit";
|
||||
import { MapMarker } from "../../../../types/UI";
|
||||
import { JournalApi } from "../../../../api/JournalApi";
|
||||
|
||||
interface LocationMarker {
|
||||
locationKey: string; // 位置键 "lat,lng"
|
||||
lat: number;
|
||||
lng: number;
|
||||
location?: string;
|
||||
journalIds: number[]; // 该位置的所有日记 ID
|
||||
count: number; // 日记数量
|
||||
date: string;
|
||||
previewThumb?: string; // 预览缩略图
|
||||
}
|
||||
|
||||
interface JournalMapData {
|
||||
centerLat: number;
|
||||
centerLng: number;
|
||||
scale: number;
|
||||
markers: MapMarker[];
|
||||
locations: LocationMarker[]; // 位置标记列表
|
||||
customCalloutMarkerIds: string[]; // 改为 string[] 以支持 locationKey
|
||||
includePoints: Array<{ latitude: number; longitude: number }>; // 缩放视野以包含所有点
|
||||
popupIds: number[];
|
||||
popupVisible: boolean;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <JournalMapData>{
|
||||
centerLat: 39.908823,
|
||||
centerLng: 116.397470,
|
||||
scale: 13,
|
||||
markers: [],
|
||||
locations: [],
|
||||
customCalloutMarkerIds: [],
|
||||
includePoints: [],
|
||||
selectedLocation: null,
|
||||
popupIds: [],
|
||||
popupVisible: false,
|
||||
isLoading: true,
|
||||
},
|
||||
async onLoad() {
|
||||
await this.loadJournals();
|
||||
},
|
||||
/** 加载所有记录 */
|
||||
async loadJournals() {
|
||||
this.setData({ isLoading: true });
|
||||
try {
|
||||
const result = await JournalApi.getList({
|
||||
index: 0,
|
||||
size: 9007199254740992,
|
||||
type: JournalPageType.PREVIEW
|
||||
});
|
||||
const list = result.list || [];
|
||||
// 过滤有位置信息的记录，并按位置分组
|
||||
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,
|
||||
date: Time.toPassedDate(journal.createdAt),
|
||||
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"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
return;
|
||||
}
|
||||
// 生成地图标记
|
||||
const markers: MapMarker[] = locations.map((location, index) => ({
|
||||
id: index,
|
||||
latitude: location.lat,
|
||||
longitude: location.lng,
|
||||
width: 24,
|
||||
height: 30,
|
||||
customCallout: {
|
||||
anchorY: -2,
|
||||
// 随机错位避免近距离重叠
|
||||
anchorX: Toolkit.random(-10, 10),
|
||||
display: "ALWAYS"
|
||||
}
|
||||
}));
|
||||
// 所有标记的 locationKey 列表
|
||||
const customCalloutMarkerIds = locations.map(l => l.locationKey);
|
||||
// 计算中心点（所有标记的平均位置）
|
||||
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 = locations.map((l) => ({
|
||||
latitude: l.lat,
|
||||
longitude: l.lng
|
||||
}));
|
||||
this.setData({
|
||||
locations,
|
||||
markers,
|
||||
customCalloutMarkerIds,
|
||||
centerLat,
|
||||
centerLng,
|
||||
includePoints,
|
||||
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.loadLocationDetail(markerId);
|
||||
},
|
||||
/** 气泡点击事件 */
|
||||
onCalloutTap(e: any) {
|
||||
const markerId = e.detail.markerId || e.markerId;
|
||||
this.loadLocationDetail(markerId);
|
||||
},
|
||||
/** 加载位置详情（该位置的所有日记） */
|
||||
async loadLocationDetail(markerId: number) {
|
||||
const location = this.data.locations[markerId];
|
||||
if (!location) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
popupIds: location.journalIds,
|
||||
popupVisible: true
|
||||
});
|
||||
},
|
||||
/** 关闭详情 */
|
||||
async closeDetail() {
|
||||
this.setData({
|
||||
popupVisible: false,
|
||||
selectedLocation: null
|
||||
});
|
||||
},
|
||||
});
|
||||
50
miniprogram/pages/main/journal/map/index.wxml
Normal file
50
miniprogram/pages/main/journal/map/index.wxml
Normal file
@@ -0,0 +1,50 @@
|
||||
<!--pages/main/journal/map/index.wxml-->
|
||||
<t-navbar title="地图查找" left-arrow placeholder />
|
||||
<view class="container">
|
||||
<map
|
||||
id="journal-map"
|
||||
class="map"
|
||||
latitude="{{centerLat}}"
|
||||
longitude="{{centerLng}}"
|
||||
scale="{{scale}}"
|
||||
markers="{{markers}}"
|
||||
include-points="{{includePoints}}"
|
||||
bindmarkertap="onMarkerTap"
|
||||
bindcallouttap="onCalloutTap"
|
||||
>
|
||||
<cover-view slot="callout">
|
||||
<cover-view
|
||||
class="location"
|
||||
wx:for="{{locations}}"
|
||||
wx:key="locationKey"
|
||||
wx:for-index="locationIndex"
|
||||
marker-id="{{locationIndex}}"
|
||||
style="{{'--title-length: ' + item.location.length}}"
|
||||
>
|
||||
<cover-view class="content">
|
||||
<cover-view wx:if="{{item.previewThumb}}" class="thumb">
|
||||
<cover-image class="img" src="{{item.previewThumb}}" />
|
||||
<cover-view wx:if="{{1 < item.count}}" class="badge">{{item.count}}</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="text">
|
||||
<cover-view wx:if="{{item.location}}" class="value">{{item.location}}</cover-view>
|
||||
<cover-view class="date-count">
|
||||
<cover-view class="date">{{item.date}}</cover-view>
|
||||
<cover-view wx:if="{{1 < item.count}}" class="count">{{item.count}} 条日记</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</map>
|
||||
<view wx:if="{{isLoading}}" class="loading">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情面板 -->
|
||||
<journal-detail-popup
|
||||
visible="{{popupVisible}}"
|
||||
ids="{{popupIds}}"
|
||||
mode="LOCATION"
|
||||
bind:close="closeDetail"
|
||||
/>
|
||||
Reference in New Issue
Block a user