From 771a1f03e20e96fd5a88a70fbb15926e3e7b20ca Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Mon, 29 May 2023 15:51:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E8=81=9A=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Information/Pages/headerPage.jsx    |   2 +-
 src/forge/Information/Pages/main.jsx          | 103 ++++++++++--------
 src/forge/Information/Pages/projectSource.jsx |   2 +-
 src/forge/Information/Pages/zoneVIP.jsx       |  56 +++++++++-
 src/forge/Information/img/color1.png          | Bin 26234 -> 26600 bytes
 src/forge/Information/img/crown.png           | Bin 0 -> 6264 bytes
 src/forge/Information/index.scss              |  98 ++++++++++++++++-
 7 files changed, 211 insertions(+), 50 deletions(-)
 create mode 100644 src/forge/Information/img/crown.png

diff --git a/src/forge/Information/Pages/headerPage.jsx b/src/forge/Information/Pages/headerPage.jsx
index 7cfcb38c8..34d9b1d11 100644
--- a/src/forge/Information/Pages/headerPage.jsx
+++ b/src/forge/Information/Pages/headerPage.jsx
@@ -113,7 +113,7 @@ function HeaderPage(props){
                   <li>
                     {i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" /> }
                     <div>
-                      <a  onClick={()=>window.open(i.projectURL)} className="z_p_title">{i.fullName}</a>
+                      <a  onClick={()=>window.open(i.projectURL)} className="z_p_title">{i.projectProperties && i.projectProperties.fullName}</a>
                        <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
                     </div>
                   </li>
diff --git a/src/forge/Information/Pages/main.jsx b/src/forge/Information/Pages/main.jsx
index 073e1bfe4..dcab30b54 100644
--- a/src/forge/Information/Pages/main.jsx
+++ b/src/forge/Information/Pages/main.jsx
@@ -1,8 +1,8 @@
 import React , { useState , useEffect } from 'react';
 import Banner from '../Component/publicBanner';
-import { Menu } from 'antd';
+import { Menu , Spin , Skeleton } from 'antd';
 import Hot from '../Component/hot';
-import { Box , LongWidth  } from '../../Component/layout';
+import { Box , LongWidth } from '../../Component/layout';
 import { Link } from 'react-router-dom';
 import guideArrow from '../img/guideArrow.png';
 import axios from 'axios';
@@ -16,11 +16,13 @@ function Main(props){
   const [ key , setKey ] = useState("1");
   const [ mainList , setMainList ] = useState(undefined);
   const [ hotList , setHotList ] = useState(undefined);
+  const [ isSpin , setIsSpin ] = useState(true);
   const { deptId } = props.match.params;
 
 
   useEffect(()=>{
     if(deptId) {
+      setIsSpin(true);
       getMainList();
       getHotList();
     }
@@ -31,6 +33,7 @@ function Main(props){
     axios.get(url).then(result=>{
       if(result){
         setMainList(result.data.rows);
+        setIsSpin(false);
       }
     }).catch(error=>{})
   }
@@ -67,57 +70,65 @@ function Main(props){
             }
           </Menu>
         }
+        {
+          !mainList && <div className="boxmain" style={{height:105}}><Skeleton /></div>
+        }
         <div style={{width:'1200px',margin:"0px auto"}}>
           <Box>
             <LongWidth>
-              {
-                mainList && mainList.length>0 &&
-                mainList.map((i,k)=>{
-                  return(
-                    <div className="main_card radius4" id={`main_card_item_${k+1}`}>
-                      <div className="guide">
-                        <span>{i.name}</span>
-                        <Link to={`/information/${deptId}/news/${i.id}`}>更多<img src={guideArrow} alt="" width="14px"/></Link>
-                      </div>
-                      <div>
-                        {
-                          i.cmsDocList && i.cmsDocList.length>0 ? 
-                          i.cmsDocList.map((j,e)=>{
-                            return(
-                              <div className="main_card_item">
-                                {e===0 && 
-                                  (
-                                    i.headImg ?
-                                    <img src={i.headImg} alt=""/>
-                                    :
-                                    <DefaultImg name="GitLink" title="栏目一" />
-                                  )
-                                }
-                                <div style={{flex:1,width:0}}>
-                                  <Link to={`/information/${deptId}/newdetail/${j.id}`} className={`sub_name ${e===0? "":"sub_i"}`}>{j.name}</Link>
-                                  <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
-                                  {j.summary}
-                                  </p>
-                                  <div className="sub_info">
-                                    <span><img src={shijian} alt="" />{j.publishTime}</span>
-                                    <span><img src={liulan} alt="" />{j.visits}</span>
+              <Spin spinning={isSpin}>
+                <div style={{minHeight:"400px"}}>
+                {
+                  mainList && mainList.length>0 &&
+                  mainList.map((i,k)=>{
+                    return(
+                      <div className="main_card radius4" id={`main_card_item_${k+1}`}>
+                        <div className="guide">
+                          <span>{i.name}</span>
+                          <Link to={`/information/${deptId}/news/${i.id}`}>更多<img src={guideArrow} alt="" width="14px"/></Link>
+                        </div>
+                        <div>
+                          {
+                            i.cmsDocList && i.cmsDocList.length>0 ? 
+                            i.cmsDocList.map((j,e)=>{
+                              return(
+                                <div className="main_card_item">
+                                  {e===0 && 
+                                    (
+                                      i.headImg ?
+                                      <img src={i.headImg} alt=""/>
+                                      :
+                                      <DefaultImg name="GitLink" title="栏目一" />
+                                    )
+                                  }
+                                  <div style={{flex:1,width:0}}>
+                                    <Link to={`/information/${deptId}/newdetail/${j.id}`} className={`sub_name ${e===0? "":"sub_i"}`}>{j.name}</Link>
+                                    <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
+                                    {j.summary}
+                                    </p>
+                                    <div className="sub_info">
+                                      <span><img src={shijian} alt="" />{j.publishTime}</span>
+                                      <span><img src={liulan} alt="" />{j.visits}</span>
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            )
-                          })
-                          :
-                          <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
-                            <img src={emptydata} alt="" width="230"/>
-                            <p className="font-15 color-grey-6 mt20">暂无数据~</p>
-                          </div>
-                        }
+                              )
+                            })
+                            :
+                            <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
+                              <img src={emptydata} alt="" width="230"/>
+                              <p className="font-15 color-grey-6 mt20">暂无数据~</p>
+                            </div>
+                          }
+                        </div>
                       </div>
-                    </div>
-                  )
-                })
-              }
+                    )
+                  })
+                }
+                </div>
+              </Spin>
             </LongWidth>
+
             <div className="short_width radius4">
               <Hot title={"热门领域资讯"} list={hotList}/>
             </div>
diff --git a/src/forge/Information/Pages/projectSource.jsx b/src/forge/Information/Pages/projectSource.jsx
index 97bf2a301..8bd1edd63 100644
--- a/src/forge/Information/Pages/projectSource.jsx
+++ b/src/forge/Information/Pages/projectSource.jsx
@@ -112,7 +112,7 @@ function ProjectSource(props){
                             {i.projectProperties && <img src={i.projectProperties.authorImageUrl} alt="" className="author_img"/> }
                             <div style={{flex:"1"}}>
                               <p className="in_b_main">
-                                <a onClick={()=>window.open(i.projectURL)}>{i.fullName}</a>
+                                <a onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.fullName}</a>
                                 {
                                   i.projectProperties && 
                                   <ul>
diff --git a/src/forge/Information/Pages/zoneVIP.jsx b/src/forge/Information/Pages/zoneVIP.jsx
index d5edbedfd..76aafeed3 100644
--- a/src/forge/Information/Pages/zoneVIP.jsx
+++ b/src/forge/Information/Pages/zoneVIP.jsx
@@ -1,13 +1,67 @@
-import React from 'react';
+import React , { useState , useEffect } from 'react';
+import Crown from '../img/crown.png';
+import axios from 'axios';
 
 
 function ZoneVIP(props){
   const { deptId } = props.match.params;
+  const [ vipLists , setVIPLists ] = useState(undefined);
+
+  useEffect(()=>{
+    if(deptId){
+      getLists();
+    }
+  },[deptId])
+
+  function getLists(){
+    const url = `/zone/open/${deptId}/member/overviewList`;
+    axios.get(url).then(response=>{
+      if(response){
+        setVIPLists(response.data.rows);
+      }
+    }).catch(error=>{})
+  }
 
   return(
     <div className="boxmain zone_VIP_box">
       <p className="in_title">专区会员</p>
       <p className="vip_sub_title">社区根据您的贡献与扮演角色将用户划分成为不同的人员团队，并构建会员成长体系。您有兴趣成为会员，尽情发挥创意与智慧，与专区共同成长吗？</p>
+      {
+        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}}/>
+                    <span>{i.typeName}</span>
+                  </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">
+                              <img src={j.imageUrl} alt="" />
+                              <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>
+                            </li>
+                          )
+                        })
+                      }
+                    </ul>
+                  }
+                </div>
+              )
+            })
+          }
+        </div>
+      }
     </div>
   )
 }
diff --git a/src/forge/Information/img/color1.png b/src/forge/Information/img/color1.png
index 41736614b84c10457cf743921fa6bed396bd3163..6826947a7066ed20d57fe21fa879bbc59212ff78 100644
GIT binary patch
delta 379
zcmYL_y-ve06ou*9r!cp3?6e4^SaCbFLJR~DR3eP|aayayi5#PtEPVwYgO!<q7eL}M
zU}I;(E>ZF1<9qzwd(Y4N;Ok@XG};bQv5a*boztu;agtXl$EK_g+zDr<PO=TxDCH|5
z8GOIK0TMZb+vCWO>N#JFvrh4w?qZpBn=Hs-HXVkBT0qHlf=qcY8)_KrxYXX=GXb=-
z=naEy99^M#r8qjlKK5ZcM4`$Hdc8R9e_O?1t#wTaY1<aJN4QceG7f@(_!Bajc-G-H
zk5VVblg-E>{um41WJ=UpR1!I6l2#9z0oXd~;aZB~A1|9e02>9-wnE0(Cp*7W^im0K
j+c+SDF%UN_>8G`Oll|gW?4#q-=A~>ffS*5K4)2Oz5gvRX

delta 13
VcmaEHp7GZi#tF)sCo+bo0RS>61~mWx

diff --git a/src/forge/Information/img/crown.png b/src/forge/Information/img/crown.png
new file mode 100644
index 0000000000000000000000000000000000000000..06f692d80fffcb9f98a9e4968a3014e4ceffdab6
GIT binary patch
literal 6264
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

literal 0
HcmV?d00001

diff --git a/src/forge/Information/index.scss b/src/forge/Information/index.scss
index 4fc305386..5551a0c2e 100644
--- a/src/forge/Information/index.scss
+++ b/src/forge/Information/index.scss
@@ -759,7 +759,103 @@
     font-size:15px;
     line-height:27px;
     text-align:center;
-    margin-top: 16px;
     max-width: 1000px;
+    word-break: break-all;
+    margin:16px auto 0px;
+  }
+  .vip_list{
+    
+    .vip_list_card{
+      background-color:#fefefe;
+      border-radius:4px;
+      box-shadow:0px 0px 15px rgba(35, 54, 185, 0.09);
+      padding:0px 40px 10px;
+      margin:35px 0px 15px;
+      &:nth-child(4n+1) .card_title{
+        background-color: #466aff;
+      }
+      &:nth-child(4n+2) .card_title{
+        background-color: #07a583;
+      }
+      &:nth-child(4n+3) .card_title{
+        background-color: #8257e8;
+      }
+      &:nth-child(4n+4) .card_title{
+        background-color: #cb7e4b;
+      }
+      .card_title{
+        height: 49px;
+        display: flex;
+        align-items: center;
+        width: 450px;
+        justify-content: center;
+        color: #fff;
+        border-radius: 0px 0px 20px 20px;
+        margin:0px auto;
+        font-weight:500;
+        font-size:17px;
+        background-color: #466aff;
+      }
+      .card_desc{
+        color:#1f2329;
+        font-size:15px;
+        line-height:32px;
+        word-break: break-all;
+        margin-top: 32px;
+      }
+      .card_ul{
+        margin-top: 15px;
+        padding-bottom: 10px;
+        .card_u_li{
+          display: flex;
+          padding:25px 0px;
+          border-bottom: 1px dashed rgba(141, 149, 172,0.27);
+          align-items: center;
+          &:last-child{
+            border-bottom: none;
+          }
+          &>img{
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            margin-right: 24px;
+          }
+          .card_u_info{
+            .card_u_down{
+              color:#4c5876;
+              font-size:15px;
+              line-height:26px;
+              word-break: break-all;
+              margin-top: 15px;
+            }
+            .card_u_up{
+              display: flex;
+              align-items: center;
+              .card_name{
+                font-weight:700;
+                color:#1f2329;
+                font-size:16px;
+                display: block;
+                max-width: 700px;
+                height:26px;
+                line-height: 26px;
+              }
+              .card_tag{
+                display: inline-block;
+                height:26px;
+                background-color:rgba(70, 106, 255, 0.13);
+                border-radius:2px;
+                min-width: 76px;
+                text-align: center;
+                line-height: 26px;
+                color:#466aff;
+                font-size:15px;
+                margin-left: 15px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file