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

refactor journal-detail-popup

Browse Source
This commit is contained in:
Timi
2025-12-11 12:02:01 +08:00
parent 0379a1d3b5
commit 1bf655c0dc
13 changed files with 238 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
miniprogram/components/journal-detail-panel/index.ts
View File

@ -1,109 +0,0 @@
// components/journal-detail-panel/index.ts
interface JournalInfo {
id: number;
date: string;
time: string;
lat?: number;
lng?: number;
location?: string;
idea?: string;
items: Array<{
type: number;
thumbURL: string;
sourceURL: string;
mongoId: string;
}>;
}
interface JournalDetailPanelData {
currentJournalIndex: number;
}
Component({
properties: {
visible: {
type: Boolean,
value: false
},
title: {
type: String,
value: ""
},
journals: {
type: Array,
value: []
},
mode: {
type: String,
value: "DATE"
}
},
data: <JournalDetailPanelData>{
currentJournalIndex: 0,
},
observers: {
'journals, visible'(journals: JournalInfo[], visible: boolean) {
if (visible && journals && journals.length > 0) {
// 显示时重置索引和 margin
this.setData({
currentJournalIndex: 0,
});
}
}
},
methods: {
/** 关闭详情 */
closeDetail() {
this.triggerEvent("close");
},
/** swiper 切换事件 */
onSwiperChange(e: WechatMiniprogram.SwiperChange) {
this.setData({
currentJournalIndex: e.detail.current
});
},
openLocation(e: WechatMiniprogram.BaseEvent) {
const { journalIndex } = e.currentTarget.dataset;
if (!journalIndex && this.properties.mode !== "LOCATION") {
return;
}
const journals = this.properties.journals as JournalInfo[];
const journal = journals[journalIndex || 0];
if (journal.lat && journal.lng) {
wx.openLocation({
latitude: journal.lat,
longitude: journal.lng,
});
}
},
/** 预览媒体 */
previewMedia(e: WechatMiniprogram.BaseEvent) {
const journals = this.properties.journals as JournalInfo[];
if (!journals || journals.length === 0) {
return;
}
const { itemIndex } = e.currentTarget.dataset;
const items = journals[this.data.currentJournalIndex].items;
const total = items.length;
const startIndex = Math.max(0, itemIndex - 25);
const endIndex = Math.min(total, startIndex + 50);
const newCurrentIndex = itemIndex - startIndex;
const sources = items.slice(startIndex, endIndex).map((item) => {
return {
url: item.sourceURL,
type: item.type === 0 ? "image" : "video"
}
}) as any;
wx.previewMedia({
current: newCurrentIndex,
sources
})
}
}
});

0
miniprogram/components/journal-detail-panel/index.json → miniprogram/components/journal-detail-popup/index.json
View File

41
miniprogram/components/journal-detail-panel/index.less → miniprogram/components/journal-detail-popup/index.less
View File

@ -12,12 +12,12 @@
overflow: hidden;
flex-direction: column;
.header {
> .header {
display: flex;
padding: 32rpx 32rpx 0 32rpx;
flex-shrink: 0;
margin-bottom: 24rpx;
align-items: flex-start;
margin-bottom: 24rpx;
justify-content: space-between;
.info {
@ -30,13 +30,19 @@
font-size: 32rpx;
font-weight: 600;
align-items: center;
margin-bottom: 8rpx;
.icon {
color: var(--theme-wx);
font-size: 48rpx;
margin-right: 8rpx;
}
.text {
width: calc(100% - 90rpx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
@ -50,9 +56,9 @@
color: var(--theme-wx);
padding: 4rpx 12rpx;
font-size: 24rpx;
font-weight: 600;
border-radius: 12rpx;
font-weight: bold;
background: var(--theme-bg-journal);
border-radius: 12rpx;
}
}
}
@ -69,14 +75,24 @@
display: flex;
flex-direction: column;
.journal-header {
.header {
gap: 16rpx;
display: flex;
padding: 0 32rpx;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
margin-bottom: 16rpx;
align-items: baseline;
.portfolio {
color: #FFF;
width: 52rpx;
padding: 4rpx 8rpx;
font-size: 24rpx;
background: var(--theme-wx);
text-align: center;
font-weight: bold;
border-radius: 8rpx;
}
.location {
gap: 8rpx;
@ -95,14 +111,9 @@
}
}
.date {
flex: 1;
.datetime {
font-size: 28rpx;
font-weight: 600;
}
.time {
font-size: 24rpx;
font-weight: bold;
}
}

146
miniprogram/components/journal-detail-popup/index.ts Normal file
View File

@ -0,0 +1,146 @@
// components/journal-detail-panel/index.ts
import { Journal } from "../../types/Journal";
import config from "../../config/index";
import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
import { MediaItem, MediaItemType } from "../../types/UI";
import Time from "../../utils/Time";
interface JournalDetailPanelData {
journals: Journal[];
currentJournalIndex: number;
}
Component({
properties: {
visible: {
type: Boolean,
value: false
},
ids: {
type: Array,
value: []
},
mode: {
type: String,
value: "DATE"
}
},
data: <JournalDetailPanelData>{
journals: [],
currentJournalIndex: 0,
},
observers: {
async 'ids, visible'(ids: number[], visible: boolean) {
if (visible && ids && 0 < ids.length) {
wx.showLoading({ title: "加载中...", mask: true });
try {
const journals: Journal[] = await new Promise((resolve, reject) => {
wx.request({
url: `${config.url}/journal/list/ids`,
method: "POST",
header: {
Key: wx.getStorageSync("key")
},
data: ids,
success: (resp: any) => {
if (resp.data.code === 20000) {
resolve(resp.data.data);
} else {
reject(new Error(resp.data.message || "加载失败"));
}
},
fail: reject
});
}) || [];
journals.forEach(journal => {
journal.date = Time.toPassedDate(journal.createdAt);
journal.time = Time.toTime(journal.createdAt);
journal.datetime = Time.toPassedDateTime(journal.createdAt);
const thumbItems = journal.items?.filter((item) => item.attachType === MediaAttachType.THUMB);
if (!thumbItems) {
return;
}
const mediaItems: MediaItem[] = thumbItems.map((thumbItem) => {
const ext = thumbItem.ext = JSON.parse(thumbItem.ext!.toString()) as MediaAttachExt;
const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
const sourceURL = `${config.url}/attachment/read/${ext.sourceMongoId}`;
return {
type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
thumbURL,
sourceURL,
size: thumbItem.size || 0,
attachmentId: thumbItem.id
} as MediaItem;
});
journal.mediaItems = mediaItems;
})
this.setData({
journals,
currentJournalIndex: 0,
});
wx.hideLoading();
} catch (err: any) {
wx.hideLoading();
wx.showToast({
title: err.message || "加载失败",
icon: "error"
});
}
}
}
},
methods: {
/** 关闭详情 */
closeDetail() {
this.triggerEvent("close");
},
/** swiper 切换事件 */
onSwiperChange(e: WechatMiniprogram.SwiperChange) {
this.setData({
currentJournalIndex: e.detail.current
});
},
/** 打开位置 */
openLocation(e: WechatMiniprogram.BaseEvent) {
const { journalIndex } = e.currentTarget.dataset;
if (!journalIndex && this.properties.mode !== "LOCATION") {
return;
}
const journals = this.properties.journals as Journal[];
const journal = journals[journalIndex || 0];
if (journal.lat && journal.lng) {
wx.openLocation({
latitude: journal.lat,
longitude: journal.lng,
});
}
},
/** 预览媒体 */
previewMedia(e: WechatMiniprogram.BaseEvent) {
const journals = this.properties.journals as Journal[];
if (!journals || journals.length === 0) {
return;
}
const { itemIndex } = e.currentTarget.dataset;
const items = journals[this.data.currentJournalIndex].mediaItems!;
const total = items.length;
const startIndex = Math.max(0, itemIndex - 25);
const endIndex = Math.min(total, startIndex + 50);
const newCurrentIndex = itemIndex - startIndex;
const sources = items.slice(startIndex, endIndex).map((item) => {
return {
url: item.sourceURL,
type: item.type === 0 ? "image" : "video"
}
}) as any;
wx.previewMedia({
current: newCurrentIndex,
sources
})
}
}
});

14
miniprogram/components/journal-detail-panel/index.wxml → miniprogram/components/journal-detail-popup/index.wxml
View File

@ -9,10 +9,11 @@
<view class="detail-content">
<view class="header">
<view class="info">
<view wx:if="{{title}}" class="title" catchtap="openLocation">
<view wx:if="{{mode === 'LOCATION'}}" class="title" catchtap="openLocation">
<t-icon wx:if="{{mode === 'LOCATION'}}" class="icon" name="location-filled" />
<text>{{title}}</text>
<text class="text">{{journals[currentJournalIndex].location}}</text>
</view>
<text wx:if="{{mode === 'DATE'}}" class="title">{{journals[currentJournalIndex].datetime}}</text>
</view>
<view class="actions">
<view wx:if="{{journals.length > 1}}" class="indicator">
@ -25,7 +26,8 @@
<block wx:for="{{journals}}" wx:key="id">
<swiper-item class="swiper-item-wrapper">
<view class="journal-item">
<view class="journal-header">
<view class="header">
<view wx:if="{{item.type === 'PORTFOLIO'}}" class="portfolio">专拍</view>
<view
wx:if="{{item.location && mode === 'DATE'}}"
class="location"
@ -35,13 +37,13 @@
<t-icon class="icon" name="location-filled" />
<text class="text">{{item.location}}</text>
</view>
<view wx:if="{{mode === 'LOCATION'}}" class="date">{{item.date}}</view>
<view wx:if="{{mode === 'LOCATION'}}" class="datetime">{{item.datetime}}</view>
</view>
<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
<scroll-view wx:if="{{item.mediaItems && item.mediaItems.length > 0}}" scroll-y class="items-scroll">
<view class="items">
<view class="wrapper">
<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
<block wx:for="{{item.mediaItems}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
<image
class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
src="{{media.thumbURL}}"

4
miniprogram/pages/main/journal-date/index.json
View File

@ -1,8 +1,8 @@
{
"usingComponents": {
"t-navbar": "tdesign-miniprogram/navbar/navbar",
"calendar": "/components/calendar/index",
"journal-detail-panel": "/components/journal-detail-panel/index"
"t-navbar": "tdesign-miniprogram/navbar/navbar",
"journal-detail-popup": "/components/journal-detail-popup/index"
},
"navigationStyle": "custom"
}

127
miniprogram/pages/main/journal-date/index.ts
View File

@ -1,49 +1,28 @@
// pages/main/journal-date/index.ts
import config from "../../../config/index";
import Time from "../../../utils/Time";
import { Journal, JournalPageType } from "../../../types/Journal";
import { MediaAttachType } from "../../../types/Attachment";
interface JournalInfo {
id: number;
date: string;
time: string;
lat?: number;
lng?: number;
location?: string;
idea?: string;
items: Array<{
type: number;
thumbURL: string;
sourceURL: string;
mongoId: string;
}>;
}
interface SelectedDateInfo {
displayDate: string;
journals: JournalInfo[];
}
import Time from "../../../utils/Time";
interface JournalDateData {
journalMap: Record<string, number[]>; // 存储每个日期的日记 id 列表
selectedDate: SelectedDateInfo | null;
// 存储每个日期的日记 id 列表
isLoading: boolean;
popupVisible: boolean; // popup 显示状态
journalMap: Record<string, number[]>;
popupIds: number[];
popupVisible: boolean;
}
Page({
data: <JournalDateData>{
journalMap: {},
selectedDate: null,
isLoading: true,
popupVisible: false
},
journalMap: {},
popupIds: [],
popupVisible: false,
},
async onLoad() {
await this.loadJournals();
},
/** 加载所有日记 */
async loadJournals() {
this.setData({ isLoading: true });
@ -70,24 +49,19 @@ Page({
fail: reject
});
}) || [];
// 按日期分组，只存储 id
const journalMap: Record<string, number[]> = {};
list.forEach((journal: any) => {
const date = new Date(journal.createdAt);
const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
const dateKey = Time.toDate(journal.createdAt);
if (!journalMap[dateKey]) {
journalMap[dateKey] = [];
}
journalMap[dateKey].push(journal.id);
});
// 按 id 倒序排序每天的日记
Object.keys(journalMap).forEach(dateKey => {
journalMap[dateKey].sort((a, b) => b - a);
});
this.setData({
journalMap,
isLoading: false
@ -100,12 +74,10 @@ Page({
this.setData({ isLoading: false });
}
},
/** 日期选择事件（来自 calendar 组件） */
onDateSelect(e: WechatMiniprogram.CustomEvent) {
const { date, year, month, day } = e.detail;
const { date } = e.detail;
const journalIds = this.data.journalMap[date];
if (!journalIds || journalIds.length === 0) {
wx.showToast({
title: "该日期无日记",
@ -113,81 +85,22 @@ Page({
});
return;
}
// 调用接口获取详情
this.loadJournalsByIds(journalIds, `${year} 年 ${month} 月 ${day} 日`);
this.loadJournalsByIds(journalIds);
},
/** 根据 id 列表加载日记详情 */
async loadJournalsByIds(ids: number[], displayDate: string) {
wx.showLoading({ title: "加载中...", mask: true });
try {
const list: Journal[] = await new Promise((resolve, reject) => {
wx.request({
url: `${config.url}/journal/list/ids`,
method: "POST",
header: {
Key: wx.getStorageSync("key")
},
data: ids,
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.sort((a, b) => a.createdAt! - b.createdAt!).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({
selectedDate: {
displayDate,
journals
},
popupVisible: true // 显示 popup
});
wx.hideLoading();
} catch (err: any) {
wx.hideLoading();
wx.showToast({
title: err.message || "加载失败",
icon: "error"
});
}
async loadJournalsByIds(ids: number[]) {
this.setData({
popupIds: ids,
popupVisible: true
});
wx.hideLoading();
},
/** 关闭详情 */
closeDetail() {
this.setData({
popupVisible: false,
selectedDate: null
popupIds: []
});
}
});

5
miniprogram/pages/main/journal-date/index.wxml
View File

@ -9,10 +9,9 @@
</view>
</view>
<!-- 详情面板 -->
<journal-detail-panel
<journal-detail-popup
visible="{{popupVisible}}"
title="{{selectedDate.displayDate}}"
journals="{{selectedDate.journals}}"
ids="{{popupIds}}"
mode="DATE"
bind:close="closeDetail"
/>

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

@ -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"
}

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

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

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

@ -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"
/>

15
miniprogram/types/Journal.ts
View File

@ -1,5 +1,6 @@
import { Attachment } from "./Attachment";
import { Model, QueryPage } from "./Model";
import { MediaItem } from "./UI";
/** 日记 */
export type Journal = {
@ -22,8 +23,22 @@ export type Journal = {
/** 天气 */
weatcher?: string;
// ---------- 以下为 VO 字段 ----------
/** 日期 */
date?: string;
/** 时间 */
time?: string;
/** 时间 */
datetime?: string;
/** 附件（照片、视频等） */
items?: Attachment[];
/** 媒体项（由附件转） */
mediaItems?: MediaItem[];
} & Model;
/** 日记类型 */

2
miniprogram/types/UI.ts
View File

@ -2,6 +2,8 @@
/** 系统媒体项目 */
export type MediaItem = {
journalId?: number;
/** 类型 */
type: MediaItemType;