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

// pages/journal/index.ts

import Time from "../../../utils/Time";
import config from "../../../config/index"
import Events from "../../../utils/Events";
import Toolkit from "../../../utils/Toolkit";

export type Journal = {
	date: string;
	location?: string;
	lat?: number;
	lng?: number;
	idea?: string;
	items: JournalItem[]
}

export type JournalItem = {
	type: JournalItemType;
	mongoId: string;
}

export enum JournalItemType {
	IMAGE,
	VIDEO
}

interface JournalData {
	page: {
		index: number;
		size: number;
		type: string;
		orderMap?: object;
	}
	list: Journal[];
	dateFilterMin: number;
	dateFilterMax: number;
	dateFilterAllows: number[];
	dateFilterVisible: boolean;
	isFetching: boolean;
	isFinished: boolean;
	stickyOffset: number;
	isShowMoreMenu: boolean;
}

Page({
	data: <JournalData>{
		page: {
			index: 0,
			size: 8,
			type: "NORMAL",
			orderMap: {
				createdAt: "DESC"
			}
		},
		list: [],
		dateFilterMin: new Date("2025/06/28 16:00:00").getTime(),
		dateFilterMax: new Date(2026, 1, 15).getTime(),
		dateFilterAllows: [
			new Date(2025, 11, 15).getTime(),
			new Date(2025, 11, 20).getTime(),
			new Date(2025, 11, 10).getTime(),
		],
		dateFilterVisible: false,
		isFetching: false,
		isFinished: false,
		stickyOffset: 0,
		isShowMoreMenu: false
	},
	onLoad() {
		Events.reset("JOURNAL_REFRESH", () => {
			this.setData({
				page: {
					index: 0,
					size: 8,
					type: "NORMAL",
					orderMap: {
						createdAt: "DESC"
					}
				},
				list: [],
				isFetching: false,
				isFinished: false
			});
			this.fetch();
		});
		this.setData({
			list: []
		})
		this.fetch();
		// 可选日期
		wx.request({
			url: `${config.url}/journal/list/date?key=${wx.getStorageSync("key")}`,
			method: "GET",
			success: async (resp: any) => {
				const dates = resp.data.data.sort((a: number, b: number) => a - b);
				this.setData({
					// dateFilterMin: dates[0],
					// dateFilterMax: dates[dates.length - 1],
					dateFilterAllows: dates,
					// dateFilterVisible: this.data.dateFilterVisible
				});
			}
		});
	},
	onReady() {
		this.getCustomNavbarHeight();
	},
	onHide() {
		this.setData({
			isShowMoreMenu: false
		})
	},
	onReachBottom() {
		this.fetch();
	},
	getCustomNavbarHeight() {
		const query = wx.createSelectorQuery();
		query.select(".custom-navbar").boundingClientRect();
		query.exec((res) => {
			const { height = 0 } = res[0] || {};
			this.setData({ stickyOffset: height });
		});
	},
	toggleMoreMenu() {
		this.setData({
			isShowMoreMenu: !this.data.isShowMoreMenu
		})
	},
	openDateFilter() {
		this.setData({
			dateFilterVisible: true
		});
	},
	tapCalendar(e: any) {
		console.log(e);
	},
	toDateFilter(e: any) {
		console.log(e);
		// console.log(Toolkit.symmetricDiff(this.data.dateFilter.allows, e.detail.value));
	},
	fetch() {
		if (this.data.isFetching || this.data.isFinished) {
			return;
		}
		this.setData({
			isFetching: true
		});
		wx.request({
			url: `${config.url}/journal/list`,
			method: "POST",
			header: {
				Key: wx.getStorageSync("key")
			},
			data: this.data.page,
			success: async (resp: any) => {
				const list = resp.data.data.list;
				if (!list || list.length === 0) {
					this.setData({
						isFinished: true
					})
					return;
				}
				const result = list.map((journal: any) => {
					return {
						date: Time.toPassedDateTime(journal.createdAt),
						idea: journal.idea,
						lat: journal.lat,
						lng: journal.lng,
						location: journal.location,
						items: journal.items.filter((item: any) => item.attachType === "THUMB").map((item: any) => {
							const ext = JSON.parse(item.ext);
							return {
								type: ext.isVideo ? JournalItemType.VIDEO : JournalItemType.IMAGE,
								thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
								mongoId: item.mongoId,
								source: journal.items.find((source: any) => source.id === ext.sourceId)
							}
						})
					}
				})
				this.setData({
					page: {
						index: this.data.page.index + 1,
						size: 8,
						type: "NORMAL",
						orderMap: {
							createdAt: "DESC"
						}
					},
					list: this.data.list.concat(result),
					isFinished: list.length < this.data.page.size
				});
			},
			complete: () => {
				this.setData({
					isFetching: false
				});
			}
		});
	},
	preview(e: WechatMiniprogram.BaseEvent) {
		const journalIndex = e.target.dataset.journalIndex;
		const itemIndex = e.target.dataset.itemIndex;
		const items = this.data.list[journalIndex].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: any) => {
			return {
				url: `${config.url}/attachment/read/${item.source.mongoId}`,
				type: item.type === 0 ? "image" : "video"
			}
		}) as any;
		wx.previewMedia({
			current: newCurrentIndex,
			sources
		})
	},
	openLocation(e: WechatMiniprogram.BaseEvent) {
		const journalIndex = e.target.dataset.journalIndex;
		const journal = this.data.list[journalIndex] as Journal;
		if (journal.lat && journal.lng) {
			wx.openLocation({
				latitude: journal.lat,
				longitude: journal.lng,
			});
		}
	},
	toCreater() {
		wx.navigateTo({
			"url": "/pages/main/journal-creater/index?from=journal"
		})
	},
	toDetail() {
		wx.showToast({
			title: "此功能暂不可用",
			icon: "none",
			duration: 2000
		})
	}
});