@conecli/cone-render 0.10.1-shop3.4 → 0.10.1-shop3.41

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

@@ -119,3 +119,14 @@
 		transform: scale3d(1, 1, 1);
 	}
 }
+:global{
+  .d-shop-pad{
+    :local{
+      
+      .d-dialog-content{
+        max-width: 520PX;
+      }
+    }
+  }
+
+}

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const { children, placeholder, height, className, inViewCallback } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const [componentRenderShowState, setComponentRenderShowState] = useState(
    false,
  )
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const rootDom =
    isH5AndJdShopView && needShowHighVersion
      ? null
      : document.querySelector('#J_shopHomeRoot')
  if (isH5AndJdShopView && !needShowHighVersion && !isAppStowShop) {
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      !componentShowStateRef.current && dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, res => {
        !componentShowStateRef.current && dealPageScrollInfo(res)
      })
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
      }
    }, [componentShowState])
    
    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 + offSetY
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        if (!componentShowStateRef.current) {
          if (getContainerHeightOffSetY > eleOffsetTop) {
            componentShowStateRef.current = true
            setComponentShowState(true)
            Taro.nextTick(() => {
              setComponentRenderShowState(true)
            })
          }
        }
      }
    }
    return (
      <View
        ref={componentLazyRef}
        className={classNames(
          lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
          'd-app-floor-lazy-load',
          className,
        )}
        style={{
          minHeight: `${
            componentRenderShowState
              ? 'auto'
              : height + (typeof height === 'number' ? 'px' : '')
          }`,
          backgroundColor: componentRenderShowState ? 'transparent' : '#ffffff',
        }}
      >
        {componentShowState ? children : placeholder}
      </View>
    )
  } else {
    const { ref, inView } = useInView({
      threshold: 0.5, 
      triggerOnce: true,
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
      delay: 300, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
      }
    }, [inView])
    return (
      <View
        className={className}
        ref={ref}
        style={{
          minHeight: inView
            ? 'auto'
            : typeof height === 'number'
            ? `${height}px`
            : height,
          backgroundColor: 'transparent',
        }}
      >
        {inView ? children : placeholder}
      </View>
    )
  }
  children: null, 
  placeholder: null, 
  height: 1, 
  className: '',
  lazyNodeClassName: '',
  inViewCallback: null,
+import Taro from '@tarojs/taro';
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  const { children, placeholder, height, className, inViewCallback } = props;
  const [componentShowState, setComponentShowState] = useState(false);
  const [componentRenderShowState, setComponentRenderShowState] = useState(false);
  const componentLazyRef = useRef<HTMLElement | null>(null);
  const componentShowStateRef = useRef(false);
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const rootDom =
    isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot');
  if (isH5AndJdShopView && !needShowHighVersion && !isAppStowShop) {
    useEffect(() => {
      const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
      !componentShowStateRef.current && dealPageScrollInfo(latestRes);
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        !componentShowStateRef.current && dealPageScrollInfo(res);
      });
    }, []);
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback();
      }
    }, [componentShowState]);
    
    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 + offSetY;
        const eleOffsetTop = Math.ceil(eleClientRect.top);
        if (!componentShowStateRef.current) {
          if (getContainerHeightOffSetY > eleOffsetTop) {
            componentShowStateRef.current = true;
            setComponentShowState(true);
            Taro.nextTick(() => {
              setComponentRenderShowState(true);
            });
          }
        }
      }
    };
    return (
      <View
        ref={componentLazyRef}
        className={classNames(
          lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
          'd-app-floor-lazy-load',
          className,
        )}
        style={{
          minHeight: `${
            componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
          }`,
          backgroundColor: componentRenderShowState ? 'transparent' : '#ffffff',
        }}
      >
        {componentShowState ? children : placeholder}
      </View>
    );
  } else {
    const { ref, inView } = useInView({
      threshold: 0.5, 
      triggerOnce: true,
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
      delay: 300, 
    });
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback();
      }
    }, [inView]);
    return (
      <div
        className={className}
        ref={ref}
        style={{
          minHeight: inView ? 'auto' : typeof height === 'number' ? `${height}px` : height,
          backgroundColor: 'transparent',
        }}
      >
        {inView ? children : placeholder}
      </div>
    );
  }
  children: null, 
  placeholder: null, 
  height: 1, 
  className: '',
  lazyNodeClassName: '',
  inViewCallback: null,

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]: global?.languageJsonData?.loseNetwork || '网络连接已断开',
  [NETWORK_DATA_TYPE.DATA_ERROR]:
    global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多',
  [NETWORK_DATA_TYPE.NO_DATA]: global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多', 
  [NETWORK_DATA_TYPE.RISK]: global?.languageJsonData?.highTraffic || '活动太火爆，访问人数较多',
  [NETWORK_DATA_TYPE.NO_NET_WORK]: global?.languageJsonData?.checkNetwork || '请检查您的网络设置',
  [NETWORK_DATA_TYPE.DATA_ERROR]:
    global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试',
  [NETWORK_DATA_TYPE.NO_DATA]: global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试',
  [NETWORK_DATA_TYPE.RISK]: `${
    global?.languageJsonData?.pageLoadFailed || '排队进场中，请稍后再试'
  }。`,
  NETWORK_DATA_TYPE.NO_NET_WORK,
  NETWORK_DATA_TYPE.DATA_ERROR,
  NETWORK_DATA_TYPE.NO_DATA,
  NETWORK_DATA_TYPE.RISK,
  PART: 'part', 
  FULL: 'full', 
  No_Data_Default_Tip: 'no-data-default-tip',
  No_Data_Tip_1: 'no-data-tip-1',
  No_Data_Tip_2: 'no-data-tip-2',
  No_Network_Err_Tip: 'no-network',
  No_Data_Bmall: 'no-data-bmall',
  OLD: 'old',
  NEW: 'new',

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

@@ -1,94 +1,140 @@
 
 .d-shop-network {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: #e5e5e5;
-	&.d-shop-network-white {
-		background-color: #fff;
-	}
-	.d-error-content {
-		text-align: center;
-	}
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #e5e5e5;
+  &.d-shop-network-white {
+    background-color: #fff;
+  }
+  .d-error-content {
+    text-align: center;
+    &.d-new-style-content {
+      .d-data-error,
+      .d-no-data,
+      .d-no-data-tip-1,
+      .d-no-data-tip-2 {
+        width: 240px;
+        height: 240px;
+        background: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png')
+          0 0 /240px 240px no-repeat;
+      }
+      .d-data-error-tip {
+        padding-bottom: 24px;
+        line-height: 38px;
+        font-size: 32px;
+        font-weight: 600;
+        color: #1a1a1a;
+      }
+      .d-data-error-sub-tip {
+        margin: 0;
+        font-size: 24px;
+        color: #505259;
+      }
+      .d-no-data-tip {
+        line-height: 44px;
+        font-size: 24px;
+        font-weight: normal;
+        color: #505259;
+      }
+      .d-no-data-sub-tip {
+        margin: 0;
+        font-weight: normal;
+        color: #505259;
+      }
+      .d-opt-btn {
+        width: 160px;
+        height: 64px;
+        line-height: 64px;
+        font-size: 28px;
+        color: #1a1a1a;
+        border-radius: 12px;
+        border: none;
+        
+        &:after{
+          border: 1PX solid #C2C4CC;
+        }
+      }
+    }
+  }
 
-	.d-error-tip {
-		font-size: 28px;
-        font-weight: bold;
-		line-height: 28px;
-		color: #8C8C8C;
-	}
-    .d-error-sub-tip {
-        margin-top: 16px;
-		font-size: 24px;
-		line-height: 24px;
-		color: #8C8C8C;
-	}
-	.d-error-type {
-		width: 320px;
-		height: 320px;
-		background-size: contain;
-		background-repeat: no-repeat;
+  .d-error-tip {
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 28px;
+    color: #1a1a1a;
+  }
+  .d-error-sub-tip {
+    margin-top: 16px;
+    font-size: 24px;
+    line-height: 24px;
+    color: #8c8c8c;
+  }
+  .d-error-type {
+    width: 320px;
+    height: 320px;
+    background-size: contain;
+    background-repeat: no-repeat;
     margin: 0 auto;
-	}
+  }
 
-	.d-no-network {
-		// background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/219405/34/29129/32963/64892a0eF2c068392/86c3fcf9d980ff10.png');
-        background-image: url('../../../assets/networkError.png');
-	}
+  .d-no-network {
+    // background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/219405/34/29129/32963/64892a0eF2c068392/86c3fcf9d980ff10.png');
+    background-image: url('../../../assets/networkError.png');
+  }
 
-	.d-data-error {
-		background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/106708/34/36128/37234/64896f52Fed1530e0/7b403e068aae316c.png');
-	}
+  .d-data-error {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
   .d-risk {
-    background-image: url('https://m.360buyimg.com/imagetools/jfs/t1/106708/34/36128/37234/64896f52Fed1530e0/7b403e068aae316c.png');
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-data {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-data-tip-1 {
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
   }
-	.d-no-data {
-		background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/190994/19/325/42717/6088fed0Ec4b502d5/0e8de7593fb0d06c.png');
-	}
-	.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');
+    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/256437/5/21857/22576/67b438adFed8a2665/7df7277fec7e3e8e.png');
+  }
+  .d-no-network-err-tip {
+    background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
   }
-	.d-no-network-err-tip {
-		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
-	}
   .d-no-data-bmall {
     background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/217798/34/32933/150484/64ccadf3Fde1a93bf/9b1b8929a9631469.png');
   }
-	
-	.d-opt-btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 144px;
-		height: 56px;
-        margin-top: 32px;
-		padding: 0;
-		font-size: 24px;
-		color: #fa2c19;
-		border: 1PX solid #fa2c19;
-		box-sizing: border-box;
-		border-radius: 48px;
-		&:active {
-			opacity: 0.8;
-		}
-	}
+  
+  .d-opt-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 144px;
+    height: 56px;
+    margin-top: 32px;
+    padding: 0;
+    font-size: 24px;
+    color: #fa2c19;
+    border: 1px solid #fa2c19;
+    box-sizing: border-box;
+    border-radius: 48px;
+    &:active {
+      opacity: 0.8;
+    }
+  }
 }
 
 .d-network-jd-shop-view {
-	min-height: 500px;
+  min-height: 500px;
 }
 
 .d-shop-network-part {
-	position: absolute;
-	min-height: 500px;
-	background: #f2f2f2;
+  position: absolute;
+  min-height: 500px;
+  background: #f2f2f2;
 }
 .d-shop-network-no-position {
-    position: static;
+  position: static;
 }