apng需要转blob。每次打开才能重新渲染

key.txt

@@ -11,4 +11,4 @@ MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCcgGDeaa5u1lXqGNPJusLnUekZ4PZJ
 
 测试电话号码加密之后
 
-http://localhost:3000/#/?k=gjdhvr-test&n=RvBxzPLJbfUjUERSTOm91vQf2jLQdpOKMFz2Ah2D/hvVpXVmzsZb2Yc7gsX6pgAen3HmzJWinHKRYGASNXp1EvapV+VOJXsk1H1jeWBnqlqxg1h6y45ON50EoEKVdJ7mBe3w7DlxR9LuAzu8Gw6I9Jn/Be9TWZpjuHJPTv+OtomF3dhDCn3c0cHRcuq6+jcMLgONpB8Sw/2fHEbyQNFQKM9n9hQ8ZvXXKRIo2L7J0elLf7Ipyl2PtveMch2Foe4mroxLQu6eV3L6FVHpW54Yz6NSrvOW/iBBYiEcIlZNLCzJgB4zOAMUZyXbQMTD18GJlvvHRyxLOiFXq03iC0Y2JQ==&t=e3705e53064c4f489c5ed09e9d4086ca
+http://192.168.20.55:3000/#/?k=gjdhvr-test&n=RvBxzPLJbfUjUERSTOm91vQf2jLQdpOKMFz2Ah2D/hvVpXVmzsZb2Yc7gsX6pgAen3HmzJWinHKRYGASNXp1EvapV+VOJXsk1H1jeWBnqlqxg1h6y45ON50EoEKVdJ7mBe3w7DlxR9LuAzu8Gw6I9Jn/Be9TWZpjuHJPTv+OtomF3dhDCn3c0cHRcuq6+jcMLgONpB8Sw/2fHEbyQNFQKM9n9hQ8ZvXXKRIo2L7J0elLf7Ipyl2PtveMch2Foe4mroxLQu6eV3L6FVHpW54Yz6NSrvOW/iBBYiEcIlZNLCzJgB4zOAMUZyXbQMTD18GJlvvHRyxLOiFXq03iC0Y2JQ==&t=e3705e53064c4f489c5ed09e9d4086ca

public/myData/egg.js

@@ -2,6 +2,8 @@
 const publicKeyTemp =
   'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDOkm4dGsnfw6uOfwUkIkwagf13rqaXkOI3xmmgFwHVvJDZAHkCpF3yk1a9Zy19afoQGas3+rYX4lGVYO0maCxcZ4HyqzLLbjnEq7GJKsBUHC4KVeBqYavhpunIMiOUOCmuEROFd/4PPe6eg/AtH2Ipb3RFmBBAoVWCQEFcbYJjVQIDAQAB'
 // 接口前缀（经过我们后端中转一次，避免跨域问题）
-const httpBaseUrl = 'https://jnqg.test.zhzg.vip/API-ENTERPRISE-OPENAPI/'
+// const httpBaseUrl = 'https://jnqg.test.zhzg.vip/API-ENTERPRISE-OPENAPI/'
+// const httpBaseUrl = 'http://192.168.20.61:8106/api/'
+const httpBaseUrl = 'https://sit-zonggonghui.4dage.com/api/'
 // 子页面地址前缀
 const kkUrl = 'https://www.4dkankan.com/spg.html'

public/tttt.html

@@ -37,7 +37,7 @@
     const btnDom = document.querySelector('#btn')
     btnDom.onclick = () => {
       // 传sort
-      window.parent.FaStrikeEggFu(5)
+      window.parent.FaStrikeEggFu(8)
     }
 
     const hiddenDom = document.querySelector('#hidden')

src/pages/A2danList/index.tsx

@@ -68,8 +68,13 @@ function A2danList({ closeFu }: Props) {
         ))}
       </div>
 
-      <div className='A2Dnum'>您已收集 {listRes.length} 个彩蛋</div>
-      <div className='A2Dtxt'>探索展区，{list.length}个彩蛋拱您解锁!</div>
+      <div className='A2Dnum'>
+        您已收集
+        {listRes.length === list.length ? '完全部彩蛋' : ` ${listRes.length} 个彩蛋`}
+      </div>
+      <div className='A2Dtxt' style={{ opacity: listRes.length === list.length ? 0 : 1 }}>
+        探索展区，{list.length}个彩蛋供您解锁!
+      </div>
       {/* 关闭按钮 */}
       <div className='A2Dclose' onClick={closeFu}>
         <CloseOutlined rev={undefined} />

src/pages/A2openEgg/index.tsx

@@ -5,6 +5,7 @@ import { CloseOutlined } from '@ant-design/icons'
 import { isMobileFu } from '@/utils/history'
 import { domShowFu } from '@/utils/domShow'
 import ImagePreview, { ImagePreviewRef } from '@/components/ImagePreview'
+import openEggImg from '@/assets/img/openEgg.png'
 
 type Props = {
   closeFu: () => void
@@ -12,22 +13,37 @@ type Props = {
 }
 
 function A2openEgg({ closeFu, url }: Props) {
-  // 先隐藏图片，等图片loding完
-  const [imgShow, setImgShow] = useState(false)
+  // 把砸开彩蛋的图片转成blob url
+  const [apngUrl, setApngUrl] = useState<string | null>(null)
 
-  useEffect(() => {
-    if (imgShow) {
+  const lodingImgFu = useCallback(async () => {
+    domShowFu('#AsyncSpinLoding', true)
+    try {
+      // 注意：这里的路径需要是最终可以被公开访问的路径，或者通过require得到的路径
+      const response = await fetch(openEggImg) // openEggImg 是 import 得到的路径
+      const blob = await response.blob()
+      const blobUrl = URL.createObjectURL(blob)
       domShowFu('#AsyncSpinLoding', false)
+      setApngUrl(blobUrl)
       setTimeout(() => {
         setMoveEnd(true)
-      }, 2200)
-    } else {
-      domShowFu('#AsyncSpinLoding', true)
+      }, 1700)
+    } catch (error) {
+      domShowFu('#AsyncSpinLoding', false)
+      console.error('Failed to fetch APNG:', error)
     }
-  }, [imgShow])
+  }, [])
+
+  useEffect(() => {
+    lodingImgFu()
+  }, [lodingImgFu])
 
   const [moveEnd, setMoveEnd] = useState(false)
 
+  useEffect(() => {
+    if (moveEnd) URL.revokeObjectURL(apngUrl!)
+  }, [apngUrl, moveEnd])
+
   const imagePreviewRef = useRef<ImagePreviewRef>(null)
 
   // 查看图片
@@ -49,19 +65,14 @@ function A2openEgg({ closeFu, url }: Props) {
       {isMobileFu() ? null : <ImagePreview ref={imagePreviewRef} />}
 
       <div className='A2Omain'>
-        {/* 先进行一段动画，然后显示图片。待完善 */}
-        {moveEnd ? null : (
+        {/* 先进行一段动画，然后显示图片 */}
+        {moveEnd && apngUrl ? null : (
           <div className='A2OimgMove'>
-            <img
-              style={{ opacity: imgShow ? 1 : 0 }}
-              onLoad={() => setImgShow(true)}
-              src={require('@/assets/img/openEgg.png')}
-              alt=''
-            />
+            <img style={{ opacity: apngUrl ? 1 : 0 }} src={apngUrl!} alt='' />
           </div>
         )}
 
-        {imgShow ? (
+        {apngUrl ? (
           <div className='A2OimgShow' style={{ opacity: moveEnd ? 1 : 0 }}>
             <Image
               onClick={lookImgFu}

src/pages/A2scene/index.module.scss

@@ -131,6 +131,7 @@
         height: 60%;
       }
       .openDan1 {
+        padding-top: 4px;
         font-size: 12px;
         writing-mode: vertical-rl;
         text-orientation: upright;

src/store/action/A1list copy.ts

@@ -0,0 +1,43 @@
+/**
+ * 展馆预约记录-列表
+ */
+
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+export const getDanListApi = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const obj = {
+      body: data,
+      url: '/openapi/taskVr/getEggStatusList'
+    }
+
+    const res = await http.post('show/postApi', obj)
+
+    if (res.code === '200') {
+      dispatch({ type: 'A1/getList', payload: res.data.eggStatusList || [] })
+    }
+  }
+}
+
+/**
+ * 检测手机号是否有效
+ */
+export const checkNumAPI = (data: any) => {
+  const obj = {
+    body: data,
+    url: '/openapi/taskVr/checkPhone'
+  }
+  return http.post('show/postApi', obj)
+}
+
+/**
+ * 触发彩蛋
+ */
+export const addDanAPI = (data: any) => {
+  const obj = {
+    body: data,
+    url: '/openapi/taskVr/unlockEgg'
+  }
+  return http.post('show/postApi', obj)
+}

src/store/action/A1list.ts

@@ -7,7 +7,12 @@ import { AppDispatch } from '..'
 
 export const getDanListApi = (data: any): any => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.post('openapi/taskVr/getEggStatusList', data)
+    const obj = {
+      body: data,
+      url: '/openapi/taskVr/getEggStatusList'
+    }
+
+    const res = await http.post('show/postApi', obj)
 
     if (res.code === '200') {
       dispatch({ type: 'A1/getList', payload: res.data.eggStatusList || [] })
@@ -19,12 +24,20 @@ export const getDanListApi = (data: any): any => {
  * 检测手机号是否有效
  */
 export const checkNumAPI = (data: any) => {
-  return http.post('openapi/taskVr/checkPhone', data)
+  const obj = {
+    body: data,
+    url: '/openapi/taskVr/checkPhone'
+  }
+  return http.post('show/postApi', obj)
 }
 
 /**
  * 触发彩蛋
  */
 export const addDanAPI = (data: any) => {
-  return http.post('openapi/taskVr/unlockEgg', data)
+  const obj = {
+    body: data,
+    url: '/openapi/taskVr/unlockEgg'
+  }
+  return http.post('show/postApi', obj)
 }

src/utils/http.ts

@@ -49,13 +49,12 @@ http.interceptors.request.use(
     // 请求时间
     config.headers.ttsxreqtime = ttsxreqtime
     // 请求签名
-    const canJson = JSON.stringify(config.data || '')
+
+    const canJson = JSON.stringify(config.data.body || '')
     const ttsxsignTemp = `${canJson}|${ttsxsysid}|${ttsxreqid}|${ttsxreqtime}`
 
     const ttsxsign = signData(ttsxsignTemp, mySkey)
 
-    // console.log('---', ttsxsignTemp, ttsxsign)
-
     config.headers.ttsxsign = ttsxsign
 
     return config