feat: 百科页面
This commit is contained in:
Blizzard
+115
-91
@@ -1,21 +1,21 @@
|
||||
// pages/wiki/index.js
|
||||
import { MOCK_WIKI } from '../../utils/mockData';
|
||||
import request from '../../utils/request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// Data Source (effectively the backend result)
|
||||
filteredSourceList: [],
|
||||
// Categories
|
||||
categories: [],
|
||||
activeCategory: 'all', // 'all' or category id
|
||||
|
||||
// Display Data (rendered list)
|
||||
// Display Data
|
||||
displayedList: [],
|
||||
|
||||
// Filter State
|
||||
searchQuery: '',
|
||||
activeCategory: '全部',
|
||||
|
||||
// Pagination State
|
||||
page: 1,
|
||||
pageSize: 5,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
isLoading: false,
|
||||
hasMore: true,
|
||||
|
||||
@@ -24,8 +24,8 @@ Page({
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// Initial Load
|
||||
this.filterList();
|
||||
this.fetchCategories();
|
||||
this.fetchWikiList(true);
|
||||
},
|
||||
|
||||
onShow() {
|
||||
@@ -35,98 +35,116 @@ Page({
|
||||
}
|
||||
},
|
||||
|
||||
// Search Input Handler
|
||||
onSearchInput(e) {
|
||||
this.setData({ searchQuery: e.detail.value }, () => {
|
||||
this.filterList();
|
||||
// Fetch categories from API
|
||||
fetchCategories() {
|
||||
request.get('/wiki-class/list').then(res => {
|
||||
const list = (res && res.list) || (Array.isArray(res) ? res : []);
|
||||
this.setData({ categories: list });
|
||||
}).catch(err => {
|
||||
console.error('Fetch categories failed', err);
|
||||
});
|
||||
},
|
||||
|
||||
// Fetch wiki list from API
|
||||
fetchWikiList(reset = false) {
|
||||
if (this.data.isLoading) return;
|
||||
if (!reset && !this.data.hasMore) return;
|
||||
|
||||
const current = reset ? 1 : this.data.current;
|
||||
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
// Build params
|
||||
const params = {
|
||||
current: current,
|
||||
pageSize: this.data.pageSize
|
||||
};
|
||||
|
||||
// Search query
|
||||
if (this.data.searchQuery) {
|
||||
params.name = this.data.searchQuery;
|
||||
}
|
||||
|
||||
// Category filter
|
||||
if (this.data.activeCategory !== 'all') {
|
||||
params.classId = [this.data.activeCategory];
|
||||
}
|
||||
|
||||
request.post('/wiki/page', params).then(res => {
|
||||
const data = res || {};
|
||||
const list = data.list || [];
|
||||
const total = data.total || 0;
|
||||
|
||||
// Map API data to display model
|
||||
const mappedList = list.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
latinName: item.latinName || '',
|
||||
aliases: item.aliases || '',
|
||||
genus: item.genus || '',
|
||||
difficulty: item.difficulty || 0,
|
||||
isHot: item.isHot === 1,
|
||||
image: (item.imgList && item.imgList.length > 0) ? item.imgList[0].url : '',
|
||||
classes: (item.classes || []).map(c => c.name),
|
||||
// Pass the full item for detail navigation
|
||||
raw: item
|
||||
}));
|
||||
|
||||
if (reset) {
|
||||
this.setData({
|
||||
displayedList: mappedList,
|
||||
current: 2,
|
||||
hasMore: mappedList.length < total,
|
||||
isLoading: false
|
||||
});
|
||||
} else {
|
||||
// Append using data path for performance
|
||||
const updateData = {};
|
||||
const currentLen = this.data.displayedList.length;
|
||||
mappedList.forEach((item, index) => {
|
||||
updateData[`displayedList[${currentLen + index}]`] = item;
|
||||
});
|
||||
updateData['current'] = current + 1;
|
||||
updateData['hasMore'] = (currentLen + mappedList.length) < total;
|
||||
updateData['isLoading'] = false;
|
||||
this.setData(updateData);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('Fetch wiki list failed', err);
|
||||
this.setData({ isLoading: false });
|
||||
});
|
||||
},
|
||||
|
||||
// Search Input Handler (debounced)
|
||||
onSearchInput(e) {
|
||||
const value = e.detail.value;
|
||||
this.setData({ searchQuery: value });
|
||||
|
||||
// Debounce search
|
||||
if (this._searchTimer) clearTimeout(this._searchTimer);
|
||||
this._searchTimer = setTimeout(() => {
|
||||
this.fetchWikiList(true);
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// Category Filter Handler
|
||||
setCategory(e) {
|
||||
this.setData({ activeCategory: e.currentTarget.dataset.cat }, () => {
|
||||
this.filterList();
|
||||
const catId = e.currentTarget.dataset.cat;
|
||||
this.setData({ activeCategory: catId }, () => {
|
||||
this.fetchWikiList(true);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Simulates "Backend" Search & Filtering
|
||||
* Resets pagination and prepares the filtered data source.
|
||||
*/
|
||||
filterList() {
|
||||
const { searchQuery, activeCategory } = this.data;
|
||||
let result = MOCK_WIKI;
|
||||
|
||||
// Filter by Search Query
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
result = result.filter(item =>
|
||||
item.name.toLowerCase().includes(q) ||
|
||||
item.scientificName.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by Category
|
||||
if (activeCategory !== '全部') {
|
||||
result = result.filter(item => item.category.includes(activeCategory));
|
||||
}
|
||||
|
||||
this.setData({
|
||||
filteredSourceList: result,
|
||||
displayedList: [],
|
||||
page: 1,
|
||||
hasMore: true
|
||||
}, () => {
|
||||
this.loadMoreData();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Simulates "Backend" Pagination
|
||||
* Appends the next page of data from filteredSourceList to displayedList.
|
||||
* key-value data path update is used for performance optimization.
|
||||
*/
|
||||
loadMoreData() {
|
||||
const { isLoading, hasMore, page, pageSize, filteredSourceList, displayedList } = this.data;
|
||||
|
||||
if (isLoading || !hasMore) return;
|
||||
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
// Simulate Network Delay
|
||||
setTimeout(() => {
|
||||
const startIndex = (page - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const newItems = filteredSourceList.slice(startIndex, endIndex);
|
||||
|
||||
const isLastPage = endIndex >= filteredSourceList.length;
|
||||
|
||||
if (newItems.length > 0) {
|
||||
// Performance Optimization: Use data path to append items
|
||||
// Instead of setData({ displayedList: [...old, ...new] })
|
||||
const updateData = {};
|
||||
const currentLen = displayedList.length;
|
||||
newItems.forEach((item, index) => {
|
||||
updateData[`displayedList[${currentLen + index}]`] = item;
|
||||
});
|
||||
|
||||
updateData['page'] = page + 1;
|
||||
updateData['hasMore'] = !isLastPage;
|
||||
updateData['isLoading'] = false;
|
||||
|
||||
this.setData(updateData);
|
||||
} else {
|
||||
this.setData({
|
||||
hasMore: false,
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// Infinite Scroll Handler
|
||||
onReachBottom() {
|
||||
this.loadMoreData();
|
||||
this.fetchWikiList(false);
|
||||
},
|
||||
|
||||
// Pull down refresh
|
||||
onPullDownRefresh() {
|
||||
this.fetchCategories();
|
||||
this.fetchWikiList(true);
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
goToDetail(e) {
|
||||
@@ -136,6 +154,12 @@ Page({
|
||||
});
|
||||
},
|
||||
|
||||
// Difficulty label helper
|
||||
getDifficultyLabel(level) {
|
||||
const labels = { 1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '专家' };
|
||||
return labels[level] || '未知';
|
||||
},
|
||||
|
||||
openIdentifyModal() { this.setData({ showIdentifyModal: true }); },
|
||||
|
||||
onPopupVisibleChange(e) {
|
||||
|
||||
Reference in New Issue
Block a user