@conecli/cone-render 0.9.1-shop2.2 → 0.9.1-shop2.4

package/dist/components/base/LazyLoadImage/index.h5.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
    root: null,
    rootMargin: `0px 0px ${window.innerHeight * 0.5}px 0px`, 
  })
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined')
      return
    if (componentLazyRef.current) {
      const eleClientRect = componentLazyRef.current.getBoundingClientRect()
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
            <View
                ref={ componentLazyRef }
                className={classNames(
                    imageStyle['d-app-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges':
                            !taroJdBaseInfo.info.pageInfo.isVipShop &&
                            imagRenderingSet,
                    },
                    'J_html5ImageBg',
                    className,
                )}
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
            >
                {(componentShowState || lazyLoad === false) && <img
                    src={getQualityImage(
                        imgSrc,
                        taroJdBaseInfo.info.pageInfo.isVipShop
                            ? NetWorkTypeQuality['perfect']
                            : NetWorkTypeQuality[getNetWorkType],
                    )}
                    onLoad={imageLoad.bind(this, imgSrc)}
                    onError={imageError}
                />}
            </View>
        ) : (
            <Image
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
                }}
                className={classNames(
                    imageStyle['d-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges': imagRenderingSet,
                    },
                    className,
                )}
                src={getQualityImage(
                    imgSrc,
                    NetWorkTypeQuality[getNetWorkType],
                )}
                lazyLoad={isChartH5 ? false : lazyLoad}
                onError={imageError}
                onLoad={imageLoad.bind(this, imgSrc)}
                {...otherOption}
            />
        )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null, 
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined')
      return
    if (componentLazyRef.current) {
      const eleClientRect = componentLazyRef.current.getBoundingClientRect()
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
            <View
                ref={ componentLazyRef }
                className={classNames(
                    imageStyle['d-app-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges':
                            !taroJdBaseInfo.info.pageInfo.isVipShop &&
                            imagRenderingSet,
                    },
                    'J_html5ImageBg',
                    className,
                )}
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
            >
                {(componentShowState || lazyLoad === false) && <img
                    src={getQualityImage(
                        imgSrc,
                        taroJdBaseInfo.info.pageInfo.isVipShop
                            ? NetWorkTypeQuality['perfect']
                            : NetWorkTypeQuality[getNetWorkType],
                    )}
                    onLoad={imageLoad.bind(this, imgSrc)}
                    onError={imageError}
                />}
            </View>
        ) : (
            <Image
                style={{
                    ...style,
                    ...changeStyleIncludeWidthAndHeightAndBgColor(),
                }}
                className={classNames(
                    imageStyle['d-lazy-image'],
                    {
                        [imageStyle['d-lazy-sku-image']]: isSkuImage,
                    },
                    {
                        [imageStyle['d-hide-image-error']]: imageErrState,
                    },
                    {
                        [imageStyle['d-load-completed']]: loadSuccess,
                    },
                    {
                        'd-imag-rendering-crisp-edges': imagRenderingSet,
                    },
                    className,
                )}
                src={getQualityImage(
                    imgSrc,
                    NetWorkTypeQuality[getNetWorkType],
                )}
                lazyLoad={isChartH5 ? false : lazyLoad}
                onError={imageError}
                onLoad={imageLoad.bind(this, imgSrc)}
                {...otherOption}
            />
        )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null, 

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

@@ -0,0 +1,9 @@
+
+.d-mobile-header-layout {
+	position: relative;
+	z-index: 12;
+	.d-mobile-common-tip,
+	.d-mobile-common-header {
+		position: relative;
+	}
+}

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

@@ -0,0 +1 @@
+import React, { useEffect, useContext, useState } from 'react'
  const { title, openAppParams, style, hasCommonHeader = true, hasDownloadTips = true, headerParams } = props
  useEffect(() => {
    hasCommonHeader && initCommonHeader()
    hasDownloadTips && initDownloadAppLayerConfigData()
  }, [])
  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}
    >
      <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/const.ts

@@ -1 +1 @@
-import { NETWORK_DATA_TYPE } from '../../../common/const'
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '网络连接已断开',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '数据加载失败',
  [NETWORK_DATA_TYPE.NO_DATA]: '你访问的内容飞到太空了', 
  [NETWORK_DATA_TYPE.RISK]: '活动太火爆',
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '请检查您的网络设置',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '请稍后重试',
  [NETWORK_DATA_TYPE.NO_DATA]: '', 
  [NETWORK_DATA_TYPE.RISK]: '页面加载失败，请稍后再试',
  NETWORK_DATA_TYPE.NO_NET_WORK,
  NETWORK_DATA_TYPE.DATA_ERROR,
  NETWORK_DATA_TYPE.NO_DATA,
  NETWORK_DATA_TYPE.RISK,
  No_Data_Bmall:'no-data-bmall',
+import { NETWORK_DATA_TYPE } from '../../../common/const'
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '网络连接已断开',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '数据加载失败',
  [NETWORK_DATA_TYPE.NO_DATA]: '你访问的内容飞到太空了', 
  [NETWORK_DATA_TYPE.RISK]: '活动太火爆',
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '请检查您的网络设置',
  [NETWORK_DATA_TYPE.DATA_ERROR]: '请稍后重试',
  [NETWORK_DATA_TYPE.NO_DATA]: '', 
  [NETWORK_DATA_TYPE.RISK]: '页面加载失败，请稍后再试',
  NETWORK_DATA_TYPE.NO_NET_WORK,
  NETWORK_DATA_TYPE.DATA_ERROR,
  NETWORK_DATA_TYPE.NO_DATA,
  NETWORK_DATA_TYPE.RISK,
  No_Data_Bmall:'no-data-bmall',

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

@@ -50,6 +50,10 @@
 	.d-no-data-tip-1 {
 		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/152550/40/8432/21643/5fc9cae0E5391a506/523da679188ff687.png');
 	}
+
+  .d-no-data-tip-2 {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/142705/35/17776/5911/5fd1e62dE4fbc2300/3ee1d4160db1dac6.png');
+  }
 	.d-no-network-err-tip {
 		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
 	}

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

@@ -1 +1 @@
-import { Button, View } from '@tarojs/components'
    NetWorkErrorSubTip,
        subMessage,
    backgroundColorWhite,
    const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
    const useErrorSubTip = subMessage? subMessage: NetWorkErrorSubTip[netWorkDataType]
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    const maxHeight = latestRes.displayHeight || 546   
            style={{maxHeight: isMemberPage ? '100vh' : maxHeight}}
                {useErrorSubTip? <View className={netWorkErrorStyle['d-error-sub-tip']}>{useErrorSubTip}</View>: null}
                        <Button
                            onClick={refershInitData}
                            className={classNames(
                                netWorkErrorStyle['d-opt-btn'],
                                'd-button-no-border',
                            )}
                            plain
                            size="mini"
                        >
                            重新加载
                        </Button>
                    )}
    subMessage: '',
+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: ''