会员申请优化

src/forge/Information/Component/memberApply.jsx

@@ -39,6 +39,7 @@ function MemberApply(props){
       title="加入专区会员"
       width="650px"
       closable={false}
+      destroyOnClose
       footer={
         <div className="flexCenterJustify">
           <Button className="mr20" type="default" onClick={onCancel}>取消</Button>
@@ -48,32 +49,30 @@ function MemberApply(props){
       centered
     >
       <div>
-        <p className="mb15 edu-txt-center" style={{maxWidth:"600px",margin:"0px auto"}}>
-        <Icon type="info-circle" theme="filled" className="mr10" style={{ color: '#466aff' }} />若您未填写会员头像，会员名称，我们会将您的GitLink用户头像及昵称自动填入，请知悉
-        </p>
         <Form {...layout }>
           <Form.Item label="会员名称" name="name">
             {getFieldDecorator("name", {
-              initialValue: current_user.nickname
+              initialValue: current_user.nickname,
+              rules:[{ required:true,message:"请输入申请原因" }]
             })(
-              <Input placeholder="请输入会员名称" width="220px"/>
+              <Input placeholder="请输入会员名称" maxLength={ 10 } width="220px"/>
             )}
           </Form.Item>
-          <Form.Item label="会员头像" name="imageUrl">
-            <UploadImage getImageId={ getImageId } url={ getImageUrl(`/${current_user.image_url}`) }/>
+          <Form.Item label="会员头像" name="imageUrl" required>
+            <UploadImage maxSize={ 5 } getImageId={ getImageId } url={ getImageUrl(`/${current_user.image_url}`) }/>
           </Form.Item>
           <Form.Item label="会员简介" name="introduction">
             {getFieldDecorator("introduction",{
               rules:[{ required:true,message:"请输入会员简介" }]
             })(
-              <TextArea autoSize={{ minRows: 2, maxRows: 6 }} placeholder="请输入会员简介" width="220px"/>
+              <TextArea autoSize={{ minRows: 2, maxRows: 6 }} maxLength={ 130 } placeholder="请输入会员简介" width="220px"/>
             )}
           </Form.Item>
           <Form.Item label="申请原因" name="remark">
             {getFieldDecorator("remark",{
               rules:[{ required:true,message:"请输入申请原因" }]
             })(
-              <TextArea autoSize={{ minRows: 2, maxRows: 6 }} placeholder="请输入申请原因" width="220px"/>
+              <TextArea autoSize={{ minRows: 2, maxRows: 6 }}  maxLength={ 130 } placeholder="请输入申请原因" width="220px"/>
             )}
           </Form.Item>
         </Form>

src/forge/Information/Pages/zoneVIP.jsx

@@ -2,7 +2,7 @@ import React , { useState , useEffect } from 'react';
 import Crown from '../img/crown.png';
 import Nodata from '../../Nodata';
 import { Link } from 'react-router-dom';
-import { Spin, Button } from 'antd';
+import { Spin, Button, Alert } from 'antd';
 import { tempConfig } from '../tempInfo'
 import MemberApply from '../Component/memberApply';
 import { getVIPLists, getAuditStatus, applyJoin } from '../api';
@@ -52,15 +52,16 @@ function ZoneVIP(props){
   }
 
   function onOk(e) {
-    applyJoin(id, e).then(res => {
-      if (res) {
-        showNotification(res.msg)
-        setApplyVisible(!applyVisible)
-        if (res.code === 200) {
-          setMemberStatus(memberStatusEnum.applying)
-        }
-      }
-    })
+    console.log(e)
+    // applyJoin(id, e).then(res => {
+    //   if (res) {
+    //     showNotification(res.msg)
+    //     setApplyVisible(!applyVisible)
+    //     if (res.code === 200) {
+    //       setMemberStatus(memberStatusEnum.applying)
+    //     }
+    //   }
+    // })
   }
 
   function apply() {
@@ -76,7 +77,7 @@ function ZoneVIP(props){
       <p className="in_title">{ tempConfig[temp].member }</p>
       <p className="vip_sub_title">{ tempConfig[temp].vipDesc }</p>
       { memberStatus === memberStatusEnum.notMember && <Button className="apply_button" onClick={ apply }>申请加入</Button> }
-      { memberStatus === memberStatusEnum.applying && <Button className="apply_button" disabled>申请中</Button> }
+      { memberStatus === memberStatusEnum.applying &&  <Alert message="您的申请已提交，请耐心等待管理员审核！" className="mt20" style={{ width: '100%' }} type="success"/> }
       <MemberApply  visible={applyVisible}  onOk={ onOk } onCancel={() => setApplyVisible(!applyVisible)} current_user={props.current_user}/>
 
       <Spin spinning={isSpin}>

src/forge/Team/Component/UploadImage.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Upload , Icon , message } from "antd";
 import { getUploadActionUrl } from 'educoder';
 
-function UploadImage({ getImage , url, getImageId }){
+function UploadImage({ getImage , url, getImageId, maxSize = 2 }){
   const [ imageUrl , setImageUrl ] = useState(undefined);
   useEffect(()=>{
     setImageUrl(url);
@@ -22,9 +22,9 @@ function UploadImage({ getImage , url, getImageId }){
     if (!isJpgOrPng) {
       message.error('上传的图片只能是JPG或者PNG格式!');
     }
-    const isLt2M = file.size / 1024 / 1024 < 2;
+    const isLt2M = file.size / 1024 / 1024 < maxSize;
     if (!isLt2M) {
-      message.error('上传的图片不能超过2MB!');
+      message.error(`上传的图片不能超过${maxSize}MB!`);
     }
     return isJpgOrPng && isLt2M;
   }
@@ -46,8 +46,8 @@ function UploadImage({ getImage , url, getImageId }){
       action={getUploadActionUrl()}
       beforeUpload={beforeUpload}
       onChange={handleChange}
-      accept="image/*"
-    >
+      accept=".png,.jpg,.jpeg"
+      >
       {
         imageUrl ? 
         <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />