forgeplus-react/src/forge/Information/Pages/zoneVIP.jsx

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, Icon } from 'antd';
import { tempConfig, tempEnum } from '../tempInfo'
import MemberApply from '../Component/memberApply';
import { getVIPLists, getAuditStatus, applyJoin } from '../api';
import nodata from '../img/nodata.png';

import '../indexZone1.scss';

const memberStatusEnum = {
  applying: '0',
  isMember: '1',
  notMember: '2'
}

function ZoneVIP(props){
  const { deptId } = props.match.params;
  const [ vipLists , setVIPLists ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ applyVisible , setApplyVisible ] = useState(false);
  const [ memberStatus , setMemberStatus] = useState(memberStatusEnum.notMember);
  const { id, showNotification, checkIfLogin, showLoginDialog, temp } = props;

  useEffect(()=>{
    if(id){
      setIsSpin(true);
      getLists();
      getMemberStatus();
    }
  },[id])

  function getLists(){
    getVIPLists(id).then(response=>{
      if(response){
        setVIPLists(response.data.rows);
        setIsSpin(false);
      }
    }).catch(error=>{setIsSpin(false);})
  }

  function getMemberStatus() {
    getAuditStatus(id).then(res => {
      console.log(res)
      if (res && res.data && res.data.code === 200) {
        setMemberStatus(res.data.data)
      } else {
        setMemberStatus(memberStatusEnum.notMember)
      }
    }).catch(() => { setMemberStatus(memberStatusEnum.notMember) })
  }

  function onOk(e) {
    applyJoin(id, e).then(res => {
      if (res && res.data) {
        showNotification(res.data.msg)
        setApplyVisible(!applyVisible)
        if (res.data.code === 200) {
          setMemberStatus(memberStatusEnum.applying)
        }
      }
    })
  }

  function apply() {
    if(checkIfLogin()===false){
      showLoginDialog()
      return false;
    }
    setApplyVisible(!applyVisible)
  }

  return(
    <div className={`boxmain ${temp}_VIP_box`}>
      <p className="in_title">{ tempConfig[temp].member }</p>
      <p className="vip_sub_title">{ tempConfig[temp].vipDesc }</p>
      { memberStatus === memberStatusEnum.notMember && <Button className="zone_apply_button" onClick={ apply }>申请加入</Button> }
      { memberStatus === memberStatusEnum.applying &&  <div className="mt20 tips" ><Icon type="check-circle" theme="filled" />您的申请已提交，请耐心等待管理员审核!</div> }
      <MemberApply  visible={applyVisible}  onOk={ onOk } onCancel={() => setApplyVisible(!applyVisible)} current_user={props.current_user}/>

      <Spin spinning={isSpin}>
        <div style={{minHeight:400}}>
        {
          vipLists && vipLists.length> 0 &&
          <div className="vip_list">
            {
              vipLists.map((i,k)=>{
                return(
                  <div className="vip_list_card">
                    <div className="card_title">
                      <img src={Crown} alt="" width="37px" style={{marginBottom:5,marginRight:5}}/>
                      <div>
                        <div>
                          {i.typeName}
                        </div>
                        { temp === tempEnum.zone1 && <div className="linear_gradient">{i.typeName}</div> }
                      </div>
                    </div>
                    <p className="card_desc">{i.typeIntroduction}</p>
                    {
                      i.zoneMemberList && i.zoneMemberList.length > 0 ?
                      <ul className="card_ul">
                        {
                          i.zoneMemberList.map((j,key)=>{
                            return(
                           
                              <li className="card_u_li">
                                <div className="card_u_wrap">
                                  <Link to={`/${j.login}`} ><img src={j.imageUrl} alt="" /></Link>
                                  <div className="card_u_info">
                                    <div className="card_u_up"><span className="card_name task-hide">{j.name}</span>{j.memberLevel && <span className="card_tag">{j.memberLevel}</span> }</div>
                                    <p className="card_u_down task-hide-2">{j.introduction}</p>
                                  </div>
                                </div>
                              </li>
                            )
                          })
                        }
                      </ul>
                      :
                      (
                        temp === tempEnum.zone1 ? <Nodata _html="暂无数据" img={ nodata }/> :  <Nodata _html="暂无数据" />
                      )
                    }
                  </div>
                )
              })
            }
          </div>
        }
        {
          vipLists && vipLists.length === 0 &&
          <div style={{marginTop:30,backgroundColor:"#fff",padding:"20px"}}>
            <Nodata _html={"暂无数据"}/>
          </div>
        }
        </div>
      </Spin>
    </div>
  )
}
export default ZoneVIP;