Browse Source

优化goods页面性能:禁用视频播放,修改分页为10个,优化数据加载逻辑

pull/19/head
徐飞洋 1 month ago
parent
commit
a80053a21b
  1. 39
      pages/goods/index.js
  2. 13
      pages/goods/index.wxml

39
pages/goods/index.js

@ -51,7 +51,7 @@ Page({
total: 0, // 总数据条数
searchTimer: null, // 搜索防抖定时器
// 分页相关字段
pageSize: 20, // 每页数量
pageSize: 7, // 每页数量
publishedCurrentPage: 1, // 已上架商品当前页码
publishedHasMore: true, // 已上架商品是否有更多
soldOutCurrentPage: 1, // 售空商品当前页码
@ -332,13 +332,9 @@ Page({
const sellerNickName = item.seller?.nickName || item.seller?.sellerNickName || item.seller?.name || '未知';
const creatorName = sellerNickName;
// 处理媒体URL
// 处理媒体URL - 简化处理,只保留图片URL
const imageUrls = item.imageUrls || item.images || []
const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls]
const mediaItems = formattedImageUrls.map(url => ({
url: url,
type: isVideoUrl(url) ? 'video' : 'image'
}))
// 处理商品状态
let status = item.status
@ -346,7 +342,7 @@ Page({
status === 'sold' ||
status === 'out_of_stock' ||
(item.supplyStatus && item.supplyStatus.includes('售空'));
if (isSoldOut) {
status = 'sold_out'
} else if (status !== 'published') {
@ -373,8 +369,7 @@ Page({
price: processedPrice,
formattedCreatedAt: this.formatDateTime(displayTime),
creatorName: creatorName,
imageUrls: formattedImageUrls,
mediaItems: mediaItems
imageUrls: formattedImageUrls
}
})
@ -388,7 +383,7 @@ Page({
/**
* 加载已上架(published)状态的货源 - 支持分页
*/
async loadPublishedGoods(page = 1, pageSize = this.data.pageSize) {
async loadPublishedGoods(page = 1, pageSize = this.data.pageSize, allGoodsData = null) {
if (this.data.isLoadingPublished) return { goods: [], hasMore: true }
this.setData({
@ -403,8 +398,8 @@ Page({
})
try {
// 获取所有商品数据
const allGoods = await this.loadAllGoodsData()
// 使用传入的商品数据或获取所有商品数据
const allGoods = allGoodsData || await this.loadAllGoodsData()
// 过滤出已上架状态的商品
let publishedGoods = allGoods.filter(item => item.status === 'published')
@ -456,7 +451,7 @@ Page({
/**
* 加载售空(sold_out)状态的货源 - 支持分页
*/
async loadSoldOutGoods(page = 1, pageSize = this.data.pageSize) {
async loadSoldOutGoods(page = 1, pageSize = this.data.pageSize, allGoodsData = null) {
if (this.data.isLoadingSoldOut) return { goods: [], hasMore: true }
this.setData({
@ -471,8 +466,8 @@ Page({
})
try {
// 获取所有商品数据
const allGoods = await this.loadAllGoodsData()
// 使用传入的商品数据或获取所有商品数据
const allGoods = allGoodsData || await this.loadAllGoodsData()
// 过滤出售空状态的商品
let soldOutGoods = allGoods.filter(item => item.status === 'sold_out')
@ -590,12 +585,19 @@ Page({
let updatedPublishedHasMore = this.data.publishedHasMore
let updatedSoldOutHasMore = this.data.soldOutHasMore
// 只在初始加载时获取所有商品数据
let allGoodsData = null
if (!isLoadMore) {
allGoodsData = await this.loadAllGoodsData()
}
// 1. 如果已上架商品还有更多,继续加载已上架商品
if (this.data.publishedHasMore) {
console.log('加载已上架商品第', this.data.publishedCurrentPage, '页')
const publishedResult = await this.loadPublishedGoods(
this.data.publishedCurrentPage,
this.data.pageSize
this.data.pageSize,
allGoodsData
)
newGoods = publishedResult.goods
@ -621,7 +623,7 @@ Page({
}
// 添加缓冲,避免请求太快
await new Promise(resolve => setTimeout(resolve, 500))
await new Promise(resolve => setTimeout(resolve, 300))
}
// 2. 如果已上架商品加载完,开始加载售空商品
@ -629,7 +631,8 @@ Page({
console.log('加载售空商品第', this.data.soldOutCurrentPage, '页')
const soldOutResult = await this.loadSoldOutGoods(
this.data.soldOutCurrentPage,
this.data.pageSize
this.data.pageSize,
allGoodsData
)
newGoods = soldOutResult.goods

13
pages/goods/index.wxml

@ -85,20 +85,7 @@
>
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
<view class="product-image-wrapper">
<video
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-image"
src="{{item.mediaItems[0].url}}"
mode="aspectFill"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
></video>
<image
wx:else
class="product-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="aspectFill"

Loading…
Cancel
Save