feat: 展示非图片文件

src/pages/member/components/MemberDocQualification/index.less

@@ -21,12 +21,28 @@
       margin-right: @margin-sm;
       width: 175px;
       height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       > img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
+
+      > a {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+      }
+
+      &-file {
+        border: 1px solid @border-color-split;
+      }
     }
 
     &-right {

src/pages/member/components/MemberDocQualification/index.tsx

@@ -2,11 +2,13 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-21 17:25:39
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-09 10:36:24
+ * @LastEditTime: 2021-07-13 10:10:42
  * @Description: 会员公司资质
  */
 import React from 'react';
 import { Descriptions } from 'antd';
+import { FileOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import styles from './index.less';
 
@@ -36,6 +38,8 @@ interface IProps extends MellowCardProps {
   dataSource: ValueType[],
 }
 
+const imgReg = /\.(png|jpg|gif|jpeg|webp)$/;
+
 const MemberDocQualification: React.FC<IProps> = (props: IProps) => {
   const { dataSource = [], ...rest } = props;
 
@@ -48,8 +52,18 @@ const MemberDocQualification: React.FC<IProps> = (props: IProps) => {
         {dataSource.map((item, index) => (
           <li key={index} className={styles['qualification-item']}>
             <div className={styles['qualification-item-wrap']}>
-              <div className={styles['qualification-item-left']}>
-                <img src={item.url} />
+              <div
+                className={classNames(styles['qualification-item-left'], {
+                  [styles['qualification-item-left-file']]: !imgReg.test(item.url),
+                })}
+              >
+                {imgReg.test(item.url) ? (
+                  <img src={item.url} />
+                ) : (
+                  <a href={item.url} target="__black">
+                    <FileOutlined style={{ fontSize: 36 }} />
+                  </a>
+                )}
               </div>
               <div className={styles['qualification-item-right']}>
                 <Descriptions column={1}>