feat: ui

src/hooks/useGetCustomClient.ts

@@ -11,7 +11,7 @@ async function useGetCustomClient(cb) {
     if (safeArea.height) {
       height = safeArea.height - topSpaceHeight
     } else {
-      height = windowHeight - topSpaceHeight
+      height = windowHeight - topSpaceHeight - 60
     }
 
     height *= 0.85

src/plugin/components/custom/index.less

@@ -56,12 +56,46 @@
     .close-icon::after {
         transform: rotate(-45deg);
     }
+
+    .custom {
+      display: flex;
+      flex-direction: column;
+
+      .custom-video {
+        width: 100%;
+        height: calc(100% - 120rpx)
+      }
   
-    .custom-video {
-      width: 100%;
-      height: 100%
-    }
-  }
+      .custom-bottom {
+        box-sizing: border-box;
+        width: 100%;
+        height: 120rpx;
+        background: #fff;
+        display: flex;
+        padding: 0 24rpx;
+        align-items: center;
 
+        .logo {
+          width: 80rpx;
+          height: 80rpx;
+        }
 
+        .title {
+          flex: 1;
+          margin: 0 12rpx
+        }
+
+        .button {
+          width: 180rpx;
+          height: 66rpx;
+          background: #00C25D;
+          border-radius: 12rpx;
+          font-weight: 500;
+          color: #FFFFFF;
+          text-align: center;
+          line-height: 66rpx;
+        }
+      }
+    }
+  }
 }

src/plugin/components/custom/index.tsx

@@ -1,11 +1,12 @@
 import Taro, { useLoad, useReady, useUnload } from '@tarojs/taro'
 import { PropsWithChildren, useState } from 'react'
-import { View, Video, Navigator } from '@tarojs/components'
+import { View, Video, Navigator, Image } from '@tarojs/components'
 import useGetCustomClient from '@/hooks/useGetCustomClient'
 import './index.less'
 
 const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
-const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4'
+const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1702267670_1702267670233.mp4'
+const VIDEO_COVER = 'http://rescdn.yishihui.com/ad/prod/video/material_AD_1702267670_1702267670233.mp4?x-oss-process=video/snapshot,t_5000,f_jpg,w_0,h_0,m_fast'
 
 // 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
 let loadedMetaFiredInOnce = 0
@@ -25,7 +26,7 @@ function PqCustom({
 
   function closeCustom() {
     onClose()
-    // setShow(false)
+    setShow(false)
   }
 
   function clickMask() {
@@ -121,7 +122,12 @@ function Custom({ width, zIndex, onClick, onLoad, onView, onError }) {
 
   return (
     <View className='custom' style={style}>
-      <Video id='pq-custom' className='custom-video' autoplay={false} controls={false} loop src={VIDEO_SRC} onClick={onClick} onLoadedMetaData={onLoadedMetaData} onPlay={onPlay} onTimeUpdate={onTimeUpdate} onError={onError}/>
+      <Video id='pq-custom' className='custom-video' autoplay={false} controls={false} loop src={VIDEO_SRC} onClick={onClick} onLoadedMetaData={onLoadedMetaData} onPlay={onPlay} onTimeUpdate={onTimeUpdate} onError={onError} objectFit='fill' poster={VIDEO_COVER} />
+      <View className='custom-bottom'>
+        <Image src='http://rescdn.yishihui.com/ad/prod/image/logo_AD_1702267670_1702267670233.png' className='logo' />
+        <View className='title'>5天站桩入门课</View>
+        <View className='button'>免费领取</View>
+      </View>
     </View>
   )
 }