add journal-date
This commit is contained in:
Timi
247
miniprogram/pages/main/journal-date/index.ts
Normal file
247
miniprogram/pages/main/journal-date/index.ts
Normal file
@ -0,0 +1,247 @@
|
||||
// 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;
|
||||
location?: string;
|
||||
idea?: string;
|
||||
items: Array<{
|
||||
type: number;
|
||||
thumbURL: string;
|
||||
sourceURL: string;
|
||||
mongoId: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface SelectedDateInfo {
|
||||
displayDate: string;
|
||||
journals: JournalInfo[];
|
||||
}
|
||||
|
||||
interface JournalDateData {
|
||||
journalMap: Record<string, number[]>; // 存储每个日期的日记 id 列表
|
||||
selectedDate: SelectedDateInfo | null;
|
||||
isLoading: boolean;
|
||||
currentJournalIndex: number; // 当前日记索引
|
||||
popupVisible: boolean; // popup 显示状态
|
||||
swiperNextMargin: string; // swiper 的 next-margin 值
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <JournalDateData>{
|
||||
journalMap: {},
|
||||
selectedDate: null,
|
||||
isLoading: true,
|
||||
currentJournalIndex: 0,
|
||||
popupVisible: false,
|
||||
swiperNextMargin: "0"
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
await this.loadJournals();
|
||||
},
|
||||
|
||||
/** 加载所有日记 */
|
||||
async loadJournals() {
|
||||
this.setData({ isLoading: true });
|
||||
try {
|
||||
const list: Journal[] = await new Promise((resolve, reject) => {
|
||||
wx.request({
|
||||
url: `${config.url}/journal/list`,
|
||||
method: "POST",
|
||||
header: {
|
||||
Key: wx.getStorageSync("key")
|
||||
},
|
||||
data: {
|
||||
page: 0,
|
||||
size: 9007199254740992,
|
||||
type: JournalPageType.PREVIEW
|
||||
},
|
||||
success: (resp: any) => {
|
||||
if (resp.data.code === 20000) {
|
||||
resolve(resp.data.data.list);
|
||||
} else {
|
||||
reject(new Error(resp.data.message || "加载失败"));
|
||||
}
|
||||
},
|
||||
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')}`;
|
||||
|
||||
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
|
||||
});
|
||||
} catch (err: any) {
|
||||
wx.showToast({
|
||||
title: err.message || "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 日期选择事件（来自 calendar 组件） */
|
||||
onDateSelect(e: WechatMiniprogram.CustomEvent) {
|
||||
const { date, year, month, day } = e.detail;
|
||||
const journalIds = this.data.journalMap[date];
|
||||
|
||||
if (!journalIds || journalIds.length === 0) {
|
||||
wx.showToast({
|
||||
title: "该日期无日记",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用接口获取详情
|
||||
this.loadJournalsByIds(journalIds, `${year} 年 ${month} 月 ${day} 日`);
|
||||
},
|
||||
/** 根据 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.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')}`,
|
||||
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,
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
// 按 id 倒序排序
|
||||
journals.sort((a, b) => b.id - a.id);
|
||||
|
||||
this.setData({
|
||||
selectedDate: {
|
||||
displayDate,
|
||||
journals
|
||||
},
|
||||
currentJournalIndex: 0, // 重置索引
|
||||
popupVisible: true, // 显示 popup
|
||||
swiperNextMargin: journals.length > 1 ? "128rpx" : "0" // 设置初始 margin
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
} catch (err: any) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: err.message || "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** 关闭详情 */
|
||||
closeDetail() {
|
||||
this.setData({
|
||||
popupVisible: false
|
||||
});
|
||||
},
|
||||
/** popup 显示状态变化 */
|
||||
onPopupVisibleChange(e: WechatMiniprogram.CustomEvent) {
|
||||
const { visible } = e.detail;
|
||||
this.setData({
|
||||
popupVisible: visible
|
||||
});
|
||||
// 关闭时清空数据
|
||||
if (!visible) {
|
||||
this.setData({
|
||||
selectedDate: null,
|
||||
currentJournalIndex: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
/** swiper 切换事件 */
|
||||
onSwiperChange(e: WechatMiniprogram.SwiperChange) {
|
||||
this.setData({
|
||||
currentJournalIndex: e.detail.current
|
||||
});
|
||||
},
|
||||
/** swiper 动画完成事件 */
|
||||
onSwiperAnimationFinish(e: WechatMiniprogram.SwiperAnimationFinish) {
|
||||
if (!this.data.selectedDate) return;
|
||||
|
||||
const current = e.detail.current;
|
||||
const total = this.data.selectedDate.journals.length;
|
||||
|
||||
// 动画完成后更新 margin，确保过渡流畅
|
||||
const nextMargin = total > 1 && current < total - 1 ? "128rpx" : "0";
|
||||
this.setData({
|
||||
swiperNextMargin: nextMargin
|
||||
});
|
||||
},
|
||||
/** 预览媒体 */
|
||||
previewMedia(e: WechatMiniprogram.BaseEvent) {
|
||||
const { mediaIndex } = e.currentTarget.dataset;
|
||||
if (!this.data.selectedDate) return;
|
||||
|
||||
// 使用当前 swiper 的索引
|
||||
const journal = this.data.selectedDate.journals[this.data.currentJournalIndex];
|
||||
const sources = journal.items.map((item: any) => ({
|
||||
url: item.sourceURL,
|
||||
type: item.type === 0 ? "image" : "video"
|
||||
}));
|
||||
|
||||
wx.previewMedia({
|
||||
current: mediaIndex,
|
||||
sources: sources as WechatMiniprogram.MediaSource[]
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user