feat: 广告落地页

src/app.config.ts

@@ -8,7 +8,6 @@ export default {
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black',
     navigationStyle: 'custom'
   },

src/hooks/useGetCustomClient.ts

@@ -14,7 +14,7 @@ async function useGetCustomClient(cb) {
       height = windowHeight - topSpaceHeight
     }
 
-    height *= 0.75
+    height *= 0.85
 
     const width = height * 375 / 667
 

src/plugin/pages/customPage/index.less

@@ -1,6 +1,64 @@
-view {
-  image {
-    width: 100vw;
-    height: 100vh;
-  }
+.custom-page {
+ .nav-bar {
+    display: flex;
+    align-items: center;
+
+    .left-icon {
+      position: absolute;
+      width: 23px;
+      height: 23px;
+      border-top: 4rpx solid #333;
+      border-right: 4rpx solid #333;
+      transform:rotate(-135deg);
+    }
+ }
+
+ .page-content {
+    box-sizing: border-box;
+    padding-top: 1rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .page-image {
+      width: 100%;
+      height: 100%
+    }
+
+    .page-guide {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .guide-title {
+        width: 278rpx;
+        height: 84rpx;
+        background: #FFDF4A;
+        border-radius: 0rpx 0rpx 42rpx 42rpx;
+        z-index: 2;
+        text-align: center;
+        line-height: 84rpx;
+        color: #000;
+        font-size: 42rpx
+      }
+
+      .guide-content {
+        padding-top: 22rpx; 
+        width: 667rpx;
+        height: 278rpx;
+        background: rgba(255, 255, 255, .3);
+        border-radius: 35rpx;
+        margin-top: -42rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-size: 48rpx;
+
+        text {
+          text-align: left;
+        }
+      }
+    }
+ }
 }

src/plugin/pages/customPage/index.tsx

@@ -1,23 +1,100 @@
 import Taro, { useLoad } from '@tarojs/taro'
 import { useState } from 'react'
-import { getTopSafeHeight } from '@/hooks/useGetCustomClient'
-import { View } from '@tarojs/components'
+import useGetCustomClient, { getTopSafeHeight } from '@/hooks/useGetCustomClient'
+import { View, Text, Image } from '@tarojs/components'
 import './index.less'
 
 function CustomPage() {
+  const styleSheet = {
+    page: {
+      background: '#006FE3',
+      color: '#fff',
+    },
+    title: {
+      fontSize: '69rpx',
+      fontWeight: '',
+      marginTop: '104rpx',
+      marginBottom: '54rpx'
+    },
+    content: {
+      width: '486rpx',
+      height: '486rpx'
+    },
+    guide: {
+      marginTop: '38rpx',
+    }
+  }
+
+  const adInfo = {
+    title: '添加官方客服微信',
+    image: 'http://rescdn.yishihui.com/ad/prod/image/logo_AD_1701757825_1701757825567.png'
+  }
+
   const [isCustom, setIsCustom] = useState(false)
+  const [statusBarHeight, setStatusBarHeight] = useState(0)
+  const [navBarStyle, setNavBarStyle] = useState({ height: '0px', marginLeft: 'px' })
   useLoad(() => {
     const spaceHeight = getTopSafeHeight()
     const { screenHeight, windowHeight } = Taro.getSystemInfoSync()
     setIsCustom(spaceHeight + windowHeight > screenHeight)
 
+    // 状态栏 刘海屏
+    const systemInfo = Taro.getSystemInfoSync()
+    const { statusBarHeight = 0 } = systemInfo
+    setStatusBarHeight(statusBarHeight)
+    // 胶囊信息
+    const menuInfo = Taro.getMenuButtonBoundingClientRect()
+    // 导航高度固定 44px
+    let navigationBarHeight = (menuInfo.top - statusBarHeight) * 2 + menuInfo.height
+
+    setNavBarStyle({
+      height: `${ Math.min(44, navigationBarHeight)}px`,
+      marginLeft: `${(systemInfo.screenWidth - menuInfo.right) * 2}px`
+    })
   })
 
+  function navigateBack() {
+    wx.navigateBack()
+  }
+
+  return (
+    <View className='custom-page'>
+      {/* 状态栏 */}
+      {/* {isCustom && <View className='status-bar' style={{ height: `${statusBarHeight}px`}}></View>} */}
+      {/* 导航栏 */}
+      {/* {isCustom && <View className='nav-bar' style={navBarStyle} >
+        <View className='left-icon' onClick={navigateBack}></View>  
+      </View>} */}
+      {/* 页面 */}
+      <Page styleSheet={styleSheet} adInfo={adInfo} />
+    </View>
+  )
+}
+
+function Page({ styleSheet, adInfo }) {
+  const pageStyle = {
+    width: '100vw',
+    height: `calc(100vh)`,
+    background: styleSheet.page.background,
+    color: styleSheet.page.color
+  }
+
   return (
-    <View>
-      {isCustom && <View>isCustom</View>}
+    <View className='page-content' style={pageStyle}>
+      <View className='page-title' style={styleSheet.title}>
+        <Text>{adInfo.title}</Text>
+      </View>
+      <View className='page-content' style={styleSheet.content}>
+        <Image className='page-image' src={adInfo.image} />
+      </View>
+      <View className='page-guide' style={styleSheet.guide}>
 
-      CustomPage
+        <View className='guide-title'>添加方法</View>
+        <View className='guide-content'>
+          <Text>1、长按上面图片3秒</Text>
+          <Text>2、点击识别图中二</Text>
+        </View>
+      </View>
     </View>
   )
 }