Browse Source

修复大贸易筛选下数据加载问题,实现持续加载机制

Xfy
徐飞洋 1 month ago
parent
commit
b4154d463c
  1. 66
      pages/eggbar/create-post.js
  2. 2
      pages/eggbar/create-post.wxml
  3. 66
      pages/eggbar/eggbar.js
  4. 2
      pages/eggbar/eggbar.wxml
  5. 162
      pages/goods/index.js
  6. 17
      utils/api.js

66
pages/eggbar/create-post.js

@ -0,0 +1,66 @@
// pages/eggbar/create-post.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

2
pages/eggbar/create-post.wxml

@ -0,0 +1,2 @@
<!--pages/eggbar/create-post.wxml-->
<text>pages/eggbar/create-post.wxml</text>

66
pages/eggbar/eggbar.js

@ -0,0 +1,66 @@
// pages/eggbar/eggbar.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

2
pages/eggbar/eggbar.wxml

@ -0,0 +1,2 @@
<!--pages/eggbar/eggbar.wxml-->
<text>pages/eggbar/eggbar.wxml</text>

162
pages/goods/index.js

@ -318,9 +318,16 @@ Page({
// 使用getProducts方法获取商品数据,支持分页和搜索 // 使用getProducts方法获取商品数据,支持分页和搜索
const result = await API.getProducts(page, pageSize, status, keyword) const result = await API.getProducts(page, pageSize, status, keyword)
console.log('API返回原始数据:', result)
console.log('API返回商品数量:', result.products.length)
console.log('当前分页参数:', { page, pageSize, status, keyword })
// 对商品进行格式化处理 // 对商品进行格式化处理
const formattedGoods = result.products.map(item => { const formattedGoods = result.products.map(item => {
// 确定creatorName // 确定creatorName
console.log('商品原始数据:', item)
console.log('商品seller字段:', item.seller)
const sellerNickName = item.seller?.nickName || item.seller?.sellerNickName || item.seller?.name || '未知'; const sellerNickName = item.seller?.nickName || item.seller?.sellerNickName || item.seller?.name || '未知';
const creatorName = sellerNickName; const creatorName = sellerNickName;
@ -370,12 +377,15 @@ Page({
} }
}) })
console.log('格式化后的商品数据:', formattedGoods)
return { return {
goods: formattedGoods, goods: formattedGoods,
total: result.total, total: result.total,
hasMore: result.hasMore hasMore: result.hasMore
} }
} catch (err) { } catch (err) {
console.error('加载商品数据失败:', err)
return { return {
goods: [], goods: [],
total: 0, total: 0,
@ -556,12 +566,16 @@ Page({
try { try {
// 检查缓存是否有效 // 检查缓存是否有效
if (!isLoadMore && this.isCacheValid()) { if (!isLoadMore && this.isCacheValid()) {
console.log('使用缓存数据')
const cache = this.data.cache const cache = this.data.cache
// 重新应用当前筛选条件到缓存数据 // 重新应用当前筛选条件到缓存数据
const allCachedGoods = [...cache.publishedGoods, ...cache.soldOutGoods] const allCachedGoods = [...cache.publishedGoods, ...cache.soldOutGoods]
const filteredGoods = this.filterGoodsList(allCachedGoods) const filteredGoods = this.filterGoodsList(allCachedGoods)
console.log('缓存商品数量:', allCachedGoods.length)
console.log('筛选后缓存商品数量:', filteredGoods.length)
this.setData({ this.setData({
goodsList: filteredGoods, goodsList: filteredGoods,
publishedLoaded: true, publishedLoaded: true,
@ -574,100 +588,154 @@ Page({
return return
} }
let newGoods = [] // 1. 处理已上架商品 - 持续加载直到找到足够的符合条件的商品
let updatedPublishedHasMore = this.data.publishedHasMore
let updatedSoldOutHasMore = this.data.soldOutHasMore
let publishedGoods = []
let soldOutGoods = []
// 1. 处理已上架商品
if (this.data.publishedHasMore) { if (this.data.publishedHasMore) {
let accumulatedFilteredGoods = []
let currentPage = this.data.publishedCurrentPage
let hasMore = true
// 持续加载,直到找到至少20条符合条件的商品或者没有更多数据
while (hasMore && accumulatedFilteredGoods.length < this.data.pageSize) {
// 从服务器获取已上架商品数据,支持分页和搜索 // 从服务器获取已上架商品数据,支持分页和搜索
const result = await this.loadGoodsData( const result = await this.loadGoodsData(
this.data.publishedCurrentPage, currentPage,
this.data.pageSize, this.data.pageSize,
'published', 'published',
this.data.searchKeyword this.data.searchKeyword
) )
console.log('原始商品数据:', result.goods)
console.log('当前筛选条件:', this.data.activeFilter)
console.log('筛选配置:', this.data.filterConfig)
console.log('分页参数:', { page: currentPage, pageSize: this.data.pageSize })
console.log('hasMore:', result.hasMore)
// 应用筛选逻辑 // 应用筛选逻辑
let filteredGoods = this.filterGoodsList(result.goods) const filteredGoods = this.filterGoodsList(result.goods)
console.log('筛选后商品数据:', filteredGoods)
console.log('筛选后商品数量:', filteredGoods.length)
// 累积符合条件的商品
accumulatedFilteredGoods = [...accumulatedFilteredGoods, ...filteredGoods]
newGoods = filteredGoods // 更新状态
updatedPublishedHasMore = result.hasMore hasMore = result.hasMore
publishedGoods = filteredGoods currentPage++
// 如果已经找到足够的商品,跳出循环
if (accumulatedFilteredGoods.length >= this.data.pageSize) {
break
}
}
console.log('累积筛选后商品数量:', accumulatedFilteredGoods.length)
// 如果是加载更多,追加数据;否则替换数据 // 如果是加载更多,追加数据;否则替换数据
if (accumulatedFilteredGoods.length > 0) {
this.setData({ this.setData({
goodsList: isLoadMore ? [...this.data.goodsList, ...newGoods] : newGoods, goodsList: isLoadMore ? [...this.data.goodsList, ...accumulatedFilteredGoods] : accumulatedFilteredGoods
publishedHasMore: updatedPublishedHasMore
}) })
}
// 如果已上架商品还有更多,更新页码,返回等待下一次加载 // 更新页码和hasMore状态
if (updatedPublishedHasMore) {
this.setData({ this.setData({
publishedCurrentPage: this.data.publishedCurrentPage + 1 publishedCurrentPage: currentPage,
publishedHasMore: hasMore
}) })
return
} else { console.log('已上架商品加载完成,更新页码为:', currentPage, ',是否有更多:', hasMore)
// 已上架商品加载完成
// 如果没有更多数据,标记为加载完成
if (!hasMore) {
this.setData({ this.setData({
publishedLoaded: true publishedLoaded: true
}) })
console.log('已上架商品加载完成')
} }
} }
// 2. 处理售空商品 // 2. 处理售空商品 - 持续加载直到找到足够的符合条件的商品
if (!this.data.publishedHasMore && this.data.soldOutHasMore) { // 对于初始加载,即使已上架商品还有更多,也尝试加载售空商品
// 这样可以确保用户能看到所有类型的商品
if ((!isLoadMore || !this.data.publishedHasMore) && this.data.soldOutHasMore) {
let accumulatedFilteredGoods = []
let currentPage = this.data.soldOutCurrentPage
let hasMore = true
// 持续加载,直到找到至少20条符合条件的商品或者没有更多数据
while (hasMore && accumulatedFilteredGoods.length < this.data.pageSize) {
// 从服务器获取售空商品数据,支持分页和搜索 // 从服务器获取售空商品数据,支持分页和搜索
const result = await this.loadGoodsData( const result = await this.loadGoodsData(
this.data.soldOutCurrentPage, currentPage,
this.data.pageSize, this.data.pageSize,
'sold_out', 'sold_out',
this.data.searchKeyword this.data.searchKeyword
) )
console.log('售空商品数据:', result.goods)
console.log('售空商品分页参数:', { page: currentPage, pageSize: this.data.pageSize })
console.log('售空商品hasMore:', result.hasMore)
console.log('当前筛选条件:', this.data.activeFilter)
// 应用筛选逻辑 // 应用筛选逻辑
let filteredGoods = this.filterGoodsList(result.goods) const filteredGoods = this.filterGoodsList(result.goods)
console.log('筛选后售空商品数据:', filteredGoods)
console.log('筛选后售空商品数量:', filteredGoods.length)
newGoods = filteredGoods // 累积符合条件的商品
updatedSoldOutHasMore = result.hasMore accumulatedFilteredGoods = [...accumulatedFilteredGoods, ...filteredGoods]
soldOutGoods = filteredGoods
// 更新状态
hasMore = result.hasMore
currentPage++
// 如果已经找到足够的商品,跳出循环
if (accumulatedFilteredGoods.length >= this.data.pageSize) {
break
}
}
console.log('累积筛选后售空商品数量:', accumulatedFilteredGoods.length)
// 追加售空商品数据 // 追加售空商品数据
if (accumulatedFilteredGoods.length > 0) {
this.setData({ this.setData({
goodsList: [...this.data.goodsList, ...newGoods], goodsList: isLoadMore ? [...this.data.goodsList, ...accumulatedFilteredGoods] : [...this.data.goodsList, ...accumulatedFilteredGoods]
soldOutHasMore: updatedSoldOutHasMore
}) })
}
// 如果售空商品还有更多,更新页码 // 更新页码和hasMore状态
if (updatedSoldOutHasMore) {
this.setData({ this.setData({
soldOutCurrentPage: this.data.soldOutCurrentPage + 1 soldOutCurrentPage: currentPage,
soldOutHasMore: hasMore
}) })
} else {
// 售空商品加载完成 console.log('售空商品加载完成,更新页码为:', currentPage, ',是否有更多:', hasMore)
// 如果没有更多数据,标记为加载完成
if (!hasMore) {
this.setData({ this.setData({
soldOutLoaded: true soldOutLoaded: true
}) })
console.log('售空商品加载完成')
} }
} }
console.log('加载完成后状态:', {
publishedHasMore: this.data.publishedHasMore,
soldOutHasMore: this.data.soldOutHasMore,
publishedCurrentPage: this.data.publishedCurrentPage,
soldOutCurrentPage: this.data.soldOutCurrentPage,
goodsListLength: this.data.goodsList.length
})
// 如果是初始加载且所有数据加载完成,更新缓存 // 如果是初始加载且所有数据加载完成,更新缓存
if (!isLoadMore && !this.data.publishedHasMore && !this.data.soldOutHasMore) { if (!isLoadMore && !this.data.publishedHasMore && !this.data.soldOutHasMore) {
// 为了缓存完整数据,获取所有已上架和售空商品 // 由于现在采用分页加载,缓存逻辑需要调整
const publishedResult = await this.loadGoodsData(1, 1000, 'published', this.data.searchKeyword) // 暂时禁用缓存更新,确保每次都从服务器获取最新数据
const soldOutResult = await this.loadGoodsData(1, 1000, 'sold_out', this.data.searchKeyword) console.log('分页加载模式,跳过缓存更新')
// 应用筛选逻辑到缓存数据
const filteredPublishedGoods = this.filterGoodsList(publishedResult.goods)
const filteredSoldOutGoods = this.filterGoodsList(soldOutResult.goods)
this.setData({
'cache.publishedGoods': filteredPublishedGoods,
'cache.soldOutGoods': filteredSoldOutGoods,
'cache.timestamp': Date.now()
})
} }
} catch (err) { } catch (err) {

17
utils/api.js

@ -821,10 +821,23 @@ module.exports = {
const products = res.products || []; const products = res.products || [];
// 将商品列表存储到本地缓存 // 将商品列表存储到本地缓存
wx.setStorageSync('goods', products || []); wx.setStorageSync('goods', products || []);
// 计算是否有更多数据 - 当返回的商品数量等于请求的页码大小时,认为还有更多数据
const hasMore = products.length >= pageSize;
const total = res.total || products.length;
console.log('API.getProducts 返回数据:', {
page,
pageSize,
productsLength: products.length,
total,
hasMore
});
resolve({ resolve({
products: products, products: products,
total: res.total || products.length, total: total,
hasMore: (page * pageSize) < (res.total || products.length) hasMore: hasMore
}); });
} else { } else {
reject(new Error('获取商品列表失败')); reject(new Error('获取商品列表失败'));

Loading…
Cancel
Save