gaoYuJournal/miniprogram/pages/main/journal-date/index.ts

// 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[]
		});
	}
});