apply Network.ts
This commit is contained in:
Timi
@ -4,6 +4,7 @@ import { JournalPage, JournalPageType } from "../../types/Journal";
|
||||
import { OrderType } from "../../types/Model";
|
||||
import Time from "../../utils/Time";
|
||||
import Toolkit from "../../utils/Toolkit";
|
||||
import { JournalApi } from "../../api/JournalApi";
|
||||
|
||||
export type JournalListItem = {
|
||||
id: number;
|
||||
@ -19,14 +20,10 @@ interface JournalListData {
|
||||
isFinished: boolean;
|
||||
page: JournalPage;
|
||||
searchValue: string;
|
||||
debouncedSearch?: any;
|
||||
}
|
||||
|
||||
// 组件实例类型扩展
|
||||
interface ComponentInstance {
|
||||
debouncedSearch?: ((keyword: string) => void) & { cancel(): void };
|
||||
}
|
||||
|
||||
Component<JournalListData, {}, {}, ComponentInstance>({
|
||||
Component({
|
||||
options: {
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
@ -64,25 +61,28 @@ Component<JournalListData, {}, {}, ComponentInstance>({
|
||||
createdAt: OrderType.DESC
|
||||
}
|
||||
},
|
||||
searchValue: ""
|
||||
searchValue: "",
|
||||
debouncedSearch: undefined
|
||||
},
|
||||
lifetimes: {
|
||||
ready() {
|
||||
// 创建防抖搜索函数
|
||||
this.debouncedSearch = Toolkit.debounce(
|
||||
(keyword: string) => {
|
||||
this.resetAndSearch(keyword);
|
||||
},
|
||||
false, // 不立即执行，等待输入停止
|
||||
400 // 400ms 延迟
|
||||
);
|
||||
this.setData({
|
||||
debouncedSearch: Toolkit.debounce(
|
||||
(keyword: string) => {
|
||||
this.resetAndSearch(keyword);
|
||||
},
|
||||
false, // 不立即执行，等待输入停止
|
||||
400 // 400ms 延迟
|
||||
)
|
||||
})
|
||||
// 组件加载时就获取数据
|
||||
this.fetch();
|
||||
},
|
||||
detached() {
|
||||
// 组件销毁时取消防抖
|
||||
if (this.debouncedSearch) {
|
||||
this.debouncedSearch.cancel();
|
||||
if (this.data.debouncedSearch) {
|
||||
this.data.debouncedSearch.cancel();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -125,77 +125,74 @@ Component<JournalListData, {}, {}, ComponentInstance>({
|
||||
});
|
||||
},
|
||||
/** 获取数据 */
|
||||
fetch() {
|
||||
async 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: (resp: any) => {
|
||||
const list = resp.data.data.list;
|
||||
if (!list || list.length === 0) {
|
||||
this.setData({ isFinished: true });
|
||||
return;
|
||||
}
|
||||
const result = list.map((journal: any) => {
|
||||
const firstThumb = journal.items.find((item: any) => item.attachType === "THUMB");
|
||||
return {
|
||||
id: journal.id,
|
||||
date: Time.toPassedDate(journal.createdAt),
|
||||
idea: journal.idea,
|
||||
location: journal.location,
|
||||
thumbUrl: firstThumb ? `${config.url}/attachment/read/${firstThumb.mongoId}` : undefined
|
||||
} as JournalListItem;
|
||||
});
|
||||
try {
|
||||
const pageResult = await JournalApi.getList(this.data.page);
|
||||
const list = pageResult.list;
|
||||
if (!list || list.length === 0) {
|
||||
this.setData({
|
||||
page: {
|
||||
...this.data.page,
|
||||
index: this.data.page.index + 1,
|
||||
type: JournalPageType.PREVIEW,
|
||||
equalsExample: this.data.page.equalsExample,
|
||||
likeExample: this.data.page.likeExample,
|
||||
orderMap: {
|
||||
createdAt: OrderType.DESC
|
||||
}
|
||||
},
|
||||
list: this.data.list.concat(result),
|
||||
isFinished: list.length < this.data.page.size
|
||||
isFinished: true,
|
||||
isFetching: false
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
this.setData({ isFetching: false });
|
||||
return;
|
||||
}
|
||||
});
|
||||
const result = list.map((journal: any) => {
|
||||
const firstThumb = journal.items.find((item: any) => item.attachType === "THUMB");
|
||||
return {
|
||||
id: journal.id,
|
||||
date: Time.toPassedDate(journal.createdAt),
|
||||
idea: journal.idea,
|
||||
location: journal.location,
|
||||
thumbUrl: firstThumb ? `${config.url}/attachment/read/${firstThumb.mongoId}` : undefined
|
||||
} as JournalListItem;
|
||||
});
|
||||
this.setData({
|
||||
page: {
|
||||
...this.data.page,
|
||||
index: this.data.page.index + 1,
|
||||
type: JournalPageType.PREVIEW,
|
||||
equalsExample: this.data.page.equalsExample,
|
||||
likeExample: this.data.page.likeExample,
|
||||
orderMap: {
|
||||
createdAt: OrderType.DESC
|
||||
}
|
||||
},
|
||||
list: this.data.list.concat(result),
|
||||
isFinished: list.length < this.data.page.size,
|
||||
isFetching: false
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载日记列表失败:", error);
|
||||
this.setData({ isFetching: false });
|
||||
}
|
||||
},
|
||||
/** 输入搜索 */
|
||||
onSearchChange(e: WechatMiniprogram.CustomEvent) {
|
||||
const value = e.detail.value.trim();
|
||||
this.setData({ searchValue: value });
|
||||
// 使用防抖自动搜索（包括清空的情况）
|
||||
if (this.debouncedSearch) {
|
||||
this.debouncedSearch(value);
|
||||
if (this.data.debouncedSearch) {
|
||||
this.data.debouncedSearch(value);
|
||||
}
|
||||
},
|
||||
/** 提交搜索 */
|
||||
onSearchSubmit(e: WechatMiniprogram.CustomEvent) {
|
||||
const value = e.detail.value.trim();
|
||||
// 立即搜索，取消防抖
|
||||
if (this.debouncedSearch) {
|
||||
this.debouncedSearch.cancel();
|
||||
if (this.data.debouncedSearch) {
|
||||
this.data.debouncedSearch.cancel();
|
||||
}
|
||||
this.resetAndSearch(value);
|
||||
},
|
||||
/** 清空搜索 */
|
||||
onSearchClear() {
|
||||
// 取消防抖，立即搜索
|
||||
if (this.debouncedSearch) {
|
||||
this.debouncedSearch.cancel();
|
||||
if (this.data.debouncedSearch) {
|
||||
this.data.debouncedSearch.cancel();
|
||||
}
|
||||
this.resetAndSearch("");
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user