@conecli/cone-render 0.8.15-taroUpdate.2 → 0.8.15-taroUpdate.3

package/dist/components/base/ExposureSmart/index.h5.module.scss

@@ -0,0 +1,8 @@
+
+.root {
+    position: absolute;
+    width: 1PX;
+	height: 0;
+	opacity: 0;
+	pointer-events: none;
+}

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

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'
    const inViewCallback = () => {
        console.log('埋点收到进入可视区域的回到啦！', reportData)
        addReportData(reportData)
    }
            exposureStyle.root,
            className,
        )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>

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

@@ -0,0 +1,11 @@
+
+.d-floor-exposure {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1px;
+	width: 100%;
+	opacity: 0;
+	pointer-events: none;
+}

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

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'

package/dist/components/base/ExposureSmart/reporter.tsx

@@ -0,0 +1 @@
+import track from '../../../open/api/track'
    const {arr : arrTask, startWaitTime} = floorTask
    const isTimeout = startWaitTime != 0 && (Date.now() - startWaitTime >= 1000)    
    const isOverMax = arrTask.length >= 10  
    const hasData = arrTask.length > 0
    if(hasData && (isTimeout || isOverMax)){
        const reduceData = connactData(arrTask)
        track.reportExposureEventLog(reduceData)
        floorTask.arr = []
        floorTask.startWaitTime = 0
        clearTimeout(floorTask.timer)
    }
    const initData = JSON.parse(JSON.stringify(arr[0]))
    initData.jsonParam.logBaseInfo = []
    initData.jsonParam.etModelInfo.lstms = []
    return arr.reduce((acc, cur) => {
        cur.jsonParam.etModelInfo.lstms[0].la_p = cur.jsonParam.logBaseInfo.mInfo.pos
        acc.jsonParam.logBaseInfo.push(cur.jsonParam.logBaseInfo)
        acc.jsonParam.etModelInfo.lstms.push(cur.jsonParam.etModelInfo.lstms)
        return acc
    }, initData)
    if(!Array.isArray(data)){
        console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data)
        return 
    }
    const [floorData, mInfo, etModelInfo] = data
    if(floorData && mInfo && etModelInfo){
        const reportJson = track.getIsvExposureInfo(floorData, mInfo, etModelInfo)
        const { floorIdx } = floorData
        if(!task[floorIdx]){
            task[floorIdx] = {
                arr: [],
                startWaitTime: 0,
                timer : 0
            }
        }
        const floorTask = task[floorIdx]
        if(floorTask.arr.length === 0){
            floorTask.startWaitTime = Date.now()
        }
        if(reportJson){
            floorTask.arr.push(reportJson)
            clearTimeout(floorTask.timer)
            floorTask.timer = setTimeout(() => {
                check(floorTask)
            }, 1000)
            check(floorTask)
        }
    }else{
        console.log('坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：', data)
    }

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

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        inViewCallback,
        outViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const componentObserverRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('app=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('app=>out可视区域')
            }
        }, [componentShowState])
        
        const handleInOrOutView = (type: boolean) => {
            componentShowStateRef.current = type
            setComponentShowState(type)
        }
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = res
            if (componentObserverRef.current) {
                const eleClientRect =
                    componentObserverRef.current.getBoundingClientRect()
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                const eleHeight = Math.ceil(eleClientRect.height)
                console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
                if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
                    const isOutView = offSetY > eleOffsetTop + eleHeight
                    handleInOrOutView(isOutView ? false : true)
                } else {
                    const isInView = (offSetY > eleOffsetTop - displayHeight) && (offSetY < eleOffsetTop + eleHeight)
                    handleInOrOutView(isInView ? true : false)
                }
            }
        }
        return (
            <View ref={componentObserverRef}>
                {children}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        console.log('rootDom', rootDom)
        const { ref, inView } = useInView({
            threshold: 0, 
            triggerOnce: false, 
            root: rootDom || null, 
            rootMargin: `0px 0px 0px 0px`, 
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('其他h5=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('其他h5=>out可视区域')
            }
        }, [inView])
        return (
            <View ref={ref}>
                {children}
            </View>
        )
    }
    children: null, 
    className: '',
    inViewCallback: null, 
    outViewCallback: null 

package/dist/components/base/InViewRender/const.ts

@@ -0,0 +1 @@
+export const LazyType = {

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

@@ -0,0 +1,17 @@
+
+
+.d-mobile-floor-lazy-layout-load,
+.d-app-floor-lazy-layout-load {
+	position: relative;
+	background: #fff
+		url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
+		center center no-repeat;
+}
+
+.d-mobile-prestrain-component {
+	position: absolute;
+	//top: -50vh;
+	top: -35vh;
+	width: 100%;
+	height: 0;
+}

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

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        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()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            if (componentLazyRef.current) {
                const eleClientRect =
                    componentLazyRef.current.getBoundingClientRect()
                const getContainerHeightOffSetY = res.displayHeight + res.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',
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold: 0,
            triggerOnce: true,
            root: rootDom || null,    
            rootMargin: `0px 0px 0px 0px`,  
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 其它H5 展示啦!')
            }
        }, [inView])
        return (
            <View
                ref={ref}
                style={{
                    minHeight: `${inView ? 'auto' : height + 'px'}`,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,

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

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'

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

@@ -0,0 +1,34 @@
+
+.d-jd-loading{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.d-jd-full-loading{
+      position: fixed;
+      z-index: 1111111;
+    }
+    &.d-jd-local-loading{
+      position: relative;
+      padding: 20px 0;
+    }
+    &.d-jd-loading-hide{
+      display: none;
+    }
+    .d-loading-image{
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+    }
+    .d-loading-text{
+      margin-left: 10px;
+      line-height: 24px;
+      font-size: 24px;
+      color: #A9A9A9;
+    }
+  }

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

@@ -0,0 +1 @@
+import React from 'react'

package/dist/components/base/LazyLayoutLoad/const.ts

@@ -0,0 +1 @@
+export const LazyType = {

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

@@ -0,0 +1,17 @@
+
+
+.d-mobile-floor-lazy-layout-load,
+.d-app-floor-lazy-layout-load {
+	position: relative;
+	background: #fff
+		url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
+		center center no-repeat;
+}
+
+.d-mobile-prestrain-component {
+	position: absolute;
+	//top: -50vh;
+	top: -35vh;
+	width: 100%;
+	height: 0;
+}

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

@@ -0,0 +1 @@
+import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
    const rootDom = document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    useEffect(() => {
        if(componentShowState === true){
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState])
            ref={ref}

package/dist/components/base/LazyLayoutLoad/index.weapp.tsx

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'

package/dist/components/base/LazyLoadImage/const.ts

@@ -0,0 +1 @@
+export const NetWorkTypeQuality = {

package/dist/components/base/LazyLoadImage/index.h5.module.scss

@@ -0,0 +1,24 @@
+
+.d-lazy-image,
+.d-app-lazy-image {
+	//background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
+	background: #fff
+		url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
+		center center no-repeat;
+	&.d-lazy-sku-image {
+		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
+		background-size: cover;
+	}
+	&.d-load-completed {
+		background: none;
+	}
+	img {
+		display: block;
+		width: 100%;
+	}
+	&.d-hide-image-error {
+		img {
+			opacity: 0;
+		}
+	}
+}

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

@@ -0,0 +1 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
    const [componentShowState, setComponentShowState] = useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    useEffect(() => {
        const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
        !componentShowStateRef.current && dealPageScrollInfo(latestRes)
        Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
            !componentShowStateRef.current && dealPageScrollInfo(res)
        })
    
        
            <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={lazyLoad}
                onError={imageError}
                onLoad={imageLoad.bind(this, imgSrc)}
                {...otherOption}
            />
        )

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

@@ -0,0 +1,17 @@
+
+.d-lazy-image {
+	//background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
+	background: #fff
+		url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
+		center center no-repeat;
+	&.d-lazy-sku-image {
+		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
+		background-size: cover;
+	}
+	&.d-load-completed {
+		background: none;
+	}
+	&.d-hide-image-error {
+		opacity: 0;
+	}
+}

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

@@ -0,0 +1 @@
+import React, {useCallback, useState} from 'react'

package/dist/components/base/NetworkDataError/const.ts

@@ -0,0 +1 @@
+import { NETWORK_DATA_TYPE } from '../../../common/const'

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

@@ -0,0 +1,76 @@
+
+.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;
+	}
+
+	.d-error-tip {
+		padding: 24px 0 40px;
+		font-size: 28px;
+		line-height: 28px;
+		color: #cccccc;
+	}
+
+	.d-error-type {
+		margin: 0 auto;
+		width: 300px;
+		height: 300px;
+		background-size: contain;
+		background-repeat: no-repeat;
+	}
+
+	.d-no-network {
+		background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/183170/9/1300/33060/6088fed9E6fad2c89/ac0c00d4d90ce536.png');
+	}
+
+	.d-data-error {
+		background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/190994/19/325/42717/6088fed0Ec4b502d5/0e8de7593fb0d06c.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-network-err-tip {
+		background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
+	}
+	
+	.d-opt-btn {
+		padding: 0;
+		width: 160px;
+		height: 64px;
+		line-height: 64px;
+		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;
+}
+
+.d-shop-network-part {
+	position: absolute;
+	min-height: 500px;
+	background: #f2f2f2;
+	.d-error-tip {
+		color: #999;
+	}
+}

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

@@ -0,0 +1 @@
+import { Button, View } from '@tarojs/components'
    backgroundColorWhite,

package/dist/components/base/Price/const.ts

@@ -0,0 +1 @@
+export const MemberPriceIcon = {