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

// pages/main/travel/index.ts

import Time from "../../../utils/Time";
import { TravelApi } from "../../../api/TravelApi";
import { Travel, TravelPage, TravelStatus, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TransportationTypeIcon } from "../../../types/Travel";
import { OrderType } from "../../../types/Model";

interface TravelData {
	/** 分页参数 */
	page: TravelPage;
	/** 出行列表 */
	list: Travel[];
	/** 当前筛选状态 */
	currentStatus: TravelStatus | "ALL";
	/** 是否正在加载 */
	isFetching: boolean;
	/** 是否已加载完成 */
	isFinished: boolean;
	/** 是否显示筛选菜单 */
	isShowFilterMenu: boolean;
	/** 菜单位置 */
	menuTop: number;
	menuLeft: number;
	/** 状态标签映射 */
	statusLabels: typeof TravelStatusLabel;
	/** 状态图标映射 */
	statusIcons: typeof TravelStatusIcon;
	/** 交通类型标签映射 */
	transportLabels: typeof TransportationTypeLabel;
	/** 交通类型图标映射 */
	transportIcons: typeof TransportationTypeIcon;
}

Page({
	data: <TravelData>{
		page: {
			index: 0,
			size: 10,
			orderMap: {
				travelAt: OrderType.DESC
			}
		},
		list: [],
		currentStatus: "ALL",
		isFetching: false,
		isFinished: false,
		isShowFilterMenu: false,
		menuTop: 0,
		menuLeft: 0,
		statusLabels: TravelStatusLabel,
		statusIcons: TravelStatusIcon,
		transportLabels: TransportationTypeLabel,
		transportIcons: TransportationTypeIcon
	},
	onLoad() {
		this.resetAndFetch();
	},
	onShow() {
		// 页面显示时刷新数据（从编辑页返回时）
		if (0 < this.data.list.length) {
			this.resetAndFetch();
		}
	},
	onHide() {
		this.setData({
			isShowFilterMenu: false
		});
	},
	onPullDownRefresh() {
		this.resetAndFetch();
		wx.stopPullDownRefresh();
	},
	onReachBottom() {
		this.fetch();
	},
	/** 重置并获取数据 */
	resetAndFetch() {
		this.setData({
			page: {
				index: 0,
				size: 10,
				orderMap: {
					travelAt: OrderType.DESC
				},
				equalsExample: this.data.currentStatus === "ALL" ? undefined : {
					status: this.data.currentStatus as TravelStatus
				}
			},
			list: [],
			isFetching: false,
			isFinished: false
		});
		this.fetch();
	},
	/** 获取出行列表 */
	async fetch() {
		if (this.data.isFetching || this.data.isFinished) {
			return;
		}

		this.setData({ isFetching: true });

		try {
			const pageResult = await TravelApi.getList(this.data.page);
			const list = pageResult.list || [];

			if (list.length === 0) {
				this.setData({ isFinished: true });
				return;
			}

			// 格式化数据
			list.forEach(travel => {
				if (travel.travelAt) {
					travel.travelDate = Time.toDate(travel.travelAt);
					travel.travelTime = Time.toTime(travel.travelAt);
				}
			});

			this.setData({
				page: {
					...this.data.page,
					index: this.data.page.index + 1
				},
				list: this.data.list.concat(list),
				isFinished: list.length < this.data.page.size
			});
		} catch (error) {
			console.error("获取出行列表失败:", error);
		} finally {
			this.setData({ isFetching: false });
		}
	},
	/** 切换筛选菜单 */
	toggleFilterMenu() {
		if (!this.data.isShowFilterMenu) {
			// 打开菜单时计算位置
			const query = wx.createSelectorQuery();
			query.select(".filter-btn").boundingClientRect();
			query.exec((res) => {
				if (res[0]) {
					const { top, left, height } = res[0];
					this.setData({
						isShowFilterMenu: true,
						menuTop: top + height + 16,
						menuLeft: left
					});
				}
			});
		} else {
			// 关闭菜单
			this.setData({
				isShowFilterMenu: false
			});
		}
	},
	/** 阻止事件冒泡 */
	stopPropagation() {
		// 空函数，仅用于阻止事件冒泡
	},
	/** 筛选状态 */
	filterByStatus(e: WechatMiniprogram.BaseEvent) {
		const status = e.currentTarget.dataset.status as TravelStatus | "ALL";
		this.setData({
			currentStatus: status,
			isShowFilterMenu: false
		});
		this.resetAndFetch();
	},
	/** 新建出行 */
	toCreate() {
		wx.navigateTo({
			url: "/pages/main/travel-editor/index"
		});
	},
	/** 查看详情 */
	toDetail(e: WechatMiniprogram.BaseEvent) {
		const { id } = e.currentTarget.dataset;
		wx.navigateTo({
			url: `/pages/main/travel-detail/index?id=${id}`
		});
	},
});