diff --git a/.vscode/template.code-snippets b/.vscode/template.code-snippets index 0bd5dc8..24d1fd4 100644 --- a/.vscode/template.code-snippets +++ b/.vscode/template.code-snippets @@ -97,8 +97,12 @@ "", "const listViewRef = ref(null);", "", - "const { refresh, listView, loading, loadMore } = usePager((params) => {", - " return request({ $1 });", + "const { refresh, listView, loading, loadMore } = usePager((params, { render }) => {", + " request({ $1 }).then((res) => {", + " if (res != null) {", + " render(res);", + " }", + " });", "});", "", "async function onPull() {", diff --git a/cool/hooks/pager.ts b/cool/hooks/pager.ts index bc06bc4..54ef392 100644 --- a/cool/hooks/pager.ts +++ b/cool/hooks/pager.ts @@ -16,7 +16,7 @@ type PagerResponse = { }; // 分页回调函数类型 -type PagerCallback = (params: UTSJSONObject) => Promise; +type PagerCallback = (params: UTSJSONObject, ctx: Pager) => void | Promise; // 分页器类 export class Pager { @@ -48,52 +48,46 @@ export class Pager { this.loading.value = false; } + // 渲染数据 + public render = (res: any) => { + const { list, pagination } = parse(res)!; + + // 更新分页信息 + this.page = pagination.page; + this.size = pagination.size; + this.total = pagination.total; + + // 更新列表数据 + if (this.params.page == 1) { + this.list.value = [...list]; + } else { + this.list.value.push(...list); + } + + // 更新加载完成状态 + this.finished.value = this.list.value.length >= this.total; + + // 完成加载 + this.done(); + }; + // 刷新数据 - public refresh = async (params: UTSJSONObject): Promise => { - return new Promise((resolve, reject) => { - // 合并参数 - this.params = assign(this.params, params); + public refresh = async (params: UTSJSONObject) => { + // 合并参数 + this.params = assign(this.params, params); - // 构建请求参数 - const data = { - page: this.page, - size: this.size, - ...this.params - }; + // 构建请求参数 + const data = { + page: this.page, + size: this.size, + ...this.params + }; - // 设置加载状态 - this.loading.value = true; + // 开始加载 + this.loading.value = true; - // 发起请求 - this.cb!(data) - .then((res) => { - // 解析响应数据 - const { list, pagination } = parse(res)!; - - // 更新分页信息 - this.page = pagination.page; - this.size = pagination.size; - this.total = pagination.total; - - // 更新列表数据 - if (data.page == 1) { - this.list.value = [...list]; - } else { - this.list.value.push(...list); - } - - // 更新加载完成状态 - this.finished.value = this.list.value.length >= this.total; - - resolve(res); - }) - .catch((err) => { - reject(err); - }) - .finally(() => { - this.loading.value = false; - }); - }); + // 发起请求 + await this.cb!(data, this); }; // 加载更多数据 diff --git a/pages/demo/data/list-view-refresh.uvue b/pages/demo/data/list-view-refresh.uvue index cff96ac..d44dfaa 100644 --- a/pages/demo/data/list-view-refresh.uvue +++ b/pages/demo/data/list-view-refresh.uvue @@ -43,68 +43,66 @@ const listViewRef = ref(null); let id = 0; -const { refresh, list, listView, loading, loadMore } = usePager((params) => { - return new Promise((resolve) => { - // 模拟请求 - setTimeout(() => { - resolve({ - list: [ - { - id: id++, - title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒", - image: "https://unix.cool-js.com/images/demo/1.jpg" - }, - { - id: id++, - title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景", - image: "https://unix.cool-js.com/images/demo/2.jpg" - }, - { - id: id++, - title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好", - image: "https://unix.cool-js.com/images/demo/3.jpg" - }, - { - id: id++, - title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象", - image: "https://unix.cool-js.com/images/demo/5.jpg" - }, - { - id: id++, - title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱", - image: "https://unix.cool-js.com/images/demo/6.jpg" - }, - { - id: id++, - title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观", - image: "https://unix.cool-js.com/images/demo/7.jpg" - }, - { - id: id++, - title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起", - image: "https://unix.cool-js.com/images/demo/8.jpg" - }, - { - id: id++, - title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景", - image: "https://unix.cool-js.com/images/demo/9.jpg" - }, - { - id: id++, - title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻", - image: "https://unix.cool-js.com/images/demo/10.jpg" - } - ], - pagination: { - page: params["page"], - size: params["size"], - total: 100 +const { refresh, list, listView, loading, loadMore } = usePager((params, { render }) => { + // 模拟请求 + setTimeout(() => { + render({ + list: [ + { + id: id++, + title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒", + image: "https://unix.cool-js.com/images/demo/1.jpg" + }, + { + id: id++, + title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景", + image: "https://unix.cool-js.com/images/demo/2.jpg" + }, + { + id: id++, + title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好", + image: "https://unix.cool-js.com/images/demo/3.jpg" + }, + { + id: id++, + title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象", + image: "https://unix.cool-js.com/images/demo/5.jpg" + }, + { + id: id++, + title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱", + image: "https://unix.cool-js.com/images/demo/6.jpg" + }, + { + id: id++, + title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观", + image: "https://unix.cool-js.com/images/demo/7.jpg" + }, + { + id: id++, + title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起", + image: "https://unix.cool-js.com/images/demo/8.jpg" + }, + { + id: id++, + title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景", + image: "https://unix.cool-js.com/images/demo/9.jpg" + }, + { + id: id++, + title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻", + image: "https://unix.cool-js.com/images/demo/10.jpg" } - }); + ], + pagination: { + page: params["page"], + size: params["size"], + total: 100 + } + }); - ui.hideLoading(); - }, 1000); - }); + ui.hideLoading(); + }, 1000); }); async function onPull() { diff --git a/pages/template/shop/address.uvue b/pages/template/shop/address.uvue index cfa8e5b..e5b6452 100644 --- a/pages/template/shop/address.uvue +++ b/pages/template/shop/address.uvue @@ -86,12 +86,17 @@ import type { UserAddress } from "../types"; const ui = useUi(); -const { refresh, list, loadMore } = usePager(async (data) => { - return request({ +const { refresh, list, loadMore } = usePager(async (data, { render }) => { + await request({ url: "/app/user/address/page", method: "POST", data }) + .then((res) => { + if (res != null) { + render(res); + } + }) .catch((err) => { ui.showToast({ message: (err as Response).message!