feat: ui修改

src/pages/index/index.tsx

@@ -10,7 +10,6 @@ const Index: React.FC = () => {
   })
 
   function openEmbeddedMiniProgram(appId, path) {
-    console.log(path)
     Taro.openEmbeddedMiniProgram({
       appId,
       path,
@@ -20,7 +19,7 @@ const Index: React.FC = () => {
 
   return (
     <View className='index'>
-      <custom props={{ openEmbeddedMiniProgram, adpId: 'uh2321awe1' }}/>
+      <custom props={{ openEmbeddedMiniProgram, adpId: 'uh2321awe1', width:250 }}/>
     </View>
   )
 }

src/plugin/components/custom/index.less

@@ -1,10 +1,5 @@
 .pq-custom {
   background: rgba(0, 0, 0, .6);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,12 +56,9 @@
     .custom {
       display: flex;
       flex-direction: column;
+      align-items: center;
+      background: #fff;
 
-      .custom-video {
-        width: 100%;
-        height: calc(100% - 120rpx)
-      }
-  
       .custom-bottom {
         box-sizing: border-box;
         width: 100%;

src/plugin/components/custom/index.tsx

@@ -17,6 +17,7 @@ let pqtId
 function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   let {
     adpId,
+    width,
     openEmbeddedMiniProgram,
     onError,
     onLoad,
@@ -67,9 +68,9 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
         return
       }
 
-      const { ownPlatformAlliance } = data || {}
-      const { adType, platformCreativeInfo } = ownPlatformAlliance || {}
-      const { landingPageAddress } = platformCreativeInfo
+      const { ownPlatform } = data || {}
+      const { adType, platformCreativeInfo } = ownPlatform || {}
+      const { landingPageAddress } = platformCreativeInfo || {}
 
       if (!landingPageAddress) {
         catchError('数据异常', 1013)
@@ -80,7 +81,8 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
         adType,
         ...platformCreativeInfo
       })
-    }).catch(() => {
+    }).catch((e) => {
+      console.log(e)
       catchError('初始化失败', 1011)
     })
   }
@@ -198,20 +200,23 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
     <>
       {show && <View className='pq-custom' onClick={clickMask}>
         <View className='custom-container'>
+          {/* 广告icon */}
           <View className='icon'>
             广告
           </View>
+          {/* 关闭icon */}
           <View className='close-icon' onClick={closeCustom}>
           </View>
-            <Custom
-              adData={adData}
-              onPlay={videoPlay}
-              onClick={videoClick}
-              onLoad={videoLoad}
-              onView={videoView}
-              onError={videoError}
-              onTimeUpdate={videoTimeUpdate}
-            />
+          <Custom
+            width={width}
+            adData={adData}
+            onPlay={videoPlay}
+            onClick={videoClick}
+            onLoad={videoLoad}
+            onView={videoView}
+            onError={videoError}
+            onTimeUpdate={videoTimeUpdate}
+          />
         </View>
       </View>}
     </>
@@ -219,8 +224,8 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
 }
 
 function Custom({
-  adData, onPlay, // 播放事件
-  onClick, onLoad, onView, onError, onTimeUpdate
+  width, adData, onPlay, onClick, onLoad,
+  onView, onError, onTimeUpdate
 }) {
   const [style, setStyle] = useState({ width: '0px', height: '0px' })
 
@@ -231,6 +236,12 @@ function Custom({
   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`
@@ -245,10 +256,9 @@ function Custom({
   }
 
   return (
-    <View className='custom' style={style}>
+    <View className='custom'>
       <Video
-        id='pq-custom'
-        className='custom-video'
+        style={style}
         objectFit='fill'
         controls={false}
         autoplay

src/plugin/share/index.ts

@@ -5,19 +5,16 @@ export const noop = () => {}
 export function wrapProps(props: PropsWithChildren<CustomPropsType>) {
   let {
     adpId,
-    zIndex = 1,
+    width,
     openEmbeddedMiniProgram = noop,
     onError = noop,
     onLoad = noop,
     onClose = noop
   } = props
 
-  if (typeof zIndex !== 'number')
-    zIndex = 1
-
   return {
     adpId,
-    zIndex,
+    width,
     openEmbeddedMiniProgram,
     onError,
     onLoad,

types/global.d.ts

@@ -35,7 +35,7 @@ declare namespace Taro {
 
 type CustomPropsType = {
   adpId: number
-  zIndex?: number
+  width?: number
   openEmbeddedMiniProgram(appId: string, path: string): void
   onError?(params: { message: string, code: number}): void
   onLoad?(): void