@conecli/cone-render 0.8.20-shop.21 → 0.8.20-shop.211

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    const inViewCallback = () => {
        console.log('埋点收到进入可视区域的回到啦！', reportData)
        addReportData(reportData)
    }
            exposureStyle.root,
            className,
        )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>
+import React, { useMemo } from 'react';
  const {
    type,
    className,
    reportData,
    customReportDataKey,
    customReportDataFn,
    trackCallback,
    markPoint,
    innerRef,
  } = props;
  const isCustomReport = customReportDataKey && customReportDataFn;
  const isViewOnlineState = taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE;
  const showRenderState = isCustomReport ? true : reportData;
  const inViewCallback = () => {
    const getInsertFlowMapEle =
      innerRef?.current?.querySelector('.d-report-exposure-point') || createDefaultFlowMapEle;
    if (!isCustomReport) {
      addReportData(reportData, getInsertFlowMapEle);
      typeof trackCallback === 'function' && trackCallback(reportData);
    } else {
      if (typeof customReportDataFn === 'function') {
        const getReportData = customReportDataFn(customReportDataKey);
        getReportData &&
          getReportData?.eventId &&
          getReportData?.jsonParam &&
          track.reportExposureEventLog({
            ...getReportData,
            target: getInsertFlowMapEle,
          });
      }
    }
  };
  let chartPointClassName = '';
  
  if (isChartH5 && markPoint && Array.isArray(reportData)) {
    const [floorData, mInfo] = reportData;
    if (floorData && mInfo && mInfo.hasOwnProperty('pos')) {
      chartPointClassName = track.getFloorPointIndexClassName(floorData, mInfo.pos);
    }
  } else if (isCustomReport) {
    chartPointClassName = `J_custom_${customReportDataKey}`;
  }
  return isViewOnlineState && showRenderState ? (
    <InViewRender
      className={classNames(
        'd-report-exposure-point',
        {
          [exposureStyle['d-report-point']]: type === TrackType.point,
        },
        {
          [exposureStyle['d-report-floor']]: type === TrackType.floor,
        },
        {
          'd-report-exposure-jd-point': isJdApp,
        },
        className,
        chartPointClassName,
      )}
      height={'100%'}
      inViewCallback={inViewCallback}
    ></InViewRender>
  ) : null;
  return useMemo(() => {
    return <Exposure {...props} />;
  }, []);
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
  markPoint: false, 

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

@@ -1,11 +1,22 @@
 
-.d-floor-exposure {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 1px;
-	width: 100%;
-	opacity: 0;
-	pointer-events: none;
+//坑位曝光
+.d-report-point {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+//楼层曝光
+.d-report-floor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  pointer-events: none;
+  z-index: -1;
 }

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro'
  const { type, className, reportData, customReportDataKey, customReportDataFn, trackCallback } = props
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const isCustomReport = customReportDataKey && customReportDataFn
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const showRenderState = isCustomReport ? true : floorData && mInfo
  const getFloorPointClassName =  isCustomReport ? `J_custom_${customReportDataKey}` : `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
  const getTaroSelector = isCustomReport ? `#J_miniShopRoot >>> .${getFloorPointClassName}` : `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}`
  useEffect(() => {
    if (isViewOnlineState && reportData) {
      Taro.nextTick(() => {
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: getTaroSelector,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log('小程序曝光埋点收到进入可视区域啦！', getFloorPointClassName, reportData, res)
              if(!isCustomReport){
                addReportData(reportData)
                typeof trackCallback === 'function' && trackCallback(reportData)
              }else {
                typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
              }
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
      })
    }
  }, [])
  return (showRenderState ? (
      <View
        className={classNames(
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
          className,
        )}
      />
    ) : null
  )
  return useMemo(() => {
    return <ExposureFloor {...props} />
  }, [])
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,

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

@@ -1 +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)
    }
+import track from '../../../open/api/track';
  const { arr: arrTask, startWaitTime } = floorTask;
  const isTimeout = startWaitTime != 0 && Date.now() - startWaitTime >= 1000; 
  const arrTaskNum = arrTask.length;
  const isOverMax = arrTaskNum >= 10; 
  const hasData = arrTaskNum > 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]));
  if (initData.jsonParam.etModelInfo) {
    initData.jsonParam.logBaseInfo = [];
    initData.jsonParam.etModelInfo.lstms = [];
    return arr.reduce((acc, cur) => {
      acc.jsonParam.logBaseInfo.push(cur.jsonParam.logBaseInfo);
      return acc;
    }, initData);
  } else {
    return arr.reduce((acc) => {
      return acc;
    });
  }
  if (!Array.isArray(data)) {
    console.log('坑位曝光埋点原始数据参类型错误，期望是数组，实际是：', data);
    return;
  }
  const [floorData, mInfo, etModelInfo] = data;
  if (floorData && mInfo && etModelInfo) {
    const isIsvReportModule = isvReportModuleTypeList.includes(floorData?.floorExtInfo?.moduleFlag);
    try {
      const reportJson = track.getExposureInfo(
        floorData,
        mInfo,
        etModelInfo,
        true,
        isIsvReportModule,
      );
      console.log(`${floorData?.floorExtInfo?.moduleFlag}===reportJson===`, reportJson);
      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);
      }
    } catch (e) {
      {
        console.log('坑位曝光埋点出错啦', e);
      }
    }
  } else {
    console.log(
      '坑位曝光埋点原始数据参数缺失，期望是[floorData, mInfo, etModelInfo]，实际是：',
      data,
    );
  }

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  latestFromNativeMsgStorage,
  getNativePageScrollRes,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const {
    children,
    style,
    inViewCallback,
    outViewCallback,
    threshold = 0,
  } = 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)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    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)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (
        typeof displayHeight === 'undefined' ||
        typeof offSetY === 'undefined'
      )
        return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      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 + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return (
      <View ref={componentObserverRef} style={style}>
        {children}
      </View>
    )
  } else {
    const rootDom = document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
    const { ref, inView } = useInView({
      threshold, 
      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} style={style}>
        {children}
      </View>
    )
  }
  children: null, 
  style: {},
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 
+import Taro from '@tarojs/taro'
  isH5AndJdShopView,
  isH5AndJdShopViewH5Scroll,
  isAppClassifyPage,
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  latestFromNativeMsgStorage,
  getNativePageScrollRes,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const {
    children,
    style,
    inViewCallback,
    outViewCallback,
    threshold = 0,
  } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const needShowHighVersion =
    isAppClassifyPage ||
    (isH5AndJdShopViewH5Scroll &&
      !(
        global.info.queryInfo?.downgraded &&
        global.info.queryInfo.downgraded === 'true'
      ))
  const rootDom =
    isH5AndJdShopView && needShowHighVersion
      ? null
      : document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
  if (isH5AndJdShopView && !needShowHighVersion) {
    console.log('视频========属于app原生滚动')
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, res => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        state => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, res => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          state => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    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)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = res => {
      console.log('dealPageScrollInfo===', res)
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (
        typeof displayHeight === 'undefined' ||
        typeof offSetY === 'undefined'
      )
        return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      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 + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return (
      <View ref={componentObserverRef} style={style}>
        {children}
      </View>
    )
  } else {
    console.log('视频========h5滚动')
    const { ref, inView } = useInView({
      delay: 100,
      threshold, 
      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} style={style}>
        {children}
      </View>
    )
  }
  children: null, 
  style: {},
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0,