feat(Banner):重构 Banner 组件布局与数据逻辑
- 使用 `View` 替代 `div`,优化 Taro 组件结构 - 移除旧的广告位状态逻辑,引入商品数据接口 `listShopGoods` - 调整右侧热卖区域展示结构,支持商品列表渲染 - 更新图片点击跳转路径及样式细节feat(BestSellers): 增加 Tabs 分类展示热销商品 - 引入 `Tabs` 组件实现分类切换功能- 当前仅实现“今日主推”Tab 展示商品列表 - 其他 Tab(即将到期、活动预告)暂显示空状态组件 -优化部分样式和 Swiper 高度设置 feat(UserCard): 设置用户头像默认图片及移除冗余属性 - 在未登录或无头像时显示默认头像 - 移除 `Image` 组件中冗余的 `alt` 属性 refactor(OrderList): 移除未使用的导航工具函数 - 删除从 `navigation` 工具中导入的 `switchTab` 函数引用
This commit is contained in:
@@ -1,14 +1,15 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Image, Swiper, SwiperItem } from '@nutui/nutui-react-taro'
|
||||
import { Share } from '@nutui/icons-react-taro'
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import {useEffect, useState} from "react";
|
||||
import {Image, Swiper, SwiperItem, Empty} from '@nutui/nutui-react-taro'
|
||||
import {Share} from '@nutui/icons-react-taro'
|
||||
import {View, Text} from '@tarojs/components';
|
||||
import Taro from "@tarojs/taro";
|
||||
import { ShopGoods } from "@/api/shop/shopGoods/model";
|
||||
import { pageShopGoods } from "@/api/shop/shopGoods";
|
||||
import './BestSellers.scss'
|
||||
import {Tabs} from '@nutui/nutui-react-taro'
|
||||
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
||||
import {pageShopGoods} from "@/api/shop/shopGoods";
|
||||
|
||||
|
||||
const BestSellers = () => {
|
||||
const [tab1value, setTab1value] = useState<string | number>('0')
|
||||
const [list, setList] = useState<ShopGoods[]>([])
|
||||
const [goods, setGoods] = useState<ShopGoods | null>(null)
|
||||
// 轮播图固定高度,可根据需求调整
|
||||
@@ -41,7 +42,7 @@ const BestSellers = () => {
|
||||
}
|
||||
}
|
||||
// 返回新对象,避免直接修改原对象
|
||||
return { ...item, pics };
|
||||
return {...item, pics};
|
||||
};
|
||||
|
||||
// 处理商品列表
|
||||
@@ -101,7 +102,26 @@ const BestSellers = () => {
|
||||
return (
|
||||
<View className={'py-3'}>
|
||||
<View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
|
||||
{list?.map((item) => (
|
||||
<Tabs
|
||||
value={tab1value}
|
||||
className={'w-full'}
|
||||
onChange={(value) => {
|
||||
setTab1value(value)
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
}}
|
||||
activeType="smile"
|
||||
>
|
||||
<Tabs.TabPane title="今日主推">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane title="即将到期">
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane title="活动预告">
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
|
||||
{tab1value == '0' && list?.map((item) => (
|
||||
<View
|
||||
key={item.goodsId || item.id} // 使用商品唯一ID作为key
|
||||
className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}
|
||||
@@ -134,7 +154,7 @@ const BestSellers = () => {
|
||||
</Swiper>
|
||||
) : (
|
||||
// 没有图片时显示占位图
|
||||
<View className="no-image-placeholder" style={{ height: `${SWIPER_HEIGHT}px` }}>
|
||||
<View className="no-image-placeholder" style={{height: `${SWIPER_HEIGHT}px`}}>
|
||||
<Text className="placeholder-text">暂无图片</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -161,7 +181,7 @@ const BestSellers = () => {
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
className={'text-white pl-4 pr-5'}
|
||||
className={'text-white pl-5 pr-5'}
|
||||
onClick={() => Taro.navigateTo({
|
||||
url: `/shop/goodsDetail/index?id=${item.goodsId}`
|
||||
})}
|
||||
@@ -174,6 +194,19 @@ const BestSellers = () => {
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{
|
||||
tab1value == '1' && <Empty description="暂无相关商品" style={{
|
||||
background: 'transparent',
|
||||
}}/>
|
||||
}
|
||||
|
||||
{
|
||||
tab1value == '2' && <Empty description="暂无相关商品" style={{
|
||||
background: 'transparent',
|
||||
}}/>
|
||||
}
|
||||
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user