写不动了

展示端/src/pages/A5order/index.tsx

@@ -86,9 +86,10 @@ function A5order() {
     // }, 500)
   }, [])
 
-  const [fileUrl, setFileUrl] = useState(
-    'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined'
-  )
+  const [fileUrl, setFileUrl] = useState({
+    src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    name: ''
+  })
 
   return (
     <div className={styles.A5order}>
@@ -256,16 +257,16 @@ function A5order() {
                   </div>
                 )}
 
-                {fileUrl ? (
+                {fileUrl.src ? (
                   <div className='A5file'>
-                    <img src={fileUrl} alt='' />
+                    <img src={fileUrl.src} alt='' />
                     {time ? null : (
                       <div className='A5file2'>
-                        <EyeOutlined onClick={() => ImageViewer.show({ image: fileUrl })} />
+                        <EyeOutlined onClick={() => ImageViewer.show({ image: fileUrl.src })} />
 
                         <MyPopconfirm
                           txtK='删除'
-                          onConfirm={() => setFileUrl('')}
+                          onConfirm={() => setFileUrl({ src: '', name: '' })}
                           Dom={<CloseOutlined className='clearCover' />}
                         />
                       </div>

展示端/src/pages/A6my/index.module.scss

@@ -38,6 +38,22 @@
         padding: 0 24px 40px;
         height: calc(100% - 33px);
         overflow-y: auto;
+
+        .A6row1_1 {
+          position: absolute;
+          top: -10px;
+          right: -10px;
+          width: 80px;
+          height: 30px;
+          border-radius: 15px;
+          border: 1px solid #f45151;
+          color: #f45151;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        // 预约申请
         .A6row {
           height: 500px;
 
@@ -59,19 +75,6 @@
               width: 60px;
             }
 
-            .A6row1_1 {
-              position: absolute;
-              top: -10px;
-              right: -10px;
-              width: 80px;
-              height: 30px;
-              border-radius: 15px;
-              border: 1px solid #f45151;
-              color: #f45151;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-            }
             & > p {
               width: 90%;
 
@@ -113,15 +116,137 @@
               }
             }
           }
-          .A6row3 {
-            margin: 15px 0;
-            border-top: 2px dashed #bebebe;
+        }
+
+        .A6row3 {
+          margin: 15px 0;
+          border-top: 2px dashed #bebebe;
+          position: relative;
+          height: 40px;
+          & > div {
+            position: absolute;
+            bottom: -8px;
+            right: 0px;
+            width: 103px;
+            height: 33px;
+            background: var(--themeColor3);
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-size: 16px;
+          }
+        }
+
+        // 认证申请
+        .A6_2row {
+          background: #fff;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+          border-radius: 10px;
+          margin-bottom: 26px;
+          padding-bottom: 10px;
+          .A6_2Top {
+            position: relative;
+            height: 100px;
+            background-image: url('../../assets/img/my/bac.png');
+            background-size: 100% 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding-left: 27px;
+            color: #fff;
+            font-size: 16px;
+            & > p {
+              margin-bottom: 8px;
+              font-weight: 700;
+            }
+            & > img {
+              position: absolute;
+              top: 10px;
+              right: 10px;
+              width: 60px;
+            }
+          }
+
+          .A6row1_1 {
+            top: 20px;
+            right: 10px;
+            border-color: #fff;
+            color: #fff;
+          }
+
+          .A6_2main {
+            padding: 20px 26px;
+            font-size: 16px;
+            .A6_2tit {
+              font-weight: 700;
+              color: var(--themeColor);
+            }
+            span {
+              font-weight: 700;
+            }
+            & > p {
+              margin-top: 5px;
+              word-wrap: break-word;
+            }
+            & > div {
+              margin-top: 5px;
+              display: flex;
+              span {
+                width: 80px;
+              }
+              p {
+                width: calc(100% - 80px);
+                word-wrap: break-word;
+                white-space: pre-wrap;
+                text-align: justify;
+              }
+            }
+          }
+
+          .A6_2file {
+            margin-bottom: 17px;
+            padding: 0 26px;
+            font-size: 16px;
+            .A6_2file1 {
+              padding: 17px 0;
+              border-bottom: 2px dashed #bebebe;
+              border-top: 2px dashed #bebebe;
+              .A6_2file1_1 {
+                height: 30px;
+                color: var(--themeColor);
+                font-weight: 700;
+              }
+              .A6_2fileRow {
+                // height: 40px;
+                display: flex;
+                // align-items: center;
+                justify-content: space-between;
+                margin-bottom: 10px;
+                .A6_2filell {
+                  width: calc(100% - 70px);
+                }
+                .A6_2filerr {
+                  width: 60px;
+                  height: 36px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  border-radius: 4px;
+                  background-color: var(--themeColor2);
+                  color: #fff;
+                }
+              }
+            }
+          }
+          .A6_2btn {
             position: relative;
             height: 40px;
             & > div {
               position: absolute;
-              bottom: -8px;
-              right: 0px;
+              right: 20px;
+              bottom: 10px;
               width: 103px;
               height: 33px;
               background: var(--themeColor3);

展示端/src/pages/A6my/index.tsx

@@ -49,11 +49,67 @@ const list1 = [
   }
 ]
 
+const list2 = [
+  {
+    id: 1,
+    title: '横琴粤澳深度合作区民生事务局',
+    name: '撒大苏打水水',
+    done: 1,
+    phone: '18702025050',
+    danwei:
+      '为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为为哇饿啊为',
+    file: [
+      {
+        id: 1.1,
+        name: 'xxxxxxxxxxxxxx啊实打实大撒大苏打撒旦苏打xxxx.pdf',
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      },
+      {
+        id: 1.2,
+        name: '666.jpg',
+        src: ''
+      }
+    ]
+  },
+  {
+    id: 2,
+    title: '澳门街坊会联合总会广东办事处',
+    name: '撒大苏',
+    done: 2,
+    phone: '18702025050',
+    danwei: '为哇饿啊为为',
+    file: [
+      {
+        id: 2.1,
+        name: 'xxxxxxxxxxxxxx啊实打实大苏打xxxx.pdf',
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      }
+    ]
+  },
+  {
+    id: 3,
+    title: '澳门街坊会联合总会广东办事处',
+    name: '撒大苏',
+    done: 3,
+    phone: '18702025050',
+    danwei: '为哇饿啊为为',
+    file: [
+      {
+        id: 3.1,
+        name: 'xxxxxxxxxxxxxx啊实打实大苏打xxxx.pdf',
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      }
+    ]
+  }
+]
+
 function A6my() {
-  const [topAc, setTopAc] = useState('预约申请')
+  const [topAc, setTopAc] = useState(
+    window.location.hash.includes('?m=1') ? '认证申请' : '预约申请'
+  )
 
   // 点击撤回
-  const recallFu = useCallback(() => {}, [])
+  const recallFu = useCallback((id: number) => {}, [])
 
   return (
     <div className={styles.A6my}>
@@ -71,6 +127,7 @@ function A6my() {
           ))}
         </div>
 
+        {/* 预约申请 */}
         <div className='A6list' hidden={topAc !== '预约申请'}>
           {list1.length ? (
             <>
@@ -135,7 +192,11 @@ function A6my() {
                   </div>
 
                   <div className='A6row3'>
-                    <MyPopconfirm txtK='撤回' onConfirm={recallFu} Dom={<div>撤回申请</div>} />
+                    <MyPopconfirm
+                      txtK='撤回'
+                      onConfirm={() => recallFu(item.id)}
+                      Dom={<div>撤回申请</div>}
+                    />
                   </div>
                 </div>
               ))}
@@ -144,6 +205,68 @@ function A6my() {
             <div className='A6No'>暂无预约申请</div>
           )}
         </div>
+
+        {/* 认证申请 */}
+        <div className='A6list' hidden={topAc !== '认证申请'}>
+          {list2.length ? (
+            <>
+              {list2.map(item => (
+                <div className='A6_2row' key={item.id}>
+                  <div className='A6_2Top'>
+                    <p>认证单位</p>
+                    <div>{item.title}</div>
+
+                    {item.done === 1 ? (
+                      <div className='A6row1_1'>待审核</div>
+                    ) : (
+                      <img src={item.done === 2 ? succImg : errImg} alt='' />
+                    )}
+                  </div>
+
+                  <div className='A6_2main'>
+                    <div className='A6_2tit'>负责人信息：</div>
+                    <p>
+                      <span>负责人姓名：</span>
+                      {item.name}
+                    </p>
+                    <p>
+                      <span>联系方式：</span>
+                      {item.phone}
+                    </p>
+                    <div>
+                      <span>单位名称：</span>
+                      <p>{item.danwei}</p>
+                    </div>
+                  </div>
+
+                  <div className='A6_2file'>
+                    <div className='A6_2file1'>
+                      <div className='A6_2file1_1'>授权或同意文件：</div>
+                      {item.file.map(item2 => (
+                        <div key={item2.id} className='A6_2fileRow'>
+                          <div className='A6_2filell'>{item2.name}</div>
+                          <a href={item2.src} className='A6_2filerr' download={item2.name}>
+                            下载
+                          </a>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className='A6_2btn'>
+                    <MyPopconfirm
+                      txtK='撤回'
+                      onConfirm={() => recallFu(item.id)}
+                      Dom={<div>撤回申请</div>}
+                    />
+                  </div>
+                </div>
+              ))}
+            </>
+          ) : (
+            <div className='A6No'>暂无认证申请</div>
+          )}
+        </div>
       </div>
     </div>
   )