fuck

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = ' http://192.168.0.18:8081/staticData/'
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
 const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
 
@@ -2054,7 +2054,7 @@ const myDataTemp = {
   visit2: {
     进入室内: 'visit2/进入室内.mp4',
     进入院落: 'visit2/进入院落.mp4',
-    btnArr: ['贵宾', '门生', '女宾'],
+    btnArr: ['贵宾', '门生'],
     baiXiBg: 'visit2/waiBg.jpg',
     baixiArr: ['吹火', '顶棍', '踏鼓舞', '相扑', '掷丸'],
     hot: erYuanArr

Code/src/components/BaseImg/index.tsx

@@ -14,6 +14,7 @@ type Props = {
   imgNumFu: () => void
   imgNow: boolean
   hidden?: boolean
+  lastNum?: number
 }
 
 function BaseImg({
@@ -25,7 +26,8 @@ function BaseImg({
   moreSta,
   imgNumFu,
   imgNow,
-  hidden = false
+  hidden = false,
+  lastNum = 100
 }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
@@ -45,7 +47,7 @@ function BaseImg({
     if (imgNow) {
       clearInterval(timeRR.current)
       timeRR.current = window.setInterval(() => {
-        if (loding >= 100) {
+        if (loding >= lastNum) {
           if (moreSta) btnStartFu()
 
           clearInterval(timeRR.current)
@@ -54,7 +56,7 @@ function BaseImg({
         setLoding(loding + 2)
       }, num)
     }
-  }, [btnStartFu, imgNow, loding, moreSta, num])
+  }, [btnStartFu, imgNow, lastNum, loding, moreSta, num])
 
   return (
     <div

Code/src/pages/A1_1base/index.module.scss

@@ -126,9 +126,8 @@
         }
         .A11TitSon2 {
           position: absolute;
-          bottom: 6%;
-          left: 50.3%;
-          transform: translateX(-50%);
+          top: 20%;
+          left: 16%;
           font-size: 18px;
           color: #ffdf89;
         }
@@ -136,7 +135,7 @@
           position: absolute;
           z-index: 11;
           left: 16%;
-          top: 26%;
+          top: 30%;
           cursor: pointer;
           width: 215px;
           height: 50px;
@@ -167,8 +166,8 @@
         .A11TitSonTxt2 {
           position: absolute;
           z-index: 11;
-          right: 16%;
-          bottom: 32%;
+          left: 16%;
+          top: 48%;
           cursor: pointer;
           width: 215px;
           height: 50px;
@@ -199,6 +198,86 @@
         #BtnRight {
           bottom: 60px;
         }
+
+        // 填完信息出来的文字盒子
+        .A11txtBox {
+          overflow: hidden;
+          color: black;
+          height: 60%;
+          position: absolute;
+          z-index: 100;
+          top: 22%;
+          left: 50%;
+          transform: translateX(-45%);
+          width: 8%;
+          writing-mode: vertical-rl;
+          text-orientation: upright;
+          display: flex;
+          align-items: center;
+          letter-spacing: 2px;
+          font-size: 16px;
+          transition: all 1s;
+          // background-color: red;
+        }
+        .Tiebtn {
+          position: absolute;
+          bottom: 20px;
+          left: 50.6%;
+          transform: translateX(-50%);
+          cursor: pointer;
+          width: 85px;
+          height: 30px;
+          z-index: 10;
+          background-size: 100% 100%;
+          background-image: url('../../assets/img/btn.png');
+          color: #fffddc;
+          transition: all 0.3s;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          &:hover {
+            background-image: url('../../assets/img/btnAc.png');
+            color: #b67150;
+          }
+        }
+        .TieRight {
+          position: absolute;
+          right: 24%;
+          top: 21%;
+          .TieRight1 {
+            font-size: 18px;
+            color: #fffddc;
+          }
+          .TieRight2 {
+            margin-top: 24px;
+            display: flex;
+            height: 24px;
+            & > div {
+              &:nth-of-type(1) {
+                color: #fffddc;
+                margin-right: 10px;
+              }
+              &:nth-of-type(2) {
+                // width: 70px;
+                padding: 1px;
+                border: 1px solid #fffddc;
+                display: flex;
+                align-items: center;
+              }
+              input {
+                text-align: center;
+                height: 20px;
+                width: 80px;
+                background-color: transparent;
+                // border: none !important;
+                border: 1px solid #fffddc;
+                font-size: 12px;
+                outline: none;
+                color: #ffdf89;
+              }
+            }
+          }
+        }
       }
     }
     .A11TitShow {

Code/src/pages/A1_1base/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
@@ -32,10 +32,16 @@ function A11base() {
   // 最后一个过长动画
   const [lastVideo, setLastVideo] = useState(false)
 
-  // 名帖视频播放之后，或者点击跳过
+  // 名帖文字的显示和隐藏
+  const [txtShow, setTxtShow] = useState(false)
+
+  // 点击报名帖
   const btnStartFu = useCallback(() => {
     // 播放长视频
-    setLastVideo(true)
+    setTxtShow(true)
+    setTimeout(() => {
+      setLastVideo(true)
+    }, 2000)
   }, [])
 
   // 点击开始
@@ -49,13 +55,34 @@ function A11base() {
   // 名帖1点击毛笔
   const [biShow, setBiShow] = useState(false)
 
-  // 2个名帖视频路径
-  const [tieVideoSrc, setTieVideoSrc] = useState('')
+  // 名帖2点击选中一个
+  const [inptxt, setInpTxt] = useState({
+    type: 0,
+    txt1: '',
+    txt2: '',
+    txt3: ''
+  })
+
+  // 在页面显示的html格式文字
+  const txtRes = useMemo(() => {
+    let txt = `弟子 ${inptxt.txt1} 再拜 问起居 ${inptxt.txt3} 字${inptxt.txt2}`
+    if (inptxt.type === 2) {
+      txt = `中郎豫章 ${inptxt.txt3} ${inptxt.txt1} 七十三 字${inptxt.txt2}`
+    }
+    return txt
+  }, [inptxt])
+
+  // 输入框是否输入完整
+  const isOk = useMemo(() => {
+    let flag = false
+    if (inptxt.txt1 && inptxt.txt2 && inptxt.txt3) flag = true
+    return flag
+  }, [inptxt])
 
   return (
     <div className={styles.A11base}>
       {/* 背景图页面 */}
-      {!tieVideoSrc ? (
+      {!lastVideo ? (
         <div className={classNames('A11bg')} hidden={window.location.href.includes('r=ren')}>
           <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.base.bgImg} alt='' />
 
@@ -79,7 +106,7 @@ function A11base() {
       ) : null}
 
       {/* 名帖信息 */}
-      {imgNow && !tieVideoSrc ? (
+      {imgNow && !lastVideo ? (
         <div className={classNames('A11Tit', tieShow ? 'A11TitShow' : '')}>
           <div>
             <img className='t1Bg' src={`${baseURL}base/tieBg.jpg`} alt='' />
@@ -107,35 +134,102 @@ function A11base() {
             <img className='A11TitSon1' src={`${baseURL}base/ban.png`} alt='' />
             <p className='A11TitSon2'>请选择内容</p>
 
-            <div className='A11TitSonTxt' onClick={() => setTieVideoSrc('tie1')}>
-              <img src={`${baseURL}base/txt1.png`} alt='' />
-              <img src={`${baseURL}base/txt1Ac.png`} alt='' />
-            </div>
-            <div className='A11TitSonTxt2' onClick={() => setTieVideoSrc('tie2')}>
+            <div
+              className='A11TitSonTxt'
+              onClick={() => setInpTxt({ type: 1, txt1: '吴应', txt2: '子远', txt3: '南昌' })}
+            >
               <img src={`${baseURL}base/txt2.png`} alt='' />
-              <img src={`${baseURL}base/txt2Ac.png`} alt='' />
+              <img
+                style={{ opacity: inptxt.type === 1 ? '1' : '' }}
+                src={`${baseURL}base/txt2Ac.png`}
+                alt=''
+              />
+            </div>
+            <div
+              className='A11TitSonTxt2'
+              onClick={() =>
+                setInpTxt({
+                  type: 2,
+                  txt1: '吴应年',
+                  txt2: '子远',
+                  txt3: '南昌都乡吉阳里'
+                })
+              }
+            >
+              <img src={`${baseURL}base/txt1.png`} alt='' />
+              <img
+                style={{ opacity: inptxt.type === 2 ? '1' : '' }}
+                src={`${baseURL}base/txt1Ac.png`}
+                alt=''
+              />
             </div>
 
             <BtnRight title='返回' clickSon={() => setBiShow(false)} imgName='back' />
+
+            {/* 填完信息出来的文字盒子 */}
+            <div
+              className='A11txtBox'
+              style={{ opacity: txtShow ? '1' : '0' }}
+              dangerouslySetInnerHTML={{ __html: txtRes }}
+            ></div>
+
+            {/* 底部按钮 */}
+            <div
+              className='Tiebtn'
+              onClick={btnStartFu}
+              hidden={!inptxt.type || txtShow}
+              style={{ opacity: isOk ? '1' : '0.5', pointerEvents: isOk ? 'auto' : 'none' }}
+            >
+              报名帖
+            </div>
+
+            {/* 右侧自定义输入 */}
+            <div className='TieRight' hidden={!inptxt.type}>
+              <div className='TieRight1'>自定义内容</div>
+              <div className='TieRight2'>
+                <div>姓名</div>
+                <div>
+                  <input
+                    maxLength={4}
+                    value={inptxt.txt1}
+                    onChange={e =>
+                      setInpTxt({ ...inptxt, txt1: e.target.value.replace(/\s+/g, '') })
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className='TieRight2'>
+                <div>表字</div>
+                <div>
+                  <input
+                    maxLength={4}
+                    value={inptxt.txt2}
+                    onChange={e =>
+                      setInpTxt({ ...inptxt, txt2: e.target.value.replace(/\s+/g, '') })
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className='TieRight2'>
+                <div>籍贯</div>
+                <div>
+                  <input
+                    maxLength={10}
+                    value={inptxt.txt3}
+                    onChange={e =>
+                      setInpTxt({ ...inptxt, txt3: e.target.value.replace(/\s+/g, '') })
+                    }
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       ) : null}
 
       {/* 名帖动画 */}
-      {imgNow ? (
-        <>
-          <CatVideo
-            isShow={tieVideoSrc === 'tie1'}
-            src={baseURL + 'base/tie1.mp4'}
-            parentFu={() => btnStartFu()}
-          />
-          <CatVideo
-            isShow={tieVideoSrc === 'tie2'}
-            src={baseURL + 'base/tie2.mp4'}
-            parentFu={() => btnStartFu()}
-          />
-        </>
-      ) : null}
 
       {/* 最后一个过长动画 */}
       {imgNow ? (

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import Hot1 from './Hot1'
 import Hot2 from './Hot2'
@@ -11,7 +11,11 @@ import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMi
 //   console.log(`ath: ${ath}, atv: ${atv}`)
 // }
 
-function PanoVideo() {
+type Propr = {
+  lodingOk: () => void
+}
+
+function PanoVideo({ lodingOk }: Propr) {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
   const [activeIdx, setActiveIdx] = useState(-1)
@@ -22,6 +26,20 @@ function PanoVideo() {
     else return []
   }, [ind])
 
+  useEffect(() => {
+    const readyEvent = videoSceneModel.event.on('Event.videoScene.ready', () => {
+      console.log('加载完成')
+      setTimeout(() => {
+        lodingOk()
+      }, 200)
+    })
+
+    return () => {
+      // 记得清理监听事件
+      readyEvent()
+    }
+  }, [lodingOk])
+
   return (
     <>
       <KrpanoMiddleware ref={middlewareIns}>

Code/src/pages/A2visit/index.tsx

@@ -33,10 +33,13 @@ function A2visit() {
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(3)
 
+  const [lastNum, setLastNum] = useState(90)
+
   return (
     <div className={styles.A2visit}>
       {/* 初始静态图 */}
       <BaseImg
+        lastNum={lastNum}
         isShow={cutVideoShow}
         iconSrc={`${baseURL}visit/mulu.png`}
         parentFu={() => btnStart()}
@@ -58,7 +61,7 @@ function A2visit() {
       {/* 全景视频 */}
       {imgNow ? (
         <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
-          <PanoVideo />
+          <PanoVideo lodingOk={() => setLastNum(100)} />
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />