Commit 3ecd5790 authored by GuanHua's avatar GuanHua

fix: 商品详情立即订购置顶按钮显示隐藏优化

parent 34584869
......@@ -19,6 +19,10 @@
line-height: 32px;
right: 0;
bottom: 0;
&.hide {
display: none;
}
}
:global {
......
......@@ -22,13 +22,26 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
const [productIds, setProductIds] = useState<number[]>([])
const [tradeRecordCount, setTradeRecordCount] = useState<number>(0)
const [commentCount, setCommentCount] = useState<number>(0)
const [backTopVisible, setBackTopVisible] = useState<boolean>(false)
const handleAnchorChange = (currentActiveLink: string) => {
if (currentActiveLink) {
setBackTopVisible(true)
setCurrentAnchor(currentActiveLink)
}
}
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop === 0) {
setBackTopVisible(false)
}
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
}, [])
useEffect(() => {
if (commodityDetail) {
if (commodityDetail.unitPricePicList) {
......@@ -47,7 +60,13 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
<Link className={cx(currentAnchor === "#introduction" ? 'active' : '')} href="#introduction" title="产品简介" />
<Link href="#trade_record" title={commodityDetail?.priceType === COMMODITY_TYPE.integral ? `兑换记录${tradeRecordCount ? `(${tradeRecordCount})` : `(0)`}` : `交易记录${tradeRecordCount ? `(${tradeRecordCount})` : `(0)`}`} />
<Link href="#comment" title={`交易评价(${commentCount > 999 ? '999+' : commentCount})`} />
<BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop>
<BackTop
className={cx(styles.buy_now_btn, !backTopVisible ? styles.hide : null)}
visibilityHeight={800}
onClick={() => setBackTopVisible(false)}
>
{commodityDetail?.priceType === COMMODITY_TYPE.integral ? '立即兑换' : '立即订购'}
</BackTop>
</Anchor>
<Introduction commodityDetail={commodityDetail} />
<TradeRecord productIds={productIds} setCount={(count) => setTradeRecordCount(count)} />
......
......@@ -4,6 +4,7 @@ import { inject, observer } from 'mobx-react'
import { Link } from 'umi'
import cx from 'classnames'
import { LAYOUT_TYPE } from '@/constants'
import ImageBox from '@/components/ImageBox'
import { PublicApi } from '@/services/api'
import { GlobalConfig } from '@/global/config'
import styles from './index.less'
......@@ -140,9 +141,11 @@ const Category: React.FC<CategoryPropsType> = (props) => {
<div className={styles.category_type_right_wrap}>
<div className={styles.category_advert}>
{
(item.brandBOList && item.brandBOList.length > 0) && item.brandBOList.map((brandItem, brandIndex) => brandIndex < 4 && (
(item.brandList && item.brandList.length > 0) && item.brandList.map((brandItem, brandIndex) => brandIndex < 4 && (
<div key={`category_advert_item_${brandIndex}`} className={styles.category_advert_item}>
<Link to={getBrandLink(brandItem)}> <img src={brandItem.brandLogo} /></Link>
<a href={getBrandLink(brandItem)}>
<ImageBox width={160} height={80} imgUrl={brandItem.brandLogo} />
</a>
</div>
))
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment