wx-custom-plugin/src/plugin/components/custom/index.tsx

import Taro, { useLoad, useReady } from '@tarojs/taro'
import { PropsWithChildren, useState } from 'react'
import { View, Video, Image } from '@tarojs/components'
import useGetCustomClient from '@/hooks/useGetCustomClient'
import { wrapProps, generateUUID } from '@/plugin/share'
import './index.less'
import http from '@/http/index'
import { adSelfPredict } from '@/http/api/index'
import { adActionLog } from '@/logCenter/index'
import { reportBusinessType } from '@/plugin/share/const'
import { queryURLParams } from '@/plugin/share'
import AES from 'crypto-js/aes.js'

// 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
let loadedMetaFiredInOnce = 0
let pqtId

function YLQCustom(props: PropsWithChildren<CustomPropsType>) {
  let {
    adpId,
    width,
    onEmitOpenMiniProgram,
    onError,
    onLoad,
    onClose
  } = wrapProps(props)
  const [show, setShow] = useState(true)
  const [adData, setAdData] = useState<any>({})

  useReady(() => {
    console.log('YLQCustom init', Taro.$global)
    init()
    pqtId = generateUUID()
    getAdConfig()
  })

  function init() {
    if (
        typeof adpId !== 'string' ||
        typeof onEmitOpenMiniProgram !== 'function'
      ) {
      catchError('参数错误', 1031, '用户必传参数没传')
      return
    }
  }

  function getAdConfig() {
    http.post(`${adSelfPredict}?adpId=${adpId}`, {
      baseInfo: {},
      positionId: 1,
      phoneModel : '',
      careModelStatus : 1,
      videoId: 0
    }, {
      header: { 'content-type': 'application/json;' }
    }).then((res: RequestType) => {
      const { code, data, msg } = res
      if(code === 10001) {
        catchError('广告资源加载失败', 1022, msg)
        return
      }

      if(code === 10002) {
        catchError('adpId 无效', 1021, msg)
        return
      }

      if(code === 10003) {
        catchError('初始化失败', 1011, msg)
        return
      }

      const { ownPlatform } = data || {}
      const { adType, platformCreativeInfo } = ownPlatform || {}
      const { landingPageAddress } = platformCreativeInfo || {}

      if (!landingPageAddress) {
        catchError('数据异常', 1013, '无landingPageAddress')
        return
      }

      setAdData({
        adType,
        ...platformCreativeInfo
      })
    }).catch((e) => {
      catchError('初始化失败', 1011,  e.message)
    })
  }

  function videoPlay() {
    adActionReport(reportBusinessType.adPlay, 'adPlay')
  }
  
  function videoClick() {
    adActionReport(reportBusinessType.adClick, 'adClick')
    videoOpenMiniProgram()
    closeCustom()
  }

  function videoOpenMiniProgram() {
    const { landingPageAddress } = adData
    const query = queryURLParams(createAdActionReportData())

    adActionReport(reportBusinessType.adPlay, 'adOpen')
    const orgPath = `path=${encodeURIComponent(landingPageAddress)}&${query}`
    const path = AES.encrypt(orgPath, 'wx5ef216d1caf4a0eaylq').toString()

    onEmitOpenMiniProgram(
      'wx5ef216d1caf4a0ea',
      `/pages/ad-launch-page/index?q=${path}`
    )

    console.log(`/pages/ad-launch-page/index?q=${path}`)
  }

  function videoLoad() {
    adActionReport(reportBusinessType.adLoad, 'adLoad')
    onLoad()
  }

  function videoError() {
    catchError('广告加载失败', 1012, '素材播放视频')
  }

  function videoView() {
    adActionReport(reportBusinessType.adView, 'adView')
  }

  function videoTimeUpdate() {}

  function closeCustom() {
    adActionReport(reportBusinessType.adClose, 'adClose')
    onClose()
    setShow(false)
  }

  function adActionReport(eventId, businessType, extParams = {}) {
    const data = createAdActionReportData()

    adActionLog([{
      businessType,
      eventId,
      ...data,
      ...extParams
    }])
  }

  function createAdActionReportData() {
    const {
      trafficCode, // 流量主code
      // 广告主
      advertiserCode,
      advertiserId,
      // 广告计划
      campaignCode,
      campaignId,
      // 广告
      adCode,
      adId,
      // 创意
      creativeCode,
      id,
      // 广告位
      positionId,
      // 竞价
      bidType = '',
      unitPrice = '', // 单价
      bidCreativeParam = {}, // {}
      adType: ownAdSystemType
    } = adData

    return {
      adpCode: trafficCode,
      advertiserCode,
      advertiserId,
      campaignCode,
      campaignId,
      adCode,
      adId,
      creativeCode,
      id,
      positionId,
      bidType,
      unitPrice, // 单价
      bidCreativeParam: JSON.stringify(bidCreativeParam || {}), // {}
      adpId,
      pqtId,
      ownAdSystemType
    }
  }

  function catchError(message, code, errMessage) {
    onError(code)
    setShow(false)
    adActionReport(reportBusinessType.adError, 'adError', {
      errorCode: code,
      message,
      errMessage
    })
  }

  return (
    <>
      {show && <View className='pq-custom' style={{width: `${width}px`}}>
        <View className='custom-container'>
          {/* 广告icon */}
          <View className='icon'>
            广告
          </View>
          {/* 关闭icon */}
          <View className='close-icon' onClick={closeCustom}>
          </View>
          <Custom
            width={width}
            adData={adData}
            onPlay={videoPlay}
            onClick={videoClick}
            onLoad={videoLoad}
            onView={videoView}
            onError={videoError}
            onTimeUpdate={videoTimeUpdate}
          />
        </View>
      </View>}
    </>
  )
}

function Custom({
  width, adData, onPlay, onClick, onLoad,
  onView, onError, onTimeUpdate
}) {
  const [style, setStyle] = useState({ width: '0px', height: '0px' })

  useReady(() => {
    loadedMetaFiredInOnce = 0
    onView()
  })

  useGetCustomClient((customClient) => {
    let clientWidth = customClient.width
    let clientHeight = customClient.height

    if (typeof width === 'number') {
      clientWidth = width
      clientHeight = clientWidth * 667 / 375
    }

    setStyle({
      width: `${clientWidth}px`,
      height: `${clientHeight}px`
    })
  })

  function onLoadedMetaData() {
    if (loadedMetaFiredInOnce++ < 1) {
      // 上报load
      onLoad()
    }
  }

  return (
    <View className='custom'>
      <Video
        style={style}
        controls={false}
        autoplay
        loop
        src={adData.materialAddress}
        poster={adData.materialCoverPic}
        onPlay={onPlay}
        onTimeUpdate={onTimeUpdate}
        onError={onError}
        onClick={onClick}
        onLoadedMetaData={onLoadedMetaData}
      />
      <View className='custom-bottom' style={{width: `${width}px`}}>
        <Image src={adData.creativeLogoAddress} className='logo' />
        <View className='title'>{adData.creativeTitle}</View>
        <View className='button'>{adData.clickButtonText}</View>
      </View>
    </View>
  )
}

export default YLQCustom