feat(home): 优化首页商品展示功能

- 添加 recommend 字段到商品模型定义
- 重构首页标签页逻辑,支持分类参数传递
- 实现动态商品列表加载,按标签分类获取数据
- 更新订水跳转链接指向新商品ID
- 优化标签页切换逻辑,使用键值对映射
- 添加错误处理机制,防止商品列表加载失败
This commit is contained in:
2026-02-03 20:06:50 +08:00
parent 945bf9af8d
commit cb17e48b03
4 changed files with 36 additions and 12 deletions

View File

@@ -146,4 +146,5 @@ export interface ShopGoodsParam extends PageParam {
isShow?: number;
stock?: number;
keywords?: string;
recommend?: number;
}

View File

@@ -7,11 +7,11 @@ import { Cart, Coupon, Gift, Ticket } from '@nutui/icons-react-taro'
import { getShopInfo } from '@/api/layout'
import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite'
import { pageShopGoods } from '@/api/shop/shopGoods'
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
import './index.scss'
function Home() {
const [activeTab, setActiveTab] = useState('推荐')
const [activeTabKey, setActiveTabKey] = useState('recommend')
const [goodsList, setGoodsList] = useState<ShopGoods[]>([])
useShareAppMessage(() => {
@@ -96,10 +96,6 @@ function Home() {
})
pageShopGoods({}).then(res => {
setGoodsList(res?.list || [])
})
// 检查是否有待处理的邀请关系 - 异步处理,不阻塞页面加载
if (hasPendingInvite()) {
console.log('检测到待处理的邀请关系')
@@ -153,7 +149,30 @@ function Home() {
});
}, []);
const tabs = useMemo(() => ['推荐', '桶装水', '优惠组合', '购机套餐', '饮水设备'], [])
const tabs = useMemo<
Array<{ key: string; title: string; params: Partial<ShopGoodsParam> }>
>(
() => [
{ key: 'recommend', title: '推荐', params: { recommend: 1 } },
{ key: '4476', title: '桶装水', params: { categoryId: 4476 } },
{ key: '4556', title: '优惠组合', params: { categoryId: 4556 } },
{ key: '4557', title: '购机套餐', params: { categoryId: 4557 } },
{ key: '4477', title: '饮水设备', params: { categoryId: 4477 } },
],
[]
)
useEffect(() => {
const tab = tabs.find((t) => t.key === activeTabKey) || tabs[0]
if (!tab) return
pageShopGoods({ ...tab.params })
.then((res) => setGoodsList(res?.list || []))
.catch((err) => {
console.error('首页商品列表加载失败:', err)
setGoodsList([])
})
}, [activeTabKey, tabs])
const shortcuts = useMemo<
Array<{ key: string; title: string; icon: ReactNode; onClick: () => void }>
@@ -169,7 +188,7 @@ function Home() {
key: 'order',
title: '立即订水',
icon: <Cart size={30} />,
onClick: () => Taro.navigateTo({ url: '/shop/goodsDetail/index?id=10072' }),
onClick: () => Taro.navigateTo({ url: '/shop/goodsDetail/index?id=10074' }),
},
{
key: 'invite',
@@ -232,14 +251,14 @@ function Home() {
<ScrollView className="home-tabs" scrollX enableFlex>
<View className="home-tabs__inner">
{tabs.map((tab) => {
const active = tab === activeTab
const active = tab.key === activeTabKey
return (
<View
key={tab}
key={tab.key}
className={`home-tabs__item ${active ? 'home-tabs__item--active' : ''}`}
onClick={() => setActiveTab(tab)}
onClick={() => setActiveTabKey(tab.key)}
>
<Text className="home-tabs__itemText">{tab}</Text>
<Text className="home-tabs__itemText">{tab.title}</Text>
</View>
)
})}

View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '立即订水',
navigationBarTextStyle: 'black'
})

0
src/shop/gift/index.tsx Normal file
View File