会员申请优化
This commit is contained in:
黄心宇
parent
391e846e01
commit
d3f4d68674
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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%' }} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue