|
@@ -1,9 +1,11 @@
|
|
|
-import React, { useEffect, useRef } from 'react'
|
|
|
+import React, { useEffect, useRef, useState } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
import BtnRight from '@/components/BtnRight'
|
|
|
import { GoodsType } from '@/types'
|
|
|
-import { baseURL } from '@/utils/http'
|
|
|
+import { baseURL, isPc } from '@/utils/http'
|
|
|
import classNames from 'classnames'
|
|
|
+import { ImageViewer } from 'antd-mobile'
|
|
|
+import { Image } from 'antd'
|
|
|
|
|
|
type Props = {
|
|
|
closeFu: () => void
|
|
@@ -21,12 +23,37 @@ function HotInfo({ closeFu, info }: Props) {
|
|
|
}
|
|
|
}, [info.type])
|
|
|
|
|
|
+ const [imgLook, setImgLook] = useState('')
|
|
|
+
|
|
|
return (
|
|
|
<div id='HotOpCss' className={styles.HotInfo}>
|
|
|
+ {/* 移动端查看图片 */}
|
|
|
+ {isPc ? null : (
|
|
|
+ <ImageViewer
|
|
|
+ getContainer={document.querySelector('body')}
|
|
|
+ image={imgLook}
|
|
|
+ visible={!!imgLook}
|
|
|
+ onClose={() => setImgLook('')}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* pc端查看图片 */}
|
|
|
+ {isPc && imgLook ? (
|
|
|
+ <Image
|
|
|
+ preview={{
|
|
|
+ visible: !!imgLook,
|
|
|
+ src: imgLook,
|
|
|
+ onVisibleChange: () => setImgLook('')
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+
|
|
|
{/* 左边主体 */}
|
|
|
<div className='S3Ileft'>
|
|
|
{info.type === 'img' ? (
|
|
|
- <img src={baseURL + info.inSrc} alt='' />
|
|
|
+ <div className='S3imgBox' onClick={() => setImgLook(baseURL + info.inSrc)}>
|
|
|
+ <img src={baseURL + info.inSrc} alt='' />
|
|
|
+ </div>
|
|
|
) : info.type === 'video' ? (
|
|
|
<video
|
|
|
ref={videoRef}
|