新增图片预览功能

src/components/ImageUploader.jsx

@@ -82,7 +82,7 @@ const getSignature = async (file, key, onSuccess, onError) => {
 	}
 };
 
-const ImageUploader = props => {
+export const ImageUploader = props => {
 	const [fileList, setFileList] = useState([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [previewOpen, setPreviewOpen] = useState(false);
@@ -188,4 +188,49 @@ const ImageUploader = props => {
 	);
 };
 
+export const ImageViewer = props => {
+	const [fileList, setFileList] = useState([]);
+	const key = simple_encrypt(props.osskey);
+
+	// 组件挂载时获取图片列表
+	useEffect(() => {
+		const loadImages = async () => {
+			const images = await getImageList(key);
+			setFileList(images);
+			if (props.onChange) {
+				//作用是回调函数，给外面的组件传递数据
+				props.onChange(images);
+			}
+		};
+
+		if (key) {
+			loadImages();
+		}
+	}, [key]);
+
+	return (
+		<>
+			<List
+				grid={{
+					gutter: 16,
+					sm: 2,
+					md: 8,
+					lg: 8,
+				}}
+				dataSource={fileList}
+				renderItem={item => {
+					const isImage = /\.(jpg|jpeg|png|gif|bmp|pdf)$/i.test(item.key);
+					if (isImage) {
+						return (
+							<List.Item>
+								<Image key={item.encrypt_key} width={200} src={item.url} />
+							</List.Item>
+						);
+					}
+				}}
+			/>
+		</>
+	);
+};
+
 export default ImageUploader;

src/views/trainticket/plan.jsx

@@ -10,7 +10,7 @@ import { usingStorage } from "@/hooks/usingStorage";
 import BackBtn from "@/components/BackBtn";
 import { station_names } from "@/views/trainticket/station_name";
 import { Upload } from "antd";
-import ImageUploader from "@/components/ImageUploader";
+import { ImageUploader, ImageViewer } from "@/components/ImageUploader";
 
 const TrainticketPlan = props => {
 	const { coli_sn, gri_sn } = useParams();
@@ -526,6 +526,12 @@ const TrainticketPlan = props => {
 					</Button>
 				</Col>
 			</Row>
+			<Row>
+				<Divider orientation="center">客人护照</Divider>
+				<Col md={24} lg={24} xxl={24}>
+					<ImageViewer osskey={planDetail ? `ghh/${planDetail[0].GRI_SN}-${planDetail[0].GRI_No}/passport_image` : ""} />
+				</Col>
+			</Row>
 
 			<Row>
 				<Divider orientation="center">{planDetail ? `${planDetail[0].GRI_No} - ${planDetail[0].WL}` : ""}</Divider>