添加 usePager 分页操作

cool/hooks/pager.ts

@@ -1,39 +1,46 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { assign, parse } from "../utils";
-import type { Response } from "../service";
+import { useListView, type ClListViewItem } from "@/uni_modules/cool-ui";
 
+// 分页参数类型
 type Pagination = {
-	page: number;
-	size: number;
-	total: number;
+	page: number; // 当前页码
+	size: number; // 每页数量
+	total: number; // 总数量
 };
 
+// 分页响应数据类型
 type PagerResponse = {
-	list: UTSJSONObject[];
-	pagination: Pagination;
+	list: UTSJSONObject[]; // 列表数据
+	pagination: Pagination; // 分页信息
 };
 
+// 分页回调函数类型
 type PagerCallback = (params: UTSJSONObject) => Promise<UTSJSONObject>;
 
+// 分页器类
 export class Pager {
-	public page = 1;
-	public size = 20;
-	public total = 0;
-	public list = ref<UTSJSONObject[]>([]);
-	public loading = ref(false);
-	public refreshing = ref(false);
-	public finished = ref(false);
-	public params = {} as UTSJSONObject;
-	public cb: PagerCallback | null = null;
-
+	public page = 1; // 当前页码
+	public size = 20; // 每页数量
+	public total = 0; // 总数量
+	public list = ref<UTSJSONObject[]>([]); // 列表数据
+	public loading = ref(false); // 加载状态
+	public refreshing = ref(false); // 刷新状态
+	public finished = ref(false); // 是否加载完成
+	public params = {} as UTSJSONObject; // 请求参数
+	public cb: PagerCallback | null = null; // 回调函数
+
+	// 构造函数
 	constructor(cb: PagerCallback) {
 		this.cb = cb;
 	}
 
+	// 完成加载
 	done() {
 		this.loading.value = false;
 	}
 
+	// 清空数据
 	clear() {
 		this.list.value = [];
 		this.finished.value = false;
@@ -41,29 +48,39 @@ export class Pager {
 		this.loading.value = false;
 	}
 
+	// 刷新数据
 	public refresh = async (params: UTSJSONObject): Promise<UTSJSONObject> => {
 		return new Promise((resolve, reject) => {
-			assign(this.params, params);
+			// 合并参数
+			this.params = assign(this.params, params);
 
+			// 构建请求参数
 			const data = {
 				page: this.page,
 				size: this.size,
 				...this.params
 			};
 
+			// 设置加载状态
 			this.loading.value = true;
 
+			// 发起请求
 			this.cb!(data)
 				.then((res) => {
+					// 解析响应数据
 					const { list, pagination } = parse<PagerResponse>(res)!;
 
+					// 更新分页信息
 					this.page = pagination.page;
 					this.size = pagination.size;
 					this.total = pagination.total;
+
+					// 更新加载完成状态
 					this.finished.value = this.list.value.length >= this.total;
 
+					// 更新列表数据
 					if (data.page == 1) {
-						this.list.value = list;
+						this.list.value = [...list];
 					} else {
 						this.list.value.push(...list);
 					}
@@ -79,16 +96,24 @@ export class Pager {
 		});
 	};
 
+	// 加载更多数据
 	public loadMore = () => {
 		if (this.loading.value || this.finished.value) {
 			return;
 		}
 
-		this.page += 1;
-		this.refresh({});
+		this.refresh({
+			page: this.page + 1
+		});
 	};
+
+	// 列表视图数据
+	public listView = computed<ClListViewItem[]>(() => {
+		return useListView(this.list.value);
+	});
 }
 
+// 创建分页器实例
 export function usePager(cb: PagerCallback) {
 	return new Pager(cb);
 }