You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import styles from '@/pages/scene/style/cover.module.less';
|
|
import { Image, Modal, List } from '@arco-design/web-react';
|
|
import scene01 from '@/public/assets/scene01.png';
|
|
// import scene02 from '@/public/assets/scene02.jpg';
|
|
// import scene03 from '@/public/assets/scene03.png';
|
|
import scene04 from '@/public/assets/scene04.png';
|
|
import scene07 from '@/public/assets/scene07.png';
|
|
// import scene08 from '@/public/assets/scene08.png';
|
|
import { getImageUrl } from '@/utils/pubUse';
|
|
|
|
const imageList = [scene01, scene04, scene07];
|
|
|
|
interface CoverProps {
|
|
defaultImage?: string;
|
|
onImageChange?: (image: string) => void;
|
|
}
|
|
|
|
const Cover: React.FC<CoverProps> = ({ defaultImage, onImageChange }) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const [currentImage, setCurrentImage] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (defaultImage) {
|
|
setCurrentImage(getImageUrl(defaultImage));
|
|
}
|
|
else {
|
|
const imageRandom = Math.floor(Math.random() * imageList.length);
|
|
setCurrentImage(imageList[imageRandom].src);
|
|
onImageChange(imageList[imageRandom].src);
|
|
}
|
|
}, [defaultImage]);
|
|
|
|
const handleImageSelect = (imageSrc: string) => {
|
|
setCurrentImage(imageSrc);
|
|
setVisible(false);
|
|
if (onImageChange) {
|
|
onImageChange(imageSrc);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles['cover-container']}>
|
|
<div className={styles['cover-image']}>
|
|
<Image width={200} src={currentImage} preview={false} onClick={() => setVisible(true)}></Image>
|
|
</div>
|
|
<Modal
|
|
style={{ width: '60%' }}
|
|
title="选择封面图"
|
|
visible={visible}
|
|
onOk={() => setVisible(false)}
|
|
onCancel={() => setVisible(false)}
|
|
autoFocus={false}
|
|
focusLock={true}
|
|
>
|
|
<List
|
|
grid={{ gutter: 0, span: 6 }}
|
|
size="small"
|
|
dataSource={imageList}
|
|
render={(item, index) => {
|
|
return (
|
|
<List.Item key={index}>
|
|
<Image width={200} src={item.src} preview={false} onClick={() => {
|
|
handleImageSelect(item.src);
|
|
}}></Image>
|
|
</List.Item>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Cover; |