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;
|
isShow?: number;
|
||||||
stock?: number;
|
stock?: number;
|
||||||
keywords?: string;
|
keywords?: string;
|
||||||
|
recommend?: number;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,11 +7,11 @@ import { Cart, Coupon, Gift, Ticket } from '@nutui/icons-react-taro'
|
|||||||
import { getShopInfo } from '@/api/layout'
|
import { getShopInfo } from '@/api/layout'
|
||||||
import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite'
|
import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite'
|
||||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
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'
|
import './index.scss'
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
const [activeTab, setActiveTab] = useState('推荐')
|
const [activeTabKey, setActiveTabKey] = useState('recommend')
|
||||||
const [goodsList, setGoodsList] = useState<ShopGoods[]>([])
|
const [goodsList, setGoodsList] = useState<ShopGoods[]>([])
|
||||||
|
|
||||||
useShareAppMessage(() => {
|
useShareAppMessage(() => {
|
||||||
@@ -96,10 +96,6 @@ function Home() {
|
|||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
pageShopGoods({}).then(res => {
|
|
||||||
setGoodsList(res?.list || [])
|
|
||||||
})
|
|
||||||
|
|
||||||
// 检查是否有待处理的邀请关系 - 异步处理,不阻塞页面加载
|
// 检查是否有待处理的邀请关系 - 异步处理,不阻塞页面加载
|
||||||
if (hasPendingInvite()) {
|
if (hasPendingInvite()) {
|
||||||
console.log('检测到待处理的邀请关系')
|
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<
|
const shortcuts = useMemo<
|
||||||
Array<{ key: string; title: string; icon: ReactNode; onClick: () => void }>
|
Array<{ key: string; title: string; icon: ReactNode; onClick: () => void }>
|
||||||
@@ -169,7 +188,7 @@ function Home() {
|
|||||||
key: 'order',
|
key: 'order',
|
||||||
title: '立即订水',
|
title: '立即订水',
|
||||||
icon: <Cart size={30} />,
|
icon: <Cart size={30} />,
|
||||||
onClick: () => Taro.navigateTo({ url: '/shop/goodsDetail/index?id=10072' }),
|
onClick: () => Taro.navigateTo({ url: '/shop/goodsDetail/index?id=10074' }),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'invite',
|
key: 'invite',
|
||||||
@@ -232,14 +251,14 @@ function Home() {
|
|||||||
<ScrollView className="home-tabs" scrollX enableFlex>
|
<ScrollView className="home-tabs" scrollX enableFlex>
|
||||||
<View className="home-tabs__inner">
|
<View className="home-tabs__inner">
|
||||||
{tabs.map((tab) => {
|
{tabs.map((tab) => {
|
||||||
const active = tab === activeTab
|
const active = tab.key === activeTabKey
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
key={tab}
|
key={tab.key}
|
||||||
className={`home-tabs__item ${active ? 'home-tabs__item--active' : ''}`}
|
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>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|||||||
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