暂时不需要动画

H5/public/myData.js

@@ -15,6 +15,7 @@ const myDataTemp = {
   homeData: [
     {
       id: 1, // id唯一值，不重复
+      videoUrl: 'videoJs/1.ts',
       name: '克一号井三刮刀钻头', //钻头名称
       cover: 'model/klmy01.png', //外面的封面图地址
       modelUrl: 'https://sit-kelamayi.4dage.com/KLMYBWG/Model2.html?m=klmy01', //模型地址

H5/src/App.tsx

@@ -1,8 +1,8 @@
 import '@/assets/styles/base.css'
 // 关于路由
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Router, Route, Switch } from 'react-router-dom'
-import history, { isMobileFu } from './utils/history'
+import history, { isMobileFu, myUrl } from './utils/history'
 import SpinLoding from './components/SpinLoding'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 
@@ -12,8 +12,33 @@ import MessageCom from './components/Message'
 import screenImg from '@/assets/img/landtip.png'
 
 const A1home = React.lazy(() => import('./pages/A1home'))
+const A2details = React.lazy(() => import('./pages/A2details'))
+
+// const scriptArr = [`${myUrl}videoJs/jsmpeg.min.js`, `${myUrl}videoJs/f-video.js`]
 
 export default function App() {
+  // 动态加载 js
+  // const [lodingJs, setLodingJs] = useState(0)
+
+  const [isSucc, setIsSucc] = useState(true)
+
+  // 加载2个js
+  // useEffect(() => {
+  //   if (lodingJs < scriptArr.length) {
+  //     let script = document.createElement('script')
+  //     script.type = 'text/javascript'
+  //     script.src = scriptArr[lodingJs]
+  //     document.head.appendChild(script)
+  //     script.onload = () => {
+  //       setLodingJs(lodingJs + 1)
+  //       if (lodingJs === scriptArr.length - 1) {
+  //         // 加载完了最后一个
+  //         setIsSucc(true)
+  //       }
+  //     }
+  //   }
+  // }, [lodingJs])
+
   // 从仓库中获取查看图片的信息
   // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
@@ -32,14 +57,17 @@ export default function App() {
   return (
     <>
       {/* 关于路由 */}
-      <Router history={history}>
-        <React.Suspense fallback={<SpinLoding />}>
-          <Switch>
-            {/* <Route path='/codeSucc/:id' component={A3codeSucc} /> */}
-            <Route path='/' component={A1home} />
-          </Switch>
-        </React.Suspense>
-      </Router>
+      {isSucc ? (
+        <Router history={history}>
+          <React.Suspense fallback={<SpinLoding />}>
+            <Switch>
+              {/* <Route path='/codeSucc/:id' component={A3codeSucc} /> */}
+              <Route path='/info/:id' component={A2details} />
+              <Route path='/' component={A1home} exact />
+            </Switch>
+          </React.Suspense>
+        </Router>
+      ) : null}
 
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />

H5/src/pages/A1home/A1info/index.module.scss

@@ -18,7 +18,7 @@
     }
     .A1Dtop {
       width: 100%;
-      height: 35%;
+      height: 60%;
       transition: all 0.3s;
       iframe {
         width: 100%;
@@ -27,7 +27,7 @@
     }
     .A1Dmain {
       width: 100%;
-      height: calc(65% + 15px);
+      height: calc(40% + 15px);
       position: absolute;
       bottom: 0;
       transition: all 0.3s;
@@ -38,13 +38,13 @@
       background-repeat: no-repeat;
       border-radius: 20px 20px 0 0;
       z-index: 11;
-      padding: 30px 30px 10px;
+      padding: 30px 30px 0px;
 
       .A1Dtit {
         color: #5b472e;
-        height: 110px;
+        height: 100px;
         border-bottom: 1px #5b472e dashed;
-        margin-bottom: 40px;
+        margin-bottom: 20px;
         & > H1 {
           font-size: 20px;
           font-weight: 700;
@@ -59,10 +59,11 @@
       }
 
       .A1Dtxt {
-        height: calc(100% - 150px);
+        height: calc(100% - 120px);
         width: calc(100% + 15px);
         padding-right: 15px;
         overflow-y: auto;
+        padding-bottom: 10px;
         p {
           text-indent: 2em;
           color: #5b472e;

H5/src/pages/A1home/A1info/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { HomeDataRow, myData, myUrl } from '@/utils/history'
 import classNames from 'classnames'
@@ -6,11 +6,19 @@ import { DownOutlined, UpOutlined } from '@ant-design/icons'
 
 type Props = {
   info: HomeDataRow
-  closeFu: () => void
+  closeFu: (id: number) => void
 }
 
 function A1info({ info, closeFu }: Props) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(true)
+
+  // 隐藏关闭按钮
+  const [colseHide, setCloseHide] = useState(true)
+
+  useEffect(() => {
+    if (window.location.href.includes('?x=h')) {
+    } else setCloseHide(false)
+  }, [])
 
   // 操作模型
   const btnModelFu = useCallback((val: 1 | 2 | 3) => {
@@ -27,7 +35,13 @@ function A1info({ info, closeFu }: Props) {
   return (
     <div className={classNames(styles.A1info, open ? styles.A1infoOpen : '')} id='A1info'>
       {/* 关闭按钮 */}
-      <img className='A1Dclose' src={myUrl + 'img/close.png'} alt='' onClick={closeFu} />
+      <img
+        hidden={colseHide}
+        className='A1Dclose'
+        src={myUrl + 'img/close.png'}
+        alt=''
+        onClick={() => closeFu(info.id)}
+      />
 
       <div className='A1Dtop'>
         <iframe id='ifr' src={info.modelUrl} frameBorder='0' title='model'></iframe>

H5/src/pages/A1home/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { HomeDataRow, myData, myUrl } from '@/utils/history'
+import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
 import classNmaes from 'classnames'
 import A1info from './A1info'
 
@@ -62,7 +62,8 @@ function A1home() {
         {myData.homeData.map(v => (
           <div
             onClick={() => {
-              setOpen(v)
+              history.replace(`/info/${v.id}`)
+              // setOpen(v)
               stopMoveFu()
             }}
             className={classNmaes('A1row', moveId === v.id ? 'A1rowAcMove' : '')}

H5/src/pages/A2details/index.module.scss

@@ -0,0 +1,40 @@
+.A2details {
+  position: relative;
+  :global {
+    .A2videoBox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 101;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      opacity: 1;
+      transition: opacity 1s;
+    }
+    .A2videoBoxHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .A2err {
+      position: relative;
+      z-index: 200;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      background-color: #5f5244;
+      & > p {
+        letter-spacing: 4px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}

H5/src/pages/A2details/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+import A1info from '../A1home/A1info'
+import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
+import { Button } from 'antd'
+import classNames from 'classnames'
+
+function A2details() {
+  const { id } = useParams<any>()
+
+  const [info, setInfo] = useState({} as HomeDataRow)
+
+  // id找不到数据
+  const [err, setErr] = useState(false)
+
+  // 画布播放完毕
+
+  useEffect(() => {
+    const info = myData.homeData.find(v => v.id === Number(id))
+    if (info) {
+      setInfo(info)
+
+      // 开始播放画布
+      // if (info.videoUrl) {
+      //   const params = {
+      //     objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+      //     loop: false, // 是否循环, 默认false
+      //     autoplay: true, // 自动播放, 默认false
+      //     onPlay: () => {}, // 触发播放事件
+      //     onPause: () => {}, // 触发暂停事件
+      //     onEnded: () => {
+      //       setInfo(info)
+      //     } // 触发播放结束事件
+      //   }
+      //   const player = F_Video(myUrl + info.videoUrl, params)
+      //   const dom = document.querySelector('.A2videoBox')!
+      //   dom.append(player.domElement)
+      // } else setErr(true)
+    } else setErr(true)
+  }, [id])
+
+  return (
+    <div className={styles.A2details}>
+      {/* 视频画布页面  */}
+      {/* <div className={classNames('A2videoBox', info.id ? 'A2videoBoxHide' : '')}></div> */}
+
+      {/* 详情页面 */}
+      {info.id ? (
+        <A1info info={info} closeFu={id => history.replace(`/?m=${id}`)} />
+      ) : null}
+
+      {/* 错误页面 */}
+      {err ? (
+        <div className='A2err'>
+          <p>页面参数错误</p>
+          <Button onClick={() => history.replace('/')}>去列表页</Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoA2details = React.memo(A2details)
+
+export default MemoA2details

H5/src/types/declaration.d.ts

@@ -9,5 +9,6 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 declare const myUrlTemp1: string
 declare const myUrlTemp2: string
+declare const F_Video: any
 
 declare const myDataTemp

H5/src/utils/history.ts

@@ -18,6 +18,7 @@ export const myUrl = envFlag ? myUrlTemp1 : myUrlTemp2
 
 export type HomeDataRow = {
   id: number
+  videoUrl: string
   name: string
   cover: string
   modelUrl: string

静态资源/myData/videoJs/f-video.js

@@ -0,0 +1,81 @@
+/* f-video.js */
+let F_Video;
+(function () {
+  F_Video = function (url, option) {
+    const u = window.navigator.userAgent.toLowerCase();
+    const isAndroid = u.indexOf("android") > -1;
+    let player = new Object();
+
+
+ let newCanvas = document.createElement("canvas");
+      let params = {
+        canvas: newCanvas,
+        loop: option.loop || false,
+        autoplay: option.autoplay || false,
+        onEnded: () => {
+          option.onEnded && option.onEnded();
+          player.currentTime = 0;
+        },
+      };
+
+      newCanvas.style.width = "100%";
+      newCanvas.style.height = "100%";
+      newCanvas.style.objectFit = option.objectFit || "cover";
+
+      player = new JSMpeg.Player(url.replace(".mp4", ".ts"), {
+        ...option,
+        ...params,
+      });
+      player.domElement = newCanvas;
+
+    // if (isAndroid) {
+    //   let newCanvas = document.createElement("canvas");
+    //   let params = {
+    //     canvas: newCanvas,
+    //     loop: option.loop || false,
+    //     autoplay: option.autoplay || false,
+    //     onEnded: () => {
+    //       option.onEnded && option.onEnded();
+    //       player.currentTime = 0;
+    //     },
+    //   };
+
+    //   newCanvas.style.width = "100%";
+    //   newCanvas.style.height = "100%";
+    //   newCanvas.style.objectFit = option.objectFit || "cover";
+
+    //   player = new JSMpeg.Player(url.replace(".mp4", ".ts"), {
+    //     ...option,
+    //     ...params,
+    //   });
+    //   player.domElement = newCanvas;
+    // } else {
+    //   let newVideo = document.createElement("video");
+    //   newVideo.setAttribute("x5-video-player-type", "h5");
+    //   newVideo.setAttribute("x-webkit-airplay", "true");
+    //   newVideo.setAttribute("airplay", "allow");
+    //   newVideo.setAttribute("playsinline", "");
+    //   newVideo.setAttribute("webkit-playsinline", "");
+    //   newVideo.setAttribute("src", url);
+    //   option.loop && newVideo.setAttribute("loop", "loop");
+    //   !option.autoplay && newVideo.setAttribute("preload", "auto");
+    //   option.autoplay &&
+    //     window.WeixinJSBridge &&
+    //     window.WeixinJSBridge.invoke("getNetworkType", {}, (e) => {
+    //       player.play();
+    //     });
+
+    //   newVideo.style.width = "100%";
+    //   newVideo.style.height = "100%";
+    //   newVideo.style.objectFit = option.objectFit || "cover";
+
+    //   player = newVideo;
+    //   player.domElement = newVideo;
+
+    //   option.onPlay && player.addEventListener("play", option.onPlay);
+    //   option.onPause && player.addEventListener("pause", option.onPause);
+    //   option.onEnded && player.addEventListener("ended", option.onEnded);
+    // }
+    return player;
+  };
+})();