@conecli/cone-render 0.9.1-shop2.13 → 0.9.1-shop2.14

package/dist/components/base/MobileCommonHeader/index.tsx

@@ -1 +1 @@
-import React, {useEffect, useRef} from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  const headerRef:any = useRef(null)
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const scrollEventFunc = () => {
    const stickyTop = headerRef.current?.getBoundingClientRect()?.top || 0;
    const rootScrollEleNode = document.querySelector('#J_shopHomeRoot')
    if (rootScrollEleNode && rootScrollEleNode.scrollTop > stickyTop) {
      headerRef.current.classList.add('d-mobile-header-sticky');
    } else {
      headerRef.current.classList.remove('d-mobile-header-sticky');
    }
  }
  useEffect(() => {
    if(!headerRef.current) return
    const rootScrollEleNode = document.querySelector('#J_shopHomeRoot')
    rootScrollEleNode && rootScrollEleNode.addEventListener('scroll', scrollEventFunc);
    return () => {
      rootScrollEleNode && rootScrollEleNode.removeEventListener('scroll', scrollEventFunc)
    }
  },[])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
      ref={headerRef}
    >
      <View
        id="m_common_tip"
        className={mobileCommonHeaderStyle['d-mobile-common-tip']}
      />
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},
+import React, {useEffect, useRef} from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  const headerRef:any = useRef(null)
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  const isScrolledToTop = () => {
    return window.scrollY !== undefined ? window.scrollY === 0 :
      document.documentElement.scrollTop === 0 || document.body.scrollTop === 0;
  }
  const scrollEventFunc = () => {
    if(!headerRef.current) return
    const stickyTop = headerRef.current?.getBoundingClientRect()?.top || 0;
    if(Math.trunc(stickyTop) <= 0 && !isScrolledToTop()) {
      console.log('scroll 添加class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.add('d-mobile-header-sticky');
    }else {
      console.log('scroll 移除class',Math.trunc(stickyTop), isScrolledToTop())
      headerRef.current.classList.remove('d-mobile-header-sticky');
    }
  }
  useEffect(() => {
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL,() => {
      scrollEventFunc()
    })
  },[])
  const initCommonHeader = () => {
    if (window?.MCommonHeaderBottom) {
      const mchb = new MCommonHeaderBottom()
      const headerArg = {
        moduleName: 'shop',
        hrederId: 'm_common_header',
        title,
        stype: 1,
        onClickJdkey: function () {
          console.log('==>m_common_header jdkey click.')
        },
        ...headerParams
      }
      mchb.header(headerArg)
    }
  }
  const initDownloadAppLayerConfigData = () => {
    const getEle = document.getElementById('m_common_tip')
    getEle &&
      window.$ &&
      window.$.downloadAppLayerConfigData &&
      window.$.downloadAppLayerConfigData({
        tipId: 'm_common_tip',
        M_sourceFrom: 'jshop',
        bottom: 74,
        onClickTipX: () => {
          Taro.eventCenter.trigger(
            TaroEventType.DOWN_LOAD_APP_CLOSE_CHANGE,
            true,
          )
        },
        downloadAppPlugIn: {
          M_sourceFrom: 'jshop',
          openAppBtnId: 'download_openapp',
          downAppURl: '//conecli.com/downloadApp/download.html?channel=jd-m',
          inteneUrl: 'openapp.jdmobile://virtual?',
          inteneUrlParams: {
            category: 'jump',
            des: 'jshopMain',
            shopId: `${global.info.queryInfo.shopId || ''}`,
            venderId: `${global.info.queryInfo.venderId || ''}`,
            sourceType: global.info.queryInfo?.sourceType || 'M-H5',
            sourceValue: global.info.queryInfo?.sourceValue || 'Mshop',
            ...openAppParams,
          },
        },
      })
  }
  return !isWxMiniH5View && !isJdApp ? (
    <View
      className={mobileCommonHeaderStyle['d-mobile-header-layout']}
      style={style}
      ref={headerRef}
    >
      <View
        id="m_common_tip"
        className={mobileCommonHeaderStyle['d-mobile-common-tip']}
      />
      {hasCommonHeader && (
        <View
          id="m_common_header"
          className={mobileCommonHeaderStyle['d-mobile-common-header']}
        />
      )}
    </View>
  ) : null
  title: '店铺',
  openAppParams: {},

package/dist/components/base/NetworkDataError/index.module.scss

@@ -89,3 +89,6 @@
 	min-height: 500px;
 	background: #f2f2f2;
 }
+.d-shop-network-no-position {
+    position: static;
+}

package/dist/components/base/NetworkDataError/index.tsx

@@ -1 +1 @@
-import { Button, View } from '@tarojs/components'
  NetWorkErrorList,
  NetWorkErrorTip,
  NetWorkErrorSubTip,
  NetWorkShowType,
  NetWork_Image_Type,
  const {
    className,
    message,
    subMessage,
    btnLabel,
    backgroundColorWhite,
    netWorkDataType,
    netWorkShowType,
    netWorkImageType,
    refreshCallBackFn,
    viewMaxHeight
  } = props
  const refershInitData = useCallback(() => {
    refreshCallBackFn && refreshCallBackFn(true)
  }, [])
  const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
  const useErrorSubTip = subMessage
    ? subMessage
    : NetWorkErrorSubTip[netWorkDataType]
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
  const maxHeight = latestRes.displayHeight || 546 
  return NetWorkErrorList.includes(netWorkDataType as NETWORK_DATA_TYPE) ? (
    <View
      style={{ maxHeight: viewMaxHeight !== '' ? viewMaxHeight : isMemberPage ? '100vh' : maxHeight }}
      className={classNames(
        netWorkErrorStyle['d-shop-network'],
        {
          [netWorkErrorStyle['d-shop-network-white']]: backgroundColorWhite,
        },
        {
          [netWorkErrorStyle['d-shop-network-part']]:
          netWorkShowType === NetWorkShowType.PART,
        },
        {
          [netWorkErrorStyle['d-network-jd-shop-view']]: isH5AndJdShopView,
        },
        'flexible-center-box',
        className,
      )}
    >
      <View className={classNames(netWorkErrorStyle['d-error-content'],'d-error-content')}>
        <View
          className={classNames(
            netWorkErrorStyle['d-error-type'],
            netWorkErrorStyle[`d-${netWorkDataType}`],
            netWorkErrorStyle[`d-${netWorkImageType}`],
            'd-error-type'
          )}
        />
        <View className={classNames(netWorkErrorStyle['d-error-tip'],'d-error-tip')}>
          {useErrorTip}
        </View>
        {useErrorSubTip ? <View className={classNames(netWorkErrorStyle['d-error-sub-tip'],'d-error-sub-tip')}>{useErrorSubTip}</View> : null}
        <View className={'flexible-horizontal-center-box'}>
          {refreshCallBackFn && (
            <Button
              onClick={refershInitData}
              className={classNames(
                netWorkErrorStyle['d-opt-btn'],
                'd-button-no-border',
                'd-opt-btn'
              )}
              plain
              size="mini"
            >
              {btnLabel}
            </Button>
          )}
        </View>
      </View>
    </View>
  ) : null
  className: '',
  message: '',
  subMessage: '',
  btnLabel: '重新加载',
  backgroundColorWhite: false, 
  netWorkDataType: NETWORK_DATA_TYPE.NORMAL,
  netWorkImageType: NetWork_Image_Type.No_Data_Default_Tip,
  netWorkShowType: NetWorkShowType.FULL,
  refreshCallBackFn: null,
  viewMaxHeight: ''
+import { Button, View } from '@tarojs/components'
  NetWorkErrorList,
  NetWorkErrorTip,
  NetWorkErrorSubTip,
  NetWorkShowType,
  NetWork_Image_Type,
  const {
    className,
    message,
    subMessage,
    btnLabel,
    backgroundColorWhite,
    netWorkDataType,
    netWorkShowType,
    netWorkImageType,
    refreshCallBackFn,
    viewMaxHeight,
    noPosition = false, 
  } = props
  const refershInitData = useCallback(() => {
    refreshCallBackFn && refreshCallBackFn(true)
  }, [])
  const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
  const useErrorSubTip = subMessage
    ? subMessage
    : NetWorkErrorSubTip[netWorkDataType]
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
  const maxHeight = latestRes.displayHeight || 546 
  return NetWorkErrorList.includes(netWorkDataType as NETWORK_DATA_TYPE) ? (
    <View
      style={{ maxHeight: viewMaxHeight !== '' ? viewMaxHeight : isMemberPage ? '100vh' : maxHeight }}
      className={classNames(
        netWorkErrorStyle['d-shop-network'],
        {
          [netWorkErrorStyle['d-shop-network-white']]: backgroundColorWhite,
        },
        {
          [netWorkErrorStyle['d-shop-network-part']]:
          netWorkShowType === NetWorkShowType.PART,
        },
        {
          [netWorkErrorStyle['d-network-jd-shop-view']]: isH5AndJdShopView,
        },
        {
            [netWorkErrorStyle['d-shop-network-no-position']]: noPosition
        },
        'flexible-center-box',
        className,
      )}
    >
      <View className={classNames(netWorkErrorStyle['d-error-content'],'d-error-content')}>
        <View
          className={classNames(
            netWorkErrorStyle['d-error-type'],
            netWorkErrorStyle[`d-${netWorkDataType}`],
            netWorkErrorStyle[`d-${netWorkImageType}`],
            'd-error-type'
          )}
        />
        <View className={classNames(netWorkErrorStyle['d-error-tip'],'d-error-tip')}>
          {useErrorTip}
        </View>
        {useErrorSubTip ? <View className={classNames(netWorkErrorStyle['d-error-sub-tip'],'d-error-sub-tip')}>{useErrorSubTip}</View> : null}
        <View className={'flexible-horizontal-center-box'}>
          {refreshCallBackFn && (
            <Button
              onClick={refershInitData}
              className={classNames(
                netWorkErrorStyle['d-opt-btn'],
                'd-button-no-border',
                'd-opt-btn'
              )}
              plain
              size="mini"
            >
              {btnLabel}
            </Button>
          )}
        </View>
      </View>
    </View>
  ) : null
  className: '',
  message: '',
  subMessage: '',
  btnLabel: '重新加载',
  backgroundColorWhite: false, 
  netWorkDataType: NETWORK_DATA_TYPE.NORMAL,
  netWorkImageType: NetWork_Image_Type.No_Data_Default_Tip,
  netWorkShowType: NetWorkShowType.FULL,
  refreshCallBackFn: null,
  viewMaxHeight: ''

package/dist/components/remoteFloorItem.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  getBundleUrl,
  getBundleFileName,
  formatPackResult,
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  const [forceRenderTime,setForceRenderTime] = useState(1)
  useEffect(() => {
    isJdAndAndroidDevice && Taro.eventCenter.on(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT, (_result) => {
      setForceRenderTime(Date.now())
    })
    return () => {
      isJdAndAndroidDevice && Taro.eventCenter.off(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT)
    }
  },[])
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200
    return getHeight > 0 ? getHeight : 200
  }
  console.log(
    '>>>>>>>>>> floorModuleType === FloorModuleType.ISVDESIGNERH5MODULE >>>>>>>>>>',
  )
  const renderResult = (() => {
    try {
      console.log('>>>>>>>>>> 开始渲染1个isv模块 >>>>>>>>>>')
      console.log(
        '==========当前业务类型renderSourceType、楼层floorId: ',
        renderSourceType,
        floorData.uid,
      )
      const modularPackResult = floorData?.floorExtInfo?.modularPackResult
      const modularPackResultObj = formatPackResult(modularPackResult)
      const bundleUrl = getBundleUrl(modularPackResultObj)
      const bundleFileName = getBundleFileName(modularPackResultObj)
      const opt = {
        msg: `店铺h5楼层隐藏不显示。原因：模块数据不完备，楼层过滤。`,
        floorIdx: floorData?.floorIdx,
        uid: floorData?.uid,
        shopId: floorData?.floorExtInfo?.shopId,
        moduleId: floorData?.moduleId,
        moduleDesignerType: floorData?.floorExtInfo?.moduleDesignerType,
        floorLoadWay: floorData?.floorExtInfo?.floorLoadWay, 
        floorKind: floorData?.floorExtInfo?.floorKind, 
        middleTemplateId: floorData?.middleTemplateId,
        modularPackResult: modularPackResult,
      }
      if (bundleUrl && bundleFileName) {
        let ISVModule =
          taroJdBaseInfo?.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] || null
        if (!ISVModule) {
          ISVModule = lazy(() => import(bundleFileName + '@@@@@@' + bundleUrl))
          console.log(
            '1|加载isv模块==========走lazy import生成新的isv模块react组件',
            bundleFileName,
          )
          taroJdBaseInfo.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] = ISVModule
          console.log(
            '2|渲染isv模块的react组件==========,window.taroJshopH5WebpackJsonp上的组件是否已就绪: ',
            bundleFileName,
            window['taroJshopH5WebpackJsonp'].find(
              (item) => item[0][0] == bundleFileName,
            ),
          )
        } else {
          console.log(
            '1|加载isv模块==========不走lazy import生成新的isv模块react组件，从已加载中获取，taroJdBaseInfo: ',
            taroJdBaseInfo,
          )
          console.log(
            '2|渲染isv模块的react组件==========,taroJdBaseInfo.renderedIsvComponents上的组件是否已就绪: ',
            taroJdBaseInfo.renderedIsvComponents[
              `${floorData.uid}_${bundleFileName}`
            ],
          )
        }
        const _floorHeight = getFloorSetHeight(floorData)
          return (
            <ErrorBoundary {...props}>
              <Suspense
                fallback={
                  <View
                    style={{
                      position: 'relative',
                      background: `#ffffff url('${JD_PLACEHOLDER_IMG}')	center center no-repeat`,
                      height: `${_floorHeight}px`,
                    }}
                  ></View>
                }
              >
                <ISVFloor {...props} dataDefines={dataDefines} forceRenderTime={forceRenderTime} isRealTimeRender={realTimerRenderTypeList.includes(taroJdBaseInfo.info.pageInfo.dataType)}>
                  <ISVModule {...props} dataDefines={dataDefines}></ISVModule>
                </ISVFloor>
              </Suspense>
            </ErrorBoundary>
          )
        } else {
          console.log(
            '3|isv模块渲染异常，modularPackResult中缺少bundleUrl或bundleFileName==========modularPackResult: ',
            modularPackResultObj,
          )
          sgmCustomReport({
            code: getSgmCustomCode(SgmCustomCode.REMOTEMODULE_DATA),
            msg: opt,
          })
          return null
        }
    } catch (err) {
      console.log('3|isv模块渲染异常，floorItem逻辑错误==========err: ', err)
      return null
    }
  })()
  if (renderResult === null) {
    updateContainerFloorListDataFn &&
      updateContainerFloorListDataFn({
        type: 'filter',
        containerId: floorData?.uid,
      })
    console.log('renderResult === null: 命中了！')
    taroEventSendPageScrollInfo()
  } else {
    console.log('renderResult !== null: 没命中', renderResult)
  }
  return renderResult
+import Taro from '@tarojs/taro'
  getBundleUrl,
  getBundleFileName,
  formatPackResult,
  getTaroVersion
  const { floorData, renderSourceType, updateContainerFloorListDataFn } = props
  const dataDefines = getFloorDataToDataDefines(floorData)
  const [forceRenderTime,setForceRenderTime] = useState(1)
  useEffect(() => {
    isJdAndAndroidDevice && Taro.eventCenter.on(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT, (_result) => {
      setForceRenderTime(Date.now())
    })
    return () => {
      isJdAndAndroidDevice && Taro.eventCenter.off(TaroEventType.FORCE_UPDATE_PAGE_LAYOUT)
    }
  },[])
  
  const getFloorSetHeight = (item) => {
    const getHeight = item?.floorExtInfo?.floorHeight
      ? Number(item?.floorExtInfo?.floorHeight)
      : 200
    return getHeight > 0 ? getHeight : 200
  }
  console.log(
    '>>>>>>>>>> floorModuleType === FloorModuleType.ISVDESIGNERH5MODULE >>>>>>>>>>',
  )
  const renderResult = (() => {
    try {
      console.log('>>>>>>>>>> 开始渲染1个isv模块 >>>>>>>>>>')
      console.log(
        '==========当前业务类型renderSourceType、楼层floorId: ',
        renderSourceType,
        floorData.uid,
      )
      const modularPackResult = floorData?.floorExtInfo?.modularPackResult
      const modularPackResultObj = formatPackResult(modularPackResult)
      const bundleUrl = getBundleUrl(modularPackResultObj)
      const bundleFileName = getBundleFileName(modularPackResultObj)
      const taroVersion = getTaroVersion(modularPackResultObj)
      const opt = {
        msg: `店铺h5楼层隐藏不显示。原因：模块数据不完备，楼层过滤。`,
        floorIdx: floorData?.floorIdx,
        uid: floorData?.uid,
        shopId: floorData?.floorExtInfo?.shopId,
        moduleId: floorData?.moduleId,
        moduleDesignerType: floorData?.floorExtInfo?.moduleDesignerType,
        floorLoadWay: floorData?.floorExtInfo?.floorLoadWay, 
        floorKind: floorData?.floorExtInfo?.floorKind,
        middleTemplateId: floorData?.middleTemplateId,
        modularPackResult: {
          bundleUrl,
          taroVersion
        }
      }
      if (bundleUrl && bundleFileName) {
        let ISVModule =
          taroJdBaseInfo?.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] || null
        if (!ISVModule) {
          ISVModule = lazy(() => import(bundleFileName + '@@@@@@' + bundleUrl))
          console.log(
            '1|加载isv模块==========走lazy import生成新的isv模块react组件',
            bundleFileName,
          )
          taroJdBaseInfo.renderedIsvComponents[
            `${floorData.uid}_${bundleFileName}`
          ] = ISVModule
          console.log(
            '2|渲染isv模块的react组件==========,window.taroJshopH5WebpackJsonp上的组件是否已就绪: ',
            bundleFileName,
            window['taroJshopH5WebpackJsonp'].find(
              (item) => item[0][0] == bundleFileName,
            ),
          )
        } else {
          console.log(
            '1|加载isv模块==========不走lazy import生成新的isv模块react组件，从已加载中获取，taroJdBaseInfo: ',
            taroJdBaseInfo,
          )
          console.log(
            '2|渲染isv模块的react组件==========,taroJdBaseInfo.renderedIsvComponents上的组件是否已就绪: ',
            taroJdBaseInfo.renderedIsvComponents[
              `${floorData.uid}_${bundleFileName}`
            ],
          )
        }
        const _floorHeight = getFloorSetHeight(floorData)
          return (
            <ErrorBoundary {...props}>
              <Suspense
                fallback={
                  <View
                    style={{
                      position: 'relative',
                      background: `#ffffff url('${JD_PLACEHOLDER_IMG}')	center center no-repeat`,
                      height: `${_floorHeight}px`,
                    }}
                  ></View>
                }
              >
                <ISVFloor {...props} dataDefines={dataDefines} forceRenderTime={forceRenderTime} isRealTimeRender={realTimerRenderTypeList.includes(taroJdBaseInfo.info.pageInfo.dataType)}>
                  <ISVModule {...props} dataDefines={dataDefines}></ISVModule>
                </ISVFloor>
              </Suspense>
            </ErrorBoundary>
          )
        } else {
          console.log(
            '3|isv模块渲染异常，modularPackResult中缺少bundleUrl或bundleFileName==========modularPackResult: ',
            modularPackResultObj,
          )
          sgmCustomReport({
            code: getSgmCustomCode(handleSgmCodeTaroVersion(floorData?.floorExtInfo?.floorKind === FLOOR_KIND.PDC_SYSTEM_MODULE ? SgmCustomCode.SYSTEMPDCMODULE_DATA : SgmCustomCode.REMOTEMODULE_DATA)),
            msg: opt,
          })
          return null
        }
    } catch (err) {
      console.log('3|isv模块渲染异常，floorItem逻辑错误==========err: ', err)
      return null
    }
  })()
  if (renderResult === null) {
    updateContainerFloorListDataFn &&
      updateContainerFloorListDataFn({
        type: 'filter',
        containerId: floorData?.uid,
      })
    console.log('renderResult === null: 命中了！')
    taroEventSendPageScrollInfo()
  } else {
    console.log('renderResult !== null: 没命中', renderResult)
  }
  return renderResult