Merge branch 'devbra' into dev

.env.dev

@@ -10,7 +10,7 @@ VITE_USERID=80d3365e-0597-4988-979e-18ef1c3ec671
 # VITE_USERID=e3e40f95-7a3f-4b53-a1a0-51dd4e881d74   
 # VITE_USERID=5cc90b84-905e-4027-9f6c-ab47e9c320a1
 # VITE_CURRENT_THEME=fzkj
-VITE_CURRENT_THEME=mzw
+# VITE_CURRENT_THEME=mzw
 # VITE_HOST=121.36.71.250:58038
 # VITE_BASE_URL=http://${VITE_HOST}
 # VITE_COPY_BASE_URL=${VITE_BASE_URL}

src/components/BelongPeople/BelongPeople.tsx

@@ -68,7 +68,7 @@ type propsInfo = {
     showNow?: boolean
 };
 export default function BelongPeople(props: propsInfo) {
-    const showNow = props.showNow == false?false:true
+    const showNow = props.showNow == false ? false : true
     // const [propsShow,setPropsShow] = useState(props.belongPeopleInfo.authorId?true)
     // const nav = useNavigate();
     // const pathParams = useParams();
@@ -418,8 +418,8 @@ export default function BelongPeople(props: propsInfo) {
         });
         // console.log('嘻嘻嘻',props.showNow);
         // console.log(showNow);
-        
+
-        
+
     }, [])
 
     return (
@@ -533,7 +533,7 @@ export default function BelongPeople(props: propsInfo) {
                                         </div> */}
                                     </div>
                                     <div style={{
-                                        display:showNow? 'unset' : 'none',
+                                        display: showNow ? 'unset' : 'none',
                                     }}>
                                         <div className='showInfo' style={{ display: props.isShow ? 'block' : 'none' }} >
                                             {authorName ? (<>
@@ -969,6 +969,7 @@ export default function BelongPeople(props: propsInfo) {
 
                 {/* 选择创建/编辑/查看所属者弹框  */}
                 <Modal
+                    centered
                     destroyOnClose
                     okText="确认"
                     // cancelText="取消"

src/components/OrderDetailModal/components/File/File.tsx

@@ -149,7 +149,7 @@ export default function File(props: any) {
             const res: any = await getFileTypeByIds({
                 ids: ids
             })
-            console.log(res);
+            // console.log(res);
             const newUpFile = res.map((item: any) => {
                 return {
                     uid: item.fileId,
@@ -443,7 +443,7 @@ export default function File(props: any) {
 
                         onFinish={(value) => {
 
-                            console.log(value);
+                            // console.log(value);
                             // if (value.upFile && Array.isArray(value.upFile.fileList)) {
                             //     const uids = value.upFile.fileList.map((file: any) => file.uid);
                             //     const uidString = uids.join(',');

src/request/api.ts

@@ -163,4 +163,79 @@ export const uploadMaterial = (appOrderId:any,params:any) => aiShopRequest.post(
 // 第四步 提交审核
 export const submitapp = (appOrderId:any) => aiShopRequest.post(`/aishop/api/apporder/update/sub-check/${appOrderId}`)
 
-// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+
+//商标申请接口 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+// 获取展示价格列表
+export const trademarkGoodsList = () => aiShopRequest.get(`/aishop/api/trademark/money-list`)
+// 商标申请数据分页列表
+export const trademarkList = (params:any) => aiShopRequest.get(`/aishop/api/trademark/listpage`, { params })
+// 根据id获取商标详情
+export const trademarkDetail = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/get/${trademarkId}`)
+// 智能申请注册 
+// 第一步 填写基本信息(如果传递trademarkId则为修改，否则为新增)
+export const trademarkBaseInfo = (params:any) => aiShopRequest.post(`/aishop/api/trademark/save1`,params)
+// ai生成商标图片
+export const aiGenerateImage = (params:any) => aiShopRequest.get(`/aishop/api/trademark/text-image`,{params})
+// 下载授权书模板
+export const downloadAuthBook = () => aiShopRequest.get(`/aishop/api/assets/template/%E6%8E%88%E6%9D%83%E4%B9%A6%E6%A8%A1%E6%9D%BF.zip`)
+// 第二步相关
+// 获取选择商标类型
+// export const trademarkTypeList = () => aiShopRequest.get(`/aishop/api/trademarktype/ztree/0`)
+export const trademarkTypeList = (params:any) => aiShopRequest.get(`/aishop/api/trademarktype/list-ztree`,{params})
+// 商标类型查询
+export const trademarkTypeSearch = (params:any) => aiShopRequest.get(`/aishop/api/trademarktype/list-ztree-query`,{params})
+// 我的方案列表
+export const trademarkSchemeList = () => aiShopRequest.get(`/aishop/api/trademark-types/list-repository`)
+// 保存我得方案
+export const saveTrademarkScheme = (params:any) => aiShopRequest.post(`/aishop/api/trademark-types/save-repository`,params)
+//删除方案
+export const deleteTrademarkScheme = (typesId:any) => aiShopRequest.delete(`/aishop/api/trademark-types/remove-repository/${typesId}`)
+
+// 第二步选择商标类别提交
+export const uptrademarkList = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save2/${trademarkId}`,params)
+
+
+
+
+
+// 第三步
+// 新增商标申请人信息
+export const addTrademarkApplicant = (params:any) => aiShopRequest.post(`/aishop/api/trademarkuser/save`,params)
+// 商标申请人分页列表
+export const trademarkApplicantList = (params:any) => aiShopRequest.get(`/aishop/api/trademarkuser/listpage`,{params})
+// 删除商标申请人
+export const deleteTrademarkApplicant = (trademarkUserId:any) => aiShopRequest.delete(`/aishop/api/trademarkuser/remove/${trademarkUserId}`)
+// 获取申请人详情
+export const trademarkApplicantDetails = (trademarkUserId:any) => aiShopRequest.get(`/aishop/api/trademarkuser/get/${trademarkUserId}`)
+// 修改申请人信息
+export const updateTrademarkApplicant = (trademarkUserId:any,params:any) => aiShopRequest.put(`/aishop/api/trademarkuser/update/${trademarkUserId}`,params)
+// 提交申请人
+export const submitTrademarkApplicant = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save3/${trademarkId}`,params)
+
+// 第四步 
+// 获取支付订单
+export const getOrder = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/get-pay-data/${trademarkId}`)
+
+// 订单支付
+export const orderPay = (trademarkId:any) => aiShopRequest.post(`/aishop/api/trademark/save4/${trademarkId}`)
+
+
+
+// 第五步
+// 生成委托书
+export const generateDepute = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/create-xieyi/SHOP06/${trademarkId}`)
+// 上传委托书
+export const uploadDepute = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save5/${trademarkId}`,params)
+
+
+// 第六步上传
+export const uploadSix = (trademarkId:any) => aiShopRequest.post(`/aishop/api/trademark/save6/${trademarkId}`)
+
+//专家辅助注册/至尊无忧注册
+export const expertRegister = (params:any) => aiShopRequest.post(`/aishop/api/trademark/save1L`,params)
+export const supplementTrademarkData = (params:any) => aiShopRequest.post(`/aishop/api/correction/save-trademark`, params)
+// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+

src/request/request.ts

@@ -67,7 +67,7 @@ request.interceptors.response.use(
 // 买卖功能(交易中心/APP电子软著)----------------------------------------------------------------------------
 const aiShopRequest = axios.create({
     baseURL: aiShopBaseUrl,
-    timeout: 5000,
+    timeout: 30000,
 });
 aiShopRequest.interceptors.request.use(
     (config) => {
@@ -196,10 +196,17 @@ export const downloadInvoice = (id: string) => {
 export const showImage = (fileId: string, isDownload?: boolean) => {
     return `${aiShopBaseUrl}/aishop/route/file/download/${isDownload == false}/${fileId}`  
 }
+
+//下载授权声明书模板 (商标用)
+export const downloadAuthBookUrl = () => {
+    return `${aiShopBaseUrl}/aishop/assets/template/%E6%8E%88%E6%9D%83%E4%B9%A6%E6%A8%A1%E6%9D%BF.zip`
+}
+
 // 上传图片 买卖功能
 export const uploadImageUrl = () => {
     return `${aiShopBaseUrl}/aishop/api/file/v2/upload-image`
 }
+
 // // 下载 预览文件 买卖功能
 // export const downloadUrl = (fileId: string, isDownload?: boolean) => {
 //     return `${aiShopBaseUrl}/aishop/route/file/v2/download/${isDownload == false}/${fileId}`
@@ -210,4 +217,16 @@ export const uploadImageUrl = () => {
 export const uploadFileUrl = () => {
     return `${aiShopBaseUrl}/aishop/api/file/v2/upload-file`
 }
-export { request,aiShopRequest,phoneRequest,newRequest};
+export const uploadDeputeFileUrl  = (type:string) => {
+    return `${aiShopBaseUrl}/aishop/api/trademark/upload-depute-file?type=${type}`
+}
+// 上传图片 加条件 限制大小等 name="file"
+export const uploadImageAddUrl = () => {
+     return `${aiShopBaseUrl}/aishop/api/trademark/upload-file`
+}
+// 上传委托书
+export const uploadDeputeUrl = () => {
+    return `${aiShopBaseUrl}/aishop/api/trademark/upload-weituo-file `
+}
+
+export { request,aiShopRequest,phoneRequest,newRequest};

src/route/AppElectron/AppEdit.tsx

@@ -115,7 +115,7 @@ export default function AppEdit() {
     // }
 
     const [loading, setLoading] = useState(false);
-    const [editProcess, setEditProcess] = useState(1);
+    const [editProcess, setEditProcess] = useState(0);
     // 企业/机构认证
     const [companyInfo, setCompanyInfo] = useState<any>({
         companyName: '', // 企业名称

src/route/AppElectron/AppElectron.tsx

@@ -180,7 +180,7 @@ export default function AppElectron() {
                         // background: 'red',
                         color: '#007FFF',
                         position: 'relative',
-                        display: record.waitCorrectionCount > 0 && record.appOrderStatus != '5' ? 'unset' : 'none',
+                        display: record.checkStatus == '2' && record.appOrderStatus != '5'? 'unset' : 'none',
 
                     }}
                         onClick={() => {
@@ -192,22 +192,26 @@ export default function AppElectron() {
                     >
                         资料补充
                         <div style={{
-
+                            display: record.waitCorrectionCount > 0 ? 'unset' : 'none',
-                            position: 'absolute',
-                            top: '-10px',
-                            right: '-10px',
-                            // fontSize:'16px',
-                            background: 'red',
-                            color: '#fff',
-                            fontWeight: '700',
-                            width: '20px',
-                            height: '20px',
-                            borderRadius: '50%',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
                         }}>
-                            {record.waitCorrectionCount}
+                            <div style={{
+
+                                position: 'absolute',
+                                top: '-10px',
+                                right: '-10px',
+                                // fontSize:'16px',
+                                background: 'red',
+                                color: '#fff',
+                                fontWeight: '700',
+                                width: '20px',
+                                height: '20px',
+                                borderRadius: '50%',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
+                                {record.waitCorrectionCount}
+                            </div>
                         </div>
                     </div>
                     <div style={{

src/route/AppElectron/app-edit.css

@@ -19,6 +19,7 @@
     display: flex;
     align-items: center;
     /* cursor: pointer; */
+    /* background-color: pink; */
 }
 
 .editProcessNum {

src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx

@@ -347,9 +347,10 @@ export default function EditAppFiles(props: any) {
                                                     action={uploadFileUrl()}
                                                     fileList={upCodeArray}
                                                     onChange={(info) => {
-                                                        const { fileList } = info;
+
-                                                        setUpCodeArray(fileList);
                                                         if (info.file.status === 'uploading') {
+                                                            const { fileList } = info;
+                                                            setUpCodeArray(fileList);
                                                             return;
                                                         }
                                                         if (info.file.status === 'done') {
@@ -443,9 +444,10 @@ export default function EditAppFiles(props: any) {
                                                     action={uploadFileUrl()}
                                                     fileList={upSoftArray}
                                                     onChange={(info) => {
-                                                        const { fileList } = info;
+
-                                                        setUpSoftArray(fileList);
                                                         if (info.file.status === 'uploading') {
+                                                            const { fileList } = info;
+                                                            setUpSoftArray(fileList);
                                                             return;
                                                         }
                                                         if (info.file.status === 'done') {

src/route/AppElectron/components/File/File.tsx

@@ -8,11 +8,43 @@ import useMessage from "antd/es/message/useMessage";
 // import './File.css'
 const { TextArea } = Input;
 export default function File(props: any) {
+    const [disabled, setDisabled] = useState(false) // 是否禁用
+    // 获取上传过的文件类型
+    const getUpFileTypeByIdsArray = async (ids: string) => {
+        try {
+            const res: any = await getFileTypeByIds({
+                ids: ids
+            })
+            // console.log(res);
+            const newUpFile = res.map((item: any) => {
+                return {
+                    uid: item.fileId,
+                    name: item.fileName,
+                    status: 'done',
+                    url: showImage(item.fileId, false)
+                }
+            })
+            // console.log(newUpFile, 'newUpFile');
+            setUpFileArray(newUpFile)
+
+        } catch (error: any) {
+
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        }
+    }
     const [upFileArray, setUpFileArray] = useState<any>([]) // 上传的文件数组
     // 自定义验证函数
     const validateContentOrFile = (_rule: any, _value: any, callback: (error?: string) => void, form: any) => {
         const { upCorrectionRemark, upFile } = form.getFieldsValue();
-        if (upCorrectionRemark || (upFile && Array.isArray(upFile.fileList) && upFile.fileList.length > 0)) {
+        if (upCorrectionRemark || upFile) {
             callback();
         } else {
             callback('内容和附件至少需要填写或上传一项');
@@ -28,11 +60,12 @@ export default function File(props: any) {
                 correctionFiles: params.correctionFiles,
                 correctionRemark: params.correctionRemark,
             })
-            if (props.user == 'sell') {
+            // if (props.user == 'sell') {
-                getSellSupplementList()
+            //     getSellSupplementList()
-            } else if (props.user == 'buy') {
+            // } else if (props.user == 'buy') {
-                getBuySupplementList()
+            //     getBuySupplementList()
-            }
+            // }
+            getBuySupplementList()
             props.upData()
             messageApi.open({
                 type: 'success',
@@ -149,6 +182,41 @@ export default function File(props: any) {
             // console.log(res);
             setDetailData(res)
             await getFileTypeByIdsArray(res.correctionFiles)
+            const userId = res.buyId;
+            if (userId) {
+                setDisabled(true)
+                const newData: any = await supplementDetail(userId)
+                // console.log('以补充材料', newData);
+                form.setFieldsValue({
+                    upCorrectionRemark: newData.correctionRemark, // 内容
+
+                })
+                if (newData.correctionFiles) {
+                    getUpFileTypeByIdsArray(newData.correctionFiles)
+                    // const newArray:any = getFileTypeByIds({
+                    //     ids: newData.correctionFiles
+                    // })
+                    // console.log(newArray, 'newArray');
+                    // console.log('有补充资料');
+                    // // 循环newArray 形成新
+                    // const newUpFile =  newArray.map((item:any)=>{
+                    //     return {
+                    //         uid: item.fileId,
+                    //         name: item.fileName,
+                    //         status: 'done',
+                    //         url: 'www.baidu.com'
+                    //     }
+                    // })
+                    // console.log(newUpFile, 'newUpFile');
+
+
+                }
+
+
+
+            } else {
+                setDisabled(false)
+            }
 
         } catch (error: any) {
 
@@ -254,7 +322,10 @@ export default function File(props: any) {
                                 setCorrectionId(record.correctionId)
                                 getSupplementDetail(record.correctionId)
                                 setIsModalVisible(true)
-                                // 清空表单
+                             
+                                  // 清空上传的文件数组
+                                setUpFileArray([])
+                                   // 清空表单
                                 form.resetFields();
                                 // setCorrectionType(record.correctionType)
                             }}>查看内容</span>
@@ -372,13 +443,13 @@ export default function File(props: any) {
                             // })
                             // console.log(upFileArray);
                             // 将upFileArray 数组周末和每项的response里的data 里的 fileId 拼接成一个字符串，用逗号隔开
-                            const uids = upFileArray.map((file: any) => file.response.data.fileId).join(',');
+                            // const uids = upFileArray.map((file: any) => file.response.data.fileId).join(',');
                             // console.log('提取的 uid 字符串:', uids);
                             submitData({
-                                correctionFiles: uids,
+                                correctionFiles:value.upFile ? value.upFile : '',
                                 correctionRemark: value.upCorrectionRemark,
                             })
-                            
+
 
                         }}
                         onFinishFailed={() => {
@@ -408,6 +479,7 @@ export default function File(props: any) {
                                     width: 900,
 
                                 }}
+                                    disabled={disabled}
                                     placeholder='请输入需要补充内容'
                                 ></TextArea>
                             </Form.Item>
@@ -436,14 +508,36 @@ export default function File(props: any) {
 
                                     <Upload
                                         name="file"
+                                        disabled={disabled}
                                         action={uploadFileUrl()}
-                                        defaultFileList={upFileArray}
+                                        fileList={upFileArray}
                                         onChange={(info) => {
-                                            setUpFileArray(info.fileList) 
+                                            // setUpFileArray(info.fileList)
                                             // console.log(info.fileList);
-                                            
+                                            const { fileList } = info;
+                                            const newFileArray = fileList.map((file) => {
+                                                if (file.status === 'done' && file.response) {
+                                                    return {
+                                                        uid: file.response.data.fileId,
+                                                        name: file.response.data.fileName,
+                                                        status: 'done',
+                                                        url: showImage(file.response.data.fileId, false)
+                                                    };
+                                                }
+                                                return file;
+                                            });
+                                            setUpFileArray(newFileArray);
+                                            // console.log(newFileArray);
+                                            const uids = newFileArray.map((file: any) => file.uid).join(',');
+                                            // console.log(uids);
+
+                                            //  给form 赋值
+                                            form.setFieldsValue({
+                                                upFile: uids,
+                                            })
+
                                         }}
-                                        
+
                                         headers={{ 'Auth': `Bearer ${token}` }}
 
                                     >
@@ -465,11 +559,17 @@ export default function File(props: any) {
                                 gap: 10,
                                 // marginTop: 20
                             }}>
-                                <Button onClick={() => {
+                                <div style={{
-                                    setIsModalVisible(false)
+                                    display: disabled ? 'none' : 'unset',
-                                    form.resetFields();
+                                }}>
-                                }}>取消</Button>
+                                    <Button onClick={() => {
-                                <Button type="primary" htmlType="submit" >确定</Button>
+                                        setIsModalVisible(false)
+                                        form.resetFields();
+                                    }}>取消</Button>
+                                    <Button type="primary" htmlType="submit" style={{
+                                        marginLeft: 10,
+                                    }} >确定</Button>
+                                </div>
                             </div>
                         </Form.Item>
 

src/route/TrademarkMall/TrademarkAiEdit.tsx

@@ -1,158 +1,336 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import './trademark-edit.css'
 import {
     RightOutlined
 } from '@ant-design/icons';
 import EditOne from './components/EditOne/EditOne';
-import EditTwo from './components/EditTwo/EditTwo';
+import EditTwo from './components/EditTwo/EditTwoNew';
 import EditThree from './components/EditThree/EditThree';
 import EditFour from './components/EditFour/EditFour';
 import EditFive from './components/EditFive/EditFive';
 import EditSix from './components/EditSix/EditSix';
+import { useLocation, useParams } from 'react-router-dom';
+import { trademarkDetail, getOrder } from '../../request/api'
+import {
+    message, Spin
+} from 'antd';
 export default function TrademarkAiEdit() {
+    const [orderList, setOrderList] = useState<any>([])
+    const getOrderList = async () => {
+        try {
+            const res = await getOrder(trademarkId)
+            // console.log('订单详情列表', res);
+            setOrderList(res)
+        } catch (error: any) {
+            setOrderList([])
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        } 
+    }
+    const pathParams = useParams();
+    // const trademarkId = pathParams.trademarkId == 'NEW'?'':pathParams.trademarkId;
+    const [trademarkId, setTrademarkId] = useState(pathParams.trademarkId == 'NEW' ? '' : pathParams.trademarkId)
+
+    const { state } = useLocation()
+    const [messageApi, contextHolder] = message.useMessage();
     const height = window.innerHeight - 180;
-    const [editProcess, setEditProcess] = useState(1);
+    const [editProcess, setEditProcess] = useState(0);
+    const [trademarkMode, setTrademarkMode] = useState(state?.trademarkMode);
+    const [trademarkModeName, setTrademarkModeName] = useState(state?.trademarkModeName);
+    const [trademarkModePrice, setTrademarkModePrice] = useState(0)
+    const [trademarkModeOldPrice, setTrademarkModeOldPrice] = useState(0)
+    // const [trademarkStatus, setTrademarkStatus] = useState('')
+    const [editOneData, setEditOneData] = useState<any>({
+        trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文
+        trademarkName: '', //商标名称
+        trademarkDescription: '', //商标描述
+        trademarkFile: '', //姓名授权
+        trademarkFile1: '', //肖像授权声明书
+        trademarkFile2: '', //期刊
+        trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传
+        trademarkPhoto: '', //商标图样
+
+    })
+    const [editTwoData, setEditTwoData] = useState<any>({
+        trademarkTypeDTOS: [],
+        trademarkTypeIds: []
+    })
+    const [editThreeData, setEditThreeData] = useState<any>({
+        trademarkUserId: '',
+        name: ''
+    })
+    const [editFiveData, setEditFiveData] = useState<any>({
+        trademarkFileDepute: ''
+    })
+    const [trademarkStatus, setTrademarkStatus] = useState('')
+    useEffect(() => {
+        if (trademarkId) {
+            getOrderList()
+        }
+    }, [trademarkId])
+
+    // const [trademarkId, setTrademarkId] = useState(state.trademarkId?state.trademarkId:'');
+    const [loading, setLoading] = useState(false)
+    const getTrademarkDetail = async (trademarkId: string) => {
+        try {
+            setLoading(true)
+            const res: any = await trademarkDetail(trademarkId)
+            // console.log('详情', res);
+            if (res.trademarkProgress < 6) {
+                setEditProcess(res.trademarkProgress + 1)
+
+            } else {
+                setEditProcess(res.trademarkProgress)
+            }
+            setTrademarkMode(res.trademarkMode)
+            setTrademarkModeName(res.trademarkModeName)
+            setTrademarkModePrice(res.trademarkModePrice / 100)
+            setTrademarkModeOldPrice(res.trademarkModeOldPrice / 100)
+            setEditOneData({
+                trademarkType: res.trademarkType, //商标类型 text 文字 image 图形 text-image 图文
+                trademarkName: res.trademarkName, //商标名称
+                trademarkDescription: res.trademarkDescription, //商标描述 
+                trademarkFile: res.trademarkFile, //姓名授权
+                trademarkFile1: res.trademarkFile1, //肖像授权声明书
+                trademarkFile2: res.trademarkFile2, //期刊
+                trademarkPhotoType: res.trademarkPhotoType, //商标图样类型 1 自动生成 2 手动上传
+                trademarkPhoto: res.trademarkPhoto, //商标图样
+            })
+            setTrademarkStatus(res.trademarkStatus)
+            setEditTwoData({
+                trademarkTypeDTOS: res.trademarkTypeDTOS,
+                trademarkTypeIds: res.trademarkTypeIds
+            })
+            setEditThreeData({
+                trademarkUserId: res.trademarkUserDTO?res.trademarkUserDTO.trademarkUserId:'',
+                name: res.trademarkUserDTO?res.trademarkUserDTO.name:''
+            })
+            setEditFiveData({
+                trademarkFileDepute: res.trademarkFileDepute
+            })
+
+        } catch (error: any) {
+            setLoading(false)
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                 console.error(error)
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+
+    useEffect(() => {
+
+
+        // console.log('state', state);
+        // console.log('trademarkId', trademarkId);
+        // console.log('trademarkId', trademarkId); 
+        // console.log('trademarkId', state.trademarkId);
+        // 如果存在id则为编辑状态，否则为新建状态 获取到第几步和详情数据
+        if (trademarkId) {
+            // setEditProcess(4)
+            getTrademarkDetail(trademarkId)
+        } else {
+            setEditProcess(1)
+        }
+    }, [trademarkId])
+
+    // const clickProcess = (index: number) => {
+    //         setEditProcess(index)
+    // }
     return (
-        <div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
+        <Spin tip="加载中请稍后..." size="small" spinning={loading}>
-            <div className='editProcessBox' style={{
+            <div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
-                marginBottom: 20
+                {contextHolder}
-            }}>
+                <div className='editProcessBox' style={{
-                <div className='editProcess' >
+                    marginBottom: 20
-                    <div className='editProcessNum'
+                }}>
-                        style={{
+                    <div className='editProcess' >
-                            background: editProcess >= 1 ? '#3B60E8' : '',
+                        <div className='editProcessNum'
-                            color: editProcess >= 1 ? '#fff' : '#B1B1B1',
+                            style={{
-                            borderColor: editProcess >= 1 ? '' : '#B1B1B1'
+                                background: editProcess >= 1 ? '#3B60E8' : '',
-                        }}
+                                color: editProcess >= 1 ? '#fff' : '#B1B1B1',
-                    >1</div>
+                                borderColor: editProcess >= 1 ? '' : '#B1B1B1'
-                    <div className='editProcessTitle'
+                            }}
-                        style={{
+                        >1</div>
-                            color: editProcess >= 1 ? '#353535' : '#878787',
+                        <div className='editProcessTitle'
-                            fontWeight: editProcess >= 1 ? 'bold' : 'normal'
+                            style={{
-                        }}
+                                color: editProcess >= 1 ? '#353535' : '#878787',
-                    >填写基础信息</div>
+                                fontWeight: editProcess >= 1 ? 'bold' : 'normal'
+                            }}
+                        >填写基础信息</div>
+                    </div>
+                    <div className='editright' onClick={() => {
+                        setEditProcess(2)
+                    }}><RightOutlined /></div>
+                    <div className='editProcess' >
+                        <div className='editProcessNum' style={{
+                            background: editProcess >= 2 ? '#3B60E8' : '',
+                            color: editProcess >= 2 ? '#fff' : '#B1B1B1',
+                            borderColor: editProcess >= 2 ? '' : '#B1B1B1'
+                        }}>2</div>
+                        <div className='editProcessTitle'
+                            style={{
+                                color: editProcess >= 2 ? '#353535' : '#878787',
+                                fontWeight: editProcess >= 2 ? 'bold' : 'normal'
+                            }}
+                        >选择商标类别</div>
+                    </div>
+                    <div className='editright'><RightOutlined /></div>
+                    <div className='editProcess' >
+                        <div className='editProcessNum' style={{
+                            background: editProcess >= 3 ? '#3B60E8' : '',
+                            color: editProcess >= 3 ? '#fff' : '#B1B1B1',
+                            borderColor: editProcess >= 3 ? '' : '#B1B1B1'
+                        }}>3</div>
+                        <div className='editProcessTitle'
+                            style={{
+                                color: editProcess >= 3 ? '#353535' : '#878787',
+                                fontWeight: editProcess >= 3 ? 'bold' : 'normal'
+                            }}
+                        >选择申请人</div>
+                    </div>
+                    <div className='editright'><RightOutlined /></div>
+                    <div className='editProcess' >
+                        <div className='editProcessNum' style={{
+                            background: editProcess >= 4 ? '#3B60E8' : '',
+                            color: editProcess >= 4 ? '#fff' : '#B1B1B1',
+                            borderColor: editProcess >= 4 ? '' : '#B1B1B1'
+                        }}>4</div>
+                        <div className='editProcessTitle'
+                            style={{
+                                color: editProcess >= 4 ? '#353535' : '#878787',
+                                fontWeight: editProcess >= 4 ? 'bold' : 'normal'
+                            }}
+                        >
+                            订单支付
+                        </div>
+                    </div>
+                    <div className='editright'><RightOutlined /></div>
+                    <div className='editProcess' >
+                        <div className='editProcessNum' style={{
+                            background: editProcess >= 5 ? '#3B60E8' : '',
+                            color: editProcess >= 5 ? '#fff' : '#B1B1B1',
+                            borderColor: editProcess >= 5 ? '' : '#B1B1B1'
+                        }}>5</div>
+                        <div className='editProcessTitle'
+                            style={{
+                                color: editProcess >= 5 ? '#353535' : '#878787',
+                                fontWeight: editProcess >= 5 ? 'bold' : 'normal'
+                            }}
+                        >上传委托书</div>
+                    </div>
+                    <div className='editright'><RightOutlined /></div>
+                    <div className='editProcess'>
+                        <div className='editProcessNum' style={{
+                            background: editProcess >= 6 ? '#3B60E8' : '',
+                            color: editProcess >= 6 ? '#fff' : '#B1B1B1',
+                            borderColor: editProcess >= 6 ? '' : '#B1B1B1'
+                        }}>6</div>
+                        <div className='editProcessTitle'
+                            style={{
+                                color: editProcess >= 6 ? '#353535' : '#878787',
+                                fontWeight: editProcess >= 6 ? 'bold' : 'normal'
+                            }}
+                        >上传商标局</div>
+                    </div>
+
+
                 </div>
-                <div className='editright'><RightOutlined /></div>
+                <div className='editFormBox'>
-                <div className='editProcess'>
+                    <div style={{
-                    <div className='editProcessNum' style={{
+                        display: editProcess == 1 ? 'block' : 'none'
-                        background: editProcess >= 2 ? '#3B60E8' : '',
+                    }}>
-                        color: editProcess >= 2 ? '#fff' : '#B1B1B1',
+                        <EditOne
-                        borderColor: editProcess >= 2 ? '' : '#B1B1B1'
+                            key={editProcess}
-                    }}>2</div>
+                            trademarkMode={trademarkMode} //申请类型id
-                    <div className='editProcessTitle'
+                            trademarkModeName={trademarkModeName} //申请类型名称
-                        style={{
+                            trademarkId={trademarkId} //商标id
-                            color: editProcess >= 2 ? '#353535' : '#878787',
+                            setTrademarkId={setTrademarkId} //设置商标id
-                            fontWeight: editProcess >= 2 ? 'bold' : 'normal'
+                            setEditProcess={setEditProcess}
-                        }}
+                            editOneData={editOneData} //编辑一数据
-                    >选择商标类别</div>
+                            setEditOneData={setEditOneData} //设置编辑一数据
-                </div>
+                        ></EditOne>
-                <div className='editright'><RightOutlined /></div>
+                    </div>
-                <div className='editProcess'>
+                    <div style={{
-                    <div className='editProcessNum' style={{
+                        display: editProcess == 2 ? 'block' : 'none'
-                        background: editProcess >= 3 ? '#3B60E8' : '',
+                    }}>
-                        color: editProcess >= 3 ? '#fff' : '#B1B1B1',
+                        <EditTwo
-                        borderColor: editProcess >= 3 ? '' : '#B1B1B1'
+                            getOrderList={getOrderList}
-                    }}>3</div>
+                            trademarkModePrice={trademarkModePrice}
-                    <div className='editProcessTitle'
+                            trademarkModeOldPrice={trademarkModeOldPrice}
-                        style={{
+                            setEditTwoData={setEditTwoData}
-                            color: editProcess >= 3 ? '#353535' : '#878787',
+                            editTwoData={editTwoData}
-                            fontWeight: editProcess >= 3 ? 'bold' : 'normal'
+                            trademarkId={trademarkId} //商标id
-                        }}
+                            // key={editProcess}
-                    >选择所属者</div>
+                            setEditProcess={setEditProcess}
-                </div>
+
-                <div className='editright'><RightOutlined /></div>
+                        ></EditTwo>
-                <div className='editProcess'>
+
-                    <div className='editProcessNum' style={{
+                    </div>
-                        background: editProcess >= 4 ? '#3B60E8' : '',
+                    <div style={{
-                        color: editProcess >= 4 ? '#fff' : '#B1B1B1',
+                        display: editProcess == 3 ? 'block' : 'none'
-                        borderColor: editProcess >= 4 ? '' : '#B1B1B1'
+                    }}>
-                    }}>4</div>
+                        <EditThree
-                    <div className='editProcessTitle'
+                            // key={editProcess}
-                        style={{
+                            editThreeData={editThreeData}
-                            color: editProcess >= 4 ? '#353535' : '#878787',
+                            setEditThreeData={setEditThreeData}
-                            fontWeight: editProcess >= 4 ? 'bold' : 'normal'
+                            trademarkId={trademarkId}
-                        }}
+                            setEditProcess={setEditProcess}></EditThree>
-                    >
+                    </div>
-                        订单支付
+                    <div style={{
+                        display: editProcess == 4 ? 'block' : 'none'
+                    }}>
+                        <EditFour
+                            // key={editProcess}
+                            trademarkType={editOneData.trademarkType}
+                            orderList={orderList}
+                            trademarkStatus={trademarkStatus}
+                            setTrademarkStatus={setTrademarkStatus}
+                            trademarkId={trademarkId}
+                            setEditProcess={setEditProcess}></EditFour>
+                    </div>
+                    <div style={{
+                        display: editProcess == 5 ? 'block' : 'none'
+                    }}>
+                        <EditFive
+                            // key={editProcess}
+                            editFiveData={editFiveData}
+                            setEditFiveData={setEditFiveData}
+                            trademarkId={trademarkId}
+
+                            setEditProcess={setEditProcess}></EditFive>
+                    </div>
+                    <div style={{
+                        display: editProcess == 6 ? 'block' : 'none'
+                    }}>
+                        <EditSix
+                            trademarkId={trademarkId}
+                            trademarkStatus={trademarkStatus}
+                            setTrademarkStatus={setTrademarkStatus}
+                            key={editProcess}
+                            editOneData={editOneData} //编辑一数据
+                            editTwoData={editTwoData}
+                            editThreeData={editThreeData}
+                            editFiveData={editFiveData}
+                            setEditProcess={setEditProcess}></EditSix>
                     </div>
                 </div>
-                <div className='editright'><RightOutlined /></div>
-                <div className='editProcess'>
-                    <div className='editProcessNum' style={{
-                        background: editProcess >= 5 ? '#3B60E8' : '',
-                        color: editProcess >= 5 ? '#fff' : '#B1B1B1',
-                        borderColor: editProcess >= 5 ? '' : '#B1B1B1'
-                    }}>5</div>
-                    <div className='editProcessTitle'
-                        style={{
-                            color: editProcess >= 5 ? '#353535' : '#878787',
-                            fontWeight: editProcess >= 5 ? 'bold' : 'normal'
-                        }}
-                    >上传委托书</div>
-                </div>
-                <div className='editright'><RightOutlined /></div>
-                <div className='editProcess'>
-                    <div className='editProcessNum' style={{
-                        background: editProcess >= 6 ? '#3B60E8' : '',
-                        color: editProcess >= 6 ? '#fff' : '#B1B1B1',
-                        borderColor: editProcess >= 6 ? '' : '#B1B1B1'
-                    }}>6</div>
-                    <div className='editProcessTitle'
-                        style={{
-                            color: editProcess >= 6 ? '#353535' : '#878787',
-                            fontWeight: editProcess >= 6 ? 'bold' : 'normal'
-                        }}
-                    >上传商标局</div>
-                </div>
-
-
             </div>
-            <div className='editFormBox'>
+        </Spin>
-                <div style={{
-                    display: editProcess == 1 ? 'block' : 'none'
-                }}>
-                    <EditOne
-                        key={editProcess}
-                        setEditProcess={setEditProcess}
-                    ></EditOne>
-                </div>
-                <div style={{
-                    display: editProcess == 2 ? 'block' : 'none'
-                }}>
-                    <EditTwo
-                        key={editProcess}
-                        setEditProcess={setEditProcess}></EditTwo>
-
-                </div>
-                <div style={{
-                    display: editProcess == 3 ? 'block' : 'none'
-                }}>
-                    <EditThree
-                        key={editProcess}
-                        setEditProcess={setEditProcess}></EditThree>
-                </div>
-                <div style={{
-                    display: editProcess == 4 ? 'block' : 'none'
-                }}>
-                    <EditFour
-                        key={editProcess}
-                        setEditProcess={setEditProcess}></EditFour>
-                </div>
-                <div style={{
-                    display: editProcess == 5 ? 'block' : 'none'
-                }}>
-                    <EditFive
-                        key={editProcess}
-                        setEditProcess={setEditProcess}></EditFive>
-                </div>
-                <div style={{
-                    display: editProcess == 6 ? 'block' : 'none'
-                }}>
-                    <EditSix
-                        key={editProcess}
-                        setEditProcess={setEditProcess}></EditSix>
-                </div>
-            </div>
-        </div>
     )
 }

src/route/TrademarkMall/TrademarkExpertEdit.tsx

@@ -1,151 +1,202 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useContext } from 'react'
 import './trademark-edit.css'
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { expertRegister } from '../../request/api'
+import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext";
+// import { useNavigate } from 'react-router-dom';
 import {
   Form,
   Input, Button,
-  Modal
+  Modal,
+  message,
+  Spin
 } from 'antd';
+import useMessage from "antd/es/message/useMessage";
 const { TextArea } = Input;
 export default function TrademarkExpertEdit() {
+  const nav = useNavigate()
+  const globalDispatchContext = useContext(GlobalDispatchContext);
+  const [messageApi, contextHolder] = useMessage();
   const { state } = useLocation()
   const height = window.innerHeight - 180;
   const [form] = Form.useForm<any>();
+  const [upLodaing, setUpLodaing] = useState(false)
   const [modal, setModal] = useState(false)
+  const [trademarkName, setTrademarkName] = useState('') //名称
+  const [trademarkContent, setTrademarkContent] = useState('') //描述
   const onFinish = (values: any) => {
     console.log(values);
+    setTrademarkName(values.trademarkName)
+    setTrademarkContent(values.trademarkContent ? values.trademarkContent : '')
     setModal(true)
   }
   useEffect(() => {
     console.log('state', state);
   }, [])
   return (
-    <div className='trademarkExpertBox' style={{ height: `${height}px`, overflow: 'auto' }}>
+    <Spin tip="正在提交，请稍后..." size="small" spinning={upLodaing}>
-      <div style={{
+      {contextHolder}
-        display: state.title == '专家辅助注册' ? 'unset' : 'none'
+      <div className='trademarkExpertBox' style={{ height: `${height}px`, overflow: 'auto' }}>
-      }}>
+        <div style={{
-        <div className='trademarkTop'>
+          display: state.id == '2' ? 'unset' : 'none'
-          <div className='trademarkTopL'>
+        }}>
-            !
+          <div className='trademarkTop'>
-          </div>
+            <div className='trademarkTopL'>
-          <div>
+              !
-            支付完成后会有商标专家联系您并为您服务，请确保填写的手机号真实准确。填写的商标信息后续可以修改，请您放心填写。
+            </div>
+            <div>
+              支付完成后会有商标专家联系您并为您服务。填写的商标信息后续可以修改，请您放心填写。
+            </div>
           </div>
         </div>
-      </div>
+        <div style={{
-      <div style={{
+          display: state.id == '3' ? 'unset' : 'none'
-        display: state.title == '至尊无忧注册' ? 'unset' : 'none'
+        }}>
-      }}>
+          <div className='trademarkTop'>
-        <div className='trademarkTop'>
+            <div className='trademarkTopL'>
-          <div className='trademarkTopL'>
+              !
-            !
+            </div>
-          </div>
+            <div>
-          <div>
+              <div>至尊无忧注册由专业商标顾问团队为您全程代办商标申请和递交流程，</div>
-            <div>至尊无忧注册由专业商标顾问团队为您全程代办商标申请和递交流程，</div>
+              <div style={{
-            <div style={{
+                marginTop: '5px'
-              marginTop: '5px'
+              }}>指定类目至尊无忧注册，指定类目被驳回可全额赔付，非指定类目驳回不支持赔付;</div>
-            }}>指定类目至尊无忧注册，指定类目被驳回可全额赔付，非指定类目驳回不支持赔付;</div>
+              <div style={{
-            <div style={{
+                marginTop: '5px'
-              marginTop: '5px'
+              }}>全部小类至尊无忧注册，商标局下发《商标驳回通知书》可全额赔付，包含部分驳回和全部驳回通知书。</div>
-            }}>全部小类至尊无忧注册，商标局下发《商标驳回通知书》可全额赔付，包含部分驳回和全部驳回通知书。</div>
+            </div>
           </div>
         </div>
-      </div>
+        <div className='trademarkForm '>
-      <div className='trademarkForm '>
 
-        <Form
+          <Form
-          name="Form"
+            name="Form"
-          form={form}
+            form={form}
-          onFinish={onFinish}
+            onFinish={onFinish}
-          initialValues={{ softWare: '' }}
+            initialValues={{ softWare: '' }}
-          style={{ maxWidth: 600, marginTop: 20 }}
+            style={{ maxWidth: 600, marginTop: 20 }}
+          >
+            <div className='trademarkForm-item'>
+              <div className='trademarkForm-title'>
+                商标名称<span style={{
+                  color: 'red'
+                }}>*</span> ：
+              </div>
+              <div className='trademarkInput'>
+
+                <Form.Item
+                  name="trademarkName"
+                  rules={[{ required: true, message: '请输入商标名称!' }]}
+                >
+                  <Input style={{
+                    width: 500,
+                    height: 46,
+                    background: '#FFF',
+                    color: 'black'
+                  }}
+                    placeholder="商标名称"
+                  >
+                  </Input>
+
+                </Form.Item>
+
+
+              </div>
+            </div>
+            <div className='trademarkForm-item'>
+              <div className='trademarkForm-title'>
+                需求描述 ：
+              </div>
+              <div className='trademarkInput'>
+
+                <Form.Item
+                  name="trademarkContent"
+                // rules={[{ required: true, message: '请输入商标名称!' }]}
+                >
+                  <TextArea style={{
+                    width: 500,
+                    height: 200,
+                    background: '#FFF',
+                    color: 'black',
+                    resize: 'none'
+                  }}
+                    placeholder="需求描述"
+                  >
+                  </TextArea>
+
+                </Form.Item>
+
+
+              </div>
+            </div>
+            <div style={{
+              textWrap: 'nowrap',
+            }}>在您提交商标申请咨询单后，工作日期间专业顾问会在1小时内与您联系，非工作日时间会在下一个工作日与您取得联系。</div>
+            <div style={{
+              textWrap: 'nowrap',
+            }}>本网站会保护您的个人信息，仅有本网站及其授权委托机构可以看到您提交的信息，请放心提供。</div>
+
+
+
+            <Form.Item>
+              <div className='trademark-btn'>
+                <Button type="primary" htmlType="submit" style={{
+                  width: 273,
+                  height: 52
+                }}
+                >
+                  提交订单
+                </Button>
+              </div>
+            </Form.Item>
+          </Form>
+
+        </div>
+        <Modal title="提示"
+          centered
+          destroyOnClose={true}
+          open={modal}
+          onCancel={() => { setModal(false) }}
+          okText='确定'
+          cancelText='取消'
+          onOk={async () => {
+            setModal(false)
+
+            try {
+              setUpLodaing(true)
+              await expertRegister({
+                trademarkName,
+                trademarkContent,
+                trademarkMode: state.id,
+                trademarkModeName: state.title
+              })
+              reloadUser(messageApi, globalDispatchContext).then(() => {
+                setModal(false)
+                message.success('付款成功');
+                nav(-1)
+
+              });
+              setUpLodaing(false)
+            } catch (error: any) {
+              setUpLodaing(false)
+
+              // setAddLoading(false)
+              if (error.response) {
+                const data = error.response.data;
+                message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+              } else {
+                console.error(error)
+              }
+            } finally {
+              // setAddLoading(false)
+              setUpLodaing(false)
+            }
+            // setModal(false)
+          }}
         >
-          <div className='trademarkForm-item'>
+          该操作会扣除{state.price}元，且提交后无法撤销，确定操作吗？
-            <div className='trademarkForm-title'>
+        </Modal>
-              商标名称<span style={{
-                color: 'red'
-              }}>*</span> ：
-            </div>
-            <div className='trademarkInput'>
-
-              <Form.Item
-                name="title"
-                rules={[{ required: true, message: '请输入商标名称!' }]}
-              >
-                <Input style={{
-                  width: 500,
-                  height: 46,
-                  background: '#FFF',
-                  color: 'black'
-                }}
-                  placeholder="商标名称"
-                >
-                </Input>
-
-              </Form.Item>
-
-
-            </div>
-          </div>
-          <div className='trademarkForm-item'>
-            <div className='trademarkForm-title'>
-              需求描述 ：
-            </div>
-            <div className='trademarkInput'>
-
-              <Form.Item
-                name="text"
-              // rules={[{ required: true, message: '请输入商标名称!' }]}
-              >
-                <TextArea style={{
-                  width: 500,
-                  height: 200,
-                  background: '#FFF',
-                  color: 'black',
-                  resize: 'none'
-                }}
-                  placeholder="需求描述"
-                >
-                </TextArea>
-
-              </Form.Item>
-
-
-            </div>
-          </div>
-          <div style={{
-            textWrap: 'nowrap',
-          }}>在您提交商标申请咨询单后，工作日期间专业顾问会在1小时内与您联系，非工作日时间会在下一个工作日与您取得联系。</div>
-          <div style={{
-            textWrap: 'nowrap',
-          }}>本网站会保护您的个人信息，仅有本网站及其授权委托机构可以看到您提交的信息，请放心提供。</div>
-
-
-
-          <Form.Item>
-            <div className='trademark-btn'>
-              <Button type="primary" htmlType="submit" style={{
-                width: 273,
-                height: 52
-              }}
-              >
-                提交订单
-              </Button>
-            </div>
-          </Form.Item>
-        </Form>
-
       </div>
-      <Modal title="提示"
+    </Spin>
-        centered
-        destroyOnClose={true}
-        open={modal}
-        onCancel={() => { setModal(false) }}
-        okText='确定'
-        cancelText='取消'
-      >
-        该操作会扣除{state.price}元，确定操作吗？
-      </Modal>
-    </div>
   )
 }

src/route/TrademarkMall/components/EditFive/EditFive.css

@@ -0,0 +1,27 @@
+.editFiveUpBox {
+    width: 300px;
+    height: 150px;
+    border: 1px dashed #979797;
+    color: #979797;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background-color: white;
+}
+
+.showImg {
+    width: 190px;
+    height: 150px;
+    border: 1px dashed #979797;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-left: 120px;
+    position: relative;
+}
+.tipsRed{
+    color: red;
+}

src/route/TrademarkMall/components/EditFive/EditFive.tsx

@@ -1,50 +1,395 @@
-// import React from 'react'
+import { useEffect, useState } from 'react'
-import { Button } from 'antd'
+import { Button, Form, message, Upload, Input, Spin, Image } from 'antd'
-export default function editFive(props: any) {
+import { showImage, uploadDeputeUrl } from '../../../../request/request'
-  const height = window.innerHeight - 350;
+import { generateDepute, uploadDepute } from '../../../../request/api'
+import './EditFive.css'
+import {
+  PlusOutlined
+} from '@ant-design/icons';
+import file from '../../../../static/editFive/file.png'
+export default function EditFive(props: any) {
+  const token = sessionStorage.getItem('token')
+  const [form] = Form.useForm();
   const handleSubmit = () => {
-    // console.log(form);
+
-    props.setEditProcess(6);
+    form.submit();
-    // 调用表单实例的 submit 方法
+
-    // form.submit();
+    // props.setEditProcess(6);
 
   };
+  // const [imgList, setImgList] = useState<any>([])
+  const [upFileLoading, setUpFileLoading] = useState<boolean>(false) //上传文件
+  const [createLoading, setCreateLoading] = useState<boolean>(false) //生成委托书
+  const [upLoading, setUpLoading] = useState<boolean>(false) //提交
+  const [upFileArray, setUpFileArray] = useState<any>([])
+  // 定义允许上传的文件格式
+  const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg',];
+  const beforeUpload = (file: File) => {
+    const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+    if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
+      message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`);
+      return Upload.LIST_IGNORE;
+    }
+    return true;
+  };
+  useEffect(() => {
+    if (props.editFiveData.trademarkFileDepute) {
+      form.setFieldValue('file', props.editFiveData.trademarkFileDepute)
+      setUpFileArray([
+        {
+          uid: props.editFiveData.trademarkFileDepute,
+          name: props.editFiveData.trademarkFileDepute,
+          status: 'done',
+          url: showImage(props.editFiveData.trademarkFileDepute, false)
+        }
+      ])
+    }
+  }, [props.editFiveData])
+  const onFinish = async (values: any) => {
+    // console.log('Success:', values);
+    // props.setEditProcess(6);
+    if (values.file == props.editFiveData.trademarkFileDepute) {
+      props.setEditProcess(6);
+      return
+
+    }
+
+    try {
+      setUpLoading(true)
+      await uploadDepute(props.trademarkId, {
+        trademarkFileDepute: values.file
+      })
+      setUpLoading(false)
+      props.setEditFiveData({
+        trademarkFileDepute: values.file
+      })
+      props.setEditProcess(6);
+    }
+    catch (error: any) {
+      if (error.response) {
+        setUpLoading(false)
+
+        const data = error.response.data;
+        message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+      } else {
+        console.error(error)
+      }
+    }
+    finally {
+      setUpLoading(false)
+    }
+  };
+  const height = window.innerHeight - 350;
+
   return (
-    <div className='editOneTwo'>
+    <Spin
-      <div className='topLine'></div>
+      tip={createLoading ? '生成委托书中...' : upLoading ? '正在提交...' : '正在提交...'}
-      <div className='appInfoFormBox' style={{
+      size="small"
-        height: height,
+      spinning={createLoading || upLoading}
-        background: 'pink'
+    >
-      }}></div>
+      <div className='editOneTwo'>
-      <div className='topLine'></div>
+
-      <div style={{
+        <div className='topLine'></div>
-        marginTop: '8px',
+        <div className='' style={{
-        display: 'flex',
+          height: height,
-        justifyContent: 'flex-end',
+          // background: 'pink',
-      }}>
+          padding: '50px 50px',
-        <Button
+          boxSizing: 'border-box',
-          style={{
+        }}>
-            width: '100px',
+          <div style={{
-            height: '40px',
+            display: 'flex',
-            borderRadius: '5px',
+
-          }}
+          }}>
-          onClick={() => {
+            <Form form={form} onFinish={onFinish}
-            props.setEditProcess(4)
+              onFinishFailed={(errorInfo) => {
-          }}
+                errorInfo.errorFields.forEach((field) => {
-        >上一步</Button>
+                  if (field.errors.length > 0) {
-        <Button
+                    // 显示每条错误信息
-          type='primary'
+                    message.error(field.errors[0]);
-          style={{
+                  }
-            width: '100px',
+                });
-            height: '40px',
+              }}
-            borderRadius: '5px',
+            >
-            marginLeft: '10px',
+              <div style={{
-          }}
+                display: 'flex',
-          onClick={() => {
+              }}>
-            handleSubmit()
+                <div className='FormInputTitle' style={{
-          }}
+                  marginTop: -5
-        >下一步</Button>
+                }}>上传委托书<span style={{
-      </div>
+                  color: 'red',
-    </div>
+                }}>*</span> ：</div>
+                <div style={{
+                  // background:'pink',
+                  width: 200,
+                  position: 'relative',
+                }}>
+
+                  <Form.Item
+                    name="file"
+                    rules={[{ required: true, message: '请上传委托书' }]}
+                  >
+                    <Input style={{
+                      width: 300,
+                      height: 150,
+                      // display: 'none',
+                      // background:'red'
+                    }}></Input>
+
+
+                  </Form.Item>
+
+                  <div style={{
+                    position: 'absolute',
+                    // top: -5,
+                    top: 0,
+                    // background: 'pink',
+                    // maxWidth: 200,
+                    display: upFileArray.length > 0 && upFileArray[0].url ? 'none' : 'unset'
+                  }}>
+                    <Upload
+                      maxCount={1}
+                      name="file"
+                      action={uploadDeputeUrl()}
+                      // fileList={upFileArray}
+                      showUploadList={false}
+
+                      onChange={(info) => {
+
+                        if (info.file.status === 'uploading') {
+                          setUpFileLoading(true)
+                          // const { fileList } = info;
+                          // setUpFileArray(fileList);
+                          return;
+                        }
+                        if (info.file.status === 'done') {
+                          // console.log(info.file.response.data);
+                          setUpFileLoading(false)
+                          setUpFileArray([
+                            {
+                              uid: info.file.response.data.fileId,
+                              name: info.file.response.data.fileName,
+                              status: 'done',
+                              url: showImage(info.file.response.data.fileId, false)
+                            }
+                          ])
+
+                          form.setFieldsValue({
+                            file: info.file.response.data.fileId,
+                          });
+                        }
+                        if (info.file.status === 'error') {
+                          setUpFileLoading(false)
+                          // 显示错误提示
+                          // message.error(`上传失败,请重新上传`);
+                          message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
+                          setUpFileArray([])
+
+                        }
+                        // console.log(upCodeArray);
+
+                      }}
+                      onRemove={() => {
+                        setUpFileArray([])
+                        form.setFieldsValue({
+                          file: '', // 清除表单值
+                        });
+                      }}
+                      beforeUpload={beforeUpload}
+                      // onPreview={handlePreview}
+                      // onChange={handleUploadChange}
+                      headers={{ 'Auth': `Bearer ${token}` }}
+                      disabled={upFileLoading || upFileArray.length > 0}
+                    >
+                      {/* <Button icon={<UploadOutlined />} style={{
+                    marginTop: '4px'
+                  }}
+                    disabled={upFileArray.length > 0}
+                  >上传委托书</Button> */}
+                      <Spin tip="正在提交，请稍后..." size="small" spinning={upFileLoading}>
+
+                        <div className='editFiveUpBox'>
+                          <div style={{
+                            fontSize: 30,
+
+                          }}><PlusOutlined /></div>
+                          <div style={{
+                            // fontSize:16
+                            marginTop: 10
+                          }}
+
+                          >上传委托书</div>
+                        </div>
+                      </Spin>
+
+                    </Upload>
+                  </div >
+                  <div style={{
+                    position: 'absolute',
+                    // top: -5,
+                    top: 0,
+                    // background: 'pink',
+                    // maxWidth: 200,
+                    display: upFileArray.length > 0 && upFileArray[0].url ? 'unset' : 'none'
+
+                  }}
+                  >
+                    <div className='editFiveUpBox' style={{
+                      position: 'relative',
+
+                    }}>
+                      <Image src={upFileArray.length > 0 ? upFileArray[0].url : ''} style={{
+                        maxWidth: 300,
+                        height: 150,
+                      }} />
+                      <div style={{
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        background: 'rgba(168, 168, 168, 0.5)',
+                        color: 'red',
+                        padding: '2px 5px',
+
+
+                      }}
+                        onClick={() => {
+                          setUpFileArray([])
+                          form.setFieldsValue({
+                            file: '', // 清除表单值
+                          });
+                        }}
+                      >删除</div>
+                    </div>
+
+
+                  </div>
+                  <div style={{
+                    textWrap: 'nowrap',
+                  }}>
+                    <div style={{
+                      fontWeight: 700,
+                    }}>
+                      重要提示：
+                    </div>
+                    <div>
+                      -上传委托书只需在<span className='tipsRed'>右下角签字，请勿盖章确保签字工整清晰</span>;
+                    </div>
+                    <div>
+                      -委托书上的信息 <span className='tipsRed'>不能手动修改</span>或<span className='tipsRed'>添加</span>信息;
+                    </div>
+                    <div>
+                      -委托书模板图片大小不能超过1.5M，格式为JPG格式图片;
+                    </div>
+                    <div>
+                      -扫描(推荐)或拍照前，请确保<span className='tipsRed'>委托书模板纸面工整顺平，不能有褶皱、反光等</span>;
+                    </div>
+                    <div>
+                      -请确保上传的委托书<span className='tipsRed'>字迹工整、清晰</span>;
+                    </div>
+                    <div>
+                      -当申请人<span className='tipsRed'>信息修改后</span>，请<span className='tipsRed'>重新下载委托书签字上传审核</span>。
+                    </div>
+                  </div>
+
+                  {/* <div style={{
+                position: 'absolute',
+                top: 0,
+                left: 140,
+                textWrap: 'nowrap',
+                color: 'var(--color-blue)',
+                lineHeight: '30px',
+                cursor: 'pointer',
+              }}
+                onClick={() => {
+                  window.open('https://www.baidu.com')
+                }}
+              >[ 下载模板 ]</div> */}
+
+
+                </div>
+              </div>
+
+
+
+            </Form>
+            <div className='showImg'>
+              <Image src={file} height={120}></Image>
+              <div style={{
+                color: 'red'
+              }}>
+                示例图片
+              </div>
+              <div style={{
+                position: 'absolute',
+                bottom: -40,
+                textWrap: 'nowrap',
+                color: 'var(--color-blue)',
+                lineHeight: '30px',
+                cursor: 'pointer',
+              }}
+                onClick={async () => {
+                  // window.open(downloadDeputeUrl(props.trademarkId))
+                  try {
+                    setCreateLoading(true)
+                    const res: any = await generateDepute(props.trademarkId)
+                    // console.log(res);
+                    window.open(showImage(res.fileId))
+
+                    setCreateLoading(false)
+                  } catch (error: any) {
+                    if (error.response) {
+                      setCreateLoading(false)
+
+                      const data = error.response.data;
+                      message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+                    } else {
+                      console.error(error)
+                    }
+                  } finally {
+                    setCreateLoading(false)
+
+                  }
+                }}
+              >
+                [ 下载模板 ]
+              </div>
+            </div>
+
+          </div>
+
+
+        </div >
+        <div className='topLine'></div>
+        <div style={{
+          marginTop: '8px',
+          display: 'flex',
+          justifyContent: 'flex-end',
+        }}>
+          <Button
+            style={{
+              width: '100px',
+              height: '40px',
+              borderRadius: '5px',
+            }}
+            onClick={() => {
+              props.setEditProcess(4)
+            }}
+          >上一步</Button>
+          <Button
+            type='primary'
+            style={{
+              width: '100px',
+              height: '40px',
+              borderRadius: '5px',
+              marginLeft: '10px',
+            }}
+            onClick={() => {
+              handleSubmit()
+            }}
+          >下一步</Button>
+        </div>
+
+
+      </div >
+    </Spin >
   )
 }

src/route/TrademarkMall/components/EditFour/EditFour.tsx

@@ -1,50 +1,298 @@
-// import React from 'react'
+import { useState, useContext, useEffect } from 'react'
-import { Button } from 'antd'
+import './edit-four.css'
-export default function editFour(props: any) {
+import { Button, Table, Modal, message, Spin } from 'antd'
+import { orderPay } from '../../../../request/api'
+// import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
+import { GlobalDispatchContext, reloadUser } from "../../../../context/GlobalContext";
+import type { TableProps } from 'antd';
+interface DataType {
+  id: string;
+  type: string; //付费方式
+  name: string;//服务名称
+  category: string; //类别
+  goods: string; //服务
+  goodsType: string; //商标类型
+  price: string; //单价
+  num: string; //数量
+}
+import useMessage from "antd/es/message/useMessage";
+export default function EditFour(props: any) {
+  const globalDispatchContext = useContext(GlobalDispatchContext);
+  const [messageApi, contextHolder] = useMessage();
+  const [payLodaing, setPayLodaing] = useState(false)
+  const postOrderPay = async () => {
+    try {
+      setModal(false)
+
+      setPayLodaing(true)
+      const res = await orderPay(props.trademarkId)
+      console.log(res);
+      reloadUser(messageApi, globalDispatchContext).then(() => {
+
+        message.success('付款成功');
+
+      });
+      props.setTrademarkStatus('1')
+      props.setEditProcess(5)
+      setPayLodaing(false)
+
+    } catch (error: any) {
+      setModal(false)
+      setPayLodaing(false)
+      if (error.response) {
+        const data = error.response.data;
+        messageApi.open({
+          type: 'error',
+          content: data.msg ? data.msg : `${data.path}(${data.status})`,
+        });
+      } else {
+        console.error(error)
+      }
+    } finally {
+      setPayLodaing(false)
+      setModal(false)
+
+    }
+  }
+
+
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      align: 'center',
+      title: '付费方式',
+      dataIndex: 'payType',
+      key: 'payType',
+      // render: () => '预付费',
+      width: 100,
+    },
+    {
+      align: 'center',
+      width: 100,
+
+      title: '服务名称',
+      dataIndex: 'serverName',
+      key: 'serverName',
+      // render: () => '商标申请',
+    },
+    {
+      align: 'center',
+      width: 150,
+      ellipsis: true,
+      title: '类别',
+      dataIndex: 'typeName',
+      key: 'typeName',
+    },
+    {
+      align: 'center',
+      width: 300,
+      ellipsis: true,
+      title: '指定商品或服务',
+      dataIndex: 'subNames',
+      key: 'subNames',
+      render: (text) => {
+        return (
+          <span title={text}>共{text.split(',').length}项 : {text}</span>
+        )
+
+      },
+    },
+    {
+      align: 'center',
+      width: 150,
+      title: '商标类型',
+      render: () => {
+        if (props.trademarkType == 'text') {
+          return '文字'
+        }
+        if (props.trademarkType == 'image') {
+          return '图形'
+        }
+        if (props.trademarkType == 'text-image') {
+          return '图文'
+        }
+      },
+    },
+    {
+      align: 'center',
+      width: 100,
+
+      title: '单价',
+      dataIndex: 'money',
+      key: 'money',
+      render: (text) => text / 100,
+    },
+    {
+      align: 'center',
+      width: 100,
+      title: '数量',
+      render: () => '1',
+    },
+
+
+  ];
+  const [data, setData] = useState<any>([])
+  useEffect(() => {
+
+    setData(props.orderList)
+
+  }, [props.orderList])
+  // const data: DataType[] = [
+  //   {
+  //     id: '1',
+  //     type: '预付费', //付费方式
+  //     name: '商标申请',//服务名称
+  //     category: '第35类 广告销售', //类别
+  //     goods: '共10项:喜喜喜喜喜喜,哈哈哈啊哈哈哈哈,呵呵呵呵呵,嘎嘎嘎嘎嘎嘎嘎,的爱德华八克很大空间和大开杀空间,按时间打假打私', //服务
+  //     goodsType: '文字和图案', //商标类型
+  //     price: '630.66', //单价
+  //     num: '1', //数量
+  //   },
+  //   {
+  //     id: '2',
+  //     type: '预付费', //付费方式
+  //     name: '商标申请',//服务名称
+  //     category: '第35类 广告销售', //类别
+  //     goods: '共10项:喜喜喜喜喜喜,哈哈哈啊哈哈哈哈,呵呵呵呵呵,嘎嘎嘎嘎嘎嘎嘎,的爱德华八克很大空间和大开杀空间,按时间打假打私', //服务
+  //     goodsType: '文字和图案', //商标类型
+  //     price: '10000.66', //单价
+  //     num: '1', //数量
+  //   },
+
+  // ];
+  const [modal, setModal] = useState(false)
   const height = window.innerHeight - 350;
   const handleSubmit = () => {
     // console.log(form);
-    props.setEditProcess(5);
+    // props.setEditProcess(5);
+    setModal(true)
     // 调用表单实例的 submit 方法
     // form.submit();
 
   };
   return (
-    <div className='editOneTwo'>
+    <Spin tip="正在付款，请稍后..." size="small" spinning={payLodaing}>
-      <div className='topLine'></div>
+      <div className='editOneTwo'>
-      <div className='appInfoFormBox' style={{
+        {contextHolder}
-        height: height,
+        <div className='topLine'></div>
-        background: 'pink'
+        <div className='editFourBox' style={{
-      }}></div>
+          height: height,
-      <div className='topLine'></div>
+          // background: 'pink'
-      <div style={{
+        }}>
-        marginTop: '8px',
+          <div className='editFourTop'>
-        display: 'flex',
+            <div className='editFourTopL'>商标申请</div>
-        justifyContent: 'flex-end',
+            <div className='editFourTopR'>
-      }}>
+              <span>数量 : {data.length}</span>
-        <Button
+              <span style={{
-          style={{
+                marginLeft: '10px',
-            width: '100px',
+              }}>小计<span style={{
-            height: '40px',
+                color: 'red',
-            borderRadius: '5px',
+              }}>￥{data.reduce((pre: number, cur: any) => pre + cur.money, 0) / 100}</span></span>
+              {/* 将data里的每一项得money取出来 获取和 */}
+              {/* reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 */}
+
+            </div>
+
+          </div>
+          <Table<DataType> columns={columns}
+            // 取消自带分页
+            pagination={false}
+            dataSource={data}
+            rowKey='typeId'
+
+          />
+
+        </div>
+        <div className='topLine'></div>
+        <div style={{
+          display: props.trademarkStatus != '1' ? 'unset' : 'none'
+        }}>
+          <div style={{
+            marginTop: '8px',
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}>
+            <Button
+              style={{
+                width: '100px',
+                height: '40px',
+                borderRadius: '5px',
+              }}
+              onClick={() => {
+                props.setEditProcess(3)
+              }}
+            >上一步</Button>
+            <Button
+              type='primary'
+              style={{
+                width: '100px',
+                height: '40px',
+                borderRadius: '5px',
+                marginLeft: '10px',
+              }}
+              onClick={() => {
+                handleSubmit()
+              }}
+            >提交订单</Button>
+          </div>
+        </div>
+        <div style={{
+          display: props.trademarkStatus == '1' ? 'unset' : 'none'
+        }}>
+          <div style={{
+            marginTop: '8px',
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}>
+            <div style={{
+              // background: 'skyblue',
+              // padding: '10px',
+              borderRadius: '5px',
+              fontSize: '16px',
+              lineHeight: '40px',
+              marginRight: '10px',
+              fontWeight: 'bold',
+              color: 'green',
+            }}>
+              已完成付款
+            </div>
+            <Button
+              type='primary'
+              style={{
+                width: '100px',
+                height: '40px',
+                borderRadius: '5px',
+                marginLeft: '10px',
+              }}
+              onClick={() => {
+                props.setEditProcess(5)
+              }}
+            >下一步</Button>
+          </div>
+        </div>
+        <Modal title="提示"
+          centered
+          destroyOnClose={true}
+          open={modal}
+          onCancel={() => { setModal(false) }}
+          okText='确定'
+          cancelText='取消'
+          onOk={() => {
+            // setModal(false)
+            // props.setEditProcess(5)
+            postOrderPay()
           }}
-          onClick={() => {
+          okButtonProps={{
-            props.setEditProcess(3)
+            disabled: payLodaing
           }}
-        >上一步</Button>
+          // 设置取消按钮属性，payLodaing 为 true 时禁用
-        <Button
+          cancelButtonProps={{
-          type='primary'
+            disabled: payLodaing
-          style={{
-            width: '100px',
-            height: '40px',
-            borderRadius: '5px',
-            marginLeft: '10px',
           }}
-          onClick={() => {
+
-            handleSubmit()
+        >
-          }}
+          该操作会扣除{data.reduce((pre: number, cur: any) => pre + cur.money, 0) / 100}元，付款后无法修改,确定操作吗？
-        >下一步</Button>
+        </Modal>
       </div>
-    </div>
+    </Spin>
   )
 }

src/route/TrademarkMall/components/EditFour/edit-four.css

@@ -0,0 +1,11 @@
+.editFourTop{
+    /* background-color: pink; */
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.editFourTopL{
+    font-size: 18px;
+}

src/route/TrademarkMall/components/EditOne/EditOne.css

@@ -9,6 +9,32 @@
     box-sizing: border-box; */
 }
 
+.editOneFomrBox {
+    /* WebKit 浏览器（Chrome、Safari 等） */
+    scrollbar-width: thin;
+    /* Firefox */
+    scrollbar-color: #888 #f1f1f1;
+    /* Firefox */
+}
+.editOneFomrBox ::-webkit-scrollbar {
+    width: 8px;
+    /* 垂直滚动条宽度 */ 
+}
+.editOneFomrBox ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    /* 滚动条轨道背景颜色 */ 
+}
+.editOneFomrBox ::-webkit-scrollbar-thumb {
+    background: #888;
+    /* 滚动条滑块颜色 */
+    border-radius: 4px;
+    /* 滚动条滑块圆角 */ 
+}
+.editOneFomrBox ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    /* 鼠标悬停时滚动条滑块颜色 */ 
+}
+
 .editFormTitle {
     font-size: 18px;
     margin-bottom: 20px;
@@ -38,7 +64,11 @@
 .redTitle {
     color: red;
 }
-.pointerBlue{
+
+.pointerBlue {
     color: var(--color-blue);
     cursor: pointer;
+}
+.upBox{
+    background: skyblue;
 }

src/route/TrademarkMall/components/EditSix/EditSix.css

@@ -0,0 +1,74 @@
+.editSixBox {
+    /* WebKit 浏览器（Chrome、Safari 等） */
+    scrollbar-width: thin;
+    /* Firefox */
+    scrollbar-color: #888 #f1f1f1;
+    /* Firefox */
+}
+/* WebKit 浏览器（Chrome、Safari 等） */
+.editSixBox::-webkit-scrollbar {
+    width: 8px;
+    /* 垂直滚动条宽度 */
+}
+
+.editSixBox::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    /* 滚动条轨道背景颜色 */
+}
+
+.editSixBox::-webkit-scrollbar-thumb {
+    background: #888;
+    /* 滚动条滑块颜色 */
+    border-radius: 4px;
+    /* 滚动条滑块圆角 */
+}
+
+.editSixBox::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    /* 鼠标悬停时滚动条滑块颜色 */
+}
+
+
+.editSixTop {
+    font-size: 20px;
+    /* background-color: skyblue; */
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+
+}
+
+.editSixContent {
+    display: flex;
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+.editSixTitle {
+    width: 300px;
+    text-align: right;
+    margin-right: 10px;
+}
+
+.editSixText {
+    width: calc(100% - 400px);
+}
+
+.editSixImage {
+    width: 300px;
+    height: 150px;
+    border: 1px dashed #bdbdbd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.editSixGoods{
+    width: calc(100% - 400px);
+}
+.editSixGoodsBoxItem{
+   /* background-color: skyblue; */
+   margin-bottom: 10px;
+}
+.editSixGoodsBoxChildItem{
+    font-size: 14px;
+}

src/route/TrademarkMall/components/EditSix/EditSix.tsx

@@ -1,50 +1,426 @@
-// import React from 'react'
+import { useState, useEffect } from 'react'
-import { Button } from 'antd'
+import { Button, Modal, Image, message, Spin } from 'antd'
-export default function editSix(props: any) {
+import { showImage } from '../../../../request/request'
+import { uploadSix, fileDetail } from '../../../../request/api'
+import './EditSix.css'
+export default function EditSix(props: any) {
   const height = window.innerHeight - 350;
+  const [modal, setModal] = useState(false)
   const handleSubmit = () => {
     // console.log(form);
     // 调用表单实例的 submit 方法
     // form.submit();
-    alert('提交成功')
+    // alert('提交成功')
+    setModal(true)
 
   };
+  const [upLodaing, setUpLodaing] = useState(false)
+  const [editOneData, setEditOneData] = useState<any>({
+    trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文
+    trademarkName: '', //商标名称
+    trademarkDescription: '', //商标描述
+    trademarkFile: '', //姓名授权
+    trademarkFile1: '', //肖像授权声明书
+    trademarkFile2: '', //期刊
+    trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传
+    trademarkPhoto: '', //商标图样
+
+  })
+  const [editTwoData, setEditTwoData] = useState<any>({
+    trademarkTypeDTOS: [],
+    trademarkTypeIds: []
+
+  })
+  const [editThreeData, setEditThreeData] = useState<any>({
+    trademarkUserId: '',
+    name: ''
+  })
+
+  const [editFiveData, setEditFiveData] = useState<any>({
+    trademarkFileDepute: '',
+  })
+  const [trademarkFile, setTrademarkFile] = useState<any>({}) //姓名授权书类型
+  const [trademarkFile1, setTrademarkFile1] = useState<any>({}) //肖像授权书类型
+  const [trademarkFile2, setTrademarkFile2] = useState<any>({}) //期刊证明类型
+  const getTrademarkFile = async (id: string) => {
+    try {
+      const res: any = await fileDetail(id)
+      console.log('姓名授权书详情', res);
+      setTrademarkFile(res[0])
+    } catch (error: any) {
+      if (error.response) {
+        const data = error.response.data;
+        message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+      } else {
+        console.error(error)
+      }
+    }
+  }
+  const getTrademarkFile1 = async (id: string) => {
+    try {
+      const res: any = await fileDetail(id)
+      console.log('肖像授权书详情', res);
+      setTrademarkFile1(res[0])
+    } catch (error: any) {
+      if (error.response) {
+        const data = error.response.data;
+        message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+      } else {
+        console.error(error)
+      }
+    }
+  }
+  const getTrademarkFile2 = async (id: string) => {
+    try {
+      const res: any = await fileDetail(id)
+      console.log('期刊详情', res);
+      setTrademarkFile2(res[0])
+    } catch (error: any) {
+      if (error.response) {
+        const data = error.response.data;
+        message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+      } else {
+        console.error(error)
+      }
+    }
+  }
+  useEffect(() => {
+    if (props.editOneData) {
+      setEditOneData(props.editOneData)
+      // console.log('网址',showImage(props.editOneData.trademarkFile, false));
+
+
+    }
+    if (props.editTwoData) {
+      setEditTwoData(props.editTwoData)
+    }
+    if (props.editThreeData) {
+      setEditThreeData(props.editThreeData)
+    }
+    if (props.editFiveData) {
+      setEditFiveData(props.editFiveData)
+    }
+    if (props.editOneData.trademarkFile) {
+      getTrademarkFile(props.editOneData.trademarkFile)
+    }
+    if (props.editOneData.trademarkFile1) {
+      getTrademarkFile1(props.editOneData.trademarkFile1)
+    }
+    if (props.editOneData.trademarkFile2) {
+      getTrademarkFile2(props.editOneData.trademarkFile2)
+    }
+    console.log('最终信息接收', props);
+
+  }, [props])
   return (
-    <div className='editOneTwo'>
+    <Spin tip="正在提交，请稍后..." size="small" spinning={upLodaing}>
-      <div className='topLine'></div>
+      <div className='editOneTwo'>
-      <div className='appInfoFormBox' style={{
+        <div className='topLine'></div>
-        height: height,
+        <div className='editSixBox' style={{
-        background: 'pink'
+          height: height,
-      }}></div>
+          overflowY: 'auto',
-      <div className='topLine'></div>
+        }}>
-      <div style={{
+          <div className='editSixTop'>
-        marginTop: '8px',
+            商标信息
-        display: 'flex',
+          </div>
-        justifyContent: 'flex-end',
+          <div className='editSixContent'>
-      }}>
+            <div className='editSixTitle'>商标类型 :</div>
-        <Button
+            <div className='editSixText'>{editOneData.trademarkType == 'text' ? '文字' : editOneData.trademarkType == 'image' ? '图形' : '图文'}</div>
-          style={{
+          </div>
-            width: '100px',
+          <div style={{
-            height: '40px',
+            display: editOneData.trademarkName ? 'unset' : 'none'
-            borderRadius: '5px',
+          }}>
+            <div className='editSixContent' >
+              <div className='editSixTitle'>商标名称 :</div>
+              <div className='editSixText'>{editOneData.trademarkName}</div>
+            </div>
+          </div>
+          <div className='editSixContent' >
+            <div className='editSixTitle'>商标图样 :</div>
+            <div className='editSixImage'>
+              <Image src={showImage(editOneData.trademarkPhoto, false)} style={{
+                height: '150px',
+                maxWidth: '100%',
+              }}></Image>
+            </div>
+          </div>
+          <div className='editSixContent' >
+            <div className='editSixTitle'>商标描述 :</div>
+            <div className='editSixText'>{editOneData.trademarkDescription}</div>
+          </div>
+          <div style={{
+            display: editOneData.trademarkFile ? 'unset' : 'none'
+          }}>
+            <div className='editSixContent' >
+              <div className='editSixTitle'>姓名授权书 :</div>
+              <div style={{
+                display: trademarkFile.fileType != 'pdf' ? 'unset' : 'none'
+              }}>
+                <div className='editSixImage' >
+                  <Image src={showImage(editOneData.trademarkFile, false)} style={{
+                    height: '150px',
+                    maxWidth: '100%',
+                  }}></Image>
+                </div>
+              </div>
+              <div style={{
+                display: trademarkFile.fileType == 'pdf' ? 'unset' : 'none'
+              }}>
+                <div style={{
+                  color: 'var(--color-blue)',
+                  cursor: 'pointer'
+                }}
+                  onClick={() => {
+                    window.open(showImage(editOneData.trademarkFile, false))
+                  }}>
+                  {trademarkFile.fileName}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style={{
+            display: editOneData.trademarkFile1 ? 'unset' : 'none'
+          }}>
+            <div className='editSixContent' >
+              <div className='editSixTitle'>肖像授权书 :</div>
+              <div style={{
+                display: trademarkFile1.fileType != 'pdf' ? 'unset' : 'none'
+              }}>
+                <div className='editSixImage'>
+                  <Image src={showImage(editOneData.trademarkFile1, false)} style={{
+                    height: '150px',
+                    maxWidth: '100%',
+                  }}></Image>
+                </div>
+              </div>
+              <div style={{
+                display: trademarkFile1.fileType == 'pdf' ? 'unset' : 'none'
+              }}>
+                <div style={{
+                  color: 'var(--color-blue)',
+                  cursor: 'pointer'
+                }}
+                  onClick={() => {
+                    window.open(showImage(editOneData.trademarkFile1, false))
+                  }}>
+                  {trademarkFile1.fileName}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style={{
+            display: editOneData.trademarkFile2 ? 'unset' : 'none'
+          }}>
+            <div className='editSixContent' >
+              <div className='editSixTitle'>期刊证明 :</div>
+              <div style={{
+                display: trademarkFile2.fileType != 'pdf' ? 'unset' : 'none'
+              }}>
+                <div className='editSixImage'>
+                  <Image src={showImage(editOneData.trademarkFile2, false)} style={{
+                    height: '150px',
+                    maxWidth: '100%',
+                  }}></Image>
+                </div>
+              </div>
+              <div style={{
+                display: trademarkFile2.fileType == 'pdf' ? 'unset' : 'none'
+              }}>
+                <div style={{
+                  color: 'var(--color-blue)',
+                  cursor: 'pointer'
+                }}
+                  onClick={() => {
+                    window.open(showImage(editOneData.trademarkFile2, false))
+                  }}>
+                  {trademarkFile2.fileName}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className='editSixContent' >
+            <div className='editSixTitle'>商标类别 :</div>
+            <div className='editSixGoods'>
+              {/* <div className='editSixText'>{editTwoData.trademarkTypeIds}</div> */}
+              {editTwoData.trademarkTypeDTOS.map((item: any) => {
+                return (
+                  <div key={item.id} style={{
+                    // marginBottom: 20
+                  }}>
+                    <div
+                      className=' editSixGoodsBoxItem'
+                    >
+                      <div style={{
+                        display: 'flex',
+                      }}>
+
+                        <div>
+                          第{item.code}类 {item.name}
+                        </div>
+                      </div>
+
+                    </div>
+                    <div className='editSixGoodsBoxChildItem'>
+                      {item.children.map((child: any) => {
+                        return (
+                          <div style={{
+
+                          }} key={child.id}>
+                            <div style={{
+                              display: 'flex',
+                              // flexWrap: 'wrap',
+                              textWrap: 'nowrap',
+                            }}>
+                              <div style={{
+                                lineHeight: '25px',
+                                marginRight: 10,
+                                fontWeight: 'bold',
+                              }}>{child.code}类 : </div>
+                              <div style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                              }}>
+                                {child.children.map((children: any) => {
+                                  return (
+                                    <div
+                                      style={{
+                                        padding: '2px 10px',
+                                        // // background: '#E6E6E6',
+                                        // border: '1px solid #E6E6E6',
+                                        // borderRadius: '5px',
+                                        // marginRight: 10,
+                                        marginBottom: 10,
+                                      }}
+                                      key={children.id}>
+                                      {children.code}-{children.name}
+                                    </div>
+                                  )
+                                })}
+
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      })}</div>
+                  </div>
+
+                )
+              })}
+            </div>
+          </div>
+          <div className='editSixContent' >
+            <div className='editSixTitle'>申请人 :</div>
+            <div className='editSixText'>{editThreeData.name}</div>
+          </div>
+          <div className='editSixContent' >
+            <div className='editSixTitle'>委托书 :</div>
+            <div className='editSixImage'>
+              <Image src={showImage(editFiveData.trademarkFileDepute, false)} style={{
+                height: '150px',
+                maxWidth: '100%',
+              }}></Image>
+            </div>
+          </div>
+        </div>
+        <div className='topLine'></div>
+        <div style={{
+          display: props.trademarkStatus == '2' || props.trademarkStatus == '3' || props.trademarkStatus == '4'|| props.trademarkStatus == '5'|| props.trademarkStatus == '6'|| props.trademarkStatus == '7'|| props.trademarkStatus == '8'|| props.trademarkStatus == '9'? 'none' : 'unset'
+        }}>
+          <div style={{
+            marginTop: '8px',
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}>
+            <Button
+              style={{
+                width: '100px',
+                height: '40px',
+                borderRadius: '5px',
+              }}
+              onClick={() => {
+                props.setEditProcess(5)
+              }}
+            >上一步</Button>
+            <Button
+              type='primary'
+              style={{
+                width: '100px',
+                height: '40px',
+                borderRadius: '5px',
+                marginLeft: '10px',
+              }}
+              onClick={() => {
+                handleSubmit()
+              }}
+            >上传</Button>
+          </div>
+        </div>
+        <div style={{
+          display: props.trademarkStatus == '2' ? 'unset' : 'none',
+        }}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            // backgroundColor: 'rgb(238, 159, 159)',
+            height: '65px',
+            fontSize: '18px',
+            color: 'green',
+          }}>
+            正在审核...
+          </div>
+
+        </div>
+        <div style={{
+          display: props.trademarkStatus == '3' ||  props.trademarkStatus == '4' ||  props.trademarkStatus == '5' ||props.trademarkStatus == '6' || props.trademarkStatus == '7' || props.trademarkStatus == '8' || props.trademarkStatus == '9' ? 'unset' : 'none',
+        }}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            // backgroundColor: 'rgb(238, 159, 159)',
+            height: '65px',
+            fontSize: '18px',
+            color: 'green',
+          }}>
+            {props.trademarkStatus == '3' ? '已提交至商标局': props.trademarkStatus == '4' ? '不予受理': props.trademarkStatus == '5' ? '已受理' : props.trademarkStatus == '6' ? '已发初审公告' : props.trademarkStatus == '7' ? '部分驳回' : props.trademarkStatus == '8' ? '全部驳回' : props.trademarkStatus == '9' ? '已下证' : ''}
+          </div>
+
+        </div>
+        <Modal
+          title="提示"
+          centered
+          open={modal}
+          onOk={async () => {
+            try {
+              setUpLodaing(true)
+              await uploadSix(props.trademarkId)
+              setUpLodaing(false)
+              message.success('上传成功')
+              props.setTrademarkStatus('2')
+              setModal(false)
+            } catch (error: any) {
+              setUpLodaing(false)
+              if (error.response) {
+                const data = error.response.data;
+                message.error(data.msg ? data.msg : `${data.path}(${data.status})`)
+              } else {
+                console.error(error)
+              }
+            } finally {
+              setUpLodaing(false)
+            }
           }}
-          onClick={() => {
+          onCancel={() => { setModal(false) }}
-            props.setEditProcess(4)
+          okText="确定"
-          }}
+          cancelText="取消"
-        >上一步</Button>
+        >
-        <Button
+          <span style={{
-          type='primary'
+            fontSize: '16px',
-          style={{
+            color: 'red',
-            width: '100px',
+          }}> 注:上传后无法撤回，是否继续上传？</span>
-            height: '40px',
+        </Modal>
-            borderRadius: '5px',
-            marginLeft: '10px',
-          }}
-          onClick={() => {
-            handleSubmit()
-          }}
-        >上传</Button>
       </div>
-    </div>
+    </Spin>
   )
 }

src/route/TrademarkMall/components/EditThree/edit-three.css

@@ -0,0 +1,114 @@
+/* 自定义滚动条宽度 */
+/* .editThreeAddPeopleBox {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #888 #f1f1f1;
+}
+.editThreeAddPeopleBox::-webkit-scrollbar {
+    width: 8px;
+}
+.editThreeAddPeopleBox::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.editThreeAddPeopleBox::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.editThreeAddPeopleBox::-webkit-scrollbar-thumb:hover {
+    background: #555;
+} */
+.editThreeAddPeopleBox{
+    padding-top: 10px;
+}
+.addPeopleBox {
+    width: 300px;
+    height: 150px;
+    border: 1px solid #D9D9D9;
+    color: #979797;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-left: 100px;
+    margin-top: 20px;
+}
+
+.addPeopleBox:hover {
+    border: 1px solid #5892e9;
+    color: #5892e9;
+}
+
+.addPeopleTitle {
+    font-size: 18px;
+    font-weight: 700;
+    /* margin-top: 10px; */
+}
+
+.addPeopleItem {
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+}
+
+.addPeopleFormItem {
+    /* display: flex; */
+    /* margin-top: 20px; */
+   
+
+}
+.addFormItemTitle{
+    margin-bottom: 5px;
+}
+.addPeopleFormItemR{
+    margin-left: 50px;
+}
+
+.addPeopleItemTitle {
+    font-size: 16px;
+    /* background-color: skyblue; */
+    /* width: 120px; */
+    text-align: left;
+    margin-right: 10px;
+}
+.addPeopleItemTitleS{
+    width: 90px;
+}
+
+.redTips {
+    color: red;
+}
+
+.editThreeUpBox {
+    width: 300px;
+    height: 150px;
+    border: 1px dashed #D9D9D9;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #979797;
+}
+
+.exampleImg {
+    width: 190px;
+    height: 150px;
+    border: 1px dashed #D9D9D9;
+    border: 1px dashed #D9D9D9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+
+}
+.addressLine{
+    width: 10px;
+    height: 1px;
+    background: rgb(182, 182, 182);
+    margin-left: 5px;
+    margin-right: 5px;
+}

src/route/TrademarkMall/components/EditTwo/EditTwoNew.tsx

@@ -0,0 +1,861 @@
+import { useEffect, useState } from 'react'
+import {
+    Button, Select,
+    //  Collapse, Tree 
+    Input,
+    message,
+    Spin,
+    Modal,
+} from 'antd'
+import {
+    SyncOutlined,
+    DeleteOutlined,
+    CloseOutlined
+} from '@ant-design/icons';
+// import { useParams } from 'react-router-dom';
+import { trademarkTypeList, uptrademarkList, trademarkTypeSearch, trademarkSchemeList, saveTrademarkScheme, deleteTrademarkScheme } from '../../../../request/api'
+
+const { Search } = Input;
+
+// import {
+//   DownOutlined,
+// } from '@ant-design/icons';
+import TreeMenu from './components/TreeMenuNew/TreeMenuNew'
+// import type { TreeDataNode } from 'antd';
+import './edit-tow.css'
+export default function EditTwo(props: any) {
+    // const pathParams = useParams();
+    // const firstPrice = pathParams.firstPrice
+    // const [messageApi, contextHolder] = message.useMessage();
+    const [messageApi, contextHolder] = message.useMessage();
+    const height = window.innerHeight - 350;
+    const [loading, setLoading] = useState(false)
+    const [saveModal, setSaveModal] = useState<boolean>(false) //保存为常用弹窗
+    const [deleteModal, setDeleteModal] = useState<boolean>(false) //删除提示弹窗
+    const [deleteId, setDeleteId] = useState<any>()//删除的id
+    const [deleteTitle, setDeleteTitle] = useState<any>()//删除的标题
+    const [schemeName, setSchemeName] = useState<string>('')
+    const [ids, setIds] = useState<any>([])
+    const [expandedIds, setExpandedIds] = useState<string[]>([]);
+
+    // 类型数组
+    const [trademarkList, setTrademarkList] = useState<any>([])
+    // 被选择的类型数组
+    const [selectedTreeList, setSelectedTreeList] = useState<any>([])
+    // 提交
+    const handleSubmit = async () => {
+        // console.log(ids);
+        // console.log(selectedTreeList);
+        if (ids.length <= 0) {
+            message.error('请选择分类');
+            return
+        } else {
+            // 使用 Set 数据结构比较
+            const getElementCount = (arr: string[]) => {
+                const countMap = new Map<string, number>();
+                arr.forEach((element) => {
+                    countMap.set(element, (countMap.get(element) || 0) + 1);
+                });
+                return countMap;
+            };
+
+            const checkedIdsCount = getElementCount(ids);
+            const editTwoArrayCount = getElementCount(props.editTwoData.trademarkTypeIds);
+            const isEqual =
+                checkedIdsCount.size === editTwoArrayCount.size &&
+                Array.from(checkedIdsCount.entries()).every(([key, value]) =>
+                    editTwoArrayCount.get(key) === value
+                );
+            if (isEqual) {
+                props.setEditProcess(3);
+                return;
+            }
+            try {
+                setLoading(true)
+                await uptrademarkList(props.trademarkId, {
+                    typeIds: ids
+                })
+                props.setEditTwoData({
+                    trademarkTypeIds: ids,
+                    trademarkTypeDTOS: selectedTreeList
+                })
+                props.setEditProcess(3);
+                props.getOrderList()
+                setLoading(false)
+            } catch (error: any) {
+                setLoading(false)
+                if (error.response) {
+                    const data = error.response.data;
+                    messageApi.open({
+                        type: 'error',
+                        content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                    });
+                } else {
+                    console.error(error)
+                }
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        // await uptrademarkList(props.trademarkId, {
+        //     typeIds: ids
+        // })
+
+
+    };
+    // 处理删除小类的点击事件
+    const handleDeleteSmallCategory = (categoryId: any, middleCategoryId: any, smallCategoryId: any) => {
+        setSelectedTreeList((prevSelectedCategories: any) => {
+            return prevSelectedCategories.map((category: any) => {
+                if (category.id === categoryId) {
+                    return {
+                        ...category,
+                        children: category.children.map((middleCategory: any) => {
+                            if (middleCategory.id === middleCategoryId) {
+                                return {
+                                    ...middleCategory,
+                                    children: middleCategory.children.filter((child: any) => child.id !== smallCategoryId)
+                                };
+                            }
+                            return middleCategory;
+                        }).filter((middleCategory: any) => middleCategory.children.length > 0)
+                    };
+                }
+                return category;
+            }).filter((category: any) => category.children.length > 0);
+        });
+
+        // 更新 checkedIds 状态
+        setIds((prevCheckedIds: any) => prevCheckedIds.filter((id: any) => id !== smallCategoryId));
+    };
+    // 处理删除大类的点击事件
+    const handleDeleteCategory = (categoryId: any) => {
+        // 找到要删除的大类下所有小类的 id
+        const targetCategory = selectedTreeList.find((category: any) => category.id === categoryId);
+        const smallCategoryIdsToRemove = targetCategory?.children.flatMap((middleCategory: any) =>
+            middleCategory.children.map((child: any) => child.id)
+        ) || [];
+
+        // 更新 selectedTreeList 状态，移除对应的大类
+        setSelectedTreeList((prevSelectedCategories: any) =>
+            prevSelectedCategories.filter((category: any) => category.id !== categoryId)
+        );
+
+        // 更新 ids 状态，移除该大类下所有小类的 id
+        setIds((prevCheckedIds: any) =>
+            prevCheckedIds.filter((id: any) => !smallCategoryIdsToRemove.includes(id))
+        );
+    };
+    const formatNumber = (num: number) => {
+        return Number.isInteger(num) ? num : num.toFixed(2);
+    };
+    // useEffect(() => {
+
+
+    // }, [ids])
+
+    const getTrademarkTypeList = async (id: string) => {
+        try {
+            setLoading(true)
+            const res = await trademarkTypeList({
+                id: id
+            })
+            // console.log('嘻嘻嘻噶噶', res);
+            setTrademarkList(res)
+            setLoading(false)
+        } catch (error: any) {
+            setLoading(false)
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        } finally {
+            setLoading(false)
+        }
+
+    }
+    const [schemeDetialList, setSchemeDetialList] = useState<any>([])
+    const [typesId, setTypesId] =  useState<string | null>(null) //备选方案的id
+    const [options, setOptions] = useState<any>([])
+    // 获取我的方案列表
+    const getTrademarkSchemeList = async () => {
+        try {
+            const res: any = await trademarkSchemeList()
+            console.log('我得列表', res);
+            setOptions(res.map((item: any) => {
+                return {
+                    value: item.typesId,
+                    label: item.typesTitle
+                }
+            }))
+            setSchemeDetialList(res)
+
+
+        } catch (error: any) {
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        }
+    }
+
+    useEffect(() => {
+        getTrademarkTypeList('')
+        getTrademarkSchemeList()
+    }, [])
+    useEffect(() => {
+        if (props.editTwoData.trademarkTypeIds.length > 0) {
+            // console.log('传递过来的', props.editTwoData);
+            setSelectedTreeList(props.editTwoData.trademarkTypeDTOS)
+            setIds(props.editTwoData.trademarkTypeIds)
+
+        }
+    }, [props.editTwoData])
+
+    useEffect(() => {
+        // console.log(selectedTreeList);
+        // 找出selectedTreeList数组里的id 形成一个新的大类数组
+        // console.log(ids);
+
+    }, [selectedTreeList])
+
+
+
+
+
+
+
+
+
+
+    // useEffect(() => {
+    //   console.log('selectedCategories', selectedCategories);
+
+    // }, [selectedCategories])
+    const [keyWords, setKeyWords] = useState<string>('');
+    const [searchKeyWords, setSearchKeyWords] = useState<string>('');
+    const onSearch = (value: string) => {
+        setSearchKeyWords(value)
+
+    }
+    // 搜索
+    const getTrademarkTypeSearch = async () => {
+        try {
+            setLoading(true)
+            setTrademarkList([])
+            const res = await trademarkTypeSearch({
+                keywords: searchKeyWords
+            })
+            setTrademarkList(res)
+            setLoading(false)
+            //    res这个数组有三层  要每层都有处于打开状态 就是把每层的id都赋值给expandedIds
+            // 遍历res  把每层的id都赋值给expandedIds
+            const allIds: string[] = [];
+            const collectIds = (list: any) => {
+                list.forEach((item: any) => {
+                    allIds.push(item.id);
+                    if (item.children) {
+                        collectIds(item.children);
+                    }
+                });
+            };
+            collectIds(res);
+
+            setExpandedIds(allIds);
+
+            // const allIds: string[] = [];
+            // // 递归收集所有节点的 id
+            // const collectIds = (list: any) => {
+            //     list.forEach((item: any) => {
+            //         allIds.push(item.id);
+            //         if (item.children) {
+            //             collectIds(item.children);
+            //         }
+            //     });
+            // };
+            // collectIds(trademarkList);
+            // // 设置展开所有节点
+            // setExpandedIds(allIds);
+        } catch (error: any) {
+            setLoading(false)
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+    // 设置打开的数组
+    // const initExpandedIds = async () => {
+    //     await getTrademarkTypeList('')
+    //     const allIds: string[] = [];
+    //     const collectIds = (list: any) => {
+    //         list.forEach((item: any) => {
+    //             allIds.push(item.id);
+    //             if (item.children) {
+    //                 collectIds(item.children);
+    //             }
+    //         });
+    //     };
+    //     collectIds(selectedTreeList);
+
+    //     setExpandedIds(allIds);
+    // };
+    useEffect(() => {
+        if (searchKeyWords) {
+            getTrademarkTypeSearch()
+            // console.log('呵呵呵', selectedTreeList);
+
+        } else {
+            // console.log('呵呵呵', selectedTreeList);
+
+            // initExpandedIds()
+            getTrademarkTypeList('')
+            setExpandedIds([])
+        }
+    }, [searchKeyWords])
+
+
+
+
+
+
+
+
+
+
+    return (
+        <Spin tip="正在加载，请稍后..." size="small" spinning={loading}>
+            <div className='editTwoBox'>
+                {contextHolder}
+                <div className='topLine'></div>
+                <div className='' style={{
+                    height: height,
+                    // background: 'red'
+                }}>
+                    <div style={{
+                        height: '15%',
+                        width: '100%',
+                        // background: 'pink',
+                        padding: '10px',
+                        boxSizing: 'border-box',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                    }}>
+                        <div className='editTwoTitle'>选择推荐方案</div>
+                        <div style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}>
+                            <Select
+                                allowClear
+                                style={{ width: '183px', fontSize: '16px' }}
+                                onChange={async (value: string) => {
+                                    // console.log(`selected ${value}`);
+                                    // alert(`selected ${value}`)
+                                    // lyp
+                                    setTypesId(value)
+
+
+                                }}
+                                value={typesId}
+                                options={options}
+                                optionRender={(option) => (
+                                    <div style={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                    }}>
+                                        <div style={{
+                                            maxWidth: '120px'
+                                        }}>{option.data.label}</div>
+                                        <div
+                                            title='删除'
+                                            onClick={(e) => {
+                                                // 组织默认行为
+                                                e.stopPropagation()
+                                                // console.log('删除', option.data);
+                                                setDeleteId(option.data.value)
+                                                setDeleteTitle(option.data.label)
+                                                setDeleteModal(true)
+                                            }}><CloseOutlined /></div>
+
+                                    </div>
+                                )}
+                                placeholder="请选择领域"
+                            // defaultValue=""
+                            />
+                            <Button type="primary" style={{
+                                marginLeft: '10px',
+                            }}
+                                onClick={() => {
+                                    if (typesId) {
+                                        // 从schemeDetialList中找出typesId对应的对象
+                                        const scheme = schemeDetialList.find((item: any) => item.typesId === typesId)
+                                        console.log(scheme);
+                                        // console.log(selectedTreeList);
+                                        // console.log(ids);
+                                        setIds(scheme.trademarkTypeIds)
+                                        setSelectedTreeList(scheme.trademarkTypeDTOS)
+
+                                    } else {
+                                        messageApi.open({
+                                            type: 'error',
+                                            content: '请选择方案',
+                                        });
+                                    }
+                                }}
+                            >
+                                确认添加
+                            </Button>
+                            <div style={{
+                                color: '#5a5a5a',
+                                marginLeft: '10px'
+                            }}>
+                                {/* 常用商标类别: */}
+                            </div>
+
+                        </div>
+
+                    </div>
+                    <div style={{
+                        height: '85%',
+                        width: '100%',
+                        // background: 'skyblue',
+                        display: 'flex',
+                    }}>
+                        <div className='editTwoBotL' >
+                            <div className='editTwoBTopSearch'>
+                                <Search placeholder="请输入关键字"
+                                    allowClear
+                                    onSearch={onSearch} value={keyWords} onChange={async (e) => {
+                                        setKeyWords(e.target.value)
+                                        if (e.target.value == '' && searchKeyWords) {
+                                            setSearchKeyWords('');
+                                            console.log(selectedTreeList);
+
+
+
+                                        }
+                                    }} style={{ width: '100%' }} />
+                                <Button style={{
+                                    height: 30,
+                                    width: 40,
+                                    marginLeft: 10
+                                }} onClick={() => {
+                                    setKeyWords('');
+                                    setSearchKeyWords('');
+                                    setExpandedIds([]);
+
+                                }} icon={<SyncOutlined />}></Button>
+                            </div>
+                            <div className='editTwoBTopTitle'>类目索引</div>
+                            <div className='editTwoBTopText editTwoBTopTextL' style={{
+
+                            }}>
+
+                                {/* <Tree loadData={ } treeData={trademarkList} />; */}
+                                {/* <Tree  treeData={trademarkList} /> */}
+                                <TreeMenu
+                                    ids={ids}
+                                    setIds={setIds}
+                                    trademarkList={trademarkList} setTrademarkList={setTrademarkList}
+                                    selectedTreeList={selectedTreeList}
+                                    setSelectedTreeList={setSelectedTreeList}
+                                    searchKeyWords={searchKeyWords}
+                                    expandedIds={expandedIds}
+                                    setExpandedIds={setExpandedIds}
+                                ></TreeMenu>
+
+
+                            </div>
+                        </div>
+                        <div className='editTwoBotR'>
+                            <div className='editTwoBTopTitle' style={{
+                                display: 'flex',
+                            }}>
+                                <div style={{
+                                    textWrap: 'nowrap',
+                                }}>已选得商标类别 ：</div>
+                                <div style={{
+                                    width: '100%',
+                                    display: selectedTreeList.length > 0 ? 'unset' : 'none',
+                                }}>
+                                    <div style={{
+                                        // background: 'skyblue',
+                                        width: '100%',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        paddingRight: 10,
+                                        boxSizing: 'border-box',
+                                    }}>
+                                        <div>
+                                            {(() => {
+                                                let middleCategoryCount = 0;
+                                                let smallCategoryCount = 0;
+
+                                                // 遍历 selectedCategories 计算中类和小类的数量
+                                                selectedTreeList.forEach((category: any) => {
+                                                    middleCategoryCount += category.children.length;
+                                                    category.children.forEach((middleCategory: any) => {
+                                                        smallCategoryCount += middleCategory.children.length;
+                                                    });
+                                                });
+
+                                                return `共${selectedTreeList.length}大类 累计${middleCategoryCount}个小类/${smallCategoryCount}项商品服务`;
+                                            })()}
+                                        </div>
+                                        <div style={{
+                                            fontSize: 14,
+                                        }}>
+                                            <a style={{
+                                                cursor: 'pointer',
+                                            }}
+                                                onClick={() => {
+                                                    setSelectedTreeList([]);
+                                                    setIds([]);
+                                                    // setExpandedIds([]);
+                                                }}
+                                            >清空</a>
+                                            <a style={{
+                                                marginLeft: 10,
+                                                cursor: 'pointer',
+                                            }}
+                                                onClick={() => {
+                                                    // alert('保存为常用')
+                                                    setSaveModal(true)
+                                                    setSchemeName('')
+                                                }}
+                                            >保存为常用</a>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <span style={{
+                                    display: selectedTreeList.length <= 0 ? 'unset' : 'none',
+                                }}>
+                                    无
+                                </span>
+
+                            </div>
+
+                            <div className='editTwoBTopText editTwoBTopTextR'>
+
+
+                                <div className='editTwoGoodsBox' style={{
+                                    // display: selectedTreeList.length > 0 ? 'unset' : 'none',
+                                    border: selectedTreeList.length > 0 ? '1px solid #e9e9e9' : 'none',
+                                }}>
+                                    {selectedTreeList.map((item: any, index: number) => {
+                                        const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0);
+                                        return (
+                                            <div key={item.id} style={{
+                                                // marginBottom: 20
+                                            }}>
+                                                <div
+                                                    className='editTwoGoodsBoxItem'
+                                                >
+                                                    <div style={{
+                                                        display: 'flex',
+                                                    }}>
+
+                                                        <div>
+                                                            第{item.code}类 {item.name}
+                                                        </div>
+                                                        <div>(共{totalCount}项 , 10项以上每项附加收费{item.price}元)</div>
+                                                    </div>
+                                                    <div style={{
+                                                        paddingRight: 10,
+                                                        boxSizing: 'border-box',
+                                                        color: 'red'
+                                                    }}>
+                                                        <span style={{
+                                                            display: index == 0 ? 'unset' : 'none'
+                                                        }}>{
+                                                                // totalCount <= 10 ?firstPrice:Number(firstPrice) + (totalCount-10) * item.price
+                                                                // trademarkModePrice={trademarkModePrice}
+                                                                totalCount <= 10 ? props.trademarkModePrice : props.trademarkModePrice + (totalCount - 10) * item.price
+
+                                                            }</span>
+                                                        <span style={{
+                                                            display: index > 0 ? 'unset' : 'none'
+                                                        }}>
+                                                            ￥{formatNumber(totalCount <= 10 ? props.trademarkModeOldPrice : props.trademarkModeOldPrice + item.price * (totalCount - 10))}
+                                                        </span>
+
+                                                        <span onClick={() => {
+                                                            // 调用删除中类的函数
+                                                            handleDeleteCategory(item.id);
+                                                        }}
+                                                            style={{
+                                                                marginLeft: 10,
+                                                                cursor: 'pointer',
+                                                                color: 'rgb(116, 116, 116)'
+                                                            }}><DeleteOutlined /></span>
+                                                    </div>
+                                                </div>
+                                                <div className='editTwoGoodsBoxChildItem'>
+                                                    {item.children.map((child: any) => {
+                                                        return (
+                                                            <div style={{
+
+                                                            }} key={child.id}>
+                                                                <div style={{
+                                                                    display: 'flex',
+                                                                    // flexWrap: 'wrap',
+                                                                    textWrap: 'nowrap',
+                                                                }}>
+                                                                    <div style={{
+                                                                        lineHeight: '25px',
+                                                                        marginRight: 10,
+                                                                    }}>{child.code}类 : </div>
+                                                                    <div style={{
+                                                                        display: 'flex',
+                                                                        flexWrap: 'wrap',
+                                                                    }}>
+                                                                        {child.children.map((children: any) => {
+                                                                            return (
+                                                                                <div
+                                                                                    style={{
+                                                                                        padding: '2px 10px',
+                                                                                        // background: '#E6E6E6',
+                                                                                        border: '1px solid #E6E6E6',
+                                                                                        borderRadius: '5px',
+                                                                                        marginRight: 10,
+                                                                                        marginBottom: 10,
+                                                                                    }}
+                                                                                    key={children.id}>
+                                                                                    {children.code}-{children.name}  <span
+                                                                                        onClick={() => {
+                                                                                            handleDeleteSmallCategory(item.id, child.id, children.id);
+                                                                                        }}
+                                                                                        style={{
+                                                                                            marginLeft: 5,
+                                                                                            cursor: 'pointer',
+                                                                                        }}><CloseOutlined /></span>
+                                                                                </div>
+                                                                            )
+                                                                        })}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        )
+                                                    })}</div>
+                                            </div>
+
+                                        )
+                                    })}
+                                </div>
+                                <div style={{
+                                    display: selectedTreeList.length <= 0 ? 'unset' : 'none',
+
+                                }}>
+                                    <div className='editTwoGoodsBox' style={{
+                                        // background: 'pink',
+                                        width: '100%',
+                                        height: '100%',
+
+                                    }}>
+                                        <div style={{
+                                            width: '100%',
+                                            height: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }}>
+                                            <div>
+                                                <div style={{
+                                                    fontSize: 16,
+                                                    color: 'rgb(135, 135, 135)'
+                                                }}>点击左侧类目列表选择商标类别群组或使用推荐方案</div>
+                                                <div style={{
+                                                    color: 'red'
+                                                }}>特别提醒:若申请主体执照经营范围含有“商标代理”、“专利代理”、“知识产权服务“等</div>
+                                                <div style={{
+                                                    color: 'red'
+                                                }}>只可注册<span style={{
+                                                    color: '#1677ff'
+                                                }}> 4506 </span> 下的商品服务项目，否则将被商标局不予受理或驳回，请知悉。</div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+
+
+                </div>
+                <div className='topLine'></div>
+                <div style={{
+                    marginTop: '8px',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }}>
+                    <Button
+                        style={{
+                            width: '100px',
+                            height: '40px',
+                            borderRadius: '5px',
+                        }}
+                        onClick={() => {
+                            props.setEditProcess(1)
+                        }}
+                    >上一步</Button>
+                    <Button
+                        type='primary'
+                        style={{
+                            width: '100px',
+                            height: '40px',
+                            borderRadius: '5px',
+                            marginLeft: '10px',
+                        }}
+                        onClick={() => {
+                            handleSubmit()
+                            setTypesId(null)
+                           
+                        }}
+                    >下一步</Button>
+                </div>
+            </div>
+            <Modal
+                title="保存为常用"
+                okText="确定"
+                cancelText="取消"
+
+                destroyOnClose={true}
+
+                open={saveModal}
+                // 点击遮罩关闭不了
+                maskClosable={false}
+                onOk={async () => {
+                    // setRevokeModal(false)
+                    // setSaveModal(false)
+                    if (schemeName) {
+                        // setSaveModal(false)
+                        // console.log(schemeName);
+                        // console.log(selectedTreeList);
+                        // console.log(ids);
+                        try {
+                            await saveTrademarkScheme({
+                                typesTitle: schemeName,
+                                typeList: ids,
+                            })
+                            messageApi.open({
+                                type: 'success',
+                                content: '保存成功',
+                            })
+                            setSaveModal(false)
+
+                            getTrademarkSchemeList()
+                        } catch (error: any) {
+                            if (error.response) {
+                                const data = error.response.data;
+                                messageApi.open({
+                                    type: 'error',
+                                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                                });
+                            } else {
+                                console.error(error)
+                            }
+                        }
+
+
+                    } else {
+                        message.error('请输入方案名称')
+                    }
+
+                }}
+                onCancel={() => {
+                    setSaveModal(false)
+                }}
+                width={400}
+                centered
+            >
+                <div style={{
+                    display: 'flex',
+
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '10px 30px',
+                }}>
+                    <div style={{
+                        fontSize: 16,
+
+                    }}>
+                        方案名称 ：
+                    </div>
+                    <div>
+                        <Input value={schemeName} onChange={(e) => {
+                            setSchemeName(e.target.value)
+                        }} placeholder='请输入保存方案名称'></Input>
+                    </div>
+                </div>
+            </Modal>
+            <Modal
+                title="提示"
+                okText="确定"
+                cancelText="取消"
+
+                destroyOnClose={true}
+
+                open={deleteModal}
+                // // 点击遮罩关闭不了
+                // maskClosable={false}
+                onOk={async () => {
+                    try {
+                        await deleteTrademarkScheme(deleteId)
+                        messageApi.open({
+                            type: 'success',
+                            content: '删除成功',
+                        })
+                        getTrademarkSchemeList()
+                        setDeleteModal(false)
+                    } catch (error: any) {
+                        if (error.response) {
+                            const data = error.response.data;
+                            messageApi.open({
+                                type: 'error',
+                                content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                            });
+                        } else {
+                            console.error(error)
+                        }
+                    }
+
+                }}
+                onCancel={() => {
+                    setDeleteModal(false)
+                }}
+                width={400}
+                centered
+            >
+                <div>
+                    确定删除{deleteTitle}吗?
+                </div>
+            </Modal>
+        </Spin>
+    )
+}

src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx

@@ -0,0 +1,124 @@
+import { useEffect } from 'react';
+// import { Checkbox } from 'antd';
+import './tree-menu.css';
+import {
+  DownOutlined,
+  // UpOutlined,
+  RightOutlined
+} from '@ant-design/icons';
+
+// interface TreeMenuProps {
+//   trademarkCategories: {
+//     id: any;
+//     name: string;
+//     children: {
+//       id: any;
+//       name: string;
+//       children: { id: any; name: string }[];
+//     }[];
+//   }[];
+//   expandedIds: any[];
+//   setExpandedIds: (ids: any[]) => void;
+//   checkedIds: any[];
+//   setCheckedIds: (ids: any[]) => void;
+//   selectedCategories: {
+//     id: any;
+//     name: string;
+//     children: {
+//       id: any;
+//       name: string;
+//       children: { id: any; name: string }[];
+//     }[];
+//   }[];
+//   setSelectedCategories: (categories: any[]) => void;
+//   handleExpandClick: (id: any) => void;
+//   handleSmallMenuClick: (id: any) => void;
+// }
+
+export default function TreeMenu({
+  trademarkCategories,
+  expandedIds,
+  //   setExpandedIds,
+  // checkedIds,
+  //   setCheckedIds,
+  //   selectedCategories,
+  //   setSelectedCategories,
+  handleExpandClick,
+  // handleSmallMenuClick
+}: any) {
+  useEffect(() => {
+    console.log('props', trademarkCategories);
+  }, []);
+
+  // const renderChildren = (children: any[], level: number) => {
+  //   return children.map((child) => {
+  //     const isExpanded = expandedIds.includes(child.id);
+  //     const isLeaf = !child.children || child.children.length === 0;
+  //     const isChecked = checkedIds.includes(child.id);
+
+  //     return (
+  //       <div key={child.id} style={{ marginLeft: level * 15 }}>
+  //         {!isLeaf && (
+  //           <div
+  //             className='bigMenu'
+  //             onClick={() => handleExpandClick(child.id)}
+  //           >
+  //             <div style={{
+  //               color: 'rgb(124, 124, 124)',
+  //             }}>
+  //               {isExpanded ? <DownOutlined /> : <RightOutlined />}
+  //             </div>
+  //             <div> {child.code}-{child.name}</div>
+  //           </div>
+  //         )}
+  //         {isLeaf && (
+  //           <div
+  //             className='smallMenu'
+  //             onClick={() => handleSmallMenuClick(child.id)}
+  //             style={{
+  //               cursor: 'pointer',
+  //               display: 'flex',
+  //               alignItems: 'center',
+  //               paddingRight: 10,
+  //             }}
+  //           >
+  //             <div style={{
+  //               // background:'skyblue',
+  //               overflow: 'hidden',
+  //               textOverflow: 'ellipsis',
+  //               whiteSpace: 'nowrap',
+  //             }}
+  //             title={child.name}
+  //             >{child.code}-{child.name}</div> <Checkbox style={{marginLeft:10}} checked={isChecked} />
+  //           </div>
+  //         )}
+  //         {!isLeaf && isExpanded && renderChildren(child.children, level + 1)}
+  //       </div>
+  //     );
+  //   });
+  // };
+
+  return (
+    <div>
+      {trademarkCategories.map((category: any) => {
+        const isExpanded = expandedIds.includes(category.id);
+        return (
+          <div key={category.id}>
+            <div
+              className='bigMenu'
+              onClick={() => handleExpandClick(category.id)}
+            >
+              <div style={{
+                color: 'rgb(124, 124, 124)',
+              }}>
+                {isExpanded ? <DownOutlined /> : <RightOutlined />}
+              </div>
+              <div> 第{category.code}类 {category.name}</div>
+            </div>
+            {/* {isExpanded && renderChildren(category.children, 1)} */}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css

@@ -0,0 +1,13 @@
+.bigMenu {
+    display: flex;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.smallMenu {
+    /* margin-left: 20px; */
+    cursor: pointer;
+    margin-top: 10px;
+    /* background-color: skyblue; */
+    
+}

src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/TreeMenuNew.tsx

@@ -0,0 +1,422 @@
+import { useState } from 'react'
+import {
+    DownOutlined,
+    // UpOutlined,
+    RightOutlined
+} from '@ant-design/icons';
+import './tree-menu.css'
+import {
+    message,
+    Spin,
+    Checkbox
+} from 'antd'
+import { trademarkTypeList, } from '../../../../../../request/api'
+
+// 定义数据项类型
+type ItemType = {
+    id: string;
+    name: string;
+    children?: ItemType[];
+};
+
+export default function TreeMenuNew(props: any) {
+    const [messageApi, contextHolder] = message.useMessage();
+    const [loading, setLoading] = useState(false)
+
+    // useEffect(() => {
+    //     console.log(props.searchKeyWords);
+    // }, [props.searchKeyWords])
+
+
+    // 获取中类
+    const getTrademarkTypeList = async (id: string) => {
+        try {
+            setLoading(true)
+            const res = await trademarkTypeList({
+                id: id
+            })
+            const updatedList = props.trademarkList.map((item: ItemType) => {
+                if (item.id === id) {
+                    return { ...item, children: res };
+                }
+                return item;
+            });
+            props.setTrademarkList(updatedList)
+            // 展开当前点击的项
+            props.setExpandedIds((prevIds: any) => [...prevIds, id]);
+            setLoading(false)
+        } catch (error: any) {
+            setLoading(false)
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    // 获取小类
+    const getTrademarkTypeListSmall = async (id: string) => {
+        try {
+            setLoading(true)
+            const res = await trademarkTypeList({
+                id: id
+            })
+            const updatedList = props.trademarkList.map((item: ItemType) => {
+                if (item.children) {
+                    return {
+                        ...item,
+                        children: item.children.map((child: ItemType) => {
+                            if (child.id === id) {
+                                return { ...child, children: res };
+                            }
+                            return child;
+                        })
+                    };
+                }
+                return item;
+            });
+            props.setTrademarkList(updatedList)
+            // 展开当前点击的中类项
+            props.setExpandedIds((prevIds: any) => [...prevIds, id]);
+            setLoading(false)
+        } catch (error: any) {
+            setLoading(false)
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    // 切换展开状态的函数
+    const toggleExpand = (id: string) => {
+        props.setExpandedIds((prevIds: any) => {
+            if (prevIds.includes(id)) {
+                return prevIds.filter((prevId: any) => prevId !== id);
+            } else {
+                return [...prevIds, id];
+            }
+        });
+    };
+
+    // 点击勾选和取消勾选
+    const handleSmallMenuClick = (id: any) => {
+        let targetCategory: any;
+        let targetMiddleCategory: any;
+        // 找到小类所属的大类和中类
+        outerLoop: for (const category of props.trademarkList) {
+            for (const middleCategory of category.children) {
+                // 检查 middleCategory.children 是否存在
+                if (middleCategory.children && middleCategory.children.some((child: any) => child.id === id)) {
+                    targetCategory = category;
+                    targetMiddleCategory = middleCategory;
+                    break outerLoop;
+                }
+            }
+        }
+
+        if (!targetCategory || !targetMiddleCategory) return;
+
+        const isChecked = props.ids.includes(id);
+
+        props.setIds((prevIds: any) => {
+            if (isChecked) {
+                return prevIds.filter((prevId: any) => prevId !== id);
+            } else {
+                return [...prevIds, id];
+            }
+        });
+
+        props.setSelectedTreeList((prevSelectedCategories: any) => {
+            const categoryIndex = prevSelectedCategories.findIndex(
+                (category: any) => category.id === targetCategory.id
+            );
+
+            if (isChecked) {
+                // 取消勾选
+                if (categoryIndex > -1) {
+                    const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex(
+                        (middleCategory: any) => middleCategory.id === targetMiddleCategory.id
+                    );
+                    if (middleCategoryIndex > -1) {
+                        const updatedChildren = prevSelectedCategories[categoryIndex].children[middleCategoryIndex].children.filter(
+                            (child: any) => child.id !== id
+                        );
+
+                        if (updatedChildren.length === 0) {
+                            // 若该中类下没有选中的小类，移除该中类
+                            const updatedMiddleCategories = prevSelectedCategories[categoryIndex].children.filter(
+                                (_: any, index: any) => index !== middleCategoryIndex
+                            );
+                            if (updatedMiddleCategories.length === 0) {
+                                // 若该大类下没有选中的中类，移除该大类
+                                return prevSelectedCategories.filter(
+                                    (_: any, index: any) => index !== categoryIndex
+                                );
+                            } else {
+                                return prevSelectedCategories.map((category: any, index: any) =>
+                                    index === categoryIndex
+                                        ? { ...category, children: updatedMiddleCategories }
+                                        : category
+                                );
+                            }
+                        } else {
+                            return prevSelectedCategories.map((category: any, catIndex: any) =>
+                                catIndex === categoryIndex
+                                    ? {
+                                        ...category,
+                                        children: category.children.map((middleCategory: any, midIndex: any) =>
+                                            midIndex === middleCategoryIndex
+                                                ? { ...middleCategory, children: updatedChildren }
+                                                : middleCategory
+                                        )
+                                    }
+                                    : category
+                            );
+                        }
+                    }
+                }
+            } else {
+                // 勾选
+                const newChild = targetMiddleCategory.children.find((child: any) => child.id === id);
+                if (categoryIndex > -1) {
+                    const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex(
+                        (middleCategory: any) => middleCategory.id === targetMiddleCategory.id
+                    );
+                    if (middleCategoryIndex > -1) {
+                        // 若该中类已存在，添加小类到 children 中
+                        return prevSelectedCategories.map((category: any, catIndex: any) =>
+                            catIndex === categoryIndex
+                                ? {
+                                    ...category,
+                                    children: category.children.map((middleCategory: any, midIndex: any) =>
+
+                                        midIndex === middleCategoryIndex
+                                            ? {
+                                                ...middleCategory,
+                                                // children: [...middleCategory.children, {
+                                                //     id: newChild.id,
+                                                //     name: newChild.name,
+                                                //     code: newChild.code // 添加 code 字段
+                                                // }]
+                                                children: [...middleCategory.children, newChild]
+                                            }
+                                            : middleCategory
+                                    )
+                                }
+                                : category
+                        );
+                    } else {
+                        // 若该中类不存在，新增一个中类项
+                        return prevSelectedCategories.map((category: any, catIndex: any) =>
+                            catIndex === categoryIndex
+                                ? {
+                                    ...category,
+                                    children: [
+                                        ...category.children,
+                                        {
+                                            // id: targetMiddleCategory.id,
+                                            // name: targetMiddleCategory.name,
+                                            // code: targetMiddleCategory.code, // 添加 code 字段
+                                            // children: [{
+                                            //     id: newChild.id,
+                                            //     name: newChild.name,
+                                            //     code: newChild.code // 添加 code 字段
+                                            // }]
+                                            ...targetMiddleCategory,
+                                            children: [newChild]
+                                        }
+                                    ]
+                                }
+                                : category
+                        );
+                    }
+                } else {
+                    // 若该大类不存在，新增一个大类项
+                    return [
+                        ...prevSelectedCategories,
+                        {
+                            // id: targetCategory.id,
+                            // name: targetCategory.name,
+                            // code: targetCategory.code, // 添加 code 字段
+                            ...targetCategory,
+                            children: [
+                                {
+                                    // id: targetMiddleCategory.id,
+                                    // name: targetMiddleCategory.name,
+                                    // code: targetMiddleCategory.code, // 添加 code 字段
+                                    // children: [{
+                                    //     id: newChild.id,
+                                    //     name: newChild.name,
+                                    //     code: newChild.code // 添加 code 字段
+                                    // }]
+                                    ...targetMiddleCategory,
+                                    children: [newChild]
+                                }
+                            ]
+                        }
+                    ];
+                }
+            }
+            return prevSelectedCategories;
+        });
+    };
+    return (
+        <Spin tip="正在加载，请稍后..." size="small" spinning={loading}>
+            {contextHolder}
+            <div style={{
+                width: '100%',
+                overflow: 'hidden',
+            }}>
+                {props.trademarkList.map((item: any) => {
+                    const isExpanded = props.expandedIds.includes(item.id);
+                    return (
+                        <div key={item.id}>
+                            <div style={{
+                                display: 'flex',
+                                // alignItems: 'center',
+                                cursor: 'pointer',
+                                marginTop: 10
+                            }}
+                                onClick={() => {
+                                    if (item.children.length <= 0) {
+                                        getTrademarkTypeList(item.id);
+
+                                    } else {
+                                        toggleExpand(item.id);
+
+                                    }
+                                }}
+                            >
+                                <div>
+                                    {/* 根据展开状态显示不同图标 */}
+                                    {isExpanded ? <DownOutlined /> : <RightOutlined />}
+                                </div>
+                                <div>{item.code}-{item.name}</div>
+                            </div>
+                            <div>
+                                {/* 根据展开状态显示中类子项 */}
+                                {isExpanded && item.children.length > 0 ? item.children.map((child: any) => {
+                                    const isChildExpanded = props.expandedIds.includes(child.id);
+                                    return (
+                                        <div style={{
+                                            marginLeft: '20px',
+                                            textWrap: 'nowrap',
+                                            // background: 'pink',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+
+                                            width: '100%'
+
+                                        }}
+                                            key={child.id}
+                                            title={child.name}
+                                        >
+                                            <div style={{
+                                                display: 'flex',
+                                                // alignItems: 'center',
+                                                cursor: 'pointer',
+                                                marginTop: 10,
+
+                                            }}
+                                                onClick={() => {
+                                                    if (child.children.length <= 0) {
+                                                        getTrademarkTypeListSmall(child.id);
+                                                    } else {
+                                                        toggleExpand(child.id);
+                                                    }
+                                                }}
+                                            >
+                                                <div>
+                                                    {isChildExpanded ? <DownOutlined /> : <RightOutlined />}
+                                                </div>
+                                                <div>{child.code}-{child.name}</div>
+                                            </div>
+                                            <div style={{ marginLeft: '20px' }}>
+                                                {/* 根据展开状态显示小类子项 */}
+                                                {isChildExpanded && child.children.length > 0 ? child.children.map((grandChild: any) => (
+                                                    <div key={grandChild.id}>
+                                                        <div style={{
+                                                            display: 'flex',
+                                                            // alignItems: 'center',
+                                                            cursor: 'pointer',
+                                                            marginTop: 10,
+                                                            marginLeft: 10
+                                                        }}
+                                                            // onClick={(e) => {
+                                                            //     // 判断点击目标是否为 Checkbox 元素，如果是则不进行模拟点击操作
+                                                            //     if (e.target instanceof HTMLInputElement && e.target.type === 'checkbox') {
+                                                            //         return;
+                                                            //     }
+                                                            //     e.stopPropagation();
+                                                            //     const checkbox = e.currentTarget.querySelector('input[type="checkbox"]');
+                                                            //     if (checkbox) {
+                                                            //         // 模拟 Checkbox 的点击事件
+                                                            //         (checkbox as HTMLInputElement).click();
+                                                            //     }
+                                                            // }}
+                                                            onClick={() => {
+                                                                handleSmallMenuClick(grandChild.id)
+                                                            }}
+                                                            title={grandChild.name}
+                                                        >
+                                                            <div style={{
+                                                                marginRight: 10
+                                                            }}>
+                                                                <Checkbox
+                                                                    // 根据 props.ids 中是否存在 grandChild.id 决定选中状态
+                                                                    checked={props.ids.includes(grandChild.id)}
+                                                                // onChange={(e) => {
+                                                                //     if (e.target.checked) {
+                                                                //         // 选中时将 id 添加到 props.ids 数组
+                                                                //         props.setIds([...props.ids, grandChild.id]);
+                                                                //         console.log('大类',item);
+                                                                //         console.log('中类', child);
+                                                                //         // console.log('中类',ch);
+                                                                //         console.log('被选小类',grandChild);
+
+
+
+                                                                //     } else {
+                                                                //         // 取消选中时从 props.ids 数组移除 id
+                                                                //         props.setIds(props.ids.filter((id: string) => id !== grandChild.id));
+
+
+                                                                //     }
+                                                                // }}
+
+
+                                                                />
+                                                            </div>
+                                                            <div>{grandChild.code}-{grandChild.name}</div>
+
+                                                        </div>
+                                                    </div>
+                                                )) : null}
+                                            </div>
+                                        </div>
+                                    )
+                                }) : null}
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </Spin>
+    )
+}

src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/tree-menu.css

@@ -0,0 +1,13 @@
+.bigMenu {
+    display: flex;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.smallMenu {
+    /* margin-left: 20px; */
+    cursor: pointer;
+    margin-top: 10px;
+    /* background-color: skyblue; */
+    
+}

src/route/TrademarkMall/components/EditTwo/edit-tow.css

@@ -0,0 +1,117 @@
+.editTwoTitle {
+    font-size: 18px;
+    /* font-weight: 700; */
+}
+
+.editTwoBotL {
+    width: calc(20% - 2px);
+    height: 100%;
+    /* background-color: aqua; */
+    border-left: 1px solid #e9e9e9;
+    border-right: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+    position: relative;
+}
+
+.editTwoBotR {
+    width: calc(80% - 1px);
+    height: 100%;
+    /* background-color: rgb(179, 245, 195); */
+    border-right: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+
+}
+
+.editTwoBTopTitle {
+    height: 40px;
+    background-color: #F3F3F3;
+    font-size: 16px;
+    line-height: 40px;
+    padding-left: 10px;
+    color: #5a5a5a;
+}
+
+.editTwoBTopText {
+    height: calc(100% - 40px);
+    overflow-y: auto;
+
+
+
+    /* WebKit 浏览器（Chrome、Safari 等） */
+    scrollbar-width: thin;
+    /* Firefox */
+    scrollbar-color: #888 #f1f1f1;
+    /* Firefox */
+}
+
+/* WebKit 浏览器（Chrome、Safari 等） */
+.editTwoBTopText::-webkit-scrollbar {
+    width: 8px;
+    /* 垂直滚动条宽度 */
+}
+
+.editTwoBTopText::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    /* 滚动条轨道背景颜色 */
+}
+
+.editTwoBTopText::-webkit-scrollbar-thumb {
+    background: #888;
+    /* 滚动条滑块颜色 */
+    border-radius: 4px;
+    /* 滚动条滑块圆角 */
+}
+
+.editTwoBTopText::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    /* 鼠标悬停时滚动条滑块颜色 */
+}
+
+
+
+
+.editTwoBTopTextL {
+    padding-top: 40px;
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.editTwoBTopTextR {
+    padding: 20px;
+    box-sizing: border-box
+}
+
+.editTwoGoodsBox {
+    /* border: 1px solid #e9e9e9; */
+}
+
+.editTwoGoodsBoxItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    box-sizing: border-box;
+    background-color: #e7e7e7;
+}
+.editTwoGoodsBoxChildItem{
+    /* background-color: skyblue; */
+    padding: 10px 15px 0px 15px;
+}
+
+.editTwoBTopSearch {
+    height: 40px;
+    /* width: calc(100% - 10px); */
+    width: 100%;
+    background-color: rgb(255, 255, 255);
+    position: absolute;
+    top: 40px;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+    /* z-index: 99; */
+
+}

src/route/index/Index.tsx

@@ -23,7 +23,7 @@ import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx
 // import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
 // import ListProj from "../../components/list/ListProj.tsx";
 // import ListProjAgent from "../../components/list/ListProjAgent.tsx";
-// import { getMenuActive } from '../../util/cache.ts'
+import { getMenuActive } from '../../util/cache.ts'
 
 
 import {
@@ -57,8 +57,8 @@ import {
 } from '../../util/AjaxUtils.ts'
 import {
     // getLanguageList, getSoftTypeList
-    // appGoodsList,
+    appGoodsList,
-    buyAppGoods, appOrderList
+    buyAppGoods, appOrderList, trademarkGoodsList
 } from '../../request/api'
 import {
     setMenuActive,
@@ -87,13 +87,13 @@ interface DataType {
 }
 
 
-// import app from '../../static/left/app.png'
+import app from '../../static/left/app.png'
-// import appnew from '../../static/left/appnew.png'
+import appnew from '../../static/left/appnew.png'
-// import tra from '../../static/left/tra.png'
+import tra from '../../static/left/tra.png'
-// import tranew from '../../static/left/tranew.png'
+import tranew from '../../static/left/tranew.png'
 
-// import topblack from '../../static/appimgs/topblack.png'
+import topblack from '../../static/appimgs/topblack.png'
-// import topblue from '../../static/appimgs/topblue.png'
+import topblue from '../../static/appimgs/topblue.png'
 
 import right from '../../static/trademark/right.png'
 import yes from '../../static/trademark/yes.png'
@@ -915,7 +915,7 @@ export default function Index() {
                     copyrightLanguage: copyrightLanguage,
                     copyrightType: copyrightType,
                     // 新增特价标识
-                    goodsFlag: specialPrice=='特价' ? '特价' : ''
+                    goodsFlag: specialPrice == '特价' ? '特价' : ''
                 }
             })
         }
@@ -983,8 +983,9 @@ export default function Index() {
     const [appKeyWords, setAppKeyWords] = useState('') // 电子软著搜索关键字
     const [showAppkeyWords, setShowAppkeyWords] = useState('') // 电子软著搜索关键字显示
     const [appModal, setAppModal] = useState(false) // 申请电子软著弹窗
+    const [tipsModal, setTipsModal] = useState(false) // 申请电子软著付款提示
     const [toEditsModal, setToEditsModal] = useState(false) // 电子软著编辑弹窗
-    // const [appGoodsArray, setAppGoodsArray] = useState<any>([]) // 电子软著可选商品列表
+    const [appGoodsArray, setAppGoodsArray] = useState<any>([]) // 电子软著可选商品列表
     const [buyLoading, setBuyLoading] = useState(false) // 购买loading
     const [appOrderId, setAppOrderId] = useState<any>() // 电子软著订单id
     const [appExamineStatus, setAppExamineStatus] = useState<string | null>(null) // 电子软著审核状态
@@ -1051,24 +1052,24 @@ export default function Index() {
 
     }, [appKeyWords, appExamineStatus, appApplyStatus])
     // 获取电子软著可选商品列表
-    // const getAppGoodsList = async () => {
+    const getAppGoodsList = async () => {
-    //     try {
+        try {
-    //         const res = await appGoodsList()
+            const res = await appGoodsList()
-    //         // console.log('电子软著可选商品列表', res);
+            // console.log('电子软著可选商品列表', res);
-    //         setAppGoodsArray(res)
+            setAppGoodsArray(res)
-    //     } catch (error: any) {
+        } catch (error: any) {
 
-    //         if (error.response) {
+            if (error.response) {
-    //             const data = error.response.data;
+                const data = error.response.data;
-    //             messageApi.open({
+                messageApi.open({
-    //                 type: 'error',
+                    type: 'error',
-    //                 content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
-    //             });
+                });
-    //         } else {
+            } else {
-    //             console.error(error)
+                console.error(error)
-    //         }
+            }
-    //     }
+        }
-    // }
+    }
 
     // -----------------------------------------------------------------------------------------------
 
@@ -1126,6 +1127,34 @@ export default function Index() {
     // 申请商标是否显示------------------------------------------------------------------------------
     const [trademarkBox, setTrademarkBox] = useState(false) // 申请商标弹窗
     const [trademarkModal, setTrademarkModal] = useState(false) // 申请商标弹窗
+    const [trademarkNewKeywords, setTrademarkNewKeywords] = useState('') // 临时关键字
+    const [trademarkKeywords, setTrademarkKeywords] = useState('') // 关键字
+    const [trademarkStatus,setTrademarkStatus] = useState<string | null>(null)
+    const trademarkKeyWordshandleSearch = () => {
+        setTrademarkKeywords(trademarkNewKeywords)
+    }
+    const trademarkKeyWordshandleChange = (e: any) => {
+        setTrademarkNewKeywords(e.target.value)
+        if (e.target.value == '') {
+            setTrademarkKeywords('')
+        }
+    }
+    const trademarkInit = () => {
+        setTrademarkNewKeywords('')
+        setTrademarkKeywords('')
+        setTrademarkStatus(null)
+    }
+    useEffect(() => {
+        if (location.pathname == '/trademark-mall') {
+            nav('/trademark-mall', {
+                state: {
+                    keywords: trademarkKeywords,
+                    trademarkStatus:trademarkStatus
+                }
+            })
+        }
+
+    }, [trademarkKeywords,trademarkStatus])
     // const [toRradeMarkModal, setToRradeMarkModal] = useState(false) // 申请商标编辑弹窗
     // ----------------------------------------------------------------------------------------------------
 
@@ -1310,55 +1339,143 @@ export default function Index() {
     //     { id: '3', title: '1个工作日下证', price: '2599', back: 'black' },
     //     { id: '4', title: '当天下证', price: '3699', back: 'black' },
     // ]
+    // // 智能注册商标申请价格
+    // const [TrademarkAiPrice, setTrademarkAiPrice] = useState<any>(0)
+    // // 智能申请注册原价
+    // const [TrademarkAiOldPrice, setTrademarkAiOldPrice] = useState<any>(0)
+    // // 专家辅助注册价格
+    // const [TrademarkExpertPrice, setTrademarkExpertPrice] = useState<any>(0)
+    // // 至尊无忧注册价格
+    // const [TrademarkUltimatePrice, setTrademarkUltimatePrice] = useState<any>(0)
+    const [trademarkArray, setTrademarkArray] = useState<any>([]) // 商标数组
+    const getTrademarkGoodsList = async () => {
+        try {
+            const res: any = await trademarkGoodsList()
+            // console.log('商标列表', res);
+            // res是个数组 循环数组 找到name为"智能申请注册"的 把价格赋值给智能注册商标申请价格
+            // res.forEach((item: any) => {
+            //     if (item.name == '智能申请注册') {
+            //         setTrademarkAiPrice(item.money)
+            //         setTrademarkAiOldPrice(item.oldMoney)
+            //     }
+            //     if (item.name == '专家辅助注册') {
+            //         setTrademarkExpertPrice(item.money)
+            //     }
+            //     if (item.name == '至尊无忧注册') {
+            //         setTrademarkUltimatePrice(item.money)
+            //     }
+            // })
+            setTrademarkArray([
 
+                {
+                    id: res[0].id, title: '智能申请注册', nowprice: res[0].money / 100,
+                    old: true, //是否显示原价
+                    oldprice: res[0].oldMoney / 100, //原价
+                    cheap: true,//特价
+                    text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
+                    left: '性价比', right: '高',
+                    textArray: [
+                        '自助办理，性价比高',
+                        '自助查询，排查风险',
+                        '人工严审，提升受理率'
+                    ],
+                    serve: false, //专家咨询
+                    // num: 1 // 限购
+                    newUser: res[0].newUser
+                },
+                {
+                    id: res[1].id, title: '专家辅助注册', nowprice: res[1].money / 100, cheap: false,
+                    old: false,
+                    oldprice: '',
+                    text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
+                    left: '成功率', right: '高',
+                    textArray: [
+                        '专家一对一，全流程代办',
+                        '分析风险，优化注册方案',
+                        '分析风险，优化注册方案'
+                    ],
+                    serve: true,
+                    // num: 0
+                    newUser: ''
+                },
+                {
+                    id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money / 100, cheap: false,
+                    old: false,
+                    oldprice: '',
+                    text: '专家评估提高通过率，注册失败，可赔付全款',
+                    left: '类型', right: '指定类目',
+                    textArray: [
+                        '你注册，我投保',
+                        '每件商标都有保单',
+                        '指定类目驳回，赔付全款'
+                    ],
+                    serve: true,
+                    newUser: ''
+                },
+            ]
+            )
+        } catch (error: any) {
+
+            if (error.response) {
+                const data = error.response.data;
+                messageApi.open({
+                    type: 'error',
+                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                });
+            } else {
+                console.error(error)
+            }
+        }
+    }
     // 商标数组
-    const trademarkArray = [
+    // const trademarkArray = [
-        {
+    //     {
-            id: '1', title: '智能申请注册', nowprice: '270',
+    //         id: '1', title: '智能申请注册', nowprice: TrademarkAiPrice,
-            old: true, //是否显示原价
+    //         old: true, //是否显示原价
-            oldprice: '318', //原价
+    //         oldprice: TrademarkAiOldPrice, //原价
-            cheap: true,//特价
+    //         cheap: true,//特价
-            text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
+    //         text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
-            left: '性价比', right: '高',
+    //         left: '性价比', right: '高',
-            textArray: [
+    //         textArray: [
-                '自助办理，性价比高',
+    //             '自助办理，性价比高',
-                '自助查询，排查风险',
+    //             '自助查询，排查风险',
-                '人工严审，提升受理率'
+    //             '人工严审，提升受理率'
-            ],
+    //         ],
-            serve: false, //专家咨询
+    //         serve: false, //专家咨询
-            num: 1 // 限购
+    //         num: 1 // 限购
-        },
+    //     },
-        {
+    //     {
-            id: '2', title: '专家辅助注册', nowprice: '499', cheap: false,
+    //         id: '2', title: '专家辅助注册', nowprice:TrademarkExpertPrice , cheap: false,
-            old: false,
+    //         old: false,
-            oldprice: '',
+    //         oldprice: '',
-            text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
+    //         text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
-            left: '成功率', right: '高',
+    //         left: '成功率', right: '高',
-            textArray: [
+    //         textArray: [
-                '专家一对一，全流程代办',
+    //             '专家一对一，全流程代办',
-                '分析风险，优化注册方案',
+    //             '分析风险，优化注册方案',
-                '分析风险，优化注册方案'
+    //             '分析风险，优化注册方案'
-            ],
+    //         ],
-            serve: true,
+    //         serve: true,
-            num: 0
+    //         num: 0
-        },
+    //     },
-        {
+    //     {
-            id: '3', title: '至尊无忧注册', nowprice: '599', cheap: false,
+    //         id: '3', title: '至尊无忧注册', nowprice: TrademarkUltimatePrice, cheap: false,
-            old: false,
+    //         old: false,
-            oldprice: '',
+    //         oldprice: '',
-            text: '专家评估提高通过率，注册失败，可赔付全款',
+    //         text: '专家评估提高通过率，注册失败，可赔付全款',
-            left: '类型', right: '指定类目',
+    //         left: '类型', right: '指定类目',
-            textArray: [
+    //         textArray: [
-                '你注册，我投保',
+    //             '你注册，我投保',
-                '每件商标都有保单',
+    //             '每件商标都有保单',
-                '指定类目驳回，赔付全款'
+    //             '指定类目驳回，赔付全款'
-            ],
+    //         ],
-            serve: true,
+    //         serve: true,
-            num: 0
+    //         num: 0
 
-        },
+    //     },
-    ]
+    // ]
     const [appGoodsId, setAppGoodsId] = useState('') // 选择的商品id
+    const [appGoodsMoney, setAppGoodsMoney] = useState(0) // 选择的商品钱
     useEffect(() => {
         // const nowname = sessionStorage.getItem('now')
         if (location.pathname == '/') {
@@ -1764,6 +1881,34 @@ export default function Index() {
             setTrademarkBox(true)
             setReplaceSearchBox(false)
         }
+        else if (location.pathname.includes('/trademark-ai-edit')) {
+            setShowSearchBox(false)
+            setRrefunSearchBox(false)
+            setCorrectionSearchBox(false)
+            setContractSearchBox(false)
+            setNow('商标 / 智能注册')
+            setSellSearchBox(false)
+            setSellOrderSearchBox(false)
+            setCopyrightSearchBox(false)
+            setTradingSearchBox(false)
+            setAppSearchBox(false)
+            setTrademarkBox(false)
+            setReplaceSearchBox(false)
+        }
+        else if (location.pathname.includes('/trademark-expert-edit')) {
+            setShowSearchBox(false)
+            setRrefunSearchBox(false)
+            setCorrectionSearchBox(false)
+            setContractSearchBox(false)
+            setNow('商标 / 注册商标')
+            setSellSearchBox(false)
+            setSellOrderSearchBox(false)
+            setCopyrightSearchBox(false)
+            setTradingSearchBox(false)
+            setAppSearchBox(false)
+            setTrademarkBox(false)
+            setReplaceSearchBox(false)
+        }
         else if (location.pathname.includes('/replace')) {
             setShowSearchBox(false)
             setRrefunSearchBox(false)
@@ -1801,7 +1946,8 @@ export default function Index() {
 
         // getLanguageListDate()
         // getSoftTypeListDate()
-        // getAppGoodsList()
+
+        // getTrademarkGoodsList()
     }, []);
     useEffect(() => {
         // loactionStorage里的activeMenu
@@ -2070,7 +2216,7 @@ export default function Index() {
                                 list={agentMenu.list}
                                 handleListItem={agentMenu.handleListItem}
                             /> */}
-                                {/* {THEME == 'mzw' ? (
+                                {THEME == 'mzw' ? (
                                     <>
                                         <div style={{
                                             background: getMenuActive() == 'APP' ? 'linear-gradient(90deg, #FF9F08 0%, #FF7331 100%)' : ' var(--color-menuback)',
@@ -2143,7 +2289,7 @@ export default function Index() {
                                     </>
                                 ) : (
                                     <></>
-                                )} */}
+                                )}
                                 {THEME == 'mzw' ? (
                                     <MenuWithBottomButtom
                                         button={sellMenu.button}
@@ -2173,7 +2319,7 @@ export default function Index() {
                                         tradingStartTime={tradingStartTime}
                                         tradingEndTime={tradingEndTime}
                                         tradingStatus={tradingStatus}
-                                        
+
                                         specialPrice={specialPrice}
 
 
@@ -3580,8 +3726,10 @@ export default function Index() {
                                             <Button type="primary"
                                                 style={{ background: 'var(--color-searchbtn)' }}
                                                 onClick={() => {
+                                                    getAppGoodsList()
                                                     setAppModal(true)
                                                     setAppGoodsId('')
+                                                    setAppGoodsMoney(0)
                                                 }}
                                             >申请电子软著</Button>
                                             <Search
@@ -3663,9 +3811,57 @@ export default function Index() {
                                             <Button type="primary"
                                                 style={{ background: 'var(--color-searchbtn)' }}
                                                 onClick={() => {
+                                                    getTrademarkGoodsList()
                                                     setTrademarkModal(true)
                                                 }}
                                             >申请商标</Button>
+                                            <Search placeholder="输入商标名称"
+                                                value={trademarkNewKeywords}
+                                                onSearch={trademarkKeyWordshandleSearch}
+                                                onChange={trademarkKeyWordshandleChange}
+                                                className='searchInputmedia'
+                                                style={{
+                                                    // maxWidth: '200px',
+                                                    width: '170px',
+                                                    height: '31px',
+                                                    marginLeft: '5px'
+                                                }}
+                                                allowClear
+                                            />
+                                            <Select
+                                                value={trademarkStatus}
+                                                allowClear
+                                                style={{ height: '31px', width: '150px', marginLeft: 5 }}
+                                                onChange={(value: string) => {
+                                                    setTrademarkStatus(value)
+
+                                                }}
+                                                options={[
+
+                                                    { value: '-1', label: '未通过' },
+                                                    { value: '0', label: '待付款' },
+                                                    { value: '1', label: '已付款' },
+                                                    { value: '2', label: '审核中' },
+                                                    { value: '3', label: '提交至商标局' },
+                                                    { value: '4', label: '不予受理' },
+                                                    { value: '5', label: '已受理' },
+                                                    { value: '6', label: '已发初审公告' },
+                                                    { value: '7', label: '部分驳回' },
+                                                    { value: '8', label: '全部驳回' },
+                                                    { value: '9', label: '已下证' },
+                                                ]}
+
+                                                placeholder='选择状态'
+                                            />
+                                            <Button style={{
+                                                marginLeft: 5, height: 31
+                                            }}
+                                                icon={<ClearOutlined />}
+                                                onClick={() => {
+                                                    trademarkInit()
+
+                                                }}>清除</Button>
+
 
                                         </div>
                                     </div>
@@ -4125,7 +4321,7 @@ export default function Index() {
                             justifyContent: 'space-between',
                             alignItems: 'center',
                         }}>
-                            {/* {appGoodsArray.map((item: any, index: number) => {
+                            {appGoodsArray.map((item: any, index: number) => {
                                 return (
                                     <div className='appGoodsBox'
                                         key={item.id}
@@ -4137,7 +4333,8 @@ export default function Index() {
                                         }}
                                         onClick={() => {
                                             setAppGoodsId(item.id)
-                                            // console.log('item.dataId: ', item.dataId);
+                                            setAppGoodsMoney(item.money / 100)
+                                            console.log('item.dataId: ', item);
 
                                         }}
                                     >
@@ -4168,7 +4365,7 @@ export default function Index() {
                                     </div>
                                 )
 
-                            })} */}
+                            })}
 
                         </div>
                         <div className='appGoodsBtnBox'>
@@ -4177,34 +4374,7 @@ export default function Index() {
                                     //    alert('开发中') 
                                     // 创建按订单 如果成功 询问是否继续编辑
                                     // setAppGoodsId('')
-                                    try {
+                                    setTipsModal(true)
-                                        setBuyLoading(true)
-                                        const res = await buyAppGoods(appGoodsId)
-                                        setAppOrderId(res.data)
-                                        setBuyLoading(false)
-                                        setAppModal(false)
-                                        getAppOrderList(1)
-                                        setToEditsModal(true)
-                                        appInit()
-                                        reloadUser(messageApi, globalDispatchContext).then(() => {
-                                            messageApi.success('扣款成功');
-                                        });
-                                        // 更新redux中的appGoodsListAray
-
-                                    } catch (error: any) {
-
-                                        if (error.response) {
-                                            const data = error.response.data;
-                                            messageApi.open({
-                                                type: 'error',
-                                                content: data.msg ? data.msg : `${data.path}(${data.status})`,
-                                            });
-                                        } else {
-                                            console.error(error)
-                                        }
-                                    } finally {
-                                        setBuyLoading(false)
-                                    }
 
 
                                     return
@@ -4256,7 +4426,7 @@ export default function Index() {
 
             >
                 <div className='trademarkArrayBox'>
-                    {trademarkArray.map((item) => {
+                    {trademarkArray.map((item: any) => {
                         return (
                             <div className='trademarkItem' key={item.id}>
                                 <div style={{
@@ -4283,7 +4453,7 @@ export default function Index() {
                                     </div>
                                     <div className='trademarkTextArrayBox'>
                                         {
-                                            item.textArray.map((item: any, index) => {
+                                            item.textArray.map((item: any, index: any) => {
                                                 return (
                                                     <div style={{
                                                         display: 'flex',
@@ -4304,10 +4474,12 @@ export default function Index() {
                                     </div>
                                     <div className='trademarkBuy'>
                                         <div style={{
-                                            background: item.num > 0 ? 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)' : '',
+                                            background: item.newUser ? 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)' : '',
                                             color: 'white'
                                         }}>
-                                            {item.num > 0 ? `新用户专项价格限购${item.num}件` : ''}
+                                            {/* {item.num > 0 ? `新用户专项价格限购${item.num}件` : ''} */}
+                                            {item.newUser ? item.newUser : ''}
+
                                         </div>
                                     </div>
                                     <div className='trademarkPrice'>
@@ -4334,7 +4506,7 @@ export default function Index() {
                                             width: '100%',
                                             display: 'flex',
                                         }}>
-                                            <div style={{
+                                            {/* <div style={{
                                                 flex: 1,
                                                 border: '1px solid  #FF9C00',
                                                 fontSize: 18,
@@ -4342,7 +4514,7 @@ export default function Index() {
                                                 textAlign: 'center',
                                                 lineHeight: '46px',
                                                 cursor: 'pointer'
-                                            }}>专家咨询</div>
+                                            }}>专家咨询</div> */}
                                             <div
                                                 style={{
                                                     flex: 1,
@@ -4355,12 +4527,13 @@ export default function Index() {
 
                                                 }}
                                                 onClick={() => {
-                                                    console.log(item);
+                                                    // console.log(item);
                                                     setTrademarkModal(false)
                                                     nav('/trademark-expert-edit', {
                                                         state: {
                                                             title: item.title,
-                                                            price: item.nowprice
+                                                            price: item.nowprice,
+                                                            id: item.id
                                                         }
                                                     })
 
@@ -4389,12 +4562,14 @@ export default function Index() {
 
                                                 }}
                                                 onClick={() => {
-                                                    console.log(item.nowprice);
+                                                    // console.log(item.nowprice);
-                                                    console.log('复杂');
+                                                    // console.log('复杂');
                                                     setTrademarkModal(false)
-                                                    nav('/trademark-ai-edit', {
+                                                    nav(`/trademark-ai-edit/NEW`, {
                                                         state: {
-                                                            title: item.title,
+                                                            trademarkModeName: item.title,
+                                                            // price: item.nowprice,
+                                                            trademarkMode: item.id,
                                                             price: item.nowprice
                                                         }
                                                     })
@@ -4408,6 +4583,52 @@ export default function Index() {
                     })}
                 </div>
             </Modal >
+            <Modal title="提示"
+                centered
+                destroyOnClose={true}
+                open={tipsModal}
+                onOk={async () => {
+                    try {
+                        setBuyLoading(true)
+                        const res = await buyAppGoods(appGoodsId)
+                        setAppOrderId(res.data)
+                        setBuyLoading(false)
+                        setTipsModal(false)
+                        setAppModal(false)
+                        getAppOrderList(1)
+                        setToEditsModal(true)
+                        appInit()
+                        reloadUser(messageApi, globalDispatchContext).then(() => {
+                            messageApi.success('扣款成功');
+                        });
+                        // 更新redux中的appGoodsListAray
+
+                    } catch (error: any) {
+
+                        if (error.response) {
+                            const data = error.response.data;
+                            messageApi.open({
+                                type: 'error',
+                                content: data.msg ? data.msg : `${data.path}(${data.status})`,
+                            });
+                        } else {
+                            console.error(error)
+                        }
+                        setTipsModal(false)
+
+                    } finally {
+                        setBuyLoading(false)
+                    }
+
+                }}
+                okText='确定'
+                cancelText='取消'
+                onCancel={() => {
+                    setTipsModal(false)
+                }}
+            >
+                该操作会扣除{appGoodsMoney}元，确定操作吗？
+            </Modal>
             <div className='couponMask-box'
                 style={{
                     display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 && !phoneModal ? 'unset' : 'none',

src/route/router.tsx

@@ -241,7 +241,7 @@ export const router = createHashRouter(
                   element:<TrademarkExpertEdit/>      
                 },
                  {
-                  path:'/trademark-ai-edit',
+                  path:'/trademark-ai-edit/:trademarkId',
                   element:<TrademarkAiEdit/>      
                 },
                 {

src/util/AjaxUtils.ts

@@ -161,6 +161,26 @@ export function getBuyUrl() {
             console.error("请求出错:", error);
         });
 }
+//商标商城如何选择
+export function geSelectUrl() {
+    axios.get(`https://www.aimzhu.com/operator/app/agreementportal/getrelease/061c65f2-a5da-48a0-b5ac-6bffc1b36eca`)
+        .then((data:any) => {
+            window.open(`${baseUrl}/operator/route/agreementportal/view?agreementId=${data.data.agreementId}&title=${data.data.title}`)
+        })
+        .catch(error => {
+            console.error("请求出错:", error);
+        });
+}
+//商标商城 文档
+export function getFileUrl() {
+    axios.get(`https://www.aimzhu.com/operator/app/agreementportal/getrelease/d26d6ef6-4628-4539-a43a-e6a85c577c8f`)
+        .then((data:any) => {
+            window.open(`${baseUrl}/operator/route/agreementportal/view?agreementId=${data.data.agreementId}&title=${data.data.title}`)
+        })
+        .catch(error => {
+            console.error("请求出错:", error);
+        });
+}
 // 软件委托开发协议
 export function getSoftUrl() {
     return `${baseUrl}/Seda.html`