暂存

src/route/TrademarkMall/TrademarkAiEdit.tsx

@@ -14,7 +14,9 @@ export default function TrademarkAiEdit() {
     const [editProcess, setEditProcess] = useState(1);
     return (
         <div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
-            <div className='editProcessBox'>
+            <div className='editProcessBox' style={{
+                marginBottom:20
+            }}>
                 <div className='editProcess' >
                     <div className='editProcessNum'
                         style={{

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

@@ -13,7 +13,6 @@
     font-size: 18px;
     margin-bottom: 20px;
     /* height: 46px; */
-    /* background: pink; */
 }
 
 .editFormItem {
@@ -39,3 +38,7 @@
 .redTitle {
     color: red;
 }
+.pointerBlue{
+    color: var(--color-blue);
+    cursor: pointer;
+}

src/route/TrademarkMall/components/EditOne/EditOne.tsx

@@ -1,12 +1,20 @@
 import { useState } from 'react'
-import { Button, Radio, Form, Input } from 'antd'
+import { Button, Radio, Form, Input, Upload, message, Image } from 'antd'
 import './EditOne.css'
+import { uploadFileUrl, showImage } from '../../../../request/request'
+import {
+  DeleteOutlined
+} from '@ant-design/icons';
 const { TextArea } = Input;
+import type { UploadProps } from 'antd';
 export default function EditOne(props: any) {
+  const token = sessionStorage.getItem('token')
   const [formA] = Form.useForm<any>(); // 文字商标表单
   const [formB] = Form.useForm<any>(); // 图形商标表单
   const height = window.innerHeight - 350;
   const [goodsType, setGoodsType] = useState('a')
+  // 生成方式
+  const [generateType, setGenerateType] = useState('1')
   const handleSubmit = () => {
     // console.log(form);
     // props.setEditProcess(2);
@@ -21,6 +29,71 @@ export default function EditOne(props: any) {
     }
 
   };
+  const [fileList, setFileList] = useState<any>([]);
+
+  const handleChange: UploadProps['onChange'] = (info) => {
+    // console.log(info.file.status);
+
+
+    if (info.file.status === 'uploading') {
+      // setFileList([])
+      return;
+    }
+    if (info.file.status === 'done') {
+
+      // const fileId = info.file.response.data.fileId;
+      // // console.log(downloadUrl(fileId));
+
+      // const url = showImage(fileId, false);
+      setFileList([
+        {
+          uid: info.file.response.data.fileId,
+          name: info.file.response.data.fileName,
+          status: 'done',
+          url: showImage(info.file.response.data.fileId, false)
+        }
+      ])
+
+      return;
+    }
+    if (info.file.status === 'error') {
+      message.error(`上传失败`);
+      return;
+    }
+  };
+  // 自动生成的img
+  const [generateImgId, setGenerateImgId] = useState<any>('')
+  const [imgList, setImgList] = useState<any>([])
+  const upImgHandleChange: UploadProps['onChange'] = (info) => {
+    console.log(info.file.status);
+
+
+    if (info.file.status === 'uploading') {
+      // setFileList([])
+      return;
+    }
+    if (info.file.status === 'done') {
+
+      // const fileId = info.file.response.data.fileId;
+      // // console.log(downloadUrl(fileId));
+
+      // const url = showImage(fileId, false);
+      setImgList([
+        {
+          uid: info.file.response.data.fileId,
+          name: info.file.response.data.fileName,
+          status: 'done',
+          url: showImage(info.file.response.data.fileId, false)
+        }
+      ])
+
+      return;
+    }
+    if (info.file.status === 'error') {
+      message.error(`上传失败`);
+      return;
+    }
+  };
   const onFinishA = (values: any) => {
     console.log(values);
     props.setEditProcess(2);
@@ -34,6 +107,19 @@ export default function EditOne(props: any) {
   const onChange = (e: any) => {
     setGoodsType(e.target.value)
   };
+  const generateTypeChange = (e: any) => {
+    setGenerateType(e.target.value)
+    // 给FormA表单的imgUrl赋值
+    // if (e.target.value === '1') {
+    //   formA.setFieldsValue({ imgUrl: generateImgId }) 
+    // }
+    // if (e.target.value === '2') {
+    //   formA.setFieldsValue({ imgUrl: imgList[0]?.uid}) 
+    // }
+    formA.setFieldsValue({ imgUrl: '' })
+    setGenerateImgId('')
+    setImgList([])
+  }
   return (
     <div className='editOneBox'>
       <div className='topLine'></div>
@@ -42,11 +128,25 @@ export default function EditOne(props: any) {
         // background: 'pink',
         padding: '10px',
         boxSizing: 'border-box',
+        overflow: 'auto',
       }}>
-        <div>
+        <div className='trademarkTop'>
-          
+          <div className='trademarkTopL'>
+            !
+          </div>
+          <div>
+            <div>智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“<a>专家辅助申请</a>"或"<a>至尊无忧注册</a>"提高商标申清通过率。</div>
+            <div style={{
+              marginTop: '5px'
+            }}>当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。</div>
+            <div style={{
+              marginTop: '5px'
+            }}>商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。</div>
+          </div>
         </div>
-        <div className='editFormTitle'>
+        <div className='editFormTitle' style={{
+          marginTop: '20px',
+        }}>
           基本信息
         </div>
         <div className='editFormItem firstItem'>
@@ -74,36 +174,137 @@ export default function EditOne(props: any) {
             name="FormA"
             form={formA}
             onFinish={onFinishA}
+            onFinishFailed={(errorInfo) => {
+              // console.log(errorInfo)
+              // message.error('请填写完整的信息!')
+              errorInfo.errorFields.forEach((field) => {
+                if (field.errors.length > 0) {
+                  // 显示每条错误信息
+                  message.error(field.errors[0]);
+                }
+              });
+            }}
             initialValues={{ softWare: '' }}
             style={{ marginTop: 20 }}
           >
-            <div className='editFormItem '>
+            <div className='editFormItem'>
               <div className='editFormItemTitle'>
                 商标名称<span className='redTitle' >*</span>：
               </div>
 
-
+              <div style={{
-              <Form.Item
+                // background:'pink',
-                name="title"
+                position: 'relative',
-                rules={[{ required: true, message: '请输入商标名称!' }]}
+              }}>
-              >
+                <Form.Item
-                <Input style={{
+                  name="title"
-                  width: 600,
+                  rules={[{ required: true, message: '请输入商标名称' }]}
-                  height: 46,
-                  background: '#FFF',
-                  color: 'black'
-                }}
-                  placeholder="商标名称"
                 >
-                </Input>
+                  <Input style={{
+                    width: 600,
+                    height: 46,
+                    background: '#FFF',
+                    color: 'black'
+                  }}
+                    placeholder="商标名称"
+                  >
+                  </Input>
 
-              </Form.Item>
+                </Form.Item>
+                <div style={{
+                  position: 'absolute',
+                  top: 70,
+                  // textWrap: 'nowrap',
+                  width: 800,
+                  lineHeight: '20px',
+                }}>
+                  <div style={{
+                    display: 'flex'
+                  }}>
+                    若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'>授权声明书模板</span>，填写完盖章签字后
+                    <div>
+                      <Upload
+                        name="file"
+                        maxCount={1}
+                        action={uploadFileUrl()}
+                        beforeUpload={(file) => {
+                          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}
+                      >
+                        <span className='pointerBlue'>上传附件</span>
+                      </Upload>
+                    </div>
+                    <div>
+                      ({fileList.length}/1)
+                    </div>
+                    <div>
+                      {fileList.length > 0 ? (
+                        <div style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}>
+                          <div
+                            style={{
+                              // background: 'pink',
+                              width: 100,
+                              // 超出部分隐藏用...代替
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                              color: 'var(--color-blue)',
+                              cursor: 'pointer',
+                              // 加下划线
+                              textDecoration: 'underline',
+                            }}
+                            title={fileList[0].name}
+                            onClick={() => {
+                              window.open(showImage(fileList[0].uid, false))
+                            }}>
+                            {fileList[0].name}
+                          </div>
+                          <div
+                            style={{
+                              marginLeft: '2px',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => {
+                              setFileList([])
+                            }}><DeleteOutlined /></div>
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                      {/* 嘻嘻 */}
+                      {/* <img src={showImage('e98b50ad-7167-49ac-902d-ac3c713f815a')} alt="" /> */}
+                    </div>
 
+                  </div>
+                  <div style={{
+                    // marginTop: '-20px',
+                  }}>
+                    2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'>文档</span>
+                  </div>
+
+                </div>
+
+              </div>
 
 
             </div>
             <div className='editFormItem' style={{
-              marginTop: '20px',
+              marginTop: '100px',
             }}>
               <div className='editFormItemTitle'>
                 商标说明<span className='redTitle'>*</span>：
@@ -121,7 +322,7 @@ export default function EditOne(props: any) {
                   color: 'black',
                   resize: 'none'
                 }}
-                  placeholder="商标说明"
+                  placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
                 >
                 </TextArea>
 
@@ -131,21 +332,152 @@ export default function EditOne(props: any) {
 
             </div>
 
-
+            <div className='editFormItem' style={{
-
+              marginTop: '120px',
-
+            }}>
-            {/* <Form.Item>
+              <div className='editFormItemTitle'>
-              <div className='trademark-btn'>
+                商标类型<span className='redTitle'>*</span>：
-                <Button type="primary" htmlType="submit" style={{
-                  width: 273,
-                  height: 52
-                }}
-                >
-                  提交订单
-                </Button>
               </div>
-            </Form.Item> */}
+              <div style={{
+                marginLeft: '2px',
+              }}>
+                <Radio.Group onChange={generateTypeChange} value={generateType}>
+                  <Radio value="1">自动生成</Radio>
+                  <Radio value="2">手动上传</Radio>
+                </Radio.Group>
+              </div>
+            </div>
+            <div style={{
+              display: 'flex',
+            }}>
+              <div style={{
+                marginLeft: '90px',
+                // background:'pink',
+                width: 200,
+                position: 'relative',
+              }}>
+                <Form.Item
+                  name="imgUrl"
+                  rules={[{ required: true, message: generateType == '1' ? '请点击生成按钮生成商标图样' : '请上传商标图样' }]}
+                >
+                  <TextArea style={{
+                    width: 200,
+                    height: 100,
+                    background: '#FFF',
+                    color: 'black',
+                    resize: 'none'
+                  }}
+                    value={generateType == '1' ? generateImgId : imgList[0]?.uid}
+                    placeholder="商标说明"
+                  >
+                  </TextArea>
+
+                </Form.Item>
+                <div style={{
+                  display: generateType == '1' && generateImgId == '' ? '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',
+                }}>
+                  暂无图片
+                </div>
+                <div style={{
+                  display: generateType == '1' && generateImgId != '' ? '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',
+                }}>
+                  <div style={{
+                    width: '100%',
+                    height: '100%',
+                    // background:'pink',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'flex-start',
+                  }}>
+                    <Image src={generateImgId} height={100} style={{ maxWidth: 200, height: '100%' }}  ></Image>
+                  </div>
+                </div>
+                <div style={{
+                  display: generateType == '2' ? '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',
+                }}>
+                  <Upload
+                    name="file"
+                    maxCount={1}
+                    action={uploadFileUrl()}
+                    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 isPNG || isJPG;
+                    }}
+                    // fileList={[]}
+                    onChange={upImgHandleChange}
+                    showUploadList={false}
+                    headers={{ 'Auth': `Bearer ${token}` }}
+                    disabled={imgList.length > 0}
+                  >
+                    <div style={{
+                      width: 200,
+                      height: 100,
+                      background: 'white',
+                      color: 'black',
+
+                      lineHeight: '100px',
+                      textAlign: 'center',
+                      fontSize: '20px',
+                      border: '1px dashed #d6d6d6',
+                    }}>
+                      上传图片
+                    </div>
+                  </Upload>
+                </div>
+
+              </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')
+                }}
+                style={{
+                  marginTop: '70px',
+                  marginLeft: '10px',
+                  width: 150,
+                  display: generateType == '1' ? 'unset' : 'none',
+                }}>立即生成</Button>
+            </div>
           </Form>
+
         </div>
 
 
@@ -159,31 +491,7 @@ export default function EditOne(props: any) {
             initialValues={{ softWare: '' }}
             style={{ marginTop: 20 }}
           >
-            <div className='editFormItem '>
-              <div className='editFormItemTitle'>
-                商标名称<span className='redTitle' >*</span>：
-              </div>
 
-
-              <Form.Item
-                name="titleB"
-                rules={[{ required: true, message: '请输入商标名称!' }]}
-              >
-                <Input style={{
-                  width: 600,
-                  height: 46,
-                  background: '#FFF',
-                  color: 'black'
-                }}
-                  placeholder="商标名称"
-                >
-                </Input>
-
-              </Form.Item>
-
-
-
-            </div>
             <div className='editFormItem' style={{
               marginTop: '20px',
             }}>