From 520c4d9025ba528f99488107dccc30a91653df31 Mon Sep 17 00:00:00 2001 From: zhangjing1 Date: Fri, 13 Mar 2026 12:40:01 +0800 Subject: [PATCH] bug(ECX-8098): --- src/components/sp-page/header.js | 26 ++++++++++--------- src/components/sp-page/index.js | 13 ++++++++-- src/components/sp-page/index.scss | 3 +++ .../pages/plusprice/detail-plusprice-list.js | 4 +-- src/pages/home/wgts/classify.jsx | 26 +++++++++---------- src/pages/home/wgts/helper.js | 14 +++++----- src/pages/index.js | 2 ++ src/pages/item/espier-detail.js | 8 +++--- src/subpages/game-activity/index.jsx | 16 ++++++------ src/subpages/guide/item/espier-detail.js | 8 +++--- src/subpages/member/member-level.js | 8 +++--- 11 files changed, 72 insertions(+), 56 deletions(-) diff --git a/src/components/sp-page/header.js b/src/components/sp-page/header.js index 1d27f4586..94a280b16 100644 --- a/src/components/sp-page/header.js +++ b/src/components/sp-page/header.js @@ -6,7 +6,7 @@ import React, { useCallback, memo } from 'react' import Taro, { getCurrentInstance } from '@tarojs/taro' import { View, Text, Input, Button } from '@tarojs/components' import { SpImage } from '@/components' -import { styleNames, classNames, VERSION_STANDARD } from '@/utils' +import { styleNames, classNames, VERSION_STANDARD, isWeb } from '@/utils' import { VERSION_IN_PURCHASE, isGoodsShelves, linkPage } from '@/utils' import { useSelector } from 'react-redux' @@ -39,10 +39,10 @@ const CustomNavigationHeader = memo((props) => { const headerStyle = useCallback(() => { const style = { height: `${gNavbarH}px`, - backgroundSize: '100% 100%', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - paddingTop: `${gStatusBarHeight}px` + 'background-size': '100% 100%', + 'background-repeat': 'no-repeat', + 'background-position': 'center', + 'padding-top': `${gStatusBarHeight}px` } // 吸顶挂件配置的 statusBarBgColor 优先用于页面顶部 header（状态栏）背景 const headerBg = statusBarBgColor ?? value?.navigateBackgroundColor @@ -51,9 +51,9 @@ const CustomNavigationHeader = memo((props) => { style.backgroundColor = headerBg } if (value?.navigateBackgroundImage) { - style.backgroundImage = `url(${value?.navigateBackgroundImage})` - style.backgroundSize = 'cover' - style.backgroundPosition = 'center' + style['background-image'] = `url(${value?.navigateBackgroundImage})` + style['background-size'] = 'cover' + style['background-position'] = 'center' } style.transition = 'all 0.15s ease-in' return style @@ -82,8 +82,8 @@ const CustomNavigationHeader = memo((props) => { const searchButtonColor = value?.searchButtonColor if (!searchButtonColor) return {} return { - backgroundColor: searchButtonColor.bgColor, - color: searchButtonColor.textColor + 'background-color': searchButtonColor.bgColor, + 'color': searchButtonColor.textColor } }, [value?.searchButtonColor]) @@ -156,7 +156,7 @@ const CustomNavigationHeader = memo((props) => { ) - }, [handleNearbyClick, nearbyText]) + }, [handleNearbyClick, nearbyText, shopInfo?.name, value?.titleColor]) const renderSearch = useCallback(() => { return ( @@ -208,7 +208,9 @@ const CustomNavigationHeader = memo((props) => { className={classNames('header-container', { 'has-nearby': hasNearby })} style={styleNames({ width: `calc(100% - ${navigationRSpace}px)`,...(showHeaderContent ? containerStyle() : {})})} > - {showNavitionLeft && + {showNavitionLeft && {/* 左侧：返回、首页、功能区三者只显示一个 */} {showHeaderContent && showFunctionArea ? ( <> diff --git a/src/components/sp-page/index.js b/src/components/sp-page/index.js index b2c383c0a..1e0c490d7 100644 --- a/src/components/sp-page/index.js +++ b/src/components/sp-page/index.js @@ -36,6 +36,7 @@ import { styleNames, isWeixin, isAlipay, + isWeb, isIphoneX, VERSION_SHUYUN } from '@/utils' @@ -138,7 +139,11 @@ const SpPage = memo( let _navigationRSpace = 0 // 导航栏右间距 const { screenHeight, windowWidth, windowHeight } = Taro.getWindowInfo() const [absolutePath] = router?.path.split('?') - const custom_navigation = isWeixin ? navigationStyle === 'custom' : false + // 小程序/支付宝：按页面 config 是否 custom；H5：有 pageConfig 或 immersive 时也使用自定义顶栏以支持相同顶部样式 + const custom_navigation = + isWeixin || isAlipay + ? navigationStyle === 'custom' + : isWeb && !!(props.pageConfig || props.immersive) const _btnReturn = pages.length > 1 && !TAB_PAGES.includes(absolutePath) const _btnHome = pages.length == 1 && !TAB_PAGES.includes(absolutePath) if (isWeixin || isAlipay) { @@ -150,6 +155,10 @@ const SpPage = memo( _menuWidth = menuButton.width _navigationLSpace = windowWidth - menuButton.right _navigationRSpace = menuButton.width + (windowWidth - menuButton.right) + } else if (isWeb && custom_navigation) { + // H5 下使用自定义顶栏时给默认高度，使 pageConfig/immersive 样式生效 + _gNavbarH = props.navigateHeight || DEFAULT_NAVIGATE_HEIGHT + _gStatusBarHeight = 0 } setState((draft) => { draft.bodyHeight = windowHeight @@ -181,7 +190,7 @@ const SpPage = memo( menuWidth: _menuWidth, footerHeight: _height }) - }, [props.immersive, isPageVisible]) + }, [props.immersive, props.pageConfig, isPageVisible]) useEffect(() => { const { diff --git a/src/components/sp-page/index.scss b/src/components/sp-page/index.scss index cf0cb75c9..68256a289 100644 --- a/src/components/sp-page/index.scss +++ b/src/components/sp-page/index.scss @@ -12,6 +12,9 @@ box-sizing: border-box; padding-left: 20px; padding-right: 20px; + &.is-web { + width: 240px !important; + } } .title-container { display: flex; diff --git a/src/marketing/pages/plusprice/detail-plusprice-list.js b/src/marketing/pages/plusprice/detail-plusprice-list.js index 58b16e285..8828d33ac 100644 --- a/src/marketing/pages/plusprice/detail-plusprice-list.js +++ b/src/marketing/pages/plusprice/detail-plusprice-list.js @@ -159,8 +159,8 @@ export default class DetailPluspriceList extends Component { diff --git a/src/pages/home/wgts/classify.jsx b/src/pages/home/wgts/classify.jsx index 2a22871cf..3d55a2bf1 100644 --- a/src/pages/home/wgts/classify.jsx +++ b/src/pages/home/wgts/classify.jsx @@ -39,25 +39,25 @@ function WgtClassify(props) { const outStyle = useMemo(() => { const { outerMargin, outerBackground } = base return { - paddingTop: Taro.pxTransform(outerMargin.paddedt), - paddingBottom: Taro.pxTransform(outerMargin.paddedb), - backgroundColor: outerBackground.color, - backgroundImage: outerBackground.image ? `url(${outerBackground.image})` : 'none', - backgroundSize: 'cover', - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat' + 'padding-top': Taro.pxTransform(outerMargin.paddedt), + 'padding-bottom': Taro.pxTransform(outerMargin.paddedb), + 'background-color': outerBackground.color, + 'background-image': outerBackground.image ? `url(${outerBackground.image})` : 'none', + 'background-size': 'cover', + 'background-position': 'center', + 'background-repeat': 'no-repeat' } }, [base]) const innerStyle = useMemo(() => { const { innerPadding, innerBackground } = base return { - paddingLeft: Taro.pxTransform(innerPadding.paddedl), - paddingRight: Taro.pxTransform(innerPadding.paddedr), - paddingTop: Taro.pxTransform(innerPadding.paddedt), - paddingBottom: Taro.pxTransform(innerPadding.paddedb), - backgroundColor: innerBackground?.type == 'solid' ? innerBackground.color : 'none', - backgroundImage: + 'padding-left': Taro.pxTransform(innerPadding.paddedl), + 'padding-right': Taro.pxTransform(innerPadding.paddedr), + 'padding-top': Taro.pxTransform(innerPadding.paddedt), + 'padding-bottom': Taro.pxTransform(innerPadding.paddedb), + 'background-color': innerBackground?.type == 'solid' ? innerBackground.color : 'none', + 'background-image': innerBackground?.type == 'gradient' ? `linear-gradient(${innerBackground.startColor}, ${innerBackground.endColor})` : 'none' diff --git a/src/pages/home/wgts/helper.js b/src/pages/home/wgts/helper.js index 322c4f77f..1178295c6 100644 --- a/src/pages/home/wgts/helper.js +++ b/src/pages/home/wgts/helper.js @@ -140,17 +140,17 @@ export function getGlobalBaseStyle(baseStyle) { // 处理背景 const bgType = baseStyle.bgType if (bgType === 'color' && baseStyle.bgColor) { - style.backgroundColor = baseStyle.bgColor + style['background-color'] = baseStyle.bgColor } else if (bgType === 'pic' && baseStyle.bgPic) { - style.backgroundImage = `url(${baseStyle.bgPic})` - style.backgroundSize = 'cover' - style.backgroundPosition = 'center' - style.backgroundRepeat = 'no-repeat' + style['background-image'] = `url(${baseStyle.bgPic})` + style['background-size'] = 'cover' + style['background-position'] = 'center' + style['background-repeat'] = 'no-repeat' } else if (bgType === 'gradient' && baseStyle.startColor) { // 如果 endColor 为空，使用 startColor 作为结束颜色（单色渐变） const endColor = baseStyle.endColor || baseStyle.startColor - style.backgroundImage = `linear-gradient(${baseStyle.startColor}, ${endColor})` - style.backgroundSize = 'cover' + style['background-image'] = `linear-gradient(${baseStyle.startColor}, ${endColor})` + style['background-size'] = 'cover' } return style diff --git a/src/pages/index.js b/src/pages/index.js index 772fc766a..f40b4062f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -131,6 +131,8 @@ function Home() { dispatch(updatePurchaseShareInfo()) dispatch(updateInviteCode()) dispatch(updateEnterpriseId()) + // 从店铺页返回时刷新地址/店铺信息，使顶部 nearby-function-text 立即更新 + updateAddress() // 通知挂件（如浏览记录）刷新本地数据 Taro.eventCenter.trigger('homePageShow') }) diff --git a/src/pages/item/espier-detail.js b/src/pages/item/espier-detail.js index e15547912..bd28201a6 100644 --- a/src/pages/item/espier-detail.js +++ b/src/pages/item/espier-detail.js @@ -464,10 +464,10 @@ function EspierDetail(props) { return { height: '100%', width: '100%', - backgroundSize: 'cover', - backgroundImage: `url(${item})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + 'background-size': 'cover', + 'background-image': `url(${item})`, + 'background-repeat': 'no-repeat', + 'background-position': 'center' } } diff --git a/src/subpages/game-activity/index.jsx b/src/subpages/game-activity/index.jsx index ccf0bd174..82646030f 100644 --- a/src/subpages/game-activity/index.jsx +++ b/src/subpages/game-activity/index.jsx @@ -164,10 +164,10 @@ const GameActivity = () => { const getPageStyle = () => { if (activityConfig?.backgroundImage) { return { - backgroundImage: `url(${activityConfig.backgroundImage})`, - backgroundSize: 'cover', - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat' + 'background-image': `url(${activityConfig.backgroundImage})`, + 'background-size': 'cover', + 'background-position': 'center', + 'background-repeat': 'no-repeat' } } return {} @@ -207,11 +207,11 @@ const GameActivity = () => { diff --git a/src/subpages/guide/item/espier-detail.js b/src/subpages/guide/item/espier-detail.js index 69ac46565..f57bacb53 100644 --- a/src/subpages/guide/item/espier-detail.js +++ b/src/subpages/guide/item/espier-detail.js @@ -351,10 +351,10 @@ function EspierDetail(props) { return { height: '100%', width: '100%', - backgroundSize: 'cover', - backgroundImage: `url(${item})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + 'background-size': 'cover', + 'background-image': `url(${item})`, + 'background-repeat': 'no-repeat', + 'background-position': 'center' } } diff --git a/src/subpages/member/member-level.js b/src/subpages/member/member-level.js index 9324c9956..c3afd7cb5 100644 --- a/src/subpages/member/member-level.js +++ b/src/subpages/member/member-level.js @@ -64,10 +64,10 @@ function MemberLevel(props) { return {} } return { - backgroundImage: `url(${item.grade_background})`, - backgroundSize: 'cover', - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat' + 'background-image': `url(${item.grade_background})`, + 'background-size': 'cover', + 'background-position': 'center', + 'background-repeat': 'no-repeat' } }