From a6cde1f8fb11697ec27e762e9b37f0736eb53cff Mon Sep 17 00:00:00 2001 From: ybc <2483488988@qq.com> Date: Fri, 29 Aug 2025 09:49:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=AE=A2=E6=88=B7?= =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=9B=BE=E7=89=87=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8F=8D=E9=A6=88=E8=A1=A8=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ImageUploader.jsx | 45 ++++++++++++++----------- src/main.jsx | 2 ++ src/views/CustomerImageViewer.jsx | 47 +++++++++++++++++++++++++++ src/views/feedback/CustomerDetail.jsx | 12 ++++--- src/views/feedback/Detail.jsx | 11 ++++--- 5 files changed, 89 insertions(+), 28 deletions(-) create mode 100644 src/views/CustomerImageViewer.jsx diff --git a/src/components/ImageUploader.jsx b/src/components/ImageUploader.jsx index e5e031e..b4f719a 100644 --- a/src/components/ImageUploader.jsx +++ b/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 ( <> - - {fileList && - fileList.map(item => { - return item.key.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? ( - - ) : ( - - - - ); - })} - + + {fileList && + fileList.map(item => { + return ( + + {item.key.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? ( + + ) : ( + + + + )} + + ); + })} + ); diff --git a/src/main.jsx b/src/main.jsx index 0335d5a..d1fee90 100644 --- a/src/main.jsx +++ b/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: }, { path: '/logout', element: }, { path: '/image-viewer/:GRI_SN/:GRI_No', element: }, + { path: '/customer-image/:key', element: }, ] } ]) diff --git a/src/views/CustomerImageViewer.jsx b/src/views/CustomerImageViewer.jsx new file mode 100644 index 0000000..57d42d0 --- /dev/null +++ b/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 ( +
+ +
+ + {showUploader ? ( +
+ +
+ ) : ( +
+ + 无法提取客户信息 + +
+ )} +
+ ); +}; + +export default CustomerImageViewer; diff --git a/src/views/feedback/CustomerDetail.jsx b/src/views/feedback/CustomerDetail.jsx index 7bf8e86..983cc9b 100644 --- a/src/views/feedback/CustomerDetail.jsx +++ b/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}> -
- -
Upload photos
-
+ { + 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}> -
- -
Upload photos
-
+