bluenote/src/components/page-wrapper/CustomBg.tsx

/**
 * 用于 page 根目录的样式等设置
 */
import { View, Video } from "@tarojs/components";
import React, { useEffect, useState } from "react";
import pageStyle from "./index.module.less";
import Taro from "@tarojs/taro";
// import { useAppStore } from "@/store/appStore";
interface Props {
  styleBg?: string|null;
}

const Index: React.FC<Props> = ({styleBg}) => {
  // 自定义背景样式
  // const {windowHeight, windowWidth} = useAppStore()

  // const [offsetMargin, setOffsetMargin] = useState({ x: 0, y: 0 });
  // const [bgSize, setBgSize] = useState({ width: windowWidth, height: windowHeight });

  const  bg =  styleBg || ''  
  
  const bgImageStyle = {
    backgroundImage: `url(${bg})`,
    // marginLeft: `${offsetMargin.x}px`,
    // marginTop: `${offsetMargin.y}px`,
    // height: `${bgSize.height}px`,
    // width: `${bgSize.width}px`,
    backgroundSize: 'auto 100%',
    backgroundPosition: 'center center'
  };

  const isMp4 = bg?.lastIndexOf('.mp4') > -1

  // useEffect(()=> {
  //   if(!bg) {
  //     return;
  //   }
  //   if(isMp4){
  //     return 
  //   }
  //   Taro.getImageInfo({
  //     src: bg,
  //     success(res) {
  //       const imgWidth = res.width;
  //       const imgHeight = res.height;

  //       let ratio = windowHeight / imgHeight;
  //       let scaledWidth = imgWidth * ratio;
  //       let scaledHeight = windowHeight;
  //       let offsetX = 0;
  //       let offsetY = 0;

  //       if (scaledWidth >= windowWidth) {
  //         offsetX = (scaledWidth - windowWidth) / 2;
  //         offsetY = 0;
  //       } else {
  //         ratio = windowWidth / imgWidth;
  //         scaledWidth = windowWidth;
  //         scaledHeight = imgHeight * ratio;
  //         offsetX = 0;
  //         offsetY = (scaledHeight - windowHeight) / 2;
  //       }

  //       setOffsetMargin({ x: -offsetX, y: -offsetY });
  //       setBgSize({ width: scaledWidth, height: scaledHeight });
  //     },
  //     fail(err) {
  //       console.error('获取图片信息失败', err)
  //     }
  //   })
  // }, [styleBg])

  if(!bg) {
    return <></>
  }

  if(isMp4){ 
    return <Video
      controls={false}
      showCenterPlayBtn={false}
      loop={true}
      muted={true}
      autoplay
      objectFit="cover"
      className={pageStyle.bg}
      src={bg}
    />
  }
  
  return <View className={pageStyle.bg} style={bgImageStyle}></View>
};

export default Index;