Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存

Browse Source
This commit is contained in:
lyp 2025-06-13 16:43:21 +08:00
parent ebde74d9b1
commit b8326d0337
21 changed files with 3669 additions and 1675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/BelongPeople/BelongPeople.tsx
View File

@ -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();
@ -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="取消"

30
src/request/api.ts
View File

@ -164,3 +164,33 @@ 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 uptrademarkList = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save2/${trademarkId}`,params)
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

14
src/request/request.ts
View File

@ -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 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};

2
src/route/AppElectron/AppEdit.tsx
View File

@ -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: '', // 企业名称

1
src/route/AppElectron/app-edit.css
View File

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

113
src/route/TrademarkMall/TrademarkAiEdit.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import './trademark-edit.css'
import {
RightOutlined
@ -9,11 +9,86 @@ 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<any>({
trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文
trademarkName: '', //商标名称
trademarkDescription: '', //商标描述
trademarkFile: '', //商标文件
trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传
trademarkPhoto: '', //商标图样
})
const [editTwoArray, setEditTwoArray] = useState<any>([])
// 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 (
<Spin tip="加载中请稍后..." size="small" spinning={loading}>
<div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
{contextHolder}
<div className='editProcessBox' style={{
marginBottom: 20
}}>
@ -32,8 +107,10 @@ export default function TrademarkAiEdit() {
}}
>填写基础信息</div>
</div>
<div className='editright'><RightOutlined /></div>
<div className='editProcess'>
<div className='editright' onClick={() => {
setEditProcess(2)
}}><RightOutlined /></div>
<div className='editProcess' >
<div className='editProcessNum' style={{
background: editProcess >= 2 ? '#3B60E8' : '',
color: editProcess >= 2 ? '#fff' : '#B1B1B1',
@ -47,7 +124,7 @@ export default function TrademarkAiEdit() {
>选择商标类别</div>
</div>
<div className='editright'><RightOutlined /></div>
<div className='editProcess'>
<div className='editProcess' >
<div className='editProcessNum' style={{
background: editProcess >= 3 ? '#3B60E8' : '',
color: editProcess >= 3 ? '#fff' : '#B1B1B1',
@ -61,7 +138,7 @@ export default function TrademarkAiEdit() {
>选择所属者</div>
</div>
<div className='editright'><RightOutlined /></div>
<div className='editProcess'>
<div className='editProcess' >
<div className='editProcessNum' style={{
background: editProcess >= 4 ? '#3B60E8' : '',
color: editProcess >= 4 ? '#fff' : '#B1B1B1',
@ -77,7 +154,7 @@ export default function TrademarkAiEdit() {
</div>
</div>
<div className='editright'><RightOutlined /></div>
<div className='editProcess'>
<div className='editProcess' >
<div className='editProcessNum' style={{
background: editProcess >= 5 ? '#3B60E8' : '',
color: editProcess >= 5 ? '#fff' : '#B1B1B1',
@ -112,15 +189,24 @@ export default function TrademarkAiEdit() {
display: editProcess == 1 ? 'block' : 'none'
}}>
<EditOne
key={editProcess}
// key={editProcess}
trademarkMode={state?.trademarkMode} //申请类型id
trademarkModeName={state?.trademarkModeName} //申请类型名称
trademarkId={trademarkId} //商标id
setTrademarkId={setTrademarkId} //设置商标id
setEditProcess={setEditProcess}
editOneData={editOneData} //编辑一数据
setEditOneData={setEditOneData} //设置编辑一数据
></EditOne>
</div>
<div style={{
display: editProcess == 2 ? 'block' : 'none'
}}>
<EditTwo
key={editProcess}
editTwoArray={editTwoArray}
setEditTwoArray={setEditTwoArray}
trademarkId={trademarkId} //商标id
// key={editProcess}
setEditProcess={setEditProcess}></EditTwo>
</div>
@ -128,31 +214,32 @@ export default function TrademarkAiEdit() {
display: editProcess == 3 ? 'block' : 'none'
}}>
<EditThree
key={editProcess}
// key={editProcess}
setEditProcess={setEditProcess}></EditThree>
</div>
<div style={{
display: editProcess == 4 ? 'block' : 'none'
}}>
<EditFour
key={editProcess}
// key={editProcess}
setEditProcess={setEditProcess}></EditFour>
</div>
<div style={{
display: editProcess == 5 ? 'block' : 'none'
}}>
<EditFive
key={editProcess}
// key={editProcess}
setEditProcess={setEditProcess}></EditFive>
</div>
<div style={{
display: editProcess == 6 ? 'block' : 'none'
}}>
<EditSix
key={editProcess}
// key={editProcess}
setEditProcess={setEditProcess}></EditSix>
</div>
</div>
</div>
</Spin>
)
}

4
src/route/TrademarkMall/TrademarkExpertEdit.tsx
View File

@ -22,7 +22,7 @@ export default function TrademarkExpertEdit() {
return (
<div className='trademarkExpertBox' style={{ height: `${height}px`, overflow: 'auto' }}>
<div style={{
display: state.title == '专家辅助注册' ? 'unset' : 'none'
display: state.id == '2' ? 'unset' : 'none'
}}>
<div className='trademarkTop'>
<div className='trademarkTopL'>
@ -34,7 +34,7 @@ export default function TrademarkExpertEdit() {
</div>
</div>
<div style={{
display: state.title == '至尊无忧注册' ? 'unset' : 'none'
display: state.id == '3'? 'unset' : 'none'
}}>
<div className='trademarkTop'>
<div className='trademarkTopL'>

248
src/route/TrademarkMall/TrademarkMall.tsx
View File

@ -1,10 +1,218 @@
// 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 = []
const columns: TableProps<any>['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) => (
<span>
{record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} <span style={{
display:record.trademarkType == 'image'? 'none' : 'unset',
}}>/{record.trademarkName}</span>
{/* {record} */}
</span>
)
},
{
title: '商标图样',
dataIndex: 'trademarkPhoto',
align: 'center',
key: 'trademarkPhoto',
width: 200,
render: (text) => (
<Image src={showImage(text, false)}
height={100}
style={{
maxWidth: 200,
}}
>
</Image>
)
},
{
title: '状态',
dataIndex: 'trademarkStatus',
align: 'center',
key: 'trademarkStatus',
width: 100,
render: (text) => (
<span>
{text == '-1' ?
<span >已取消</span>
: text == '0' ?
<span
style={{
color: 'skyblue',
}}
>待付款</span>
: text == '1' ?
<span
style={{
color: 'green',
}}
>已付款</span>
:
<span style={{
color: 'rgb(122 126 130)',
}}>未知</span>
}
</span>
)
},
{
title: '申请人',
dataIndex: 'leaderName',
align: 'center',
key: 'appOrderId',
width: 150,
render: (text) => (
<span>
{text ? text : '未完善'}
</span>
)
},
{
title: '申请人证件号',
dataIndex: 'leaderIdcard',
align: 'center',
key: 'appOrderId',
width: 150,
render: (text) => (
<span>
{text ? text : '未完善'}
</span>
)
},
{
title: '操作',
// dataIndex: 'contractManagementId',
align: 'center',
// key: 'appOrderId',
width: 150,
// bordeLeft: true,
fixed: 'right',
render: (record) => (
<div style={{
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);
}}>编辑</div>
)
},
]
const [data, setData] = useState<any>([])
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 (
<Spin tip="正在处理，请稍后..." size="small" spinning={loading}>
<div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
{contextHolder}
{data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<img src={nothingImg} alt="" width={368} height={355} />
@ -13,7 +221,41 @@ export default function TrademarkMall() {
fontSize: 16,
color: '#D0D0D0'
}}>暂无数据</div>
</div>) : (<></>)}
</div>) : (
<div className='' >
<div style={{
height: `${height - 80}px`,
// background: "pink" ,
paddingTop: 20
}}>
<Table
scroll={{ y: `${height - 150}px` }}
dataSource={data}
columns={columns}
bordered
// pagination={{
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
// }}
pagination={false} // 不显示分页
style={{ textAlign: 'center' }} // 设置表格内容居中显示
rowKey="trademarkId" // 指定数据项的唯一标识符
locale={{ emptyText: '暂无数据' }}
></Table>
</div>
<div className='product-release-pagination'>
<Pagination
showSizeChanger={false}
current={page} total={data.total} defaultPageSize={10} onChange={(page) => {
setPage(page)
getTrademarkList(page)
}} />
</div>
</div>
)}
</div>
</Spin>
)
}

193
src/route/TrademarkMall/components/EditFive/EditFive.tsx
View File

@ -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<any>([])
const [upFileArray, setUpFileArray] = useState<any>([])
// 定义允许上传的文件格式
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 (
<div className='editOneTwo'>
<div className='topLine'></div>
<div className='appInfoFormBox' style={{
<div className='' style={{
height: height,
background: 'pink'
}}></div>
// background: 'pink',
padding: '50px 50px',
boxSizing: 'border-box',
}}>
<Form form={form} onFinish={onFinish}
onFinishFailed={(errorInfo) => {
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
>
<div style={{
display: 'flex',
}}>
<div className='FormInputTitle' style={{
marginTop: -5
}}>上传委托书<span style={{
color: 'red',
}}>*</span> ：</div>
<div style={{
// background:'pink',
width: 200,
position: 'relative',
}}>
<Form.Item
name="file"
rules={[{ required: true, message: '请上传委托书' }]}
>
<Input style={{
width: 100,
display: 'none',
}}></Input>
</Form.Item>
<div style={{
position: 'absolute',
top: -5,
// background: 'pink',
maxWidth: 200,
}}>
<Upload
name="file"
action={uploadFileUrl()}
fileList={upFileArray}
onChange={(info) => {
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}` }}
>
<Button icon={<UploadOutlined />} style={{
marginTop: '4px'
}}
disabled={upFileArray.length > 0}
>上传委托书</Button>
</Upload>
</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>
<div className='topLine'></div>
<div style={{
marginTop: '8px',

147
src/route/TrademarkMall/components/EditFour/EditFour.tsx
View File

@ -1,10 +1,106 @@
// import React from 'react'
import { Button } from 'antd'
export default function editFour(props: any) {
import { useState } from 'react'
import './edit-four.css'
import { Button, Table, Modal } from 'antd'
import type { TableProps } from 'antd';
interface DataType {
id: string;
type: string; //付费方式
name: string;//服务名称
category: string; //类别
goods: string; //服务
goodsType: string; //商标类型
price: string; //单价
num: string; //数量
}
export default function EditFour(props: any) {
const columns: TableProps<DataType>['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 (
<div className='editOneTwo'>
<div className='topLine'></div>
<div className='appInfoFormBox' style={{
<div className='editFourBox' style={{
height: height,
background: 'pink'
}}></div>
// background: 'pink'
}}>
<div className='editFourTop'>
<div className='editFourTopL'>商标申请</div>
<div className='editFourTopR'>
<span>数量 : 2</span>
<span style={{
marginLeft: '10px',
}}>小计<span style={{
color: 'red',
}}>￥630.66</span></span>
</div>
</div>
<Table<DataType> columns={columns}
// 取消自带分页
pagination={false}
dataSource={data}
rowKey='id'
/>
</div>
<div className='topLine'></div>
<div style={{
marginTop: '8px',
@ -43,8 +160,22 @@ export default function editFour(props: any) {
onClick={() => {
handleSubmit()
}}
>下一步</Button>
>提交订单</Button>
</div>
<Modal title="提示"
centered
destroyOnClose={true}
open={modal}
onCancel={() => { setModal(false) }}
okText='确定'
cancelText='取消'
onOk={()=>{
setModal(false)
props.setEditProcess(5)
}}
>
该操作会扣除999元，确定操作吗？
</Modal>
</div>
)
}

11
src/route/TrademarkMall/components/EditFour/edit-four.css Normal file
View File

@ -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;
}

32
src/route/TrademarkMall/components/EditOne/EditOne.css
View File

@ -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;
}

639
src/route/TrademarkMall/components/EditOne/EditOne.tsx
View File

@ -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<any>(); // 文字商标表单
const [formB] = Form.useForm<any>(); // 图形商标表单
const [formC] = Form.useForm<any>(); // 图形商标表单
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<any>([]);
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<any>([])
const onFinishA = (values: any) => {
console.log(values);
console.log(fileList); // 上传的授权声明书模板
console.log(generateImgId); // 自动生成的
console.log(imgList[0]?.uid); // 手动上传的
// 点击下一步如果需要保存的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;
// 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<any>([])
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,21 +379,156 @@ 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') {
// 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 (
<Spin tip="正在提交，请稍后..." size="small" spinning={upLodaing}>
<div className='editOneBox'>
{contextHolder}
<div className='topLine'></div>
<div className='' style={{
<div className='editOneFomrBox' style={{
height: height,
// background: 'pink',
padding: '10px',
@ -222,9 +562,9 @@ export default function EditOne(props: any) {
marginLeft: '2px',
}}>
<Radio.Group onChange={onChange} value={goodsType}>
<Radio.Button value="a">文字商标</Radio.Button>
<Radio.Button value="b">图形商标</Radio.Button>
<Radio.Button value="c">文字图形组合商标</Radio.Button>
<Radio.Button value="text">文字商标</Radio.Button>
<Radio.Button value="image">图形商标</Radio.Button>
<Radio.Button value="text-image">文字图形组合商标</Radio.Button>
</Radio.Group>
</div>
<a style={{
@ -237,7 +577,7 @@ export default function EditOne(props: any) {
>如何选择?</a>
</div>
<div style={{
display: goodsType === 'a' ? 'unset' : 'none',
display: goodsType === 'text' ? 'unset' : 'none',
}}>
<Form
name="FormA"
@ -266,7 +606,7 @@ export default function EditOne(props: any) {
position: 'relative',
}}>
<Form.Item
name="title"
name="trademarkName"
rules={[{ required: true, message: '请输入商标名称' }]}
>
<Input style={{
@ -292,14 +632,15 @@ export default function EditOne(props: any) {
}}>
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
onClick={() => {
window.open('https://www.baidu.com/')
window.open(downloadAuthBookUrl())
}}
>授权声明书模板</span>，填写完盖章签字后
<div>
<Spin indicator={<LoadingOutlined spin />} size="small" spinning={disabled}>
<Upload
name="file"
maxCount={1}
action={uploadFileUrl()}
action={uploadDeputeFileUrl('姓名授权书')}
beforeUpload={(file) => {
const isPNG = file.type === 'image/png';
const isPDF = file.type === 'application/pdf';
@ -314,10 +655,11 @@ export default function EditOne(props: any) {
onChange={handleChange}
showUploadList={false}
headers={{ 'Auth': `Bearer ${token}` }}
disabled={fileList.length > 0}
disabled={fileList.length > 0 || disabled}
>
<span className='pointerBlue'>上传文件</span>
</Upload>
</Spin>
</div>
<div>
({fileList.length}/1)
@ -331,7 +673,7 @@ export default function EditOne(props: any) {
<div
style={{
// background: 'pink',
width: 100,
maxWidth: 100,
// 超出部分隐藏用...代替
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -389,7 +731,7 @@ export default function EditOne(props: any) {
<Form.Item
name="text"
name="trademarkDescription"
rules={[{ required: true, message: '请输入商标说明' }]}
>
<TextArea style={{
@ -433,8 +775,9 @@ export default function EditOne(props: any) {
width: 200,
position: 'relative',
}}>
<Form.Item
name="imgUrl"
name="trademarkPhoto"
rules={[{ required: true, message: generateType == '1' ? '请点击生成按钮生成商标图样' : '请上传商标图样' }]}
>
<TextArea style={{
@ -490,7 +833,7 @@ export default function EditOne(props: any) {
justifyContent: 'center',
alignItems: 'flex-start',
}}>
<Image src={generateImgId} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
<Image src={showImage(generateImgId, false)} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
</div>
</div>
{/* 手动上传图片 */}
@ -533,7 +876,7 @@ export default function EditOne(props: any) {
}}
onClick={() => {
setImgList([])
formA.setFieldsValue({ imgUrl: '' })
formA.setFieldsValue({ trademarkPhoto: '' })
}}
>删除</div>
@ -593,12 +936,115 @@ export default function EditOne(props: any) {
</div>
<Button type="primary"
onClick={() => {
setGenerateImgId('http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024')
// 给FormA表单的imgUrl赋值
onClick={async () => {
// setGenerateImgId('http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024')
// // 给FormA表单的imgUrl赋值
// formA.setFieldsValue({
// trademarkPhoto: 'http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
// })
if (!formA.getFieldValue('trademarkName')) {
message.error('请先输入商标名称')
return;
} else {
console.log('正在生成');
// try {
// // 创建一个 canvas 元素
// const canvas = document.createElement('canvas');
// const ctx = canvas.getContext('2d');
// if (!ctx) {
// message.error('无法获取 canvas 上下文');
// return;
// }
// // 设置 canvas 尺寸
// canvas.width = 500;
// canvas.height = 250;
// // 设置背景颜色为白色
// ctx.fillStyle = '#FFFFFF';
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// // 设置文字样式
// ctx.fillStyle = '#000000';
// // 设置字体为斜体、粗体，大小为 28px，字体族为 "SimSun"（宋体）
// ctx.font = 'bold 100px SimSun';
// // ctx.font = '24px Arial';
// ctx.textAlign = 'center';
// ctx.textBaseline = 'middle';
// // 在画布中心绘制文字
// ctx.fillText(formA.getFieldValue('trademarkName'), canvas.width / 2, canvas.height / 2);
// // 将 canvas 转换为图片 URL
// const imageUrl = canvas.toDataURL('image/png');
// // 设置生成的图片 ID 和表单值
// setGenerateImgId(imageUrl);
// // formA.setFieldsValue({
// // trademarkPhoto: imageUrl
// // });
// // 将 canvas 转换为 Blob 对象
// const blob = await new Promise<Blob | null>((resolve) => {
// canvas.toBlob((blob) => {
// resolve(blob);
// }, 'image/png');
// });
// if (!blob) {
// message.error('无法将 canvas 转换为图片');
// return;
// }
// // 创建 FormData 对象
// const formData = new FormData();
// formData.append('file', blob, 'generated_image.png');
// // 获取上传地址
// const uploadUrl = uploadFileUrl();
// // 发送上传请求
// const response = await fetch(uploadUrl, {
// method: 'POST',
// headers: {
// 'Auth': `Bearer ${token}`
// },
// body: formData
// });
// if (!response.ok) {
// throw new Error('图片上传失败');
// }
// const result = await response.json();
// const fileId = result.data.fileId; // 假设响应中的 fileId 是成功后的 id
// // 设置生成的图片 ID 和表单值
// setGenerateImgId(showImage(fileId, false));
// formA.setFieldsValue({
// trademarkPhoto: fileId
// });
// } catch (error) {
// console.error('生成图片失败:', error);
// message.error('生成图片失败，请稍后重试');
// }
try {
const res: any = await aiGenerateImage({
title: formA.getFieldValue('trademarkName'),
});
console.log('结果', res);
setGenerateImgId(res.fileId);
formA.setFieldsValue({
imgUrl: 'http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
trademarkPhoto: res.fileId
})
} 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)
}
}
}}
style={{
marginTop: '70px',
@ -614,7 +1060,7 @@ export default function EditOne(props: any) {
<div
style={{
display: goodsType === 'b' ? 'unset' : 'none',
display: goodsType === 'image' ? 'unset' : 'none',
}}>
<Form
name="FormB"
@ -643,7 +1089,7 @@ export default function EditOne(props: any) {
<Form.Item
name="textB"
name="trademarkDescription"
rules={[{ required: true, message: '请输入商标说明' }]}
>
<TextArea style={{
@ -676,7 +1122,7 @@ export default function EditOne(props: any) {
position: 'relative',
}}>
<Form.Item
name="imgUrl"
name="trademarkPhoto"
rules={[{ required: true, message: '请上传商标图样' }]}
>
<TextArea style={{
@ -710,15 +1156,15 @@ export default function EditOne(props: any) {
<Upload
name="file"
maxCount={1}
action={uploadFileUrl()}
action={uploadImageAddUrl()}
beforeUpload={(file) => {
const isPNG = file.type === 'image/png';
// const isPNG = file.type === 'image/png';
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
if (!isPNG && !isJPG) {
if (!isJPG) {
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
message.error('仅支持 PNG、JPG 格式的文件!');
message.error('仅支持 JPG 格式的文件!');
}
return isPNG || isJPG;
return isJPG;
}}
// fileList={[]}
onChange={(info) => {
@ -743,19 +1189,22 @@ export default function EditOne(props: any) {
url: showImage(info.file.response.data.fileId, false)
}
])
formB.setFieldsValue({ imgUrl: info.file.response.data.fileId })
formB.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })
return;
}
if (info.file.status === 'error') {
setImgLodaing(false)
message.error(`上传失败`);
// 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={imgList.length > 0}
disabled={upImglist.length > 0}
>
<div style={{
width: 200,
@ -812,7 +1261,7 @@ export default function EditOne(props: any) {
}}
onClick={() => {
setUpImglist([])
formB.setFieldsValue({ imgUrl: '' })
formB.setFieldsValue({ trademarkPhoto: '' })
}}
>删除</div>
@ -822,7 +1271,7 @@ export default function EditOne(props: any) {
lineHeight: '20px',
// background: 'pink'
}}>
<div>图片尺寸:400*400至1500*1500</div>
<div>图片尺寸:500*500至1500*1500</div>
<div>图片大小:200kb内</div>
<div>图片格式:仅支持JPG格式</div>
<div style={{
@ -852,7 +1301,7 @@ export default function EditOne(props: any) {
<div
style={{
display: goodsType === 'c' ? 'unset' : 'none',
display: goodsType === 'text-image' ? 'unset' : 'none',
}}>
<Form
name="FormC"
@ -881,7 +1330,7 @@ export default function EditOne(props: any) {
position: 'relative',
}}>
<Form.Item
name="title"
name="trademarkName"
rules={[{ required: true, message: '请输入商标名称' }]}
>
<Input style={{
@ -907,7 +1356,7 @@ export default function EditOne(props: any) {
}}>
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
onClick={() => {
window.open('https://www.baidu.com/')
window.open(downloadAuthBookUrl())
}}
>授权声明书模板</span>，填写完盖章签字后
<div>
@ -934,7 +1383,7 @@ export default function EditOne(props: any) {
<span className='pointerBlue'>上传文件</span>
</Upload>
</div>
<div>
<div >
({fileListC.length}/1)
</div>
<div>
@ -946,7 +1395,7 @@ export default function EditOne(props: any) {
<div
style={{
// background: 'pink',
width: 100,
maxWidth: 100,
// 超出部分隐藏用...代替
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -1004,7 +1453,7 @@ export default function EditOne(props: any) {
<Form.Item
name="text"
name="trademarkDescription"
rules={[{ required: true, message: '请输入商标说明' }]}
>
<TextArea style={{
@ -1036,7 +1485,7 @@ export default function EditOne(props: any) {
position: 'relative',
}}>
<Form.Item
name="imgUrl"
name="trademarkPhoto"
rules={[{ required: true, message: '请上传商标图样' }]}
>
<TextArea style={{
@ -1070,18 +1519,53 @@ export default function EditOne(props: any) {
<Upload
name="file"
maxCount={1}
action={uploadFileUrl()}
action={uploadImageAddUrl()}
beforeUpload={(file) => {
const isPNG = file.type === 'image/png';
// const isPNG = file.type === 'image/png';
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
if (!isPNG && !isJPG) {
if (!isJPG) {
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
message.error('仅支持 PNG、JPG 格式的文件!');
message.error('仅支持 JPG 格式的文件!');
}
return isPNG || isJPG;
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)
@ -1093,7 +1577,8 @@ export default function EditOne(props: any) {
// // console.log(downloadUrl(fileId));
// const url = showImage(fileId, false);
console.log(info.file.response.data.fileId);
console.log(info);
// console.log(info.file.response.data.fileId);
setUpImglistC([
{
@ -1103,19 +1588,20 @@ export default function EditOne(props: any) {
url: showImage(info.file.response.data.fileId, false)
}
])
formC.setFieldsValue({ imgUrl: info.file.response.data.fileId })
formC.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })
return;
}
if (info.file.status === 'error') {
setImgLodaingC(false)
message.error(`上传失败`);
// message.error(`上传失败`);
message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
return;
}
}}
showUploadList={false}
headers={{ 'Auth': `Bearer ${token}` }}
disabled={imgList.length > 0}
disabled={upImglistC.length > 0}
>
<div style={{
width: 200,
@ -1172,7 +1658,7 @@ export default function EditOne(props: any) {
}}
onClick={() => {
setUpImglistC([])
formC.setFieldsValue({ imgUrl: '' })
formC.setFieldsValue({ trademarkPhoto: '' })
}}
>删除</div>
@ -1182,7 +1668,7 @@ export default function EditOne(props: any) {
lineHeight: '20px',
// background: 'pink'
}}>
<div>图片尺寸:400*400至1500*1500</div>
<div>图片尺寸:500*500至1500*1500</div>
<div>图片大小:200kb内</div>
<div>图片格式:仅支持JPG格式</div>
<div style={{
@ -1229,5 +1715,6 @@ export default function EditOne(props: any) {
>下一步</Button>
</div>
</div >
</Spin>
)
}

33
src/route/TrademarkMall/components/EditSix/EditSix.tsx
View File

@ -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 (
<div className='editOneTwo'>
<div className='topLine'></div>
<div className='appInfoFormBox' style={{
<div className='' style={{
height: height,
background: 'pink'
}}></div>
}}>
显示商标信息
</div>
<div className='topLine'></div>
<div style={{
marginTop: '8px',
@ -29,7 +32,7 @@ export default function editSix(props: any) {
borderRadius: '5px',
}}
onClick={() => {
props.setEditProcess(4)
props.setEditProcess(5)
}}
>上一步</Button>
<Button
@ -45,6 +48,20 @@ export default function editSix(props: any) {
}}
>上传</Button>
</div>
<Modal
title="提示"
centered
open={modal}
onOk={() => { setModal(false) }}
onCancel={() => { setModal(false) }}
okText="确定"
cancelText="取消"
>
<span style={{
fontSize: '16px',
color: 'red',
}}> 注:上传后无法撤回，是否继续上传？</span>
</Modal>
</div>
)
}

152
src/route/TrademarkMall/components/EditThree/EditThree.tsx
View File

@ -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 (
<div className='editOneTwo'>
<div className='topLine'></div>
<div className='appInfoFormBox' style={{
<div className='' style={{
height: height,
background: 'pink'
}}></div>
// background: 'pink'
padding: '50px 50px',
boxSizing: 'border-box',
}}>
<Form form={form} onFinish={onFinish}
onFinishFailed={(errorInfo) => {
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
>
<div style={{
display: 'flex',
justifyContent: 'space-between',
width: '900px',
}}>
<div className='appInfoFormInput' style={{
// background: 'pink',
position: 'relative',
}}>
<div className='FormInputTitle'>产权所属者<span style={{ color: 'red', }}>*</span>：</div>
<Form.Item name="projOwnerName" label="" rules={[{ required: true, message: '请选择/创建知识产权所属者' },
]}>
<Input
style={{
width: '300px',
height: '42px',
}} placeholder="请选择/创建知识产权所属者" />
</Form.Item>
<div style={{
display: belongPeopleInfo.authorId ? 'none' : 'unset',
position: 'absolute',
width: '300px',
height: '42px',
top: '0',
right: '0',
// background: 'skyblue',
textAlign: 'right',
lineHeight: '42px',
cursor: 'pointer',
paddingRight: '10px',
color: '#1F79FF',
}}
onClick={() => {
setBelongModal(true)
}}
>
选择
</div>
<div style={{
display: belongPeopleInfo.authorId ? 'unset' : 'none',
position: 'absolute',
width: '300px',
height: '42px',
top: '0',
right: '0',
// background: 'skyblue',
textAlign: 'right',
lineHeight: '42px',
paddingRight: '10px',
color: '#1F79FF',
}}
>
<span
style={{
cursor: 'pointer',
}}
onClick={() => {
setValue('')
setBelongPeopleInfo({
authorName: '',
authorType: '',
authorIdCardType: '',
authorIdCard: '',
authorCrcAccount: 0,
authorId: '',
authorProvinceCity: '',
authorCrcAccountUsername: '',
authorCrcAccountPassword: '',
})
}}> 取消</span>
</div>
</div>
</div>
</Form>
</div>
<div className='topLine'></div>
<div style={{
marginTop: '8px',
@ -45,6 +165,20 @@ export default function editThree(props: any) {
}}
>下一步</Button>
</div>
<Modal title="选择所属者"
destroyOnClose
centered
open={belongModal}
width={1200}
footer={null}
onCancel={() => {
setBelongModal(false)
}}>
<BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
</Modal>
</div>
)
}

731
src/route/TrademarkMall/components/EditTwo/EditTwo.tsx
View File

@ -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);
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<string, number>();
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);
// 调用表单实例的 submit 方法
// form.submit();
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<any[]>([]);
// 初始化勾选状态，默认所有小类都未勾选
const [checkedIds, setCheckedIds] = useState<any[]>([]);
// 存储选中的大类和小类信息
// 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<any[]>([]);
// const [filteredCategories, setFilteredCategories] = useState(trademarkCategories);
const [filteredCategories, setFilteredCategories] = useState<any[]>([]);
// 处理大类或中类点击事件，切换展开状态
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,42 +427,297 @@ export default function EditTwo(props: any) {
);
};
useEffect(() => {
console.log('selectedCategories', selectedCategories);
// useEffect(() => {
// console.log('selectedCategories', selectedCategories);
}, [selectedCategories])
// }, [selectedCategories])
const [keyWords, setKeyWords] = useState<string>('');
const [searchKeyWords, setSearchKeyWords] = useState<string>('');
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 (
<Spin tip="正在提交，请稍后..." size="small" spinning={loading}>
<div className='editTwoBox'>
{contextHolder}
<div className='topLine'></div>
<div className='' style={{
height: height,
@ -424,7 +769,7 @@ export default function EditTwo(props: any) {
color: '#5a5a5a',
marginLeft: '10px'
}}>
常用商标类别:
{/* 常用商标类别: */}
</div>
</div>
@ -437,31 +782,47 @@ export default function EditTwo(props: any) {
display: 'flex',
}}>
<div className='editTwoBotL' >
<div className='editTwoBTopSearch'></div>
<div className='editTwoBTopSearch'>
<Search placeholder="请输入关键字" onSearch={onSearch} value={keyWords} onChange={(e) => {
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%' }} />
<Button style={{
width: '13%'
}} onClick={() => {
setKeyWords('');
setSearchKeyWords('');
// setFilteredCategories(trademarkCategories);
getTrademarkTypeList()
setExpandedIds(checkedIds)
// setExpandedIds(checkedIds)
// setExpandedIds([]); // 清空展开状态
}} icon={<SyncOutlined />}></Button>
</div>
<div className='editTwoBTopTitle'>类目索引</div>
<div className='editTwoBTopText editTwoBTopTextL'>
{/* {Array.from({ length: 100 }).map((item, index) => (
<div key={index} className='editTwoBTopTextItem'>
11111
</div>
))} */}
<TreeMenu
trademarkCategories={trademarkCategories}
trademarkCategories={filteredCategories}
expandedIds={expandedIds}
// setExpandedIds={setExpandedIds}
checkedIds={checkedIds}
// setCheckedIds={setCheckedIds}
// selectedCategories={selectedCategories}
// setSelectedCategories={setSelectedCategories}
handleExpandClick={handleExpandClick}
handleSmallMenuClick={handleSmallMenuClick}
// trademarkCategories={trademarkCategories}
// expandedIds={expandedIds}
// setExpandedIds={setExpandedIds}
// checkedIds={checkedIds}
// setCheckedIds={setCheckedIds}
// selectedCategories={selectedCategories}
// setSelectedCategories={setSelectedCategories}
></TreeMenu>
</div>
</div>
@ -516,7 +877,12 @@ export default function EditTwo(props: any) {
<a style={{
marginLeft: 10,
cursor: 'pointer',
}}>保存为常用</a>
}}
onClick={() => {
console.log('selectedCategories', selectedCategories);
}}
>保存为常用</a>
</div>
</div>
@ -536,25 +902,26 @@ export default function EditTwo(props: any) {
11111
</div>
))} */}
<div className='editTwoGoodsBox' style={{
border: selectedCategories.length > 0 ? '1px solid #e9e9e9' : 'none',
}}>
{selectedCategories.map((item: any) => {
const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0);
return (
<div key={item.id} style={{
marginBottom: 20
}}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
// marginBottom: 20
}}>
<div
className='editTwoGoodsBoxItem'
>
<div style={{
display: 'flex',
}}>
<div>
{item.name}
</div>
<div>(共{totalCount}项,10项以上每项附加收费31.8元)</div>
<div>(共{totalCount}项 , 10项以上每项附加收费31.8元)</div>
</div>
<div style={{
paddingRight: 10,
@ -574,7 +941,7 @@ export default function EditTwo(props: any) {
}}><DeleteOutlined /></span>
</div>
</div>
<div className='editTwoGoodsBoxChildItem'>
{item.children.map((child: any) => {
return (
<div style={{
@ -604,7 +971,7 @@ export default function EditTwo(props: any) {
marginBottom: 10,
}}
key={children.id}>
{children.name} <span
{children.code}-{children.name} <span
onClick={() => {
handleDeleteSmallCategory(item.id, child.id, children.id);
}}
@ -620,10 +987,46 @@ export default function EditTwo(props: any) {
</div>
)
})}</div>
</div>
)
})}
</div>
<div style={{
display: selectedCategories.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>
@ -657,9 +1060,11 @@ export default function EditTwo(props: any) {
}}
onClick={() => {
handleSubmit()
}}
>下一步</Button>
</div>
</div>
</Spin>
)
}

45
src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx
View File

@ -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 (
<div key={child.id} style={{ marginLeft: level * 20 }}>
<div key={child.id} style={{ marginLeft: level * 15 }}>
{!isLeaf && (
<div
className='bigMenu'
onClick={() => handleExpandClick(child.id)}
>
<div>
{isExpanded ? <UpOutlined /> : <DownOutlined />}
<div style={{
color: 'rgb(124, 124, 124)',
}}>
{isExpanded ? <DownOutlined /> : <RightOutlined />}
</div>
<div> {child.name}</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,
}}
>
{child.name} <Checkbox checked={isChecked} />
<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)}
@ -87,7 +100,7 @@ export default function TreeMenu({
return (
<div>
{trademarkCategories.map((category:any) => {
{trademarkCategories.map((category: any) => {
const isExpanded = expandedIds.includes(category.id);
return (
<div key={category.id}>
@ -95,10 +108,12 @@ export default function TreeMenu({
className='bigMenu'
onClick={() => handleExpandClick(category.id)}
>
<div>
{isExpanded ? <UpOutlined /> : <DownOutlined />}
<div style={{
color: 'rgb(124, 124, 124)',
}}>
{isExpanded ? <DownOutlined /> : <RightOutlined />}
</div>
<div> {category.name}</div>
<div> 第{category.code}类 {category.name}</div>
</div>
{isExpanded && renderChildren(category.children, 1)}
</div>

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

@ -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; */
}

38
src/route/TrademarkMall/components/EditTwo/edit-tow.css
View File

@ -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; */
}

279
src/route/index/Index.tsx
View File

@ -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<any>([]) // 电子软著可选商品列表
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,13 +1336,38 @@ 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([
// 商标数组
const trademarkArray = [
{
id: '1', title: '智能申请注册', nowprice: '270',
id: res[0].id, title: '智能申请注册', nowprice: res[0].money,
old: true, //是否显示原价
oldprice: '318', //原价
oldprice: res[0].oldMoney, //原价
cheap: true,//特价
text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
left: '性价比', right: '高',
@ -1329,7 +1380,7 @@ export default function Index() {
num: 1 // 限购
},
{
id: '2', title: '专家辅助注册', nowprice: '499', cheap: false,
id: res[1].id, title: '专家辅助注册', nowprice: res[1].money, cheap: false,
old: false,
oldprice: '',
text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
@ -1343,7 +1394,7 @@ export default function Index() {
num: 0
},
{
id: '3', title: '至尊无忧注册', nowprice: '599', cheap: false,
id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money, cheap: false,
old: false,
oldprice: '',
text: '专家评估提高通过率，注册失败，可赔付全款',
@ -1358,7 +1409,69 @@ export default function Index() {
},
]
)
} 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: 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
@ -3582,6 +3724,7 @@ export default function Index() {
onClick={() => {
setAppModal(true)
setAppGoodsId('')
setAppGoodsMoney(0)
}}
>申请电子软著</Button>
<Search
@ -3666,6 +3809,28 @@ export default function Index() {
setTrademarkModal(true)
}}
>申请商标</Button>
<Search placeholder="输入商标名称"
value={trademarkNewKeywords}
onSearch={trademarkKeyWordshandleSearch}
onChange={trademarkKeyWordshandleChange}
className='searchInputmedia'
style={{
// maxWidth: '200px',
width: '170px',
height: '31px',
marginLeft: '5px'
}}
allowClear
/>
<Button style={{
marginLeft: 5, height: 31
}}
icon={<ClearOutlined />}
onClick={() => {
trademarkInit()
}}>清除</Button>
</div>
</div>
@ -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() {
>
<div className='trademarkArrayBox'>
{trademarkArray.map((item) => {
{trademarkArray.map((item: any) => {
return (
<div className='trademarkItem' key={item.id}>
<div style={{
@ -4283,7 +4422,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',
@ -4355,12 +4494,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,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() {
})}
</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',

2
src/route/router.tsx
View File

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