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 } from 'antd';
import { httpUrl } from '../fetch';
import axios from 'axios';
import { tempConfig } from '../tempInfo'
import '../indexZone1.scss'


function ZoneVIP(props){
  const { deptId } = props.match.params;
  const [ vipLists , setVIPLists ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const { id } = props;
  const temp = props.pathName

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

  function getLists(){
    const url = `${httpUrl}/zone/open/${id}/member/overviewList`;
    axios.get(url).then(response=>{
      if(response){
        setVIPLists(response.data.rows);
        setIsSpin(false);
      }
    }).catch(error=>{setIsSpin(false);})
  }

  return(
    <div className={`boxmain ${temp}_VIP_box`}>
      <p className="in_title">{ tempConfig[temp].member }</p>
      <p className="vip_sub_title">{ tempConfig[temp].vipDesc }</p>
      <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;