mini-starter/mini/src/pages/goods-list/index.tsx

import { View, ScrollView, Text } from '@tarojs/components'
import { useInfiniteQuery } from '@tanstack/react-query'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import { goodsClient } from '@/api'
import { InferResponseType } from 'hono'
import { Navbar } from '@/components/ui/navbar'
import { useCart } from '@/contexts/CartContext'
import GoodsList from '@/components/goods-list'
import TDesignSearch from '@/components/tdesign/search'

type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>
type Goods = GoodsResponse['data'][0]

export default function GoodsListPage() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const [activeCategory, setActiveCategory] = useState('all')
  const { addToCart } = useCart()

  // 获取URL参数中的分类ID
  const params = Taro.getCurrentInstance().router?.params
  const categoryId = params?.cateId || ''

  const categories = [
    { id: 'all', name: '全部' },
    { id: 'hot', name: '热销' },
    { id: 'new', name: '新品' },
  ]

  const {
    data,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
    refetch
  } = useInfiniteQuery({
    queryKey: ['goods-infinite', searchKeyword, categoryId],
    queryFn: async ({ pageParam = 1 }) => {
      // 构建筛选条件
      const filters: any = { state: 1 } // 只显示可用的商品
      if (categoryId) {
        filters.categoryId1 = categoryId
      }

      const response = await goodsClient.$get({
        query: {
          page: pageParam,
          pageSize: 10,
          keyword: searchKeyword,
          filters: JSON.stringify(filters)
        }
      })
      if (response.status !== 200) {
        throw new Error('获取商品失败')
      }
      return response.json()
    },
    getNextPageParam: (lastPage) => {
      const { pagination } = lastPage
      const totalPages = Math.ceil(pagination.total / pagination.pageSize)
      return pagination.current < totalPages ? pagination.current + 1 : undefined
    },
    staleTime: 5 * 60 * 1000,
    initialPageParam: 1,
  })

  // 合并所有分页数据
  const allGoods = data?.pages.flatMap(page => page.data) || []

  // 触底加载更多
  const handleScrollToLower = () => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage()
    }
  }

  // 下拉刷新
  const onPullDownRefresh = () => {
    refetch().finally(() => {
      Taro.stopPullDownRefresh()
    })
  }

  // 跳转到商品详情
  const handleGoodsClick = (goods: Goods) => {
    Taro.navigateTo({
      url: `/pages/goods-detail/index?id=${goods.id}`
    })
  }

  // 添加到购物车
  const handleAddToCart = (goods: Goods) => {
    addToCart({
      id: goods.id,
      name: goods.name,
      price: goods.price,
      image: goods.imageFile?.fullUrl || '',
      stock: goods.stock,
      quantity: 1
    })
    Taro.showToast({
      title: '已添加到购物车',
      icon: 'success'
    })
  }

  return (
    <View className="min-h-screen bg-white">
      <Navbar
        title="商品列表"
        leftIcon="i-heroicons-chevron-left-20-solid"
        onClickLeft={() => Taro.navigateBack()}
        className="bg-white shadow-sm"
      />
      
      <ScrollView
        className="flex-1"
        scrollY
        onScrollToLower={handleScrollToLower}
        refresherEnabled
        refresherTriggered={false}
        onRefresherRefresh={onPullDownRefresh}
      >
        <View className="goods-page-container bg-[#f2f2f2] p-[20rpx_24rpx]">
          {/* 搜索栏 */}
          <View className="search-bar-container mb-4">
            <View onClick={() => Taro.navigateTo({ url: '/pages/search/index' })}>
              <TDesignSearch
                placeholder="搜索你想要的商品..."
                shape="round"
                value={searchKeyword}
                onChange={(value) => setSearchKeyword(value)}
                onSubmit={() => refetch()}
                onClear={() => {
                  setSearchKeyword('')
                  refetch()
                }}
                disabled={true}
              />
            </View>
          </View>

          {/* 分类筛选 */}
          {/* <View className="flex space-x-2 mb-4 overflow-x-auto">
            {categories.map((category) => (
              <View
                key={category.id}
                className={`whitespace-nowrap rounded-full px-4 py-2 transition-all cursor-pointer ${
                  activeCategory === category.id
                    ? 'bg-blue-500 text-white shadow-md'
                    : 'text-gray-600 bg-gray-100 hover:bg-gray-200'
                }`}
                onClick={() => {
                  setActiveCategory(category.id)
                  refetch()
                }}
              >
                {category.name}
              </View>
            ))}
          </View> */}

          {/* 商品列表 */}
          {isLoading ? (
            <View className="flex justify-center py-10">
              <View className="i-heroicons-arrow-path-20-solid animate-spin w-8 h-8 text-blue-500" />
            </View>
          ) : (
            <>
              <GoodsList
                goodsList={allGoods.map(goods => ({
                  id: goods.id.toString(),
                  name: goods.name,
                  cover_image: goods.imageFile?.fullUrl,
                  price: goods.price,
                  originPrice: goods.originPrice,
                  tags: goods.stock <= 0 ? ['已售罄'] : goods.salesNum > 100 ? ['热销'] : []
                }))}
                onClick={(goods) => handleGoodsClick(allGoods.find(g => g.id.toString() === goods.id)!)}
                onAddCart={(goods) => handleAddToCart(allGoods.find(g => g.id.toString() === goods.id)!)}
              />
              
              {isFetchingNextPage && (
                <View className="flex justify-center py-4 mt-4">
                  <View className="i-heroicons-arrow-path-20-solid animate-spin w-6 h-6 text-blue-500" />
                  <Text className="ml-2 text-sm text-gray-500">加载更多...</Text>
                </View>
              )}
              
              {!hasNextPage && allGoods.length > 0 && (
                <View className="text-center py-8 text-sm text-gray-400">
                  <View className="flex items-center justify-center">
                    <View className="i-heroicons-check-circle-20-solid w-4 h-4 mr-1" />
                    已经到底啦
                  </View>
                </View>
              )}
              
              {!isLoading && allGoods.length === 0 && (
                <View className="flex flex-col items-center py-10">
                  <View className="i-heroicons-inbox-20-solid w-16 h-16 text-gray-300 mb-4" />
                  <Text className="text-gray-500 text-lg mb-2">暂无商品</Text>
                  <Text className="text-gray-400 text-sm">换个关键词试试吧</Text>
                </View>
              )}
            </>
          )}
        </View>
      </ScrollView>
    </View>
  )
}