后台管理-视频管理数据代入

README.md

@@ -1,3 +1 @@
 1.使用 yarn。 npm 有问题
-
-2.开发时请修改 public/myData.js 的 baseUrlLoc（dev 的时候另起一个服务运行静态资源） 和 myBaseUrl

public/myData/myData.js

@@ -2,19 +2,8 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
-// 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.0.68:8080/staticData/'
-
 // 发送请求基地址
-const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'
-
-const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
-
-// Build开发资源目录
-const baseUrlAtl = myBaseUrl + 'staticData/'
-
-// 全景视频/全景图/unity场景资源地址
-const otherUrlTemp = myBaseUrl
+const apiUrlTemp = 'https://sit-taiyuanczb.4dage.com/api/'
 
 // 一些动态配置的数据
 const myDataTemp = {

src/App.tsx

@@ -5,13 +5,14 @@ import { Router, Route, Switch } from 'react-router-dom'
 import history, { callIframeFu } from './utils/history'
 import SpinLoding from './components/SpinLoding'
 import store, { RootState } from './store'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import NotFound from '@/components/NotFound'
 import { envFlag } from './utils/http'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 import { Image } from 'antd'
 import MessageCom from '@/components/Message'
 import { setStoreLangueFu } from './utils/storage'
+import { API_getVideo } from './store/action/all'
 
 // import Vconsole from 'vconsole'
 // new Vconsole()
@@ -57,6 +58,16 @@ const planSize = {
 }
 
 export default function App() {
+  const dispatch = useDispatch()
+  // 获取后台管理视频地址
+  const API_getVideoFu = useCallback(async () => {
+    dispatch(API_getVideo())
+  }, [dispatch])
+
+  useEffect(() => {
+    API_getVideoFu()
+  }, [API_getVideoFu])
+
   const { myData, unityDel } = useSelector((state: RootState) => state.A0Layout)
 
   // 判断是中文还是英文

src/pages/A0base/index.tsx

@@ -7,6 +7,7 @@ import { cutUnityFu, unityShow } from './data'
 import Zloding from '@/components/Zloding'
 import { toEchPageFu } from '@/components/MenuSider/data'
 import Zclose from '@/components/Zclose'
+import { baseUrl } from '@/utils/http'
 
 function A0base() {
   const [loding, setLoding] = useState(false)
@@ -16,7 +17,7 @@ function A0base() {
     cutUnityFu('TombstoneView', () => setLoding(true))
   }, [])
 
-  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue, videos } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentBase, setCurrentBase] = useState(0)
 
@@ -135,7 +136,10 @@ function A0base() {
             x5-video-player-type='h5'
             // controls={true}
           >
-            <source type='video/mp4' src={'./myData/xianDao.mp4'} />
+            <source
+              type='video/mp4'
+              src={videos[3] ? baseUrl + videos[3] : './myData/xianDao.mp4'}
+            />
             Your browser does not support the video tag.
           </video>
 

src/pages/A1home2/index.tsx

@@ -9,18 +9,19 @@ import { locSetLangue } from '@/utils/storage'
 // import { envFlag } from '@/utils/http'
 // import { Toast } from 'antd-mobile'
 import { lodingUnityFu } from '../A0base/data'
+import { baseUrl } from '@/utils/http'
 
 function A1home() {
-  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
+  const { myLangue, videos } = useSelector((state: RootState) => state.A0Layout)
 
   // 先加载背景图片
   const [baseImg, setBaseImg] = useState(false)
 
-  // 开场视频-------------
+  // 开场视频-------------(暂时中英文版本都只用一个)
   const [baseFlag, setBaseFlag] = useState(false)
-  const [baseFlag2, setBaseFlag2] = useState(false)
+  // const [baseFlag2, setBaseFlag2] = useState(false)
 
-  const moveImg = useRef<any>(null)
+  // const moveImg = useRef<any>(null)
   const moveImg2 = useRef<any>(null)
 
   // 视频准备
@@ -30,28 +31,34 @@ function A1home() {
       loop: true, // 是否循环, 默认false
       autoplay: false, // 自动播放, 默认false
       onSourceEstablished: () => {
-        if (val === 'EN') setBaseFlag(true)
-        else setBaseFlag2(true)
+        setBaseFlag(true)
+
+        // (暂时中英文版本都只用一个)
+        // if (val === 'EN') setBaseFlag(true)
+        // else setBaseFlag2(true)
       } //有足够的数据可以播放了
     }
 
-    if (val === 'EN') {
-      // moveImg.current = F_Video(`./myData/base.ts`, params)
-      // const dom = document.querySelector(`.A1baseVideo2`)!
-      // dom.append(moveImg2.current.domElement)
-      moveImg.current = F_Video(`./myData/baseEn.ts`, params)
-      const dom = document.querySelector(`.A1baseVideo`)!
-      dom.append(moveImg.current.domElement)
-    } else {
-      moveImg2.current = F_Video(`./myData/base.ts`, params)
-      const dom = document.querySelector(`.A1baseVideo2`)!
-      dom.append(moveImg2.current.domElement)
-    }
+    moveImg2.current = F_Video(`./myData/base.ts`, params)
+    const dom = document.querySelector(`.A1baseVideo2`)!
+    dom.append(moveImg2.current.domElement)
+
+    // (暂时中英文版本都只用一个)
+    // if (val === 'EN') {
+    //   moveImg.current = F_Video(`./myData/baseEn.ts`, params)
+    //   const dom = document.querySelector(`.A1baseVideo`)!
+    //   dom.append(moveImg.current.domElement)
+    // } else {
+    //   moveImg2.current = F_Video(`./myData/base.ts`, params)
+    //   const dom = document.querySelector(`.A1baseVideo2`)!
+    //   dom.append(moveImg2.current.domElement)
+    // }
   }, [])
 
   useEffect(() => {
     if (baseImg) {
-      videoCanvasFu('EN')
+      // (暂时中英文版本都只用一个)
+      // videoCanvasFu('EN')
       videoCanvasFu('ZH')
     }
   }, [baseImg, videoCanvasFu])
@@ -61,26 +68,28 @@ function A1home() {
 
   useEffect(() => {
     if (progress >= 100) {
-      // 播放动态视频
-      moveImg.current.play()
+      // 播放动态视频 (暂时中英文版本都只用一个)
+      // moveImg.current.play()
       moveImg2.current.play()
     }
   }, [progress])
 
   useEffect(() => {
-    if (baseFlag && baseFlag2) {
-      // 开始加载unity
-      lodingUnityFu()
-    }
-  }, [baseFlag, baseFlag2])
+    // (暂时中英文版本都只用一个)
+    // if (baseFlag && baseFlag2) {
+    //   // 开始加载unity
+    //   lodingUnityFu()
+    // }
+    if (baseFlag) lodingUnityFu()
+  }, [baseFlag])
 
   // 过场视频-------------
   const videoRefLast = useRef<HTMLVideoElement>(null)
 
   const enter = useCallback(() => {
     if (progress >= 100) {
-      // 删除第一个动画和封面图
-      moveImg.current.destroy()
+      // 删除第一个动画和封面图 (暂时中英文版本都只用一个)
+      // moveImg.current.destroy()
       moveImg2.current.destroy()
       domDelOwnFu('.A1baseVideo')
       // domDelOwnFu('.homeImg')
@@ -109,10 +118,11 @@ function A1home() {
       />
 
       <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
-        <div
+        {/* (暂时中英文版本都只用一个) */}
+        {/* <div
           className='A1baseVideo'
           style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'EN' ? 5 : 4 }}
-        ></div>
+        ></div> */}
         <div
           className='A1baseVideo2'
           style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'ZH' ? 5 : 4 }}
@@ -155,8 +165,8 @@ function A1home() {
           <img src={require(`@/assets/sgImg/${myLangue}.png`)} alt='' />
         </div>
       </div>
-      {/* 开场视频 */}
-      {baseFlag && baseFlag2 ? (
+      {/* 开场视频 (暂时中英文版本都只用一个)  baseFlag && baseFlag2*/}
+      {baseFlag ? (
         <div className='A1videoBox' style={{ opacity: 1, zIndex: loadOk ? 10 : 0 }}>
           <video
             ref={videoRefLast}
@@ -164,7 +174,9 @@ function A1home() {
             webkit-playsinline='true'
             x5-video-player-type='h5'
             onEnded={() => window.location.replace('#/base')}
-            src={`./myData/home${myLangue === 'EN' ? 'En' : ''}.mp4`}
+            src={
+              videos[1] ? baseUrl + videos[1] : `./myData/home${myLangue === 'EN' ? 'En' : ''}.mp4`
+            }
           />
 
           {loadOk ? (

src/pages/A6ybwx/Sangzang/components/Policy/index.tsx

@@ -88,7 +88,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
         // console.log('part1TXT', (v.scrollTop += e.deltaY))
       })
     })
-  }, [currentItem])
+  }, [])
 
   return (
     <div className={styles.Policy}>

src/pages/A6ybwx/index.tsx

@@ -5,13 +5,15 @@ import Genealogy from './Genealogy'
 import SangzangHome from './Sangzang'
 
 import classNames from 'classnames'
-import { isPc } from '@/utils/http'
+import { baseUrl, isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
 import Skip from '@/components/Skip'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import { cutUnityFu, getUnityKey } from '../A0base/data'
 import Zloding from '@/components/Zloding'
 import { callIframeFu } from '@/utils/history'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A6ybwx() {
   // 开场视频-------------
@@ -97,6 +99,8 @@ function A6ybwx() {
     }
   }, [isEnter])
 
+  const { videos } = useSelector((state: RootState) => state.A0Layout)
+
   return (
     <div className={classNames(styles.A6ybwx, isPc ? '' : styles.A6ybwxMo)}>
       <div
@@ -118,7 +122,7 @@ function A6ybwx() {
             x5-video-player-type='h5'
             onEnded={() => setIsEnter(true)}
           >
-            <source type='video/mp4' src='./myData/ybwx.mp4' />
+            <source type='video/mp4' src={videos[2] ? baseUrl + videos[2] : './myData/ybwx.mp4'} />
             Your browser does not support the video tag.
           </video>
 

src/store/action/all.ts

@@ -1,41 +1,23 @@
 import http from '@/utils/axios'
+import { AppDispatch } from '..'
 
 /**
- * 点赞
+ * 获取视频配置
  */
-export const API_setLike = (type: 'star' | 'visit') => {
-  // 这个项目暂时没有 visit 访问量
-  return http.get(`show/visit/add/${type}`)
-}
-
-/**
- * 获取点赞详情
- */
-export const API_getLike = () => {
-  return http.get('show/visit/detail')
-}
-
-/**
- * 获取留言列表
- */
-export const API_getMsgList = () => {
-  const data = {
-    pageNum: 1,
-    pageSize: 99999
+export const API_getVideo = (): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get('show/video/getList')
+    if (res.code === 0) {
+      const arr = res.data || []
+      const obj = {} as { 1: string; 2: string; 3: string }
+      arr.forEach((v: { id: 1 | 2 | 3; filePath: string }) => {
+        obj[v.id] = v.filePath
+      })
+      dispatch({ type: 'layout/videos', payload: obj })
+    }
   }
-  return http.post('show/message/pageList', data)
 }
 
-/**
- * 获取验证码
- */
-export const API_getCode = () => {
-  return http.get('admin/getRandCode', { responseType: 'blob' })
-}
+// 字典-树列表 get show/dict/getTree
 
-/**
- * 留言列表新增
- */
-export const API_msgSave = (data: any) => {
-  return http.post('show/message/save', data)
-}
+// 字典-详情 get show/dict/detail/{id}

src/store/reducer/layout.ts

@@ -30,8 +30,16 @@ const initState = {
   // 总数据 - 中英文切换
   myData: {} as MyDataType,
   myLangue: 'ZH' as 'ZH' | 'EN',
-  unityKey: 0, //unity是否被销毁,key变化的时候就要判断
-  unityDel: false
+  //unity是否被销毁,key变化的时候就要判断
+  unityKey: 0,
+  unityDel: false,
+  // 后台管理配置的3个视频
+  videos: {
+    // 1:开场视频 2：融合之光  3：先导片
+    1: '',
+    2: '',
+    3: ''
+  }
 }
 
 // 定义 action 类型
@@ -45,6 +53,7 @@ type LayoutActionType =
   | { type: 'layout/myLangue'; payload: 'ZH' | 'EN' }
   | { type: 'layout/unityKey'; payload: number }
   | { type: 'layout/unityDel'; payload: boolean }
+  | { type: 'layout/videos'; payload: { 1: string; 2: string; 3: string } }
   | {
       type: 'layout/closeUpFile'
       payload: {
@@ -83,6 +92,9 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
       return { ...state, unityKey: action.payload }
     case 'layout/unityDel':
       return { ...state, unityDel: action.payload }
+    // 后台管理配置的3个视频
+    case 'layout/videos':
+      return { ...state, videos: action.payload }
 
     default:
       return state

src/types/declaration.d.ts

@@ -8,13 +8,9 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 
 // public/myData.js 里面的一些数据的类型
-declare const baseUrlLoc: string
-declare const baseUrlAtl: string
 declare const isPcTemp: boolean
 declare const myDataTemp: MyDataType
 declare const myDataTemp2: MyDataType
-declare const otherUrlTemp: string
-declare const myHotInfo: any
 declare const apiUrlTemp: string
 
 // 微信浏览器--视频转画布

src/utils/http.ts

@@ -1,10 +1,10 @@
 // 是不是pc端
 export const isPc = isPcTemp
 
-// 全景视频/全景图/unity场景资源地址
-export const otherUrl = otherUrlTemp
-
 // 发送请求基地址
 export const apiUrl: string = apiUrlTemp
 
+// 图片视频基地址
+export const baseUrl = apiUrl.replace('api/', '')
+
 export const envFlag = process.env.NODE_ENV === 'development'