forked from gxwebsoft/mp-10550
feat(home): 优化首页商品展示功能
- 添加 recommend 字段到商品模型定义 - 重构首页标签页逻辑,支持分类参数传递 - 实现动态商品列表加载,按标签分类获取数据 - 更新订水跳转链接指向新商品ID - 优化标签页切换逻辑,使用键值对映射 - 添加错误处理机制,防止商品列表加载失败
This commit is contained in:
@@ -146,4 +146,5 @@ export interface ShopGoodsParam extends PageParam {
|
||||
isShow?: number;
|
||||
stock?: number;
|
||||
keywords?: string;
|
||||
recommend?: number;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
})}
|
||||
|
||||
4
src/shop/gift/index.config.ts
Normal file
4
src/shop/gift/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '立即订水',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
0
src/shop/gift/index.tsx
Normal file
0
src/shop/gift/index.tsx
Normal file
Reference in New Issue
Block a user