From 611f0e321666d447e74a87bf094095b62cd6de64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Sat, 20 Sep 2025 23:07:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(Banner):=E9=87=8D=E6=9E=84=20Banner=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80=E4=B8=8E=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用 `View` 替代 `div`，优化 Taro 组件结构 - 移除旧的广告位状态逻辑，引入商品数据接口 `listShopGoods` - 调整右侧热卖区域展示结构，支持商品列表渲染 - 更新图片点击跳转路径及样式细节feat(BestSellers): 增加 Tabs 分类展示热销商品 - 引入 `Tabs` 组件实现分类切换功能- 当前仅实现“今日主推”Tab 展示商品列表 - 其他 Tab（即将到期、活动预告）暂显示空状态组件 -优化部分样式和 Swiper 高度设置 feat(UserCard): 设置用户头像默认图片及移除冗余属性 - 在未登录或无头像时显示默认头像 - 移除 `Image` 组件中冗余的 `alt` 属性 refactor(OrderList): 移除未使用的导航工具函数 - 删除从 `navigation` 工具中导入的 `switchTab` 函数引用 --- src/pages/index/Banner.tsx | 118 ++++++++++++------------ src/pages/index/BestSellers.tsx | 55 ++++++++--- src/pages/user/components/UserCard.tsx | 5 +- src/user/order/components/OrderList.tsx | 2 +- 4 files changed, 105 insertions(+), 75 deletions(-) diff --git a/src/pages/index/Banner.tsx b/src/pages/index/Banner.tsx index 4cd6237..35a1a91 100644 --- a/src/pages/index/Banner.tsx +++ b/src/pages/index/Banner.tsx @@ -1,15 +1,19 @@ import {useEffect, useState} from 'react' +import {View} from '@tarojs/components' import {Swiper} from '@nutui/nutui-react-taro' import {CmsAd} from "@/api/cms/cmsAd/model"; import {Image} from '@nutui/nutui-react-taro' import {getCmsAd} from "@/api/cms/cmsAd"; import navTo from "@/utils/common"; +import {ShopGoods} from "@/api/shop/shopGoods/model"; +import {listShopGoods} from "@/api/shop/shopGoods"; const MyPage = () => { const [carouselData, setCarouselData] = useState() - const [hotToday, setHotToday] = useState() - const [groupBuy, setGroupBuy] = useState() + // const [hotToday, setHotToday] = useState() + // const [groupBuy, setGroupBuy] = useState() + const [hotGoods, setHotGoods] = useState([]) // 加载数据 const loadData = () => { @@ -18,12 +22,16 @@ const MyPage = () => { setCarouselData(data) }) // 今日热卖素材（上层图片） - getCmsAd(444).then(data => { - setHotToday(data) - }) + // getCmsAd(444).then(data => { + // setHotToday(data) + // }) // 社区拼团素材（下层图片） - getCmsAd(445).then(data => { - setGroupBuy(data) + // getCmsAd(445).then(data => { + // setGroupBuy(data) + // }) + // 今日热卖 + listShopGoods({categoryId: 4424, limit: 2}).then(data => { + setHotGoods(data) }) } @@ -35,9 +43,9 @@ const MyPage = () => { const carouselHeight = carouselData?.height || 200; return ( -
+ {/* 左侧轮播图区域 */} -
+ { onClick={() => navTo(`${img.path}`)} lazyLoad={false} style={{height: `${carouselHeight}px`, borderRadius: '4px'}} - alt={`轮播图${index + 1}`} /> ))} -
+ {/* 右侧上下图片区域 - 从API获取数据 */} -
+ {/* 上层图片 - 使用今日热卖素材 */} -
- {hotToday?.imageList?.length ? ( - navTo("/cms/category/index?id=4424" || '')} - lazyLoad={false} - style={{borderRadius: '4px'}} - alt="今日热卖" - /> - ) : ( -
- 加载中... -
- )} -
+ + 今日热卖 + + { + hotGoods.map(item => ( + + navTo('/shop/category/index?id=4424')} + /> + 到手价¥{item.price} + + )) + } + + {/* 下层图片 - 使用社区拼团素材 */} -
- {groupBuy?.imageList?.length ? ( + + 走进社区 + navTo(groupBuy.imageList[0].path || '')} lazyLoad={false} - style={{borderRadius: '4px'}} - alt="社区拼团" + style={{ + borderRadius: '4px' + }} + onClick={() => navTo('cms/detail/index?id=10109')} /> - ) : ( -
- 加载中... -
- )} -
-
-
+ + + + ) } diff --git a/src/pages/index/BestSellers.tsx b/src/pages/index/BestSellers.tsx index 56c8288..7c2c898 100644 --- a/src/pages/index/BestSellers.tsx +++ b/src/pages/index/BestSellers.tsx @@ -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('0') const [list, setList] = useState([]) const [goods, setGoods] = useState(null) // 轮播图固定高度，可根据需求调整 @@ -41,7 +42,7 @@ const BestSellers = () => { } } // 返回新对象，避免直接修改原对象 - return { ...item, pics }; + return {...item, pics}; }; // 处理商品列表 @@ -101,7 +102,26 @@ const BestSellers = () => { return ( - {list?.map((item) => ( + { + setTab1value(value) + }} + style={{ + backgroundColor: '#fff', + }} + activeType="smile" + > + + + + + + + + + {tab1value == '0' && list?.map((item) => ( { ) : ( // 没有图片时显示占位图 - + 暂无图片 )} @@ -161,7 +181,7 @@ const BestSellers = () => { Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` })} @@ -174,6 +194,19 @@ const BestSellers = () => { ))} + + { + tab1value == '1' && + } + + { + tab1value == '2' && + } + ) diff --git a/src/pages/user/components/UserCard.tsx b/src/pages/user/components/UserCard.tsx index a2e4de5..99fb63a 100644 --- a/src/pages/user/components/UserCard.tsx +++ b/src/pages/user/components/UserCard.tsx @@ -184,10 +184,10 @@ const UserCard = forwardRef((_, ref) => { { IsLogin ? ( - + ) : ( ) } @@ -240,7 +240,6 @@ const UserCard = forwardRef((_, ref) => { > 个人资料 {