diff --git a/src/components/BelongPeople/BelongPeople.tsx b/src/components/BelongPeople/BelongPeople.tsx index 1cbc25e..1c081ee 100644 --- a/src/components/BelongPeople/BelongPeople.tsx +++ b/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) { */}
{authorName ? (<> @@ -969,6 +969,7 @@ export default function BelongPeople(props: propsInfo) { {/* 选择创建/编辑/查看所属者弹框 */} aiShopRequest.post( // 第四步 提交审核 export const submitapp = (appOrderId:any) => aiShopRequest.post(`/aishop/api/apporder/update/sub-check/${appOrderId}`) -// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \ No newline at end of file +// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ + + + +//商标申请接口 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ +// 获取展示价格列表 +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 uptrademarkList = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save2/${trademarkId}`,params) + + + + + + +// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ + diff --git a/src/request/request.ts b/src/request/request.ts index ce4c7a7..ae54532 100644 --- a/src/request/request.ts +++ b/src/request/request.ts @@ -196,6 +196,12 @@ 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` @@ -210,4 +216,12 @@ export const uploadImageUrl = () => { export const uploadFileUrl = () => { return `${aiShopBaseUrl}/aishop/api/file/v2/upload-file` } -export { request,aiShopRequest,phoneRequest,newRequest}; \ No newline at end of file +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 { request,aiShopRequest,phoneRequest,newRequest}; diff --git a/src/route/AppElectron/AppEdit.tsx b/src/route/AppElectron/AppEdit.tsx index 9537b33..39428a8 100644 --- a/src/route/AppElectron/AppEdit.tsx +++ b/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({ companyName: '', // 企业名称 diff --git a/src/route/AppElectron/app-edit.css b/src/route/AppElectron/app-edit.css index b30aebe..f04aff4 100644 --- a/src/route/AppElectron/app-edit.css +++ b/src/route/AppElectron/app-edit.css @@ -19,6 +19,7 @@ display: flex; align-items: center; /* cursor: pointer; */ + /* background-color: pink; */ } .editProcessNum { diff --git a/src/route/TrademarkMall/TrademarkAiEdit.tsx b/src/route/TrademarkMall/TrademarkAiEdit.tsx index 2af369f..7694164 100644 --- a/src/route/TrademarkMall/TrademarkAiEdit.tsx +++ b/src/route/TrademarkMall/TrademarkAiEdit.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import './trademark-edit.css' import { RightOutlined @@ -9,150 +9,237 @@ 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, } from '../../request/api' +import { + message, Spin +} from 'antd'; export default function TrademarkAiEdit() { + 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(2); + const [editProcess, setEditProcess] = useState(0); + const [editOneData, setEditOneData] = useState({ + trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文 + trademarkName: '', //商标名称 + trademarkDescription: '', //商标描述 + trademarkFile: '', //商标文件 + trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传 + trademarkPhoto: '', //商标图样 + + }) + const [editTwoArray, setEditTwoArray] = useState([]) + // 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); + setEditProcess(res.trademarkProgress + 1) + setEditOneData({ + trademarkType: res.trademarkType, //商标类型 text 文字 image 图形 text-image 图文 + trademarkName: res.trademarkName, //商标名称 + trademarkDescription: res.trademarkDescription, //商标描述 + trademarkFile: res.trademarkFile, //商标文件 + trademarkPhotoType: res.trademarkPhotoType, //商标图样类型 1 自动生成 2 手动上传 + trademarkPhoto: res.trademarkPhoto, //商标图样 + }) + setEditTwoArray(res.trademarkTypeIds) + + } 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) + } + }, []) + // const clickProcess = (index: number) => { + // setEditProcess(index) + // } return ( -
-
-
-
= 1 ? '#3B60E8' : '', - color: editProcess >= 1 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 1 ? '' : '#B1B1B1' - }} - >1
-
= 1 ? '#353535' : '#878787', - fontWeight: editProcess >= 1 ? 'bold' : 'normal' - }} - >填写基础信息
+ +
+ {contextHolder} +
+
+
= 1 ? '#3B60E8' : '', + color: editProcess >= 1 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 1 ? '' : '#B1B1B1' + }} + >1
+
= 1 ? '#353535' : '#878787', + fontWeight: editProcess >= 1 ? 'bold' : 'normal' + }} + >填写基础信息
+
+
{ + setEditProcess(2) + }}>
+
+
= 2 ? '#3B60E8' : '', + color: editProcess >= 2 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 2 ? '' : '#B1B1B1' + }}>2
+
= 2 ? '#353535' : '#878787', + fontWeight: editProcess >= 2 ? 'bold' : 'normal' + }} + >选择商标类别
+
+
+
+
= 3 ? '#3B60E8' : '', + color: editProcess >= 3 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 3 ? '' : '#B1B1B1' + }}>3
+
= 3 ? '#353535' : '#878787', + fontWeight: editProcess >= 3 ? 'bold' : 'normal' + }} + >选择所属者
+
+
+
+
= 4 ? '#3B60E8' : '', + color: editProcess >= 4 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 4 ? '' : '#B1B1B1' + }}>4
+
= 4 ? '#353535' : '#878787', + fontWeight: editProcess >= 4 ? 'bold' : 'normal' + }} + > + 订单支付 +
+
+
+
+
= 5 ? '#3B60E8' : '', + color: editProcess >= 5 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 5 ? '' : '#B1B1B1' + }}>5
+
= 5 ? '#353535' : '#878787', + fontWeight: editProcess >= 5 ? 'bold' : 'normal' + }} + >上传委托书
+
+
+
+
= 6 ? '#3B60E8' : '', + color: editProcess >= 6 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 6 ? '' : '#B1B1B1' + }}>6
+
= 6 ? '#353535' : '#878787', + fontWeight: editProcess >= 6 ? 'bold' : 'normal' + }} + >上传商标局
+
+ +
-
-
-
= 2 ? '#3B60E8' : '', - color: editProcess >= 2 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 2 ? '' : '#B1B1B1' - }}>2
-
= 2 ? '#353535' : '#878787', - fontWeight: editProcess >= 2 ? 'bold' : 'normal' - }} - >选择商标类别
-
-
-
-
= 3 ? '#3B60E8' : '', - color: editProcess >= 3 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 3 ? '' : '#B1B1B1' - }}>3
-
= 3 ? '#353535' : '#878787', - fontWeight: editProcess >= 3 ? 'bold' : 'normal' - }} - >选择所属者
-
-
-
-
= 4 ? '#3B60E8' : '', - color: editProcess >= 4 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 4 ? '' : '#B1B1B1' - }}>4
-
= 4 ? '#353535' : '#878787', - fontWeight: editProcess >= 4 ? 'bold' : 'normal' - }} - > - 订单支付 +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
-
-
-
= 5 ? '#3B60E8' : '', - color: editProcess >= 5 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 5 ? '' : '#B1B1B1' - }}>5
-
= 5 ? '#353535' : '#878787', - fontWeight: editProcess >= 5 ? 'bold' : 'normal' - }} - >上传委托书
-
-
-
-
= 6 ? '#3B60E8' : '', - color: editProcess >= 6 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 6 ? '' : '#B1B1B1' - }}>6
-
= 6 ? '#353535' : '#878787', - fontWeight: editProcess >= 6 ? 'bold' : 'normal' - }} - >上传商标局
-
- -
-
-
- -
-
- - -
-
- -
-
- -
-
- -
-
- -
-
-
+ ) } diff --git a/src/route/TrademarkMall/TrademarkExpertEdit.tsx b/src/route/TrademarkMall/TrademarkExpertEdit.tsx index 1f66947..3ef337b 100644 --- a/src/route/TrademarkMall/TrademarkExpertEdit.tsx +++ b/src/route/TrademarkMall/TrademarkExpertEdit.tsx @@ -22,7 +22,7 @@ export default function TrademarkExpertEdit() { return (
@@ -34,7 +34,7 @@ export default function TrademarkExpertEdit() {
diff --git a/src/route/TrademarkMall/TrademarkMall.tsx b/src/route/TrademarkMall/TrademarkMall.tsx index d9c95fa..40eebde 100644 --- a/src/route/TrademarkMall/TrademarkMall.tsx +++ b/src/route/TrademarkMall/TrademarkMall.tsx @@ -1,19 +1,261 @@ -// import React from 'react' +import { useState, useEffect } from 'react' import nothingImg from '../../static/appimgs/nothing.png' +import { useLocation, useNavigate } from 'react-router-dom'; +import { trademarkList } from '../../request/api' +import { showImage } from '../../request/request' +import type { TableProps } from 'antd'; +import { + message, Spin, + Pagination, + Table, Image +} from 'antd'; export default function TrademarkMall() { + const [messageApi, contextHolder] = message.useMessage(); + const { state } = useLocation() + const nav = useNavigate(); const height = window.innerHeight - 180; - const data = [] - return ( -
- {data.length <= 0 ? (
+ const columns: TableProps['columns'] = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + align: 'center', + fixed: 'left', + width: 90, + render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始 + + }, + + { + title: '服务类型', + dataIndex: 'trademarkModeName', + fixed: 'left', + align: 'center', + key: 'trademarkModeName', + width: 150, + ellipsis: { + showTitle: true, + }, + + }, + { + title: '类型/名称', + fixed: 'left', + dataIndex: 'trademarkName', + key: 'trademarkName', + align: 'center', + ellipsis: { + showTitle: true, + }, + width: 200, + render: (_text, record) => ( + + {record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} /{record.trademarkName} + {/* {record} */} + + ) + + }, + + { + title: '商标图样', + dataIndex: 'trademarkPhoto', + align: 'center', + key: 'trademarkPhoto', + width: 200, + render: (text) => ( + + + + ) + }, + { + title: '状态', + dataIndex: 'trademarkStatus', + align: 'center', + key: 'trademarkStatus', + width: 100, + render: (text) => ( + + {text == '-1' ? + 已取消 + : text == '0' ? + 待付款 + : text == '1' ? + 已付款 + : + 未知 + } + + ) + }, + { + title: '申请人', + dataIndex: 'leaderName', + align: 'center', + key: 'appOrderId', + width: 150, + render: (text) => ( + + {text ? text : '未完善'} + + ) + }, + { + title: '申请人证件号', + dataIndex: 'leaderIdcard', + align: 'center', + key: 'appOrderId', + width: 150, + render: (text) => ( + + {text ? text : '未完善'} + + ) + }, + { + title: '操作', + // dataIndex: 'contractManagementId', + align: 'center', + // key: 'appOrderId', + width: 150, + // bordeLeft: true, + fixed: 'right', + render: (record) => ( + -
暂无数据
-
) : (<>)} -
+ cursor: 'pointer', + color: '#007FFF', + + + }} onClick={() => { + nav(`/trademark-ai-edit/${record.trademarkId}`, { + state: { + trademarkMode: record.trademarkMode, //申请类型id + trademarkModeName: record.trademarkModeName, //申请类型名称 + trademarkId: record.trademarkId, //商标id + + } + }) + // console.log(record.checkStatus); + + + }}>编辑
+ + + ) + + }, + ] + const [data, setData] = useState([]) + const [loading, setLoading] = useState(false) + const [page, setPage] = useState(1) + const getTrademarkList = async (page: any) => { + try { + setLoading(true) + const res: any = await trademarkList({ + keywords: state && state.keywords ? state.keywords : '', + rows: 10, + page: page + }) + console.log('结果', res); + setData(res.rows) + + 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) + } + } + // useEffect(() => { + // // console.log(state.keywords); + // getTrademarkList(1) + // // console.log(1); + + // }, []) + useEffect(() => { + // console.log(state.keywords); + getTrademarkList(1) + }, [state]) + + return ( + +
+ {contextHolder} + + {data.length <= 0 ? (
+ + +
暂无数据
+
) : ( +
+
+ +
+ +
+
+ { + setPage(page) + getTrademarkList(page) + }} /> +
+ +
+ )} +
+ ) } diff --git a/src/route/TrademarkMall/components/EditFive/EditFive.tsx b/src/route/TrademarkMall/components/EditFive/EditFive.tsx index 45dcd0c..ade96a6 100644 --- a/src/route/TrademarkMall/components/EditFive/EditFive.tsx +++ b/src/route/TrademarkMall/components/EditFive/EditFive.tsx @@ -1,21 +1,194 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editFive(props: any) { - const height = window.innerHeight - 350; +import { useState } from 'react' +import { Button, Form, message, Upload, Input } from 'antd' +import { UploadOutlined } from '@ant-design/icons'; +import { uploadFileUrl, showImage } from '../../../../request/request' +export default function EditFive(props: any) { + const token = sessionStorage.getItem('token') + const [form] = Form.useForm(); const handleSubmit = () => { - // console.log(form); + + form.submit(); + props.setEditProcess(6); - // 调用表单实例的 submit 方法 - // form.submit(); }; + // const [imgList, setImgList] = useState([]) + const [upFileArray, setUpFileArray] = useState([]) + // 定义允许上传的文件格式 + const ALLOWED_FILE_TYPES = ['.pdf', '.jpg', '.jpeg', '.png', '.bmp']; + 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; + }; + // const [textLodaing, setTextLodaing] = useState(false) + // const upImgHandleChange: UploadProps['onChange'] = (info) => { + + + + // if (info.file.status === 'uploading') { + + // setTextLodaing(true) + // return; + // } + // if (info.file.status === 'done') { + // setTextLodaing(false) + + + // setImgList([ + // { + // uid: info.file.response.data.fileId, + // name: info.file.response.data.fileName, + // status: 'done', + // url: showImage(info.file.response.data.fileId, false) + // } + // ]) + // form.setFieldsValue({ imgUrl: info.file.response.data.fileId }) + + // return; + // } + // if (info.file.status === 'error') { + // setTextLodaing(false) + // message.error(`上传失败`); + // return; + // } + // }; + const onFinish = (values: any) => { + console.log('Success:', values); + props.setEditProcess(6); + }; + const height = window.innerHeight - 350; + return (
-
+ // background: 'pink', + padding: '50px 50px', + boxSizing: 'border-box', + }}> +
{ + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + > +
+
上传委托书* ：
+
+ + + + + + +
+ { + const { fileList } = info; + setUpFileArray(fileList); + if (info.file.status === 'uploading') { + + return; + } + if (info.file.status === 'done') { + // console.log(info.file.response.data); + 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') { + // 显示错误提示 + message.error(`上传失败,请重新上传`); + setUpFileArray([]) + + } + // console.log(upCodeArray); + + }} + onRemove={() => { + setUpFileArray([]) + form.setFieldsValue({ + file: '', // 清除表单值 + }); + }} + beforeUpload={beforeUpload} + // onPreview={handlePreview} + // onChange={handleUploadChange} + headers={{ 'Auth': `Bearer ${token}` }} + > + + +
+
{ + window.open('https://www.baidu.com') + }} + >[ 下载模板 ]
+ + +
+
+ + + +
+ + +
['columns'] = [ + { + align: 'center', + title: '付费方式', + dataIndex: 'type', + key: 'type', + render: () => '预付费', + width: 100, + }, + { + align: 'center', + width: 100, + + title: '服务名称', + dataIndex: 'name', + key: 'name', + render: () => '商标申请', + }, + { + align: 'center', + width: 150, + ellipsis: true, + title: '类别', + dataIndex: 'category', + key: 'category', + }, + { + align: 'center', + width: 300, + ellipsis: true, + title: '指定商品或服务', + dataIndex: 'goods', + key: 'goods', + }, + { + align: 'center', + width: 150, + title: '商标类型', + dataIndex: 'goodsType', + key: 'goodsType', + }, + { + align: 'center', + width: 100, + + title: '单价', + dataIndex: 'price', + key: 'price', + }, + { + align: 'center', + width: 100, + title: '数量', + dataIndex: 'num', + key: 'num', + }, + + + ]; + 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(); @@ -12,10 +108,31 @@ export default function editFour(props: any) { return (
-
+ // background: 'pink' + }}> +
+
商标申请
+
+ 数量 : 2 + 小计￥630.66 + +
+ +
+ columns={columns} + // 取消自带分页 + pagination={false} + dataSource={data} + rowKey='id' + /> + +
{ handleSubmit() }} - >下一步 + >提交订单
+ { setModal(false) }} + okText='确定' + cancelText='取消' + onOk={()=>{ + setModal(false) + props.setEditProcess(5) + }} + > + 该操作会扣除999元，确定操作吗？ +
) } diff --git a/src/route/TrademarkMall/components/EditFour/edit-four.css b/src/route/TrademarkMall/components/EditFour/edit-four.css new file mode 100644 index 0000000..f1fb584 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditOne/EditOne.css b/src/route/TrademarkMall/components/EditOne/EditOne.css index ff25616..ead6f2e 100644 --- a/src/route/TrademarkMall/components/EditOne/EditOne.css +++ b/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; } \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditOne/EditOne.tsx b/src/route/TrademarkMall/components/EditOne/EditOne.tsx index 7ddabd4..57f2763 100644 --- a/src/route/TrademarkMall/components/EditOne/EditOne.tsx +++ b/src/route/TrademarkMall/components/EditOne/EditOne.tsx @@ -1,51 +1,89 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import { Button, Radio, Form, Input, Upload, message, Image, Spin } from 'antd' import './EditOne.css' -import { uploadFileUrl, showImage } from '../../../../request/request' +import { uploadFileUrl, showImage, uploadImageAddUrl,downloadAuthBookUrl,uploadDeputeFileUrl } from '../../../../request/request' +import { trademarkBaseInfo, aiGenerateImage, fileDetail } from '../../../../request/api' import { - DeleteOutlined + DeleteOutlined, LoadingOutlined } from '@ant-design/icons'; const { TextArea } = Input; import type { UploadProps } from 'antd'; export default function EditOne(props: any) { const token = sessionStorage.getItem('token') + const [messageApi, contextHolder] = message.useMessage(); const [formA] = Form.useForm(); // 文字商标表单 const [formB] = Form.useForm(); // 图形商标表单 const [formC] = Form.useForm(); // 图形商标表单 const height = window.innerHeight - 350; - const [goodsType, setGoodsType] = useState('a') + // 查看表单数据是否发生改变 + function deepCompareObjects(obj1: any, obj2: any): boolean { + // 若两个值严格相等，直接返回 true + if (obj1 === obj2) { + return true; + } + + // 若其中一个值为 null 或不是对象类型，返回 false + if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { + return false; + } + + // 获取两个对象的键数组 + const keys1 = Object.keys(obj1); + const keys2 = Object.keys(obj2); + + // 若键的数量不同，返回 false + if (keys1.length !== keys2.length) { + return false; + } + + // 遍历键，递归比较对应的值 + for (const key of keys1) { + if (!keys2.includes(key) || !deepCompareObjects(obj1[key], obj2[key])) { + return false; + } + } + + return true; + } + const [goodsType, setGoodsType] = useState('text') // 生成方式 const [generateType, setGenerateType] = useState('1') const handleSubmit = () => { // console.log(form); + // console.log(goodsType); // props.setEditProcess(2); // 调用表单实例的 submit 方法 - if (goodsType === 'a') { + if (goodsType === 'text') { formA.submit(); - } else if (goodsType === 'b') { + } else if (goodsType === 'image') { formB.submit(); - } else if (goodsType === 'c') { + } else if (goodsType === 'text-image') { formC.submit(); } else { props.setEditProcess(2); } + // props.setEditProcess(2); + }; + const [disabled, setDisabled] = useState(false) // 文字商标 若设计肖像上传得文件 const [fileList, setFileList] = useState([]); const handleChange: UploadProps['onChange'] = (info) => { - // console.log(info.file.status); + console.log(info.file.status); if (info.file.status === 'uploading') { // setFileList([]) + setDisabled(true) return; } if (info.file.status === 'done') { + // const fileId = info.file.response.data.fileId; // // console.log(downloadUrl(fileId)); - + setDisabled(false) // const url = showImage(fileId, false); setFileList([ { @@ -59,6 +97,7 @@ export default function EditOne(props: any) { return; } if (info.file.status === 'error') { + setDisabled(false) message.error(`上传失败`); return; } @@ -110,6 +149,8 @@ export default function EditOne(props: any) { return; } if (info.file.status === 'done') { + console.log(info); + setTextLodaing(false) // const fileId = info.file.response.data.fileId; // // console.log(downloadUrl(fileId)); @@ -125,7 +166,7 @@ export default function EditOne(props: any) { url: showImage(info.file.response.data.fileId, false) } ]) - formA.setFieldsValue({ imgUrl: info.file.response.data.fileId }) + formA.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId }) return; } @@ -139,34 +180,198 @@ export default function EditOne(props: any) { // 上传图形商标图片 const [imgLodaing, setImgLodaing] = useState(false) const [upImglist, setUpImglist] = useState([]) - const onFinishA = (values: any) => { - console.log(values); - console.log(fileList); // 上传的授权声明书模板 - console.log(generateImgId); // 自动生成的 - console.log(imgList[0]?.uid); // 手动上传的 - props.setEditProcess(2); + // 点击下一步如果需要保存的Loading + const [upLodaing, setUpLoading] = useState(false) + const onFinishA = async (values: any) => { + + const dataInfo = { + ...values, + trademarkType: goodsType, // 商标类型 + trademarkFile: fileList.length > 0 ? fileList[0].uid : '', // 授权声明书 + trademarkPhotoType: generateType, // 1 自动生成 2 手动上传 + // trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id + + } + console.log(dataInfo); + console.log(props.editOneData); + console.log(deepCompareObjects(dataInfo, props.editOneData)); + if (deepCompareObjects(dataInfo, props.editOneData)) { + props.setEditProcess(2); + return; + } + // return; + + try { + setUpLoading(true) + const res: any = await trademarkBaseInfo({ + ...values, + trademarkFile: fileList[0]?.uid, // 授权声明书 + trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id + trademarkMode: props.trademarkMode, // 申请类型id + trademarkModeName: props.trademarkModeName, // 申请类型名称 + trademarkPhotoType: generateType, // 1 自动生成 2 手动上传 + trademarkType: goodsType, // 商标类型 + }) + setUpLoading(false) + props.setEditOneData({ + trademarkType: goodsType, // 商标类型 + trademarkName: values.trademarkName, // 商标名称 + trademarkDescription: values.trademarkDescription, // 商标描述 + trademarkFile: fileList.length > 0 ? fileList[0].uid : '', // 授权声明书 + trademarkPhotoType: generateType, // 1 自动生成 2 手动上传 + trademarkPhoto: values.trademarkPhoto, // 商标图样 + }) + props.setEditProcess(2); + if (res.data) { + props.setTrademarkId(res.data) + } + console.log('结果', res); + } catch (error: any) { + setUpLoading(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 { + setUpLoading(false) + } + + // props.setEditProcess(2); } - const onFinishB = (values: any) => { - console.log(values); + const onFinishB = async (values: any) => { + console.log(values); //trademarkDescription trademarkPhoto console.log(upImglist); //商标图样 + const dataInfo = { + ...values, + trademarkType: goodsType, // 商标类型 + trademarkFile: '', // 授权声明书 + trademarkPhotoType: '2', // 1 自动生成 2 手动上传 + trademarkName: '', + } + console.log(dataInfo); + console.log(props.editOneData); + // 去除 trademarkName 项 + // return; - props.setEditProcess(2); + + + // return + if (deepCompareObjects(dataInfo, props.editOneData)) { + props.setEditProcess(2); + return; + } + try { + setUpLoading(true) + + await trademarkBaseInfo({ + ...values, + trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id + trademarkMode: props.trademarkMode, // 申请类型id + trademarkModeName: props.trademarkModeName, // 申请类型名称 + trademarkType: goodsType, // 商标类型 + trademarkPhotoType: '2', + // trademarkName: '', + }) + setUpLoading(false) + props.setEditOneData({ + trademarkType: goodsType, // 商标类型 + trademarkName: '', // 商标名称 + trademarkDescription: values.trademarkDescription, // 商标描述 + trademarkFile: '', // 授权声明书 + trademarkPhotoType: '2', // 1 自动生成 2 手动上传 + trademarkPhoto: values.trademarkPhoto, // 商标图样 + }) + props.setEditProcess(2); + + } catch (error: any) { + setUpLoading(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 { + setUpLoading(false) + } + // props.setEditProcess(2); } // 上传文字与图形商标图片 const [imgLodaingC, setImgLodaingC] = useState(false) const [upImglistC, setUpImglistC] = useState([]) - const onFinishC = (values: any) => { + const onFinishC = async (values: any) => { console.log(values); // props.setEditProcess(2); - console.log(upImglistC); //商标图样 - console.log(fileListC); // 上传的授权声明书模板 - console.log(fileListC); + // console.log(upImglistC); //商标图样 + // console.log(fileListC); // 上传的授权声明书模板 + const dataInfo = { + ...values, + trademarkType: goodsType, // 商标类型 + trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', // 授权声明书 + trademarkPhotoType: '2', // 1 自动生成 2 手动上传 + // trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id + } + console.log(dataInfo); + console.log(props.editOneData); + if (deepCompareObjects(dataInfo, props.editOneData)) { + props.setEditProcess(2); + return; + } + // return + try { + setUpLoading(true) + await trademarkBaseInfo({ + ...values, + trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', + trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id + trademarkMode: props.trademarkMode, // 申请类型id + trademarkModeName: props.trademarkModeName, // 申请类型名称 + + // trademarkModeName: props.trademarkModeName, // 申请类型名称 + trademarkType: goodsType, // 商标类型 + trademarkPhotoType: '2', + }) + // console.log('结果', res); + props.setEditOneData({ + trademarkType: goodsType, // 商标类型 + trademarkName: values.trademarkName, // 商标名称 + trademarkDescription: values.trademarkDescription, // 商标描述 + trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', // 授权声明书 + trademarkPhotoType: '2', // 1 自动生成 2 手动上传 + trademarkPhoto: values.trademarkPhoto, // 商标图样 + }) + setUpLoading(false) + props.setEditProcess(2); + + } catch (error: any) { + setUpLoading(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 { + setUpLoading(false) + } } const onChange = (e: any) => { @@ -174,1060 +379,1342 @@ export default function EditOne(props: any) { }; const generateTypeChange = (e: any) => { setGenerateType(e.target.value) + + // console.log(e.target.value); + // console.log('generateImgId', generateImgId); + // console.log('imgUrl', imgList[0]?.uid); + // return // 给FormA表单的imgUrl赋值 - // if (e.target.value === '1') { - // formA.setFieldsValue({ imgUrl: generateImgId }) + // if (e.target.value == '1') { + // formA.setFieldsValue({ imgUrl: generateImgId }) // } - // if (e.target.value === '2') { - // formA.setFieldsValue({ imgUrl: imgList[0]?.uid}) + // if (e.target.value == '2') { + // formA.setFieldsValue({ imgUrl: imgList[0]?.uid }) // } - formA.setFieldsValue({ imgUrl: '' }) - setGenerateImgId('') - setImgList([]) + // formA.setFieldsValue({ trademarkPhoto: '' }) + // setGenerateImgId('') + // setImgList([]) } + useEffect(() => { + if (generateType == '1') { + formA.setFieldsValue({ trademarkPhoto: generateImgId ? generateImgId : '' }) + } + if (generateType == '2') { + formA.setFieldsValue({ trademarkPhoto: imgList[0]?.uid ? imgList[0]?.uid : '' }) + } + }, [generateType]) + const getUpfileDetail = async (fileId: string) => { + try { + const res: any = await fileDetail(fileId) + console.log('文件详情', res); + setFileList([{ + uid: res[0].fileId, // 手动上传的 + name: res[0].fileName, // 手动上传的 + status: 'done', // 手动上传的 + url: showImage(res[0].fileId, 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) + } + } + } + const getUpfileCDetail = async (fileId: string) => { + try { + const res: any = await fileDetail(fileId) + console.log('结果', res); + setFileListC([{ + uid: res[0].fileId, // 手动上传的 + name: res[0].fileName, // 手动上传的 + status: 'done', // 手动上传的 + url: showImage(res[0].fileId, 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) + } + } + } + useEffect(() => { + console.log('传递one的数据', props.editOneData); + const { trademarkName, trademarkDescription, trademarkPhoto, trademarkPhotoType, trademarkType, trademarkFile } = props.editOneData; + if (trademarkType) { + console.log(1); + + // 赋值方式 + setGoodsType(trademarkType) + setGenerateType(trademarkPhotoType) + + if (trademarkType == 'text') { + formA.setFieldsValue({ + trademarkName: trademarkName, // 商标名称 + trademarkDescription: trademarkDescription, // 商标描述 + trademarkPhoto: trademarkPhoto, // 商标图样 + }) + if (trademarkPhotoType == '1') { // 自动生成 + setGenerateImgId(trademarkPhoto) // 自动生成的 + } + if (trademarkPhotoType == '2') { // 自动生成 + setImgList([{ + uid: trademarkPhoto, // 手动上传的 + name: trademarkPhoto, // 手动上传的 + status: 'done', // 手动上传的 + url: showImage(trademarkPhoto, false) // 手动上传的 + }]) // 手动上传的 + } + if (trademarkFile) { + getUpfileDetail(trademarkFile) + // setFileList([{ + // uid: trademarkFile, + // name: trademarkFile, + // status: 'done', + // url: showImage(trademarkFile, false) + // }]) // 手动上传的 + } + + } + if (trademarkType == 'image') { + formB.setFieldsValue({ + trademarkDescription: trademarkDescription, // 商标描述 + trademarkPhoto: trademarkPhoto, // 商标图样 + }) + setUpImglist([{ + uid: trademarkPhoto, // 手动上传的 + name: trademarkPhoto, // 手动上传的 + status: 'done', // 手动上传的 + url: showImage(trademarkPhoto, false) // 手动上传的 + }]) // 手动上传的 + } + if (trademarkType == 'text-image') { + formC.setFieldsValue({ + trademarkName: trademarkName, // 商标名称 + trademarkDescription: trademarkDescription, // 商标描述 + trademarkPhoto: trademarkPhoto, // 商标图样 + }) + setUpImglistC([{ + uid: trademarkPhoto, // 手动上传的 + name: trademarkPhoto, // 手动上传的 + status: 'done', // 手动上传的 + url: showImage(trademarkPhoto, false) // 手动上传的 + }]) + if (trademarkFile) { + getUpfileCDetail(trademarkFile) + // setFileListC([{ + // uid: trademarkFile, + // name: trademarkFile, + // status: 'done', + // url: showImage(trademarkFile, false) + // }]) // 手动上传的 + } + } + + } + + }, [props.editOneData]) return ( -
-
-
-
-
- ! -
-
-
智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“专家辅助申请"或"至尊无忧注册"提高商标申清通过率。
-
当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。
-
商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。
-
-
-
+
+ {contextHolder} +
+
- 基本信息 -
-
-
- 商标类型*： +
+
+ ! +
+
+
智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“专家辅助申请"或"至尊无忧注册"提高商标申清通过率。
+
当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。
+
商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。
+
+
+
+ 基本信息 +
+
+
+ 商标类型*： +
+
+ + 文字商标 + 图形商标 + 文字图形组合商标 + +
+ { + window.open('https://www.baidu.com/') + }} + >如何选择?
- - 文字商标 - 图形商标 - 文字图形组合商标 - +
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ 商标名称*： +
+ +
+ + + + + +
+
+ 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open(downloadAuthBookUrl()) + }} + >授权声明书模板，填写完盖章签字后 +
+ } size="small" spinning={disabled}> + { + const isPNG = file.type === 'image/png'; + const isPDF = file.type === 'application/pdf'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isPDF && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + } + return isPNG || isPDF || isJPG; + }} + // fileList={[]} + onChange={handleChange} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={fileList.length > 0 || disabled} + > + 上传文件 + + +
+
+ ({fileList.length}/1) +
+
+ {fileList.length > 0 ? ( +
+
{ + window.open(showImage(fileList[0].uid, false)) + }}> + {fileList[0].name} +
+
{ + setFileList([]) + }}>
+
+ ) : ( + <> + )} + {/* 嘻嘻 */} + {/* */} +
+ +
+
+ 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { + window.open('https://www.baidu.com/') + }} + >文档 +
+ +
+ +
+ + +
+
+
+ 商标说明*： +
+ + + + + + + + + +
+ +
+
+ 商标图样*： +
+
+ + 自动生成 + 手动上传 + +
+
+
+
+ + + + + +
+ 暂无图片 +
+ {/* 自动生成图片 */} +
+
+ +
+
+ {/* 手动上传图片 */} +
0 ? 'unset' : 'none', + width: 200, + height: 100, + background: 'white', + color: 'black', + position: 'absolute', + top: 0, + left: 0, + lineHeight: '100px', + textAlign: 'center', + fontSize: '20px', + border: '1px dashed #d6d6d6', + }}> + +
+ +
+
{ + setImgList([]) + formA.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
+ +
+ + +
+ + { + const isPNG = file.type === 'image/png'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); + } + return isPNG || isJPG; + }} + // fileList={[]} + onChange={upImgHandleChange} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={imgList.length > 0} + > +
+ 上传图片 +
+ + +
+ +
+ +
+
+
- { - window.open('https://www.baidu.com/') - }} - >如何选择? -
-
-
{ - // console.log(errorInfo) - // message.error('请填写完整的信息!') - errorInfo.errorFields.forEach((field) => { - if (field.errors.length > 0) { - // 显示每条错误信息 - message.error(field.errors[0]); - } - }); - }} - initialValues={{ softWare: '' }} - style={{ marginTop: 20 }} - > -
-
- 商标名称*： -
-
+ { + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > + +
- - - - - -
-
- 若您的商标涉及他人姓名/肖像/期刊，请下载 { - window.open('https://www.baidu.com/') - }} - >授权声明书模板，填写完盖章签字后 -
- { - const isPNG = file.type === 'image/png'; - const isPDF = file.type === 'application/pdf'; - const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; - if (!isPNG && !isPDF && !isJPG) { - // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、PDF、JPG 格式的文件!'); - } - return isPNG || isPDF || isJPG; - }} - // fileList={[]} - onChange={handleChange} - showUploadList={false} - headers={{ 'Auth': `Bearer ${token}` }} - disabled={fileList.length > 0} - > - 上传文件 - -
-
- ({fileList.length}/1) -
-
- {fileList.length > 0 ? ( -
-
{ - window.open(showImage(fileList[0].uid, false)) - }}> - {fileList[0].name} -
-
{ - setFileList([]) - }}>
-
- ) : ( - <> - )} - {/* 嘻嘻 */} - {/* */} -
- -
-
- 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { - window.open('https://www.baidu.com/') - }} - >文档 -
- +
+ 商标说明*：
-
- -
-
-
- 商标说明*： -
- - - - - - - - - -
- -
-
- 商标图样*： -
-
- - 自动生成 - 手动上传 - -
-
-
-
+ + + + + +
+ +
+
+ 商标图样*： +
+
+ + - - -
- 暂无图片 -
- {/* 自动生成图片 */} -
-
- -
-
- {/* 手动上传图片 */} -
0 ? 'unset' : 'none', - width: 200, - height: 100, - background: 'white', - color: 'black', - position: 'absolute', - top: 0, - left: 0, - lineHeight: '100px', - textAlign: 'center', - fontSize: '20px', - border: '1px dashed #d6d6d6', - }}> - -
- -
-
{ - setImgList([]) - formA.setFieldsValue({ imgUrl: '' }) - }} - >删除
- -
- - -
- - { - const isPNG = file.type === 'image/png'; - const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; - if (!isPNG && !isJPG) { - // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、JPG 格式的文件!'); - } - return isPNG || isJPG; - }} - // fileList={[]} - onChange={upImgHandleChange} - showUploadList={false} - headers={{ 'Auth': `Bearer ${token}` }} - disabled={imgList.length > 0} + // placeholder="商标说明" > -
- lineHeight: '100px', - textAlign: 'center', - fontSize: '20px', - border: '1px dashed #d6d6d6', - }}> - 上传图片 -
- - -
- -
- -
- - -
- - -
-
{ - // console.log(errorInfo) - // message.error('请填写完整的信息!') - errorInfo.errorFields.forEach((field) => { - if (field.errors.length > 0) { - // 显示每条错误信息 - message.error(field.errors[0]); - } - }); - }} - initialValues={{ softWare: '' }} - style={{ marginTop: 20 }} - > - -
-
- 商标说明*： -
- - - - - - - - - -
- -
-
- 商标图样*： -
-
- - - - -
- - { - const isPNG = file.type === 'image/png'; - const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; - if (!isPNG && !isJPG) { - // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、JPG 格式的文件!'); - } - return isPNG || isJPG; - }} - // fileList={[]} - onChange={(info) => { - if (info.file.status === 'uploading') { - // setFileList([]) - setImgLodaing(true) - return; - } - if (info.file.status === 'done') { - setImgLodaing(false) - // const fileId = info.file.response.data.fileId; - // // console.log(downloadUrl(fileId)); - - // const url = showImage(fileId, false); - console.log(info.file.response.data.fileId); - - setUpImglist([ - { - uid: info.file.response.data.fileId, - name: info.file.response.data.fileName, - status: 'done', - url: showImage(info.file.response.data.fileId, false) - } - ]) - formB.setFieldsValue({ imgUrl: info.file.response.data.fileId }) - - return; - } - if (info.file.status === 'error') { - setImgLodaing(false) - message.error(`上传失败`); - return; - } - }} - showUploadList={false} - headers={{ 'Auth': `Bearer ${token}` }} - disabled={imgList.length > 0} - > -
- 上传图片 -
- - -
-
0 ? 'unset' : 'none', - width: 200, - height: 100, - background: 'white', - color: 'black', - position: 'absolute', - top: 0, - left: 0, - lineHeight: '100px', - textAlign: 'center', - fontSize: '20px', - border: '1px dashed #d6d6d6', - }}> - -
- -
-
{ - setUpImglist([]) - formB.setFieldsValue({ imgUrl: '' }) - }} - >删除
- -
-
-
图片尺寸:400*400至1500*1500
-
图片大小:200kb内
-
图片格式:仅支持JPG格式
-
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
-
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
-
建议上传商标图样颜色:黑白
-
-
-
- -
- - - - -
-
- - - -
-
{ - // console.log(errorInfo) - // message.error('请填写完整的信息!') - errorInfo.errorFields.forEach((field) => { - if (field.errors.length > 0) { - // 显示每条错误信息 - message.error(field.errors[0]); - } - }); - }} - initialValues={{ softWare: '' }} - style={{ marginTop: 20 }} - > -
-
- 商标名称*： -
- -
- - - - - -
-
- 若您的商标涉及他人姓名/肖像/期刊，请下载 { - window.open('https://www.baidu.com/') - }} - >授权声明书模板，填写完盖章签字后 -
+ { - const isPNG = file.type === 'image/png'; - const isPDF = file.type === 'application/pdf'; + // const isPNG = file.type === 'image/png'; const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; - if (!isPNG && !isPDF && !isJPG) { + if (!isJPG) { // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 JPG 格式的文件!'); } - return isPNG || isPDF || isJPG; + return isJPG; }} // fileList={[]} - onChange={handleChangeC} + onChange={(info) => { + if (info.file.status === 'uploading') { + // setFileList([]) + setImgLodaing(true) + return; + } + if (info.file.status === 'done') { + setImgLodaing(false) + // const fileId = info.file.response.data.fileId; + // // console.log(downloadUrl(fileId)); + + // const url = showImage(fileId, false); + console.log(info.file.response.data.fileId); + + setUpImglist([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + formB.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId }) + + return; + } + if (info.file.status === 'error') { + setImgLodaing(false) + // message.error(`上传失败`); + // console.log(info.file.response.msg? info.file.response.msg : '上传失败'); + + message.error(info.file.response.msg ? info.file.response.msg : '上传失败'); + return; + } + }} showUploadList={false} headers={{ 'Auth': `Bearer ${token}` }} - disabled={fileListC.length > 0} + disabled={upImglist.length > 0} > - 上传文件 - -
-
- ({fileListC.length}/1) -
-
- {fileListC.length > 0 ? (
-
{ - window.open(showImage(fileListC[0].uid, false)) - }}> - {fileListC[0].name} -
-
{ - setFileListC([]) - }}>
+ 上传图片
- ) : ( - <> - )} - {/* 嘻嘻 */} - {/* */} + + +
+
0 ? 'unset' : 'none', + width: 200, + height: 100, + background: 'white', + color: 'black', + position: 'absolute', + top: 0, + left: 0, + lineHeight: '100px', + textAlign: 'center', + fontSize: '20px', + border: '1px dashed #d6d6d6', + }}> + +
+
+
{ + setUpImglist([]) + formB.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
- 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { - window.open('https://www.baidu.com/') - }} - >文档 +
图片尺寸:500*500至1500*1500
+
图片大小:200kb内
+
图片格式:仅支持JPG格式
+
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
+
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
+
建议上传商标图样颜色:黑白
+
-
-
-
+
+ + + +
-
- 商标说明*： + { + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ 商标名称*： +
+ +
+ + + + + +
+
+ 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open(downloadAuthBookUrl()) + }} + >授权声明书模板，填写完盖章签字后 +
+ { + const isPNG = file.type === 'image/png'; + const isPDF = file.type === 'application/pdf'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isPDF && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + } + return isPNG || isPDF || isJPG; + }} + // fileList={[]} + onChange={handleChangeC} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={fileListC.length > 0} + > + 上传文件 + +
+
+ ({fileListC.length}/1) +
+
+ {fileListC.length > 0 ? ( +
+
{ + window.open(showImage(fileListC[0].uid, false)) + }}> + {fileListC[0].name} +
+
{ + setFileListC([]) + }}>
+
+ ) : ( + <> + )} + {/* 嘻嘻 */} + {/* */} +
+ +
+
+ 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { + window.open('https://www.baidu.com/') + }} + >文档 +
+ +
+ +
+ +
- - - - - - - - - -
-
-
- 商标图样*： -
-
+
+ 商标说明*： +
+ + -
- - { - const isPNG = file.type === 'image/png'; - const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; - if (!isPNG && !isJPG) { - // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、JPG 格式的文件!'); - } - return isPNG || isJPG; - }} - // fileList={[]} - onChange={(info) => { - if (info.file.status === 'uploading') { - // setFileList([]) - setImgLodaingC(true) - return; - } - if (info.file.status === 'done') { - setImgLodaingC(false) - // const fileId = info.file.response.data.fileId; - // // console.log(downloadUrl(fileId)); - // const url = showImage(fileId, false); - console.log(info.file.response.data.fileId); - setUpImglistC([ - { - uid: info.file.response.data.fileId, - name: info.file.response.data.fileName, - status: 'done', - url: showImage(info.file.response.data.fileId, false) - } - ]) - formC.setFieldsValue({ imgUrl: info.file.response.data.fileId }) - return; - } - if (info.file.status === 'error') { - setImgLodaingC(false) - message.error(`上传失败`); - return; - } - }} - showUploadList={false} - headers={{ 'Auth': `Bearer ${token}` }} - disabled={imgList.length > 0} - > -
- 上传图片 -
- - +
+
+
+ 商标图样*：
0 ? 'unset' : 'none', + // marginLeft: '90px', + // background:'pink', width: 200, - height: 100, - background: 'white', - color: 'black', - position: 'absolute', - top: 0, - left: 0, - lineHeight: '100px', - textAlign: 'center', - fontSize: '20px', - border: '1px dashed #d6d6d6', + position: 'relative', }}> + + +
- + + { + // const isPNG = file.type === 'image/png'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 JPG 格式的文件!'); + } + return isJPG; + + }} + // beforeUpload={(file) => { + // const isPNG = file.type === 'image/png'; + // const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + // if (!isPNG && !isJPG) { + // // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + // message.error('仅支持 PNG、JPG 格式的文件!'); + // return false; + // } + + // // 使用 Promise 来处理图片尺寸的读取 + // return new Promise((resolve) => { + // // 创建 Image 实例，TypeScript 环境下可使用 HTMLImageElement 明确类型 + // const img: HTMLImageElement = new Image(); + // img.src = URL.createObjectURL(file); + // img.onload = () => { + // const width = img.naturalWidth; + // const height = img.naturalHeight; + // if (width >= 500 && width <= 1500 && height >= 500 && height <= 1500) { + // resolve(true); + // } else { + // message.error('图片尺寸需在 500*500 至 1500*1500 之间'); + // resolve(false); + // } + // URL.revokeObjectURL(img.src); + // }; + // img.onerror = () => { + // message.error('无法读取图片尺寸'); + // resolve(false); + // URL.revokeObjectURL(img.src); + // }; + // }); + // }} + // fileList={[]} + onChange={(info) => { + // console.log(info.file.status); + + if (info.file.status === 'uploading') { + // setFileList([]) + setImgLodaingC(true) + return; + } + if (info.file.status === 'done') { + setImgLodaingC(false) + // const fileId = info.file.response.data.fileId; + // // console.log(downloadUrl(fileId)); + + // const url = showImage(fileId, false); + console.log(info); + // console.log(info.file.response.data.fileId); + + setUpImglistC([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + formC.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId }) + + return; + } + if (info.file.status === 'error') { + setImgLodaingC(false) + // message.error(`上传失败`); + message.error(info.file.response.msg ? info.file.response.msg : '上传失败'); + return; + } + }} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={upImglistC.length > 0} + > +
+ 上传图片 +
+ +
0 ? 'unset' : 'none', + width: 200, + height: 100, + background: 'white', + color: 'black', position: 'absolute', - bottom: 0, - right: -50, - fontSize: '16px', - lineHeight: '16px', - // background:'pink', - cursor: 'pointer', - padding: '5px', - color: 'red' - }} - onClick={() => { - setUpImglistC([]) - formC.setFieldsValue({ imgUrl: '' }) - }} - >删除
+ top: 0, + left: 0, + lineHeight: '100px', + textAlign: 'center', + fontSize: '20px', + border: '1px dashed #d6d6d6', + }}> +
+ +
+
{ + setUpImglistC([]) + formC.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
+ +
+
+
图片尺寸:500*500至1500*1500
+
图片大小:200kb内
+
图片格式:仅支持JPG格式
+
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
+
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
+
建议上传商标图样颜色:黑白
+
+
-
-
图片尺寸:400*400至1500*1500
-
图片大小:200kb内
-
图片格式:仅支持JPG格式
-
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
-
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
-
建议上传商标图样颜色:黑白
-
-
+
-
+ + - +
+
+
+
+
- -
-
-
- -
-
+ ) } diff --git a/src/route/TrademarkMall/components/EditSix/EditSix.tsx b/src/route/TrademarkMall/components/EditSix/EditSix.tsx index 57712a6..d29fc49 100644 --- a/src/route/TrademarkMall/components/EditSix/EditSix.tsx +++ b/src/route/TrademarkMall/components/EditSix/EditSix.tsx @@ -1,21 +1,24 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editSix(props: any) { +import { useState } from 'react' +import { Button, Modal } from 'antd' +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) }; return (
-
+ }}> + 显示商标信息 +
{ - props.setEditProcess(4) + props.setEditProcess(5) }} >上一步
+ { setModal(false) }} + onCancel={() => { setModal(false) }} + okText="确定" + cancelText="取消" + > + 注:上传后无法撤回，是否继续上传？ +
) } diff --git a/src/route/TrademarkMall/components/EditThree/EditThree.tsx b/src/route/TrademarkMall/components/EditThree/EditThree.tsx index 66767ef..35387ea 100644 --- a/src/route/TrademarkMall/components/EditThree/EditThree.tsx +++ b/src/route/TrademarkMall/components/EditThree/EditThree.tsx @@ -1,21 +1,141 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editThree(props: any) { +import { useState } from 'react' +import { Button, Form, Input, message, Modal } from "antd" +import BelongPeople from '../../../../components/BelongPeople/BelongPeople.tsx' +export default function EditThree(props: any) { + const [form] = Form.useForm(); const height = window.innerHeight - 350; const handleSubmit = () => { - // console.log(form); + + form.submit(); props.setEditProcess(4); - // 调用表单实例的 submit 方法 - // form.submit(); }; + const onFinish = (values: any) => { + console.log('Success:', values); + props.setEditProcess(4); + }; + const [belongPeopleInfo, setBelongPeopleInfo] = useState({ + authorName: '', + authorType: '', + authorIdCardType: '', + authorIdCard: '', + authorCrcAccount: 0, + authorId: '', + authorProvinceCity: '', + authorCrcAccountPassword: '', + authorCrcAccountUsername: '' + }) + const [belongModal, setBelongModal] = useState(false) + const setValue = (value: string) => { + form.setFieldsValue({ + projOwnerName: value + }) + } return (
-
+ // background: 'pink' + padding: '50px 50px', + boxSizing: 'border-box', + }}> +
{ + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + > + +
+ +
+
产权所属者*：
+ + + +
{ + setBelongModal(true) + }} + > + 选择 +
+
+ { + setValue('') + setBelongPeopleInfo({ + authorName: '', + authorType: '', + authorIdCardType: '', + authorIdCard: '', + authorCrcAccount: 0, + authorId: '', + authorProvinceCity: '', + authorCrcAccountUsername: '', + authorCrcAccountPassword: '', + }) + }}> 取消 +
+
+ + +
+ +
+ +
下一步
+ { + setBelongModal(false) + + }}> + + { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}> +
) } diff --git a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx index 15e5045..e8081a1 100644 --- a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx +++ b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx @@ -2,7 +2,15 @@ import { useEffect, useState } from 'react' import { Button, Select, // Collapse, Tree + Input, + message, + Spin } from 'antd' +import { + SyncOutlined, +} from '@ant-design/icons'; +import { trademarkTypeList, uptrademarkList } from '../../../../request/api' +const { Search } = Input; import { CloseOutlined, DeleteOutlined @@ -14,136 +22,202 @@ import TreeMenu from './components/TreeMenu/TreeMenu' // import type { TreeDataNode } from 'antd'; import './edit-tow.css' export default function EditTwo(props: any) { + // const [messageApi, contextHolder] = message.useMessage(); + const [messageApi, contextHolder] = message.useMessage(); const height = window.innerHeight - 350; - const handleSubmit = () => { - // console.log(form); - props.setEditProcess(3); - // 调用表单实例的 submit 方法 - // form.submit(); + const [loading, setLoading] = useState(false) + const handleSubmit = async () => { + // console.log('selectedCategories', selectedCategories); + console.log('checkedIds', checkedIds); + console.log('props', props.editTwoArray); + + + // console.log('两个数组内容是否相同:', isEqual); + // return; + if (checkedIds.length === 0) { + message.error('请选择分类'); + // props.setEditProcess(3); + + return; + } else { + // props.setEditProcess(3); + // 使用 Set 数据结构比较 + const getElementCount = (arr: string[]) => { + const countMap = new Map(); + arr.forEach((element) => { + countMap.set(element, (countMap.get(element) || 0) + 1); + }); + return countMap; + }; + + const checkedIdsCount = getElementCount(checkedIds); + const editTwoArrayCount = getElementCount(props.editTwoArray); + + 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: checkedIds + }) + props.setEditTwoArray(checkedIds) + setLoading(false) + props.setEditProcess(3); + + } 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) + } + + } + // props.setEditProcess(3); + }; // 初始化展开状态，默认所有大类的小类都隐藏 const [expandedIds, setExpandedIds] = useState([]); // 初始化勾选状态，默认所有小类都未勾选 const [checkedIds, setCheckedIds] = useState([]); - // 存储选中的大类和小类信息 - // const [selectedCategories, setSelectedCategories] = useState<{ - // id: any; - // name: string; - // children: { id: any; name: string }[]; - // }[]>([]); - // 存储选中的大类、中类和小类信息 - // 自定义函数，有小数保留两位，没小数不保留 + const formatNumber = (num: number) => { return Number.isInteger(num) ? num : num.toFixed(2); }; const [selectedCategories, setSelectedCategories] = useState<{ id: any; name: string; + code: string; children: { id: any; name: string; - children: { id: any; name: string }[]; + code: string; + children: { id: any; name: string; code: string }[]; }[]; }[]>([]); - // 模拟商标分类数据 - const trademarkCategories = [ + // // 模拟商标分类数据 + // const trademarkCategories = [ - { - id: 1, - name: '大类1', - children: [ - { - id: 11, - name: '中类1-1', - children: [ - { id: 111, name: '小类1-1-1' }, - { id: 112, name: '小类1-1-2' }, - { id: 113, name: '小类1-1-3' }, - { id: 114, name: '小类1-1-4' }, - { id: 115, name: '小类1-1-5' }, - { id: 116, name: '小类1-1-6' }, - { id: 117, name: '小类1-1-7' }, - { id: 118, name: '小类1-1-8' }, - { id: 119, name: '小类1-1-9' }, - ] - }, - { - id: 12, - name: '中类1-2', - children: [ - { id: 121, name: '小类1-2-1' }, - { id: 122, name: '小类1-2-2' }, - { id: 123, name: '小类1-2-3' }, - { id: 124, name: '小类1-2-4' }, - { id: 125, name: '小类1-2-5' }, - { id: 126, name: '小类1-2-6' }, - { id: 127, name: '小类1-2-7' }, - ] - } + // { + // id: 1, + // name: '大类1', + // children: [ + // { + // id: 11, + // name: '中类1-1', + // children: [ + // { id: 111, name: '小类1-1-1' }, + // { id: 112, name: '小类1-1-2' }, + // { id: 113, name: '小类1-1-3' }, + // { id: 114, name: '小类1-1-4' }, + // { id: 115, name: '小类1-1-5' }, + // { id: 116, name: '小类1-1-6' }, + // { id: 117, name: '小类1-1-7' }, + // { id: 118, name: '小类1-1-8' }, + // { id: 119, name: '小类1-1-9' }, + // { id: 120, name: '小类1-1-10' }, + // { id: 1211, name: '小类1-1-11' }, + // { id: 1222, name: '小类1-1-12' }, + // { id: 1233, name: '小类1-1-13' }, + // { id: 1244, name: '小类1-1-14' }, + // { id: 1255565, name: '计算机嘻嘻嘻嘻哈哈哈哈' }, + // ] + // }, + // { + // id: 12, + // name: '中类1-2', + // children: [ + // { id: 121, name: '小类1-2-1' }, + // { id: 122, name: '小类1-2-2' }, + // { id: 123, name: '小类1-2-3' }, + // { id: 124, name: '小类1-2-4' }, + // { id: 125, name: '小类1-2-5' }, + // { id: 126, name: '小类1-2-6' }, + // { id: 127, name: '小类1-2-7' }, + // ] + // } - ] - }, - { - id: 2, - name: '大类2', - children: [ - { - id: 21, - name: '中类2-1', - children: [ - { id: 211, name: '小类2-1-1' }, - { id: 212, name: '小类2-1-2' }, - ] - }, - { - id: 22, - name: '中类2-2', - children: [ - { id: 221, name: '小类2-2-1' }, - { id: 222, name: '小类2-2-2' }, - ] - }, - { - id: 23, - name: '中类2-3', - children: [ - { id: 231, name: '小类2-3-1' }, - { id: 232, name: '小类2-3-2' }, - ] + // ] + // }, + // { + // id: 2, + // name: '大类2', + // children: [ + // { + // id: 21, + // name: '中类2-1', + // children: [ + // { id: 211, name: '小类2-1-1' }, + // { id: 212, name: '小类2-1-2' }, + // ] + // }, + // { + // id: 22, + // name: '中类2-2', + // children: [ + // { id: 221, name: '小类2-2-1' }, + // { id: 222, name: '小类2-2-2' }, + // ] + // }, + // { + // id: 23, + // name: '中类2-3', + // children: [ + // { id: 231, name: '小类2-3-1' }, + // { id: 232, name: '小类2-3-2' }, + // ] - } - ] - }, - { - id: 3, - name: '大类3', - children: [ - { - id: 31, - name: '中类3-1', - children: [ - { id: 311, name: '小类3-1-1' }, - { id: 312, name: '小类3-1-2' }, - ] - }, - { - id: 32, - name: '中类3-2', - children: [ - { id: 321, name: '小类3-2-1' }, - { id: 322, name: '小类3-2-2' }, - ] - } - ] - } + // } + // ] + // }, + // { + // id: 3, + // name: '大类3', + // children: [ + // { + // id: 31, + // name: '中类3-1', + // children: [ + // { id: 311, name: '小类3-1-1' }, + // { id: 312, name: '小类3-1-2' }, + // ] + // }, + // { + // id: 32, + // name: '中类3-2', + // children: [ + // { id: 321, name: '小类3-2-1' }, + // { id: 322, name: '小类3-2-2' }, + // ] + // } + // ] + // } - ]; + // ]; + const [trademarkCategories, setTrademarkCategories] = useState([]); + // const [filteredCategories, setFilteredCategories] = useState(trademarkCategories); + const [filteredCategories, setFilteredCategories] = useState([]); + + - // 处理大类或中类点击事件，切换展开状态 const handleExpandClick = (id: any) => { setExpandedIds(prevIds => { if (prevIds.includes(id)) { @@ -153,6 +227,7 @@ export default function EditTwo(props: any) { } }); }; + // 处理小类点击事件，切换勾选状态 const handleSmallMenuClick = (id: any) => { let targetCategory: any; @@ -247,7 +322,11 @@ export default function EditTwo(props: any) { midIndex === middleCategoryIndex ? { ...middleCategory, - children: [...middleCategory.children, { id: newChild.id, name: newChild.name }] + children: [...middleCategory.children, { + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] } : middleCategory ) @@ -265,7 +344,12 @@ export default function EditTwo(props: any) { { id: targetMiddleCategory.id, name: targetMiddleCategory.name, - children: [{ id: newChild.id, name: newChild.name }] + code: targetMiddleCategory.code, // 添加 code 字段 + children: [{ + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] } ] } @@ -279,11 +363,17 @@ export default function EditTwo(props: any) { { id: targetCategory.id, name: targetCategory.name, + code: targetCategory.code, // 添加 code 字段 children: [ { id: targetMiddleCategory.id, name: targetMiddleCategory.name, - children: [{ id: newChild.id, name: newChild.name }] + code: targetMiddleCategory.code, // 添加 code 字段 + children: [{ + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] } ] } @@ -337,329 +427,644 @@ export default function EditTwo(props: any) { ); }; - useEffect(() => { - console.log('selectedCategories', selectedCategories); + // useEffect(() => { + // console.log('selectedCategories', selectedCategories); - }, [selectedCategories]) + // }, [selectedCategories]) + const [keyWords, setKeyWords] = useState(''); + const [searchKeyWords, setSearchKeyWords] = useState(''); + const onSearch = (value: string) => { + console.log('search:', value); + setSearchKeyWords(value); + } + + const filterCategories = (categories: any[], keyword: string, expanded: any[]) => { + return categories.filter(category => { + const isMatch = category.name.includes(keyword); + let childMatch = false; + if (category.children) { + const filteredChildren = filterCategories(category.children, keyword, expanded); + if (filteredChildren.length > 0) { + childMatch = true; + category.children = filteredChildren; + // 若子级有匹配，记录当前分类 ID 为需要展开 + expanded.push(category.id); + } + } + if (isMatch || childMatch) { + // 若当前项匹配或子级有匹配，记录当前分类 ID 为需要展开 + if (!expanded.includes(category.id)) { + expanded.push(category.id); + } + return true; + } + return false; + }); + }; + + + // 监听关键字变化，更新筛选后的分类数据和展开状态 useEffect(() => { - // 模拟有值的 selectedCategories - // const youzhi = [ - // { - // id: 1, - // name: '大类1', - // children: [ - // { - // id: 11, - // name: '中类1-1', - // children: [ - // { id: 111, name: '小类1-1-1' }, - // { id: 112, name: '小类1-1-4' }, - // { id: 113, name: '小类1-1-3' }, - // ] - // } - // ] - // } - // ] - // setSelectedCategories(youzhi) - // const initialCheckedIds = youzhi.flatMap(category => - // category.children.flatMap(middleCategory => - // middleCategory.children.map(child => child.id) - // ) - // ); + const expanded: any[] = []; + if (searchKeyWords) { + const filtered = filterCategories([...trademarkCategories], searchKeyWords, expanded); + setFilteredCategories(filtered); + setExpandedIds([...new Set(expanded)]); // 去重后更新展开状态 + } else { + setFilteredCategories(trademarkCategories); + // 初始化需要展开的 ID 数组 + const initialExpandedIds: any[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 检查当前中类下是否有选中的小类 + const hasSelectedChild = middleCategory.children.some((child: any) => + checkedIds.includes(child.id) + ); + + if (hasSelectedChild) { + // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组 + initialExpandedIds.push(category.id, middleCategory.id); + } + }); + }); + + + // 设置展开状态 + setExpandedIds([...new Set(initialExpandedIds)]); + } + }, [searchKeyWords]); + const getTrademarkTypeList = async () => { + try { + const res: any = await trademarkTypeList() + // console.log('类型数组', res); + setTrademarkCategories(res) + setFilteredCategories(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) + } + } + } + // const initialCheckedIds = [111, 112, 113, 121, 122]; + // const initialCheckedIds = ['42d2b6d5-adbf-485f-944e-4ca8c50c0b16']; + useEffect(() => { + // console.log('嘎嘎嘎', props.editTwoArray); + + getTrademarkTypeList() + // setCheckedIds(initialCheckedIds); // setCheckedIds(initialCheckedIds); }, []) + // 封装获取展开 ID 的逻辑 + const getExpandedIds = (checkedIds: any[], trademarkCategories: any[]) => { + const expandedIds: any[] = []; + trademarkCategories.forEach((category) => { + category.children.forEach((middleCategory: any) => { + middleCategory.children.forEach((child: any) => { + if (checkedIds.includes(child.id)) { + if (!expandedIds.includes(category.id)) { + expandedIds.push(category.id); + } + if (!expandedIds.includes(middleCategory.id)) { + expandedIds.push(middleCategory.id); + } + } + }); + }); + }); + return [...new Set(expandedIds)]; + }; + // 封装获取选中分类的逻辑 + const getSelectedCategories = (checkedIds: any[], trademarkCategories: any[]) => { + const selectedCategories: { + id: any; + name: string; + code: string; + children: { + id: any; + name: string; + code: string; + children: { id: any; name: string; code: string }[]; + }[]; + }[] = []; + + trademarkCategories.forEach((category) => { + category.children.forEach((middleCategory: any) => { + const selectedChildren = middleCategory.children.filter((child: any) => + checkedIds.includes(child.id) + ); + if (selectedChildren.length === 0) return; + + const categoryIndex = selectedCategories.findIndex((cat) => cat.id === category.id); + if (categoryIndex > -1) { + const middleCategoryIndex = selectedCategories[categoryIndex].children.findIndex( + (midCat) => midCat.id === middleCategory.id + ); + if (middleCategoryIndex > -1) { + selectedCategories[categoryIndex].children[middleCategoryIndex].children = [ + ...selectedCategories[categoryIndex].children[middleCategoryIndex].children, + ...selectedChildren + ]; + } else { + selectedCategories[categoryIndex].children.push({ + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + }); + } + } else { + selectedCategories.push({ + id: category.id, + name: category.name, + code: category.code, + children: [ + { + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + } + ] + }); + } + }); + }); + return selectedCategories; + }; + // 有id数组时候使用 后续 使用已保存得时候可能回用到 + useEffect(() => { + if (props.editTwoArray.length > 0) { + getTrademarkTypeList().then(() => { + + setCheckedIds(props.editTwoArray); + const expandedIds = getExpandedIds(props.editTwoArray, trademarkCategories); + setExpandedIds(expandedIds); + const selectedCategories = getSelectedCategories(props.editTwoArray, trademarkCategories); + setSelectedCategories(selectedCategories); + + }); + } + }, [props.editTwoArray]) + useEffect(() => { + if (trademarkCategories.length > 0) { + // 初始化需要展开的 ID 数组 + const initialExpandedIds: any[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 检查当前中类下是否有选中的小类 + const hasSelectedChild = middleCategory.children.some((child: any) => + checkedIds.includes(child.id) + ); + + if (hasSelectedChild) { + // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组 + initialExpandedIds.push(category.id, middleCategory.id); + } + }); + }); + + // 设置默认展开状态 + setExpandedIds([...new Set(initialExpandedIds)]); + + // 初始化一个空数组来存储选中的分类信息 + const initialSelectedCategories: { + id: any; + name: string; + code: string; + children: { + id: any; + name: string; + code: string; + children: { id: any; name: string; code: string }[]; + }[]; + }[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 筛选出当前中类下被选中的小类 + const selectedChildren = middleCategory.children.filter((child: any) => + checkedIds.includes(child.id) + ); + + if (selectedChildren.length > 0) { + // 查找大类是否已存在于 initialSelectedCategories 中 + const categoryIndex = initialSelectedCategories.findIndex( + (cat) => cat.id === category.id + ); + + if (categoryIndex > -1) { + // 若大类已存在，查找中类是否已存在 + const middleCategoryIndex = initialSelectedCategories[categoryIndex].children.findIndex( + (midCat) => midCat.id === middleCategory.id + ); + + if (middleCategoryIndex > -1) { + // 若中类已存在，添加选中的小类 + initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children = [ + ...initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children, + ...selectedChildren + ]; + } else { + // 若中类不存在，添加新的中类和选中的小类 + initialSelectedCategories[categoryIndex].children.push({ + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + }); + } + } else { + // 若大类不存在，添加新的大类、中类和选中的小类 + initialSelectedCategories.push({ + id: category.id, + name: category.name, + code: category.code, + children: [ + { + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + } + ] + }); + } + } + }); + }); + + // 设置 selectedCategories 状态 + setSelectedCategories(initialSelectedCategories); + } + }, [trademarkCategories]); return ( -
-
-
-
+
+ {contextHolder} +
+
-
选择推荐方案
- { + console.log(`selected ${value}`); + // alert(`selected ${value}`) + // lyp + + + + }} + options={[ + // { value: '', label: '全部类型' }, + { value: '1', label: '领域1' }, + { value: '2', label: '领域2' }, + { value: '3', label: '领域3' }, + { value: '4', label: '领域4' }, + { value: '5', label: '领域5' } + ]} + placeholder="请选择领域" + // defaultValue="" + /> +
已选得商标类别 ：
-
0 ? 'unset' : 'none' + color: '#5a5a5a', + marginLeft: '10px' + }}> + {/* 常用商标类别: */} +
+ +
+ +
+
+
+
+ { + setKeyWords(e.target.value) + if (e.target.value == '') { + setSearchKeyWords(''); + // setFilteredCategories(trademarkCategories); + // setExpandedIds([]); // 清空展开状态 + // console.log(trademarkCategories); + // setFilteredCategories(trademarkCategories); + getTrademarkTypeList() + setExpandedIds(checkedIds) + // initialExpandedIds + console.log(checkedIds); + + } + }} style={{ width: '85%' }} /> + +
+
类目索引
+
+ + +
+
+
+
已选得商标类别 ：
+
0 ? 'unset' : 'none' }}> -
- {(() => { - let middleCategoryCount = 0; - let smallCategoryCount = 0; - - // 遍历 selectedCategories 计算中类和小类的数量 - selectedCategories.forEach(category => { - middleCategoryCount += category.children.length; - category.children.forEach(middleCategory => { - smallCategoryCount += middleCategory.children.length; - }); - }); - - return `共${selectedCategories.length}大类 累计${middleCategoryCount}个小类/${smallCategoryCount}项商品服务`; - })()} -
-
+ + 无 + +
- - 无 - -
+
-
- - {/* {Array.from({ length: 100 }).map((item, index) => ( + {/* {Array.from({ length: 100 }).map((item, index) => (
11111
))} */} +
0 ? '1px solid #e9e9e9' : 'none', + }}> + {selectedCategories.map((item: any) => { + const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0); + return ( +
+
+
+ +
+ {item.name} +
+
(共{totalCount}项 , 10项以上每项附加收费31.8元)
+
+
+ ￥{formatNumber(31.8 * totalCount <= 318 ? 318 : 31.8 * totalCount)} + + { + // 调用删除中类的函数 + handleDeleteCategory(item.id); + }} + style={{ + marginLeft: 10, + cursor: 'pointer', + color: 'rgb(116, 116, 116)' + }}> +
+
+
+ {item.children.map((child: any) => { + return ( +
+
+
{child.name} :
+
+ {child.children.map((children: any) => { + return ( +
+ {children.code}-{children.name} { + handleDeleteSmallCategory(item.id, child.id, children.id); + }} + style={{ + marginLeft: 10, + cursor: 'pointer', + }}> +
+ ) + })} +
+
+
+ ) + })}
+
+ + ) + })} +
+
+
{ - const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0); - return ( -
-
-
- {item.name} -
-
(共{totalCount}项,10项以上每项附加收费31.8元)
-
-
- ￥{formatNumber(31.8 * totalCount <= 318 ? 318 : 31.8 * totalCount)} - - { - // 调用删除中类的函数 - handleDeleteCategory(item.id); - }} - style={{ - marginLeft: 10, - cursor: 'pointer', - color: 'rgb(116, 116, 116)' - }}> +
+
点击左侧类目列表选择商标类别群组或使用推荐方案
+
特别提醒:若申请主体执照经营范围含有“商标代理”、“专利代理”、“知识产权服务“等
+
只可注册 4506 下的商品服务项目，否则将被商标局不予受理或驳回，请知悉。
- {item.children.map((child: any) => { - return ( -
-
-
{child.name} :
-
- {child.children.map((children: any) => { - return ( -
- {children.name} { - handleDeleteSmallCategory(item.id, child.id, children.id); - }} - style={{ - marginLeft: 10, - cursor: 'pointer', - }}> -
- ) - })} -
-
-
- ) - })}
- - ) - })} +
+
+
+
+ +
+
+
+ + +
-
-
- - -
-
+ ) } diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx index dbf2ced..4fb8e17 100644 --- a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx @@ -3,7 +3,8 @@ import { Checkbox } from 'antd'; import './tree-menu.css'; import { DownOutlined, - UpOutlined + // UpOutlined, + RightOutlined } from '@ant-design/icons'; // interface TreeMenuProps { @@ -37,11 +38,11 @@ import { export default function TreeMenu({ trademarkCategories, expandedIds, -// setExpandedIds, + // setExpandedIds, checkedIds, -// setCheckedIds, -// selectedCategories, -// setSelectedCategories, + // setCheckedIds, + // selectedCategories, + // setSelectedCategories, handleExpandClick, handleSmallMenuClick }: any) { @@ -56,27 +57,39 @@ export default function TreeMenu({ const isChecked = checkedIds.includes(child.id); return ( -
+
{!isLeaf && (
handleExpandClick(child.id)} > -
- {isExpanded ? : } +
+ {isExpanded ? : }
-
{child.name}
+
{child.code}-{child.name}
)} {isLeaf && (
handleSmallMenuClick(child.id)} style={{ cursor: 'pointer', - + display: 'flex', + alignItems: 'center', + paddingRight: 10, }} > - {child.name} +
{child.code}-{child.name}
)} {!isLeaf && isExpanded && renderChildren(child.children, level + 1)} @@ -87,7 +100,7 @@ export default function TreeMenu({ return (
- {trademarkCategories.map((category:any) => { + {trademarkCategories.map((category: any) => { const isExpanded = expandedIds.includes(category.id); return (
@@ -95,10 +108,12 @@ export default function TreeMenu({ className='bigMenu' onClick={() => handleExpandClick(category.id)} > -
- {isExpanded ? : } +
+ {isExpanded ? : }
-
{category.name}
+
第{category.code}类 {category.name}
{isExpanded && renderChildren(category.children, 1)}
diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css index 0b40191..139b136 100644 --- a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css @@ -1,10 +1,13 @@ .bigMenu { display: flex; cursor: pointer; + margin-top: 10px; } .smallMenu { - margin-left: 20px; + /* margin-left: 20px; */ cursor: pointer; - + margin-top: 10px; + /* background-color: skyblue; */ + } \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/edit-tow.css b/src/route/TrademarkMall/components/EditTwo/edit-tow.css index 5626385..4a5f4c1 100644 --- a/src/route/TrademarkMall/components/EditTwo/edit-tow.css +++ b/src/route/TrademarkMall/components/EditTwo/edit-tow.css @@ -1,9 +1,10 @@ -.editTwoTitle{ +.editTwoTitle { font-size: 18px; /* font-weight: 700; */ } + .editTwoBotL { - width: calc(30% - 2px); + width: calc(20% - 2px); height: 100%; /* background-color: aqua; */ border-left: 1px solid #e9e9e9; @@ -13,7 +14,7 @@ } .editTwoBotR { - width: calc(70% - 1px); + width: calc(80% - 1px); height: 100%; /* background-color: rgb(179, 245, 195); */ border-right: 1px solid #e9e9e9; @@ -74,18 +75,43 @@ padding-left: 10px; box-sizing: border-box; } -.editTwoBTopTextR{ - padding: 10px; + +.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: skyblue; + 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; */ } \ No newline at end of file diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx index 0e20704..65770e5 100644 --- a/src/route/index/Index.tsx +++ b/src/route/index/Index.tsx @@ -58,7 +58,7 @@ import { import { // getLanguageList, getSoftTypeList appGoodsList, - buyAppGoods, appOrderList + buyAppGoods, appOrderList, trademarkGoodsList } from '../../request/api' import { setMenuActive, @@ -915,7 +915,7 @@ export default function Index() { copyrightLanguage: copyrightLanguage, copyrightType: copyrightType, // 新增特价标识 - goodsFlag: specialPrice=='特价' ? '特价' : '' + goodsFlag: specialPrice == '特价' ? '特价' : '' } }) } @@ -983,6 +983,7 @@ 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([]) // 电子软著可选商品列表 const [buyLoading, setBuyLoading] = useState(false) // 购买loading @@ -1126,6 +1127,31 @@ export default function Index() { // 申请商标是否显示------------------------------------------------------------------------------ const [trademarkBox, setTrademarkBox] = useState(false) // 申请商标弹窗 const [trademarkModal, setTrademarkModal] = useState(false) // 申请商标弹窗 + const [trademarkNewKeywords, setTrademarkNewKeywords] = useState('') // 临时关键字 + const [trademarkKeywords, setTrademarkKeywords] = useState('') // 关键字 + const trademarkKeyWordshandleSearch = () => { + setTrademarkKeywords(trademarkNewKeywords) + } + const trademarkKeyWordshandleChange = (e: any) => { + setTrademarkNewKeywords(e.target.value) + if (e.target.value == '') { + setTrademarkKeywords('') + } + } + const trademarkInit = () => { + setTrademarkNewKeywords('') + setTrademarkKeywords('') + } + useEffect(() => { + if (location.pathname == '/trademark-mall') { + nav('/trademark-mall', { + state: { + keywords: trademarkKeywords, + } + }) + } + + }, [trademarkKeywords]) // const [toRradeMarkModal, setToRradeMarkModal] = useState(false) // 申请商标编辑弹窗 // ---------------------------------------------------------------------------------------------------- @@ -1310,55 +1336,142 @@ export default function Index() { // { id: '3', title: '1个工作日下证', price: '2599', back: 'black' }, // { id: '4', title: '当天下证', price: '3699', back: 'black' }, // ] + // // 智能注册商标申请价格 + // const [TrademarkAiPrice, setTrademarkAiPrice] = useState(0) + // // 智能申请注册原价 + // const [TrademarkAiOldPrice, setTrademarkAiOldPrice] = useState(0) + // // 专家辅助注册价格 + // const [TrademarkExpertPrice, setTrademarkExpertPrice] = useState(0) + // // 至尊无忧注册价格 + // const [TrademarkUltimatePrice, setTrademarkUltimatePrice] = useState(0) + const [trademarkArray, setTrademarkArray] = useState([]) // 商标数组 + 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, + old: true, //是否显示原价 + oldprice: res[0].oldMoney, //原价 + cheap: true,//特价 + text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', + left: '性价比', right: '高', + textArray: [ + '自助办理，性价比高', + '自助查询，排查风险', + '人工严审，提升受理率' + ], + serve: false, //专家咨询 + num: 1 // 限购 + }, + { + id: res[1].id, title: '专家辅助注册', nowprice: res[1].money, cheap: false, + old: false, + oldprice: '', + text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', + left: '成功率', right: '高', + textArray: [ + '专家一对一，全流程代办', + '分析风险，优化注册方案', + '分析风险，优化注册方案' + ], + serve: true, + num: 0 + }, + { + id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money, cheap: false, + old: false, + oldprice: '', + text: '专家评估提高通过率，注册失败，可赔付全款', + left: '类型', right: '指定类目', + textArray: [ + '你注册，我投保', + '每件商标都有保单', + '指定类目驳回，赔付全款' + ], + serve: true, + num: 0 + + }, + ] + ) + } 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 = [ - { - id: '1', title: '智能申请注册', nowprice: '270', - old: true, //是否显示原价 - oldprice: '318', //原价 - cheap: true,//特价 - text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', - left: '性价比', right: '高', - textArray: [ - '自助办理，性价比高', - '自助查询，排查风险', - '人工严审，提升受理率' - ], - serve: false, //专家咨询 - num: 1 // 限购 - }, - { - id: '2', title: '专家辅助注册', nowprice: '499', cheap: false, - old: false, - oldprice: '', - text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', - left: '成功率', right: '高', - textArray: [ - '专家一对一，全流程代办', - '分析风险，优化注册方案', - '分析风险，优化注册方案' - ], - serve: true, - num: 0 - }, - { - id: '3', title: '至尊无忧注册', nowprice: '599', cheap: false, - old: false, - oldprice: '', - text: '专家评估提高通过率，注册失败，可赔付全款', - left: '类型', right: '指定类目', - textArray: [ - '你注册，我投保', - '每件商标都有保单', - '指定类目驳回，赔付全款' - ], - serve: true, - num: 0 + // const trademarkArray = [ + // { + // id: '1', title: '智能申请注册', nowprice: TrademarkAiPrice, + // old: true, //是否显示原价 + // oldprice: TrademarkAiOldPrice, //原价 + // cheap: true,//特价 + // text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', + // left: '性价比', right: '高', + // textArray: [ + // '自助办理，性价比高', + // '自助查询，排查风险', + // '人工严审，提升受理率' + // ], + // serve: false, //专家咨询 + // num: 1 // 限购 + // }, + // { + // id: '2', title: '专家辅助注册', nowprice:TrademarkExpertPrice , cheap: false, + // old: false, + // oldprice: '', + // text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', + // left: '成功率', right: '高', + // textArray: [ + // '专家一对一，全流程代办', + // '分析风险，优化注册方案', + // '分析风险，优化注册方案' + // ], + // serve: true, + // num: 0 + // }, + // { + // id: '3', title: '至尊无忧注册', nowprice: TrademarkUltimatePrice, cheap: false, + // old: false, + // oldprice: '', + // text: '专家评估提高通过率，注册失败，可赔付全款', + // left: '类型', right: '指定类目', + // textArray: [ + // '你注册，我投保', + // '每件商标都有保单', + // '指定类目驳回，赔付全款' + // ], + // serve: true, + // num: 0 - }, - ] + // }, + // ] const [appGoodsId, setAppGoodsId] = useState('') // 选择的商品id + const [appGoodsMoney, setAppGoodsMoney] = useState(0) // 选择的商品钱 useEffect(() => { // const nowname = sessionStorage.getItem('now') if (location.pathname == '/') { @@ -1764,6 +1877,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) @@ -1802,6 +1943,7 @@ export default function Index() { // getLanguageListDate() // getSoftTypeListDate() getAppGoodsList() + getTrademarkGoodsList() }, []); useEffect(() => { // loactionStorage里的activeMenu @@ -2173,7 +2315,7 @@ export default function Index() { tradingStartTime={tradingStartTime} tradingEndTime={tradingEndTime} tradingStatus={tradingStatus} - + specialPrice={specialPrice} @@ -3582,6 +3724,7 @@ export default function Index() { onClick={() => { setAppModal(true) setAppGoodsId('') + setAppGoodsMoney(0) }} >申请电子软著 申请商标 + + +
@@ -4137,7 +4302,8 @@ export default function Index() { }} onClick={() => { setAppGoodsId(item.id) - // console.log('item.dataId: ', item.dataId); + setAppGoodsMoney(item.money / 100) + console.log('item.dataId: ', item); }} > @@ -4177,34 +4343,7 @@ export default function Index() { // alert('开发中') // 创建按订单 如果成功 询问是否继续编辑 // setAppGoodsId('') - try { - 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) - } + setTipsModal(true) return @@ -4256,7 +4395,7 @@ export default function Index() { >
- {trademarkArray.map((item) => { + {trademarkArray.map((item: any) => { return (
{ - item.textArray.map((item: any, index) => { + item.textArray.map((item: any, index: any) => { return (
{ - 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,13 +4529,14 @@ export default function Index() { }} onClick={() => { - console.log(item.nowprice); - console.log('复杂'); + // console.log(item.nowprice); + // console.log('复杂'); setTrademarkModal(false) - nav('/trademark-ai-edit', { + nav(`/trademark-ai-edit/NEW`, { state: { - title: item.title, - price: item.nowprice + trademarkModeName: item.title, + // price: item.nowprice, + trademarkMode: item.id } }) }} @@ -4408,6 +4549,52 @@ export default function Index() { })}
+ { + 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}元，确定操作吗？ +
}, { - path:'/trademark-ai-edit', + path:'/trademark-ai-edit/:trademarkId', element: }, {