feat: 广告UI样式

src/pages/index/index.tsx

@@ -19,7 +19,7 @@ const Index: React.FC = () => {
 
   return (
     <View className='index'>
-      <custom props={{width: "300"}} />
+      <custom />
     </View>
   )
 }

src/plugin/components/custom/index.less

@@ -0,0 +1,23 @@
+.pq-custom {
+  background: rgba(0, 0, 0, .4);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    position: absolute;
+  }
+
+  .close-icon {
+    position: absolute;
+  }
+
+  .custom-video {
+
+  }
+}

src/plugin/components/custom/index.tsx

@@ -1,57 +1,48 @@
+import React, { PropsWithChildren } from 'react'
 import Taro, { useLoad, useReady } from '@tarojs/taro'
-import { View, Video, Navigator, Button, FunctionalPageNavigator } from '@tarojs/components'
+import { View, Video, Navigator, AdCustom } from '@tarojs/components'
 import './index.less'
-import React, { PropsWithChildren } from 'react'
-
-const Custom: React.FC = (props: PropsWithChildren<CustomPropsType>) => {
-  function clickCustom() {
-    console.log(props)
-  }
 
-  const customWidth = props.width
+const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/webview/index'
+const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4'
 
-  // useReady(() => {
-  //   Taro.request({
-  //     url: 'https://api.piaoquantv.com/ad/self/inAbPredict',
-  //     method: 'POST',
-  //     success(res) {
-  //       console.log(res)
-  //     },
-  //     fail(err) {
-  //       console.log(err)
-  //     }
-  //   })
-  // })
-
-  function clickPayment() {
-    console.log('支付')
-    wx.requestPluginPayment({
-      version: 'develop',
-      fee: 1,
-      success(res) {
-        console.log('success', res)
-      },
-      fail(res) {
-        console.log('fail', res)
-      }
-    })
+function PqCustom(props: PropsWithChildren<CustomPropsType>) {
+  const customWidth = props.width || 100
+  function onClick() {
+    console.log(props)
   }
 
-  function loginSuccess(res) {
-    console.log(res)
-  }
+  return (
+    <View className='pq-custom' onClick={onClick}>
+      <View className='icon'>广告</View>
+      <View className='close-icon'>❌</View>
+      <Navigator url={WEB_VIEW_URL}>
+        <Custom width={customWidth}/>
+      </Navigator>
+    </View>
+  )
+}
 
-  function loginFail(res) {
+function Custom({ width, zIndex }) {
+  useReady(() => {
+    const res = Taro.getSystemInfoSync()
     console.log(res)
+    const clientRect = Taro.getMenuButtonBoundingClientRect()
+    console.log(clientRect)
+  })
+
+  const style = {
+    width: `${width || 100}px`,
+    zIndex: zIndex || 1,
+    height: `${(width || 100) * 16 / 9}px`
   }
-
   return (
-    <View onClick={clickCustom} style={{width: customWidth + 'px'}}>
-      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/webview/index'>
-        <Video autoplay={false} controls={false} loop src='https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4' />
-      </Navigator>
+    <View className='custom'>
+      <Video className='custom-video' style={style} autoplay={false} controls={false} loop src={VIDEO_SRC} />
     </View>
   )
 }
 
-export default Custom
+// 计算可视区
+
+export default PqCustom

types/global.d.ts

@@ -26,5 +26,12 @@ declare namespace JSX {
 declare const wx
 
 type CustomPropsType = {
-  width: number
+  adpId: number
+  width?: number
+  zIndex?: number
+  onLoad?(): void
+  onView?(): void
+  onClick?(): void
+  onClose?(): void
+  onError?(): void
 }