|
|
@@ -0,0 +1,118 @@
|
|
|
+/* eslint-disable jsx-a11y/iframe-has-title */
|
|
|
+import { RootState } from '@/store';
|
|
|
+import { useEffect, useRef, useState } from 'react';
|
|
|
+import { useDispatch, useSelector } from 'react-redux';
|
|
|
+import musicImg from '@/assets/img/music.png'
|
|
|
+import musicImgAc from '@/assets/img/musicAc.png'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import { baseURL } from '@/utils/http';
|
|
|
+import { useLocation } from 'react-router-dom';
|
|
|
+import { getModelInfo } from '@/store/action/home';
|
|
|
+
|
|
|
+export default function ModelM() {
|
|
|
+ const location = useLocation()
|
|
|
+
|
|
|
+ const dispatch = useDispatch()
|
|
|
+
|
|
|
+
|
|
|
+ // 发送请求获取信息，存到仓库
|
|
|
+ useEffect(() => {
|
|
|
+ const arr = location.search.split('=')
|
|
|
+ const id = arr[1]
|
|
|
+ dispatch(getModelInfo(id))
|
|
|
+ }, [dispatch, location.search])
|
|
|
+
|
|
|
+ // 从仓库获取信息
|
|
|
+ const info = useSelector((state: RootState) => state.homeStore.qrModel)
|
|
|
+
|
|
|
+
|
|
|
+ // 控制模型放大缩小和复位
|
|
|
+ const ifrBoxRef = useRef<any>(null)
|
|
|
+ const modelChangeFu = (val: number) => {
|
|
|
+ const dom = ifrBoxRef.current
|
|
|
+
|
|
|
+ if (dom && dom.contentWindow && dom.contentWindow.webview) {
|
|
|
+ if (val === 1) dom.contentWindow.webview.zoomIn() // 放大
|
|
|
+ else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
|
|
|
+ else dom.contentWindow.webview.resetView() // 复位
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 控制音乐播放暂停
|
|
|
+ const musicRef = useRef<HTMLAudioElement>(null)
|
|
|
+
|
|
|
+ const [music, setMusic] = useState(false)
|
|
|
+ const musicPlayFu = (flag: boolean) => {
|
|
|
+ const dom = musicRef.current
|
|
|
+ if (dom) {
|
|
|
+ if (flag) {
|
|
|
+
|
|
|
+ // 打开音乐
|
|
|
+ setMusic(true)
|
|
|
+ dom.play()
|
|
|
+ dom.addEventListener('ended', function () {
|
|
|
+ setMusic(false)
|
|
|
+ }, false);
|
|
|
+ } else {
|
|
|
+ // 关闭音乐
|
|
|
+ setMusic(false)
|
|
|
+ dom.pause()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.ModelM}>
|
|
|
+ {/* 音频 */}
|
|
|
+ {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
|
|
|
+ {/* 模型盒子 */}
|
|
|
+ <div className='ifrBox'>
|
|
|
+ {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ {/* 名字 */}
|
|
|
+ <div className='model_title'>{info.name}</div>
|
|
|
+
|
|
|
+ {/* 下边介绍 */}
|
|
|
+ <div className='rightTxt'>
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
|
|
|
+ }
|
|
|
+
|
|
|
+ <div className='model_floo'>
|
|
|
+ <div className='model_sortRow'>类别：
|
|
|
+ <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
|
|
|
+ </div>
|
|
|
+ <div className='model_ageRow'>年代：
|
|
|
+ <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ <div className='model_size'>尺寸：{info.sizeLength ? info.sizeLength : '（空）'}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 底部按钮 */}
|
|
|
+ <div className='flootBtnBox'>
|
|
|
+ <div className='flootRow flootRow1' onClick={() => modelChangeFu(1)}></div>
|
|
|
+ <div className='flootRow flootRow2' onClick={() => modelChangeFu(2)}></div>
|
|
|
+ {info.audioPath ? (<div className='flootRow flootRowM'>
|
|
|
+ {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
|
|
|
+ (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
|
|
|
+ </div>) : null}
|
|
|
+
|
|
|
+ <div className='flootRow flootRow4' onClick={() => modelChangeFu(3)}></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
