fix(api): 替换所有接口请求的域名为 guilixu-api.websoft.top
- 将获取 STS Token 的接口地址由 paopao-api 改为 guilixu-api - 更新图片上传接口地址为新的 guilixu-api 域名 - 修改用户推广页面中邀请码链接和二维码接口的域名 - 更改注册页微信登录接口请求的域名为 guilixu-api
This commit is contained in:
113
src/pages/shop/index.tsx
Normal file
113
src/pages/shop/index.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { listShopGoodsCategory } from '@/api/shop/shopGoodsCategory'
|
||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
||||
import type { ShopGoodsCategory, ShopGoods } from '@/api/shop/shopGoodsCategory/model'
|
||||
import type { ShopGoodsParam } from '@/api/shop/shopGoods/model'
|
||||
import ProductCard from '@/components/common/ProductCard'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
import LoadMore from '@/components/common/LoadMore'
|
||||
|
||||
const categories = [
|
||||
{ id: 0, title: '全部' },
|
||||
{ id: -1, title: '推荐' },
|
||||
]
|
||||
|
||||
const ShopPage: React.FC = () => {
|
||||
const [categoryList, setCategoryList] = useState<ShopGoodsCategory[]>(categories)
|
||||
const [activeCategory, setActiveCategory] = useState(0)
|
||||
const [goodsList, setGoodsList] = useState<ShopGoods[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [finished, setFinished] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadCategories()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
setFinished(false)
|
||||
setGoodsList([])
|
||||
loadGoods(1, activeCategory)
|
||||
}, [activeCategory])
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const list = await listShopGoodsCategory()
|
||||
if (list && list.length > 0) {
|
||||
setCategoryList([...categories, ...list])
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
const loadGoods = async (p: number, categoryId?: number) => {
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const params: ShopGoodsParam = { page: p, limit: 10, status: 0 }
|
||||
if (categoryId && categoryId > 0) params.categoryId = categoryId
|
||||
if (categoryId === -1) params.recommend = 1
|
||||
const res = await pageShopGoods(params)
|
||||
const newList = res?.list || []
|
||||
if (p === 1) {
|
||||
setGoodsList(newList)
|
||||
} else {
|
||||
setGoodsList(prev => [...prev, ...newList])
|
||||
}
|
||||
setFinished(newList.length < 10)
|
||||
setPage(p)
|
||||
} catch { /* ignore */ }
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!finished && !loading) {
|
||||
loadGoods(page + 1, activeCategory)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='flex min-h-screen bg-gray-50'>
|
||||
{/* 左侧分类栏 */}
|
||||
<ScrollView scrollY className='w-20 bg-gray-100 h-screen'>
|
||||
{categoryList.map(cat => (
|
||||
<View
|
||||
key={cat.categoryId || cat.id}
|
||||
className={`py-3 px-2 text-center text-xs ${
|
||||
(cat.categoryId || cat.id) === activeCategory
|
||||
? 'bg-white text-green-600 font-medium border-l-2 border-green-500'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
onClick={() => setActiveCategory(cat.categoryId || cat.id)}
|
||||
>
|
||||
<Text>{cat.title}</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{/* 右侧商品列表 */}
|
||||
<ScrollView
|
||||
scrollY
|
||||
className='flex-1 h-screen'
|
||||
onScrollToLower={handleLoadMore}
|
||||
lowerThreshold={100}
|
||||
>
|
||||
<View className='p-2'>
|
||||
<View className='grid grid-cols-2 gap-2'>
|
||||
{goodsList.map(item => (
|
||||
<ProductCard key={item.goodsId} product={item} />
|
||||
))}
|
||||
</View>
|
||||
{goodsList.length === 0 && !loading && (
|
||||
<EmptyState text='暂无商品' />
|
||||
)}
|
||||
<LoadMore loading={loading} finished={finished} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShopPage
|
||||
Reference in New Issue
Block a user