feat:新增客户查看图片页面，新增反馈表查看上传图片

src/components/ImageUploader.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Upload, List, Button, Space,Popconfirm } from "antd";
+import { Upload, List, Button, Popconfirm , Col , Row } from "antd";
 import { UploadOutlined, FileTextOutlined,DeleteOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
@@ -21,9 +21,9 @@ const simple_encrypt = text => {
 };
 
 // 获取图片列表
-const getImageList = async key => {
+const getImageList = async (key,type='111') => {
 	try {
-		const { errcode, result } = await fetchJSON(`${HT3_HOST}/oss/list_unique_key?key=${key}`);
+		const { errcode, result } = await fetchJSON(`${HT3_HOST}/oss/list_unique_key?key=${key}&type=${type}`);
 		if (errcode === 0) {
 			return result
 				.map(file => ({
@@ -220,12 +220,15 @@ export const ImageUploader = props => {
 
 export const ImageViewer = props => {
 	const [fileList, setFileList] = useState([]);
-	const key = simple_encrypt(props.osskey);
+	const key = props.osskey;
+	const type = props.type || '111';
+
 
 	// 组件挂载时获取图片列表
 	useEffect(() => {
 		const loadImages = async () => {
-			const images = await getImageList(key);
+			const images = await getImageList(key,type);
+
 			setFileList(images);
 			if (props.onChange) {
 				//作用是回调函数，给外面的组件传递数据
@@ -241,20 +244,24 @@ export const ImageViewer = props => {
 	return (
 		<>
 			<Image.PreviewGroup>
-				<Space>
+				<Row gutter={[20, 20]}>
 				{fileList &&
 					fileList.map(item => {
-							return item.key.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? (
-								<Image key={item.encrypt_key} width={200} src={item.url} />
+						return (
+							<Col key={item.encrypt_key}>
+								{item.key.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? (
+										<Image width={200} src={item.url} />
 								) : (
-								<a key={item.encrypt_key} href={item.url} download>
-									<Button type="primary" icon={<FileTextOutlined />} size="large" title={item.key.replace(/^.*[\\/]/, '')}>
+									<a href={item.url} download>
+										<Button type="primary" icon={<FileTextOutlined />} size="large" title={item.key.replace(/^.*[\\\/]/, '')}>
 											...{item.key.slice(-10)}
 										</Button>
 									</a>
+								)}
+							</Col>
 						);
 					})}
-				</Space>
+			</Row>
 			</Image.PreviewGroup>
 		</>
 	);

src/main.jsx

@@ -46,6 +46,7 @@ import ProductsManage from '@/views/products/Manage';
 import ProductsDetail from '@/views/products/Detail';
 import ProductsAudit from '@/views/products/Audit';
 import ImageViewer from '@/views/ImageViewer';
+import CustomerImageViewer from '@/views/CustomerImageViewer';
 import PickYear from './views/products/PickYear'
 
 import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA,PERM_TRAIN_TICKET, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT } from '@/config'
@@ -107,6 +108,7 @@ const initRouter = async () => {
         { path: '/login', element: <Login /> },
         { path: '/logout', element: <Logout /> },
         { path: '/image-viewer/:GRI_SN/:GRI_No', element: <ImageViewer /> },
+        { path: '/customer-image/:key', element: <CustomerImageViewer /> },
       ]
     }
   ])

src/views/CustomerImageViewer.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Card, Typography, Space, Alert } from 'antd';
+import { useParams } from 'react-router-dom';
+import {ImageViewer} from '@/components/ImageUploader';
+
+
+const { Title, Text } = Typography;
+
+const CustomerImageViewer = () => {
+
+    const [ossKey, setOssKey] = useState('');
+    const [showUploader, setShowUploader] = useState(false);
+    const { key } = useParams();
+
+    useEffect(() => {
+        console.log(key);
+        // const key = `temp/tour-guide/2025-6/31278`;
+        setOssKey(key);
+        setShowUploader(true);
+    }, []);
+
+    return (
+        <div>
+            <Alert
+                message="信息提示"
+                description="您可以在此页面查看与旅行相关的所有图片，支持点击放大等操作。"
+                type="info"
+                showIcon
+            />
+            <br/>
+
+            {showUploader ? (
+                <div>
+                    <ImageViewer osskey={ossKey} type='222' />
+                </div>
+            ) : (
+                <div>
+                    <Text style={{ display: 'block', color: '#874d00', fontSize: '16px' }}>
+                        无法提取客户信息
+                    </Text>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CustomerImageViewer;

src/views/feedback/CustomerDetail.jsx

@@ -6,7 +6,7 @@ import * as config from '@/config';
 import { getFeedbackDetail, getCustomerFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
 import BackBtn from '@/components/BackBtn';
 import { usingStorage } from '@/hooks/usingStorage';
-
+import {ImageUploader} from '@/components/ImageUploader';
 const { Title, Text, Paragraph } = Typography;
 
 function Detail() {
@@ -21,6 +21,11 @@ function Detail() {
   const [feedbackReview, setFeedbackReview] = useState({});
   const [feedbackImages, setFeedbackImages] = useState([]);
   const [feedbackInfo, setFeedbackInfo] = useState({});
+  const [ossKey, setOssKey] = useState('');
+  useEffect(() => {
+        const key = `temp/tour-guide/2025-6/31278`;
+        setOssKey(key);
+    }, []);
 
   useEffect(() => {
     // console.info('Detail.useEffect: ' + GRI_SN);
@@ -173,12 +178,9 @@ function Detail() {
                   listType='picture-card'
                   onChange={handleChange}
                   onRemove={handRemove}>
-                  <div>
-                    <PlusOutlined />
-                    <div style={{ marginTop: 8 }}>Upload photos</div>
-                  </div>
                 </Upload>
               </Form.Item>
+              <ImageUploader osskey={ossKey} style={{margin: '16px'}}/>
               <Form.Item
                 name='info_content'
                 rules={[

src/views/feedback/Detail.jsx

@@ -6,6 +6,7 @@ import * as config from "@/config";
 import { getFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
 import BackBtn from "@/components/BackBtn";
 import { usingStorage } from "@/hooks/usingStorage";
+import {ImageUploader} from '@/components/ImageUploader';
 const { Title, Text, Paragraph } = Typography;
 
 function Detail() {
@@ -20,6 +21,11 @@ function Detail() {
   const [feedbackReview, setFeedbackReview] = useState({});
   const [feedbackImages, setFeedbackImages] = useState([]);
   const [feedbackInfo, setFeedbackInfo] = useState({});
+  const [ossKey, setOssKey] = useState('');
+  useEffect(() => {
+        const key = `temp/tour-guide/2025-6/31278`;
+        setOssKey(key);
+    }, []);
 
 	useEffect(() => {
 		// console.info("Detail.useEffect: " + GRI_SN);
@@ -171,12 +177,9 @@ function Detail() {
 									listType="picture-card"
 									onChange={handleChange}
 									onRemove={handRemove}>
-									<div>
-										<PlusOutlined />
-										<div style={{ marginTop: 8 }}>Upload photos</div>
-									</div>
 								</Upload>
 							</Form.Item>
+							<ImageUploader osskey={ossKey} />
 							<Form.Item
 								name="info_content"
 								rules={[