diff --git a/src/components/GoodsList.tsx b/src/components/GoodsList.tsx index 3777b6a..1ada7ca 100644 --- a/src/components/GoodsList.tsx +++ b/src/components/GoodsList.tsx @@ -1,162 +1,174 @@ -import {Avatar, Cell, Space, Tabs, Button, TabPane, Swiper} from '@nutui/nutui-react-taro' -import {useEffect, useState, CSSProperties, useRef} from "react"; -import {BszxPay} from "@/api/bszx/bszxPay/model"; -import {InfiniteLoading} from '@nutui/nutui-react-taro' -import dayjs from "dayjs"; -import {pageShopOrder} from "@/api/shop/shopOrder"; -import {ShopOrder} from "@/api/shop/shopOrder/model"; -import {copyText} from "@/utils/common"; +import {useEffect, useState} from "react"; +import {Image, Tabs, Empty, Sticky} 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"; -const InfiniteUlStyle: CSSProperties = { - marginTop: '84px', - height: '82vh', - width: '100%', - padding: '0', - overflowY: 'auto', - overflowX: 'hidden', -} -const tabs = [ - { - index: 0, - key: '全部', - title: '全部' - }, - { - index: 1, - key: '已上架', - title: '已上架' - }, - { - index: 2, - key: '已下架', - title: '已下架' - }, - { - index: 3, - key: '已售罄', - title: '已售罄' - }, - { - index: 4, - key: '警戒库存', - title: '警戒库存' - }, - { - index: 5, - key: '回收站', - title: '回收站' - }, -] +const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => { + const [tab1value, setTab1value] = useState('0') + const [list, setList] = useState([]) + const [goods, setGoods] = useState() + const [stickyStatus, setStickyStatus] = useState(false) -function GoodsList(props: any) { - const [list, setList] = useState([]) - const [page, setPage] = useState(1) - const [hasMore, setHasMore] = useState(true) - const swiperRef = useRef | null>(null) - const [tabIndex, setTabIndex] = useState(0) - - console.log(props.statusBarHeight, 'ppp') - const reload = async () => { - pageShopOrder({page}).then(res => { - let newList: BszxPay[] | undefined = [] - if (res?.list && res?.list.length > 0) { - newList = list?.concat(res.list) - setHasMore(true) - } else { - newList = res?.list - setHasMore(false) - } - setList(newList || []); + const reload = () => { + pageShopGoods({}).then(res => { + setList(res?.list || []); }) } - const reloadMore = async () => { - setPage(page + 1) - reload().then(); + // 处理分享点击 + const handleShare = (item: ShopGoods) => { + setGoods(item); + + console.log(goods) + + // 显示分享选项菜单 + Taro.showActionSheet({ + itemList: ['分享给好友'], + success: (res) => { + if (res.tapIndex === 0) { + // 分享给好友 - 触发转发 + Taro.showShareMenu({ + withShareTicket: true, + success: () => { + // 提示用户点击右上角分享 + Taro.showToast({ + title: '请点击右上角分享给好友', + icon: 'none', + duration: 2000 + }); + } + }); + } + }, + fail: (err) => { + console.log('显示分享菜单失败', err); + } + }); + } + + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + // 通知父组件粘性状态变化 + props.onStickyChange?.(isSticky) + console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定') + } + + // 获取小程序系统信息 + const getSystemInfo = () => { + const systemInfo = Taro.getSystemInfoSync() + // 状态栏高度 + 导航栏高度 (一般为44px) + return (systemInfo.statusBarHeight || 0) + 44 } useEffect(() => { - setPage(2) - reload().then() + reload() }, []) return ( <> - { - swiperRef.current?.to(page) - setTabIndex(page) - }} - > - { - tabs?.map((item, index) => { - return - }) - } - -
- { - + + {/* Tabs粘性布局组件 */} + { - - }} - loadingText={ - <> - 加载中 - - } - loadMoreText={ - <> - 没有更多了 - - } > - {list?.map(item => { + { + setTab1value(value) + }} + style={{ + backgroundColor: 'transparent', + paddingTop: stickyStatus ? '0' : '8px', + paddingBottom: stickyStatus ? '8px' : '0', + }} + activeType="smile" + > + + + + + + + + + + + {/* 今日主推 */} + {tab1value == '0' && list?.map((item, index) => { return ( - - -
- copyText(`${item.orderNo}`)}>{item.orderNo} - 待付款 -
-
{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}
-
-
-
- -
{item.realName}
-
-
{item.totalNum}件商品
-
-
-
实付金额：￥{item.payPrice}
- - - - - - + + Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> + + + {item.name} + + {item.comments} + 已售 {item.sales} + + + + ￥ + {item.price} + + + + handleShare(item)} + > + + + + Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买 + + + + + + ) })} - -
+ + {/* 即将到期 */} + {tab1value == '1' && ( + + )} + + {/* 活动预告 */} + {tab1value == '2' && ( + + )} + + ) } - -export default GoodsList +export default BestSellers diff --git a/src/pages/index/Banner.tsx b/src/pages/index/Banner.tsx index e397de6..994949b 100644 --- a/src/pages/index/Banner.tsx +++ b/src/pages/index/Banner.tsx @@ -152,8 +152,8 @@ const MyPage = () => { hotToday?.imageList?.map(item => ( { +const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => { const [tab1value, setTab1value] = useState('0') const [list, setList] = useState([]) - const [goods, setGoods] = useState(null) - // 轮播图固定高度，可根据需求调整 - const SWIPER_HEIGHT = 180; + const [goods, setGoods] = useState() + const [stickyStatus, setStickyStatus] = useState(false) const reload = () => { pageShopGoods({}).then(res => { - const processGoodsItem = (item: ShopGoods) => { - const pics: string[] = []; - // 添加主图 - if (item.image) { - pics.push(item.image); - } - // 处理附加图片 - if (item.files) { - try { - // 解析文件字符串为对象 - const files = typeof item.files === "string" - ? JSON.parse(item.files) - : item.files; - - // 收集所有图片URL - Object.values(files).forEach(file => { - if (file?.url) { - pics.push(file.url); - } - }); - } catch (error) { - console.error('解析文件失败:', error); - } - } - // 返回新对象，避免直接修改原对象 - return {...item, pics}; - }; - - // 处理商品列表 - const goods = (res?.list || []).map(processGoodsItem); - setList(goods); - }).catch(err => { - console.error('获取商品列表失败:', err); - }); + setList(res?.list || []); + }) } // 处理分享点击 const handleShare = (item: ShopGoods) => { setGoods(item); + console.log(goods) + // 显示分享选项菜单 Taro.showActionSheet({ itemList: ['分享给好友'], success: (res) => { if (res.tapIndex === 0) { + // 分享给好友 - 触发转发 Taro.showShareMenu({ withShareTicket: true, success: () => { + // 提示用户点击右上角分享 Taro.showToast({ title: '请点击右上角分享给好友', icon: 'none', @@ -80,136 +49,126 @@ const BestSellers = () => { }); } - useEffect(() => { - reload(); - }, []); + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + // 通知父组件粘性状态变化 + props.onStickyChange?.(isSticky) + console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定') + } - // 配置分享内容 - Taro.useShareAppMessage(() => { - if (goods) { - return { - title: goods.name, - path: `/shop/goodsDetail/index?id=${goods.goodsId}`, - imageUrl: goods.image || '' - }; - } - return { - title: '热销商品', - path: '/pages/index/index' - }; - }); + // 获取小程序系统信息 + const getSystemInfo = () => { + const systemInfo = Taro.getSystemInfoSync() + // 状态栏高度 + 导航栏高度 (一般为44px) + return (systemInfo.statusBarHeight || 0) + 44 + } + + useEffect(() => { + reload() + }, []) return ( - - - { - setTab1value(value) - }} + <> + + {/* Tabs粘性布局组件 */} + - - - - - - - - - {tab1value == '0' && list?.map((item) => ( - { + setTab1value(value) + }} + style={{ + backgroundColor: 'transparent', + paddingTop: stickyStatus ? '0' : '8px', + paddingBottom: stickyStatus ? '8px' : '0', + }} + activeType="smile" > - {/* 轮播图组件 */} - {item.pics && item.pics.length > 0 ? ( - - {item.pics.map((pic, picIndex) => ( - - Taro.navigateTo({ - url: `/shop/goodsDetail/index?id=${item.goodsId}` - })} - className="swiper-image" - /> - - ))} - - ) : ( - // 没有图片时显示占位图 - - 暂无图片 - - )} + + + + + + + + - - - {item.name} - - {item.comments} - 已售 {item.sales} - - - - ￥ - {item.price} - - - - handleShare(item)} - > - + + {/* 今日主推 */} + {tab1value == '0' && list?.map((item, index) => { + return ( + + Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> + + + {item.name} + + {item.comments} + 已售 {item.sales} + + + + ￥ + {item.price} + + + + handleShare(item)} + > + + + + Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买 + - Taro.navigateTo({ - url: `/shop/goodsDetail/index?id=${item.goodsId}` - })} - > - 购买 - - - - ))} + ) + })} - { - tab1value == '1' && - } - - { - tab1value == '2' && - } + {/* 即将到期 */} + {tab1value == '1' && ( + + )} + {/* 活动预告 */} + {tab1value == '2' && ( + + )} + - + ) } - export default BestSellers diff --git a/src/pages/index/GoodsList.tsx b/src/pages/index/GoodsList.tsx index f1eaf02..9292a89 100644 --- a/src/pages/index/GoodsList.tsx +++ b/src/pages/index/GoodsList.tsx @@ -1,14 +1,15 @@ import {useEffect, useState} from "react"; -import {Image} from '@nutui/nutui-react-taro' -import {Share} from '@nutui/icons-react-taro' -import Taro from '@tarojs/taro' +import {Image, Tabs, Empty, Sticky} from '@nutui/nutui-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 './GoodsList.scss' +import './GoodsList.scss'; - -const BestSellers = () => { +const GoodsList = (props: {onStickyChange?: (isSticky: boolean) => void}) => { + const [tab1value, setTab1value] = useState('0') const [list, setList] = useState([]) + const [stickyStatus, setStickyStatus] = useState(false) const reload = () => { pageShopGoods({}).then(res => { @@ -16,52 +17,127 @@ const BestSellers = () => { }) } + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + // 通知父组件粘性状态变化 + props.onStickyChange?.(isSticky) + console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定') + } + + // 获取小程序系统信息 + const getSystemInfo = () => { + const systemInfo = Taro.getSystemInfoSync() + // 状态栏高度 + 导航栏高度 (一般为44px) + return (systemInfo.statusBarHeight || 0) + 44 + } + useEffect(() => { reload() }, []) return ( <> -
-
- {list?.map((item, index) => { - return ( -
- Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> -
-
-
{item.name}
-
- {item.comments} - 已售 {item.sales} -
-
-
- ￥ - {item.price} -
-
-
- Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/> -
-
Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买 -
-
-
-
-
-
- ) - })} -
-
+ + {/* Tabs粘性布局组件 */} + + { + setTab1value(value) + }} + style={{ + backgroundColor: 'transparent', + paddingTop: stickyStatus ? '0' : '8px', + paddingBottom: stickyStatus ? '8px' : '0', + }} + activeType="smile" + > + + + + + + + + + + + {/* 今日主推 - 瀑布流布局 */} + {tab1value == '0' && ( + + {list?.map((item, index) => { + return ( + + + Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})} + /> + + {item.name} + + {item.comments} + + + + ￥ + {item.price} + + + 已售 {item.sales} + + + + + + ) + })} + + )} + + {/* 即将到期 */} + {tab1value == '1' && ( + + )} + + {/* 活动预告 */} + {tab1value == '2' && ( + + )} + + ) } -export default BestSellers +export default GoodsList diff --git a/src/pages/index/Header.scss b/src/pages/index/Header.scss index 94cb1b6..56a75fb 100644 --- a/src/pages/index/Header.scss +++ b/src/pages/index/Header.scss @@ -14,3 +14,10 @@ position: absolute; z-index: 0; } + +/* 吸顶状态下的样式 */ +.nutui-sticky--fixed { + .header-bg { + height: 100%; + } +} diff --git a/src/pages/index/Header.tsx b/src/pages/index/Header.tsx index 42d467b..ec151f8 100644 --- a/src/pages/index/Header.tsx +++ b/src/pages/index/Header.tsx @@ -1,6 +1,6 @@ import {useEffect, useState} from "react"; import Taro from '@tarojs/taro'; -import {Button, Space} from '@nutui/nutui-react-taro' +import {Button, Space, Sticky} from '@nutui/nutui-react-taro' import {TriangleDown} from '@nutui/icons-react-taro' import {Avatar, NavBar} from '@nutui/nutui-react-taro' import {getUserInfo, getWxOpenId} from "@/api/layout"; @@ -13,7 +13,7 @@ import {View,Text} from '@tarojs/components' import MySearch from "./MySearch"; import './Header.scss'; -const Header = (props: any) => { +const Header = (_: any) => { // 使用新的useShopInfo Hook const { getWebsiteName, @@ -22,6 +22,7 @@ const Header = (props: any) => { const [IsLogin, setIsLogin] = useState(true) const [statusBarHeight, setStatusBarHeight] = useState() + const [stickyStatus, setStickyStatus] = useState(false) const reload = async () => { Taro.getSystemInfo({ @@ -166,49 +167,76 @@ const Header = (props: any) => { }) } + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + console.log('Header 粘性状态:', isSticky ? '已固定' : '取消固定') + } + + // 获取小程序系统信息 + // const getSystemInfo = () => { + // const systemInfo = Taro.getSystemInfoSync() + // // 状态栏高度 + 导航栏高度 (一般为44px) + // return (systemInfo.statusBarHeight || 0) + 44 + // } + useEffect(() => { reload().then() }, []) return ( <> - - - {/*{!props.stickyStatus && }*/} - - { + - - - ) : ( - - - {getWebsiteName()} - - - )}> - {/**/} - + > + + {/* 只在非吸顶状态下显示搜索框 */} + {!stickyStatus && } + + { + }} + left={ + !IsLogin ? ( + + + + ) : ( + + + {getWebsiteName()} + + + )}> + {/**/} + + ) } diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 20ceee9..403e22a 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -18,3 +18,59 @@ page { height: 70px; } } + +/* 轮播图容器样式，确保支持两种滑动操作 */ +.banner-swiper-container { + touch-action: pan-y !important; /* 允许垂直滑动 */ + + .nut-swiper { + touch-action: pan-y !important; /* 允许垂直滑动 */ + + .nut-swiper-item { + touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */ + + image { + pointer-events: auto; /* 确保图片点击事件正常 */ + touch-action: manipulation; /* 优化触摸操作 */ + } + } + } + + /* 为Swiper容器添加特殊处理 */ + .nut-swiper--horizontal { + touch-action: pan-y !important; /* 允许垂直滑动 */ + } +} + +/* 吸顶状态下的样式 */ +.nutui-sticky--fixed { + .header-bg { + height: 100%; + } +} + +/* 为Swiper添加更精确的触摸控制 */ +.nut-swiper { + touch-action: pan-y !important; + + .nut-swiper-inner { + touch-action: pan-x pan-y !important; + } +} + +/* 自定义Swiper样式 */ +.custom-swiper { + touch-action: pan-y !important; + + .nut-swiper-item { + touch-action: pan-x pan-y !important; + } +} + +/* 确保Swiper内部元素不会阻止页面滚动 */ +.banner-swiper-container, +.custom-swiper, +.nut-swiper, +.nut-swiper-item { + -webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */ +} \ No newline at end of file diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 3aee534..3a9f01a 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,27 +1,26 @@ import Header from './Header'; -import BestSellers from './BestSellers'; import Taro from '@tarojs/taro'; import {useShareAppMessage} from "@tarojs/taro" import {useEffect, useState} from "react"; import {getShopInfo} from "@/api/layout"; -import {Sticky} from '@nutui/nutui-react-taro' import Menu from "./Menu"; import Banner from "./Banner"; import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite"; import './index.scss' - -// import GoodsList from "./GoodsList"; +import GoodsList from './GoodsList'; function Home() { // 吸顶状态 - const [stickyStatus, setStickyStatus] = useState(false) + // const [stickyStatus, setStickyStatus] = useState(false) + // Tabs粘性状态 + const [_, setTabsStickyStatus] = useState(false) useShareAppMessage(() => { // 获取当前用户ID，用于生成邀请链接 const userId = Taro.getStorageSync('UserId'); return { - title: '网宿小店 - 网宿软件', + title: '🏠 首页 🏠', path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`, success: function () { console.log('首页分享成功'); @@ -79,10 +78,15 @@ function Home() { }); }; - const onSticky = (item: IArguments) => { - if(item){ - setStickyStatus(!stickyStatus) - } + // const onSticky = (item: IArguments) => { + // if(item){ + // setStickyStatus(!stickyStatus) + // } + // } + + // 处理Tabs粘性状态变化 + const handleTabsStickyChange = (isSticky: boolean) => { + setTabsStickyStatus(isSticky) } const reload = () => { @@ -150,14 +154,13 @@ function Home() { return ( <> - onSticky(arguments)}> -
- + {/* Header区域 - 现在由Header组件内部处理吸顶逻辑 */} +
+
- - {/**/} +
) diff --git a/src/shop/goodsDetail/index.scss b/src/shop/goodsDetail/index.scss index 753f6ab..aa22055 100644 --- a/src/shop/goodsDetail/index.scss +++ b/src/shop/goodsDetail/index.scss @@ -15,3 +15,11 @@ rich-text img { .no-margin { margin: 0 !important; /* 使用 !important 来确保覆盖默认样式 */ } + +/* 文本截断样式 */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; +} \ No newline at end of file diff --git a/src/shop/goodsDetail/index.tsx b/src/shop/goodsDetail/index.tsx index 5bedda4..17715b2 100644 --- a/src/shop/goodsDetail/index.tsx +++ b/src/shop/goodsDetail/index.tsx @@ -1,8 +1,8 @@ import {useEffect, useState} from "react"; -import {Image, Divider, Badge} from "@nutui/nutui-react-taro"; -import {ArrowLeft, Headphones, Share, Cart} from "@nutui/icons-react-taro"; +import {Image, Badge, Popup, CellGroup, Cell} from "@nutui/nutui-react-taro"; +import {ArrowLeft, Headphones, Share, Cart, ArrowRight} from "@nutui/icons-react-taro"; import Taro, {useShareAppMessage} from "@tarojs/taro"; -import {RichText, View} from '@tarojs/components' +import {RichText, View, Text} from '@tarojs/components' import {ShopGoods} from "@/api/shop/shopGoods/model"; import {getShopGoods} from "@/api/shop/shopGoods"; import {listShopGoodsSpec} from "@/api/shop/shopGoodsSpec"; @@ -14,21 +14,30 @@ import navTo, {wxParse} from "@/utils/common"; import SpecSelector from "@/components/SpecSelector"; import "./index.scss"; import {useCart} from "@/hooks/useCart"; +import {useConfig} from "@/hooks/useConfig"; const GoodsDetail = () => { + const [statusBarHeight, setStatusBarHeight] = useState(44); + const [windowWidth, setWindowWidth] = useState(390) const [goods, setGoods] = useState(null); const [files, setFiles] = useState([]); const [specs, setSpecs] = useState([]); const [skus, setSkus] = useState([]); const [showSpecSelector, setShowSpecSelector] = useState(false); const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart'); + const [showBottom, setShowBottom] = useState(false) + const [bottomItem, setBottomItem] = useState({ + title: '', + content: '' + }) // const [selectedSku, setSelectedSku] = useState(null); const [loading, setLoading] = useState(false); const router = Taro.getCurrentInstance().router; const goodsId = router?.params?.id; // 使用购物车Hook - const {cartCount, addToCart} = useCart(); + const {cartCount, addToCart} = useCart() + const {config} = useConfig() // 处理加入购物车 const handleAddToCart = () => { @@ -117,7 +126,21 @@ const GoodsDetail = () => { } }; + const openBottom = (title: string, content: string) => { + setBottomItem({ + title, + content + }) + setShowBottom(true) + } + useEffect(() => { + Taro.getSystemInfo({ + success: (res) => { + setWindowWidth(res.windowWidth) + setStatusBarHeight(Number(res.statusBarHeight) + 5) + }, + }); if (goodsId) { setLoading(true); @@ -187,12 +210,12 @@ const GoodsDetail = () => { }); if (!goods || loading) { - return
加载中...
; + return 加载中...; } return ( -
-
+ { borderRadius: "100%", width: "32px", height: "32px", - top: "50px", + top: statusBarHeight + 'px', left: "10px", }} onClick={() => Taro.navigateBack()} > -
-
+ Taro.switchTab({url: `/pages/cart/cart`})}> + style={{ + borderRadius: "100%", + width: "32px", + height: "32px", + top: statusBarHeight + 'px', + right: "110px", + }} + onClick={() => Taro.switchTab({url: `/pages/cart/cart`})}> -
+ -
+ -
+ { files.length > 0 && ( - + {files.map((item) => ( - + ))} @@ -245,69 +268,116 @@ const GoodsDetail = () => { /> ) } -
-
-
+ <> -
-
+ + ￥ {goods.price} -
+ 已售 {goods.sales} -
-
-
-
+ + + + {goods.name} -
-
+ + {goods.comments} -
-
+ + -
+ -
-
-
- 商品详情 + + + + { + config?.deliveryText && ( + + + {config?.deliveryText || '14:30下单，明天配送'} + + + } onClick={() => openBottom('配送', `${config?.deliveryText}`)}/> + + {config?.guaranteeText || '支持7天无理由退货'} + + + } onClick={() => openBottom('保障', `${config?.guaranteeText}`)}/> + + ) + } + {config?.openComments == '1' && ( + + + 查看全部 + + + } onClick={() => navTo(`/shop/comments/index`)}/> + + 暂无评价 + + + )} + + -
-
+ + + + {/*底部弹窗*/} + { + setShowBottom(false) + }} + lockScroll + > + + {bottomItem.title} + {bottomItem.content} + + {/*底部购买按钮*/} -
+ -
+ -
-
-
handleAddToCart()}>加入购物车 -
-
handleBuyNow()}>立即购买 -
-
+ + + handleAddToCart()}>加入购物车 + + handleBuyNow()}>立即购买 + + -
+ {/* 规格选择器 */} {showSpecSelector && ( @@ -320,7 +390,7 @@ const GoodsDetail = () => { onClose={() => setShowSpecSelector(false)} /> )} -
+ ); };