refactor pages struct

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

@@ -0,0 +1,176 @@
+// 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";
+
+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
+		},
+		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,
+				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}`
+		});
+	},
+});