add journal-date

miniprogram/pages/main/journal-date/index.json

@@ -0,0 +1,9 @@
+{
+	"usingComponents": {
+		"t-icon": "tdesign-miniprogram/icon/icon",
+		"t-popup": "tdesign-miniprogram/popup/popup",
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"calendar": "/components/calendar/index"
+	},
+	"navigationStyle": "custom"
+}

miniprogram/pages/main/journal-date/index.less

@@ -0,0 +1,175 @@
+/* pages/main/journal-date/index.less */
+.container {
+	width: 100%;
+	height: 100vh;
+	position: fixed;
+	overflow: hidden;
+	background: var(--theme-bg);
+
+	.loading {
+		top: 50%;
+		left: 50%;
+		z-index: 1000;
+		position: fixed;
+		transform: translate(-50%, -50%);
+
+		.loading-text {
+			color: var(--theme-text-secondary);
+			padding: 24rpx 48rpx;
+			background: var(--theme-bg-card);
+			border-radius: 8rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
+		}
+	}
+
+	.date-detail {
+		height: 61.8vh;
+		display: flex;
+		background: var(--theme-bg-card);
+		border-radius: 24rpx 24rpx 0 0;
+		flex-direction: column;
+
+		.detail-content {
+			flex: 1;
+			display: flex;
+			overflow: hidden;
+			flex-direction: column;
+
+			.header {
+				display: flex;
+				padding: 24rpx 24rpx 4rpx;
+				flex-shrink: 0;
+				align-items: flex-start;
+				justify-content: space-between;
+
+				.info {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+
+					.date {
+						color: var(--theme-text);
+						font-size: 32rpx;
+						font-weight: 600;
+						margin-bottom: 8rpx;
+					}
+
+					.count {
+						color: var(--theme-text-secondary);
+						font-size: 26rpx;
+					}
+				}
+
+				.actions {
+					gap: 16rpx;
+					display: flex;
+					flex-shrink: 0;
+					align-items: center;
+
+					.indicator {
+						color: var(--theme-text-secondary);
+						padding: 8rpx 16rpx;
+						font-size: 24rpx;
+						border-radius: 24rpx;
+						background: var(--theme-bg);
+					}
+				}
+			}
+
+			.journals-swiper {
+				flex: 1;
+
+				.swiper-item-wrapper {
+					height: 100%;
+					display: flex;
+					padding: 0 24rpx;
+					box-sizing: border-box;
+
+					.journal-item {
+						flex: 1;
+						display: flex;
+						background: var(--theme-bg);
+						flex-direction: column;
+
+						.journal-header {
+							display: flex;
+							margin-top: 16rpx;
+							flex-shrink: 0;
+							align-items: center;
+							justify-content: space-between;
+
+							.location {
+								flex: 1;
+								color: var(--theme-text);
+								overflow: hidden;
+								font-size: 28rpx;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+							}
+
+							.time {
+								color: var(--theme-text-secondary);
+								font-size: 24rpx;
+								margin-left: 16rpx;
+								flex-shrink: 0;
+							}
+						}
+
+						.idea {
+							color: var(--theme-text);
+							display: block;
+							font-size: 28rpx;
+							line-height: 1.6;
+							flex-shrink: 0;
+						}
+
+						.items-scroll {
+							flex: 1;
+							height: 0;
+							margin-top: 16rpx;
+
+							.items {
+
+								.wrapper {
+									position: relative;
+									column-gap: 8rpx;
+									column-count: 3;
+
+									.item {
+										overflow: hidden;
+										break-inside: avoid;
+										margin-bottom: 8rpx;
+										background: var(--theme-bg-card);
+
+										&.thumbnail {
+											width: 100%;
+											display: block;
+										}
+
+										&.video {
+											position: relative;
+
+											&::after {
+												top: 50%;
+												left: 53%;
+												width: 0;
+												height: 0;
+												content: "";
+												position: absolute;
+												transform: translate(-50%, -50%);
+												border-top: 16rpx solid transparent;
+												border-left: 24rpx solid rgba(255, 255, 255, .9);
+												border-bottom: 16rpx solid transparent;
+												pointer-events: none;
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

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

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

miniprogram/pages/main/journal-date/index.wxml

@@ -0,0 +1,68 @@
+<!--pages/main/journal-date/index.wxml-->
+<t-navbar title="日期查找" left-arrow />
+<view class="container">
+	<!-- 日历视图 -->
+	<calendar journal-map="{{journalMap}}" bind:dateselect="onDateSelect" />
+	<!-- 加载状态 -->
+	<view wx:if="{{isLoading}}" class="loading">
+		<view class="loading-text">加载中...</view>
+	</view>
+	<!-- 详情面板 -->
+	<t-popup
+		visible="{{popupVisible}}"
+		placement="bottom"
+		bind:visible-change="onPopupVisibleChange"
+	>
+		<view class="date-detail">
+			<view class="detail-content">
+				<view class="header">
+					<view class="info">
+						<view class="date">{{selectedDate.displayDate}}</view>
+						<view class="count">{{selectedDate.journals.length}} 条日记</view>
+					</view>
+					<view class="actions">
+						<view wx:if="{{selectedDate.journals.length > 1}}" class="indicator">
+							{{currentJournalIndex + 1}}/{{selectedDate.journals.length}}
+						</view>
+						<t-icon name="close" catchtap="closeDetail" size="48rpx" />
+					</view>
+				</view>
+				<swiper
+					class="journals-swiper"
+					current="{{currentJournalIndex}}"
+					bindchange="onSwiperChange"
+					bindanimationfinish="onSwiperAnimationFinish"
+					previous-margin="{{0}}"
+					next-margin="{{swiperNextMargin}}"
+				>
+					<block wx:for="{{selectedDate.journals}}" wx:key="id">
+						<swiper-item class="swiper-item-wrapper">
+							<view class="journal-item" data-id="{{item.id}}">
+								<view class="journal-header">
+									<view wx:if="{{item.location}}" class="location">📍 {{item.location}}</view>
+									<view class="time">{{item.time}}</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">
+									<view class="items">
+										<view class="wrapper">
+											<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media">
+												<image
+													class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
+													src="{{media.thumbURL}}"
+													mode="widthFix"
+													catchtap="previewMedia"
+													data-media-index="{{mediaIndex}}"
+												/>
+											</block>
+										</view>
+									</view>
+								</scroll-view>
+							</view>
+						</swiper-item>
+					</block>
+				</swiper>
+			</view>
+		</view>
+	</t-popup>
+</view>