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

import '../indexZone1.scss';

const memberStatusEnum = {
  notMember: 0,
  isMember: 1,
  applying: 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 } = props;
  const temp = props.pathName

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

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

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

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

  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="apply_button" onClick={() => setApplyVisible(!applyVisible)}>申请加入</Button> }
      { memberStatus === memberStatusEnum.applying && <Button className="apply_button" disabled>申请中</Button> }
      <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 === '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>
                      :
                      <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;