赵忠林
1e51a137ee
- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画 - 添加了响应式样式，提高了移动端体验 - 新增了 CouponList组件样式，用于展示优惠券列表
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import {Image} from '@nutui/nutui-react-taro'
|
|
import {Loading} from '@nutui/nutui-react-taro'
|
|
import {goTo} from "@/utils/navigation"
|
|
import {useShopInfo} from "@/hooks/useShopInfo"
|
|
|
|
const Page = () => {
|
|
// 使用 useShopInfo hooks 获取导航数据
|
|
const {
|
|
loading: shopLoading,
|
|
error,
|
|
getNavigation
|
|
} = useShopInfo()
|
|
|
|
// 获取顶部导航菜单
|
|
const navigation = getNavigation()
|
|
const home = navigation.topNavs.find(item => item.model == 'index')
|
|
const navItems = navigation.topNavs.filter(item => item.parentId == home?.navigationId) || []
|
|
|
|
const onNav = (item: any) => {
|
|
if (item.path) {
|
|
return goTo(`${item.path}`)
|
|
}
|
|
}
|
|
|
|
// 处理错误状态
|
|
if (error) {
|
|
return (
|
|
<div className={'p-2 text-center text-red-500'}>
|
|
加载导航菜单失败
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
shopLoading ? (<Loading>加载中</Loading>) :
|
|
<div className={'p-2 z-50 mt-1'}>
|
|
<div className={'flex justify-between pb-2 p-2 bg-white rounded-xl shadow-sm'}>
|
|
{
|
|
navItems.map((item, index) => (
|
|
<div key={index} className={'text-center'} onClick={() => onNav(item)}>
|
|
<div className={'flex flex-col justify-center items-center p-1'}>
|
|
<Image src={item.icon} height={36} width={36} lazyLoad={false}/>
|
|
<div className={'mt-1 text-gray-600'} style={{fontSize: '14px'}}>{item?.title}</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Page
|