Merge branch 'dev-srm' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev-srm

src/components/UploadFiles/UploadFiles.tsx

@@ -23,6 +23,8 @@ interface PickUploadProps extends Pick<UploadProps, PickProps> {
   fileContainerClassName?: string
   customizeItemRender?: ((files: UploadFile[], handleRemove: (fileItem: UploadFile) => void) => React.ReactNode) | null,
   onRemove?: ((fileItem: UploadFile) => void) | null,
+  /** 是否显示文件 */
+  showFiles?: boolean
 }
 
 const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
@@ -40,7 +42,8 @@ const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
     disable,
     mode,
     buttonText,
-    fileContainerClassName
+    fileContainerClassName,
+    showFiles
   } = props;
   const hasFileListProps = "fileList" in props;
   const auth = getAuth();
@@ -142,10 +145,17 @@ const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
     )
   }
 
+  const renderFileContainer = () => {
+    if (!showFiles) {
+      return null
+    }
+    return !!customizeItemRender ? customizeItemRender(files, handleRemove) : renderFileItem()
+  }
+
   return (
     <div style={containerStyle} >
       {
-        !!customizeItemRender ? customizeItemRender(files, handleRemove) : renderFileItem()
+        renderFileContainer()
       }
       {
         !disable && (
@@ -182,7 +192,8 @@ UploadFiles.defaultProps = {
   disable: false,
   mode: 'default',
   buttonText: '上传文件',
-  fileContainerClassName: ''
+  fileContainerClassName: '',
+  showFiles: true
   // fileList: []
 }
 

src/pages/home/components/UserCenter/index.tsx

-import React, { useReducer } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import styles from './index.less';
 import moment from 'moment';
-import { Badge, Upload, message, Spin } from 'antd';
+import { Badge, message, Spin, Tooltip } from 'antd';
 import level1  from '@/assets/imgs/level1.png';
 import level2  from '@/assets/imgs/level2.png';
 import level3  from '@/assets/imgs/level3.png';
@@ -10,12 +10,12 @@ import { Link } from 'umi';
 import { getAuth } from '@/utils/auth';
 import StatusTag from '@/components/StatusTag';
 import home_user from '@/assets/imgs/home_user.png';
-import { UPLOAD_TYPE } from '@/constants'
 import { PublicApi } from '@/services/api';
 import {observer, inject} from 'mobx-react';
-// import Icon from '@ant-design/icons';
-import Icon from '@ant-design/icons';
+import Icon, { QuestionCircleOutlined } from '@ant-design/icons';
 import { ReactComponent as DefaultAvatar } from '@/assets/imgs/default_avatar.svg';
+import UploadFiles from '@/components/UploadFiles/UploadFiles'
+import { UploadChangeParam } from 'antd/lib/upload/interface'
 
 interface Iprops {}
 
@@ -23,7 +23,7 @@ const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"];
 const LEVEL_IMAGE = [level1, level1, level2, level3, level4];
 const EDIT_USER_URL = '/memberCenter/editMySelf';
 const USER_CENTER_URL = '/memberCenter/memberAbility/manage/maintain'
-const STATUS_COLOR: ("default" | "processing" | "error" | "success")[] = ["default", "processing", "error", "success"]
+const STATUS_COLOR: ("default" | "processing" | "error" | "success")[] = ["default", "processing", "error", "success", "error"]
 
 function reducer(state, action) {
   switch (action.type) {
@@ -39,49 +39,36 @@ function reducer(state, action) {
 const UserCenter: React.FC<Iprops> = (props) => {
   const today = moment();
   const userAuth = getAuth();
-  // const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
-  // const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
   const currentRole = userAuth?.roles?.filter((item) => item.memberRoleId === userAuth.memberRoleId)
   const [state, dispatch] = useReducer(reducer, { loading: false, logo: userAuth?.logo})
   if(!userAuth) {
     return null
   }
+  const beforeUpload = useCallback((file) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+    if (!isJpgOrPng) {
+      message.error('仅支持上传JPEG/JPG/PNG文件!');
+    }
+    return isJpgOrPng;
+  }, [])
 
-  const uploadProps = {
-    name: 'file',
-    action: '/api/file/file/upload',
-    headers: {},
-    data: {
-      fileType: UPLOAD_TYPE
-    },
-    disabled: state.loading,
-    showUploadList: false,
-    onChange(info) {
-      if (info.file.status === 'uploading') {
-        dispatch({type: 'uploading'})
-        return;
-      }
-      if (info.file.status === 'done') {
-        const { code, data } = info.file.response
-        if(code === 1000) {
-          PublicApi.postMemberMainpageLogoAdd({logo: data})
-          .then((res) => {
-            if(res.code === 1000) {
-              dispatch({type: 'done',  payload: {url: data}})
-              props.UserStore.setUserAvatar(data)
-            }
-          })
-        }
-      }
-    },
-    beforeUpload(file){
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
-      if (!isJpgOrPng) {
-        message.error('仅支持上传JPEG/JPG/PNG文件!');
+  const onFileChange = async (info: UploadChangeParam) => {
+    if (info.file.status === 'uploading') {
+      dispatch({type: 'uploading'})
+      return;
+    }
+    if(info.file.status === 'done') {
+      const logo =  info.file.response.data
+      const { code } = await PublicApi.postMemberMainpageLogoAdd({logo: logo });
+      if (code === 1000) {
+        dispatch({type: 'done',  payload: {url: logo}})
+        props.UserStore.setUserAvatar(logo)
       }
-      return isJpgOrPng;
     }
   }
+
+  const isVerifyFail = useMemo(() => [2, 4].includes(userAuth.validateStatus), [userAuth]);
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -98,18 +85,18 @@ const UserCenter: React.FC<Iprops> = (props) => {
         </div>
       </div>
       <div className={styles.content}>
-        {/* http://10.0.0.25:4000/project/15/interface/api/38926 上传用户头像 */}
         <Spin spinning={state.loading}>
           <div className={styles.userLogo}>
             <div className={styles.randomLogo}>
-              <Upload {...uploadProps}>
+
+              <UploadFiles customizeItemRender={null} beforeUpload={beforeUpload} onChange={onFileChange} showFiles={false}>
                 {
                   state.logo
                   ? <img src={state.logo || ''} className={styles.logo}/>
                   : <Icon component={() => <DefaultAvatar className={styles.logo} />} />
                 }
                 <span className={styles.upload}>修改</span>
-              </Upload>
+              </UploadFiles>
             </div>
           </div>
         </Spin>
@@ -130,12 +117,21 @@ const UserCenter: React.FC<Iprops> = (props) => {
                   }
                 </div>
                 <div style={{marginTop: '13px'}}>
-                  <Badge status={STATUS_COLOR[userAuth.validateStatus]} text={userAuth.validateStatusDesc} />
+                  <Tooltip placement="top" title={userAuth.validateMsg || ''}>
+                    <Badge status={STATUS_COLOR[userAuth.validateStatus]} text={userAuth.validateStatusDesc} />
+                    {
+                      isVerifyFail && (
+                        <span style={{marginLeft: '4px'}}>
+                          <QuestionCircleOutlined style={{color: '#ccc', fontSize: '12px'}} />
+                        </span>
+                      )
+                    }
+                  </Tooltip>
                 </div>
               </div>
             </div>
             {
-              userAuth.validateStatus === 2 &&
+              isVerifyFail &&
               <Link to={EDIT_USER_URL} className={styles.link}>修改会员信息</Link>
             }
           </div>
@@ -147,7 +143,11 @@ const UserCenter: React.FC<Iprops> = (props) => {
               <div className={styles.score}>
                 平台积分： <strong>{userAuth.score}</strong>
               </div>
-              <Link to={USER_CENTER_URL} className={styles.link}>进入会员中心</Link>
+              {
+                userAuth.urls.includes(USER_CENTER_URL) && (
+                  <Link to={USER_CENTER_URL} className={styles.link}>进入会员中心</Link>
+                )
+              }
             </div>
           </div>
         </div>