bug(ECX-8098):

2026-08-11 22:15:32 +08:00 · 2026-03-13 12:40:01 +08:00
parent 59921c0e4a
commit 520c4d9025
11 changed files with 72 additions and 56 deletions
--- 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) => {
        <Text className='nearby-function-icon iconfont icon-arrowDown' />
      </View>
    )
-  }, [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 && <View className='header-container-left' style={styleNames({ width: `${navigationRSpace}px` })}>
+          {showNavitionLeft && <View className={
+            classNames('header-container-left', { 'is-web': isWeb })
+          } style={styleNames({ width:`${navigationRSpace}px` })}>
            {/* 左侧：返回、首页、功能区三者只显示一个 */}
            {showHeaderContent && showFunctionArea ? (
              <>
--- 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 {
--- 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;
--- 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 {
      <View
        className='page-plusprice'
        style={{
-          backgroundImage: `url(${isSetBackground})`,
-          backgroundSize: isSetBackground ? 'cover' : 'contain'
+          'background-image': `url(${isSetBackground})`,
+          'background-size': isSetBackground ? 'cover' : 'contain'
        }}
      >
        <SpNavBar title='微商城' />
--- 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'
--- 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
--- 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')
  })
--- 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'
    }
  }

--- 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 = () => {
                <View className='sp-game-activity__footer'>
                  <View
                    style={styleNames({
-                      backgroundColor: activityConfig?.recordFormConfig?.rule?.[0] || '#fff',
+                      'background-color': activityConfig?.recordFormConfig?.rule?.[0] || '#fff',
                      color: activityConfig?.recordFormConfig?.rule?.[1] || '#000',
-                      backgroundImage: `url(${activityConfig?.recordFormConfig?.img})`,
-                      backgroundSize: '100% auto',
-                      backgroundRepeat: 'no-repeat'
+                      'background-image': `url(${activityConfig?.recordFormConfig?.img})`,
+                      'background-size': '100% auto',
+                      'background-repeat': 'no-repeat'
                    })}
                    className='sp-game-activity__footer-btn'
                    onClick={() =>
--- 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'
    }
  }

--- 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'
    }
  }