项目首页轮播图+组织首页优化

src/forge/Component/Component.scss

@@ -57,7 +57,7 @@ li.ant-menu-item{
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
-      line-height: 20px;
+      line-height: 1.5;
     }
     .bottomInfos{
       color:#67738e;

src/forge/Main/Index.js

@@ -13,12 +13,9 @@ import img_array from '../Images/array.png';
 import banner from '../Images/banner_list.png';
 import CheckProfile from '../Component/ProfileModal/Profile';
 import Slider from 'react-slick';
-import img1 from './img/img1.jpg';
-import img2 from './img/img2.jpg';
-import img3 from './img/img3.jpg';
-import img4 from './img/img4.jpg';
 import left from './img/left.png';
 import right from './img/right.png';
+import { getImageUrl } from '../../managements/common/utils';
 
 const Search = Input.Search;
 
@@ -34,18 +31,14 @@ class Index extends Component {
       total: 0,
       isSpin: true,
       category_id: undefined,
-
       typeList: undefined,
       categoryList: undefined,
       recommendList:undefined,
-
       recommendOriList:undefined,
-
       languageList:undefined,
       languageId:undefined,
-
-      CategoryList:undefined
-
+      CategoryList:undefined,
+      bannerList: undefined
     }
 
   }
@@ -53,18 +46,26 @@ class Index extends Component {
   componentDidMount = () => {
     const { page,search, sort,category_id , languageId } = this.state;
     this.getListData(page,search, sort,category_id , languageId);
-
     this.getType();
-
     this.getCategory();
-
     // this.getRecommand();
-
     this.getLanguage();
-
+    this.getBannerList();
     // this.getRecommandOri();
   }
 
+  // 获取banner图列表
+  getBannerList = ()=>{
+    const url = '/topics.json?topic_type=banner&limit=5';
+    axios.get(url).then(result=>{
+      if(result){
+        this.setState({
+          bannerList:result.data.topics
+        })
+      }
+    }).catch(error=>{})
+  }
+
   // 获取语言列表
   getLanguage=()=>{
     const url = '/project_languages.json';
@@ -290,12 +291,11 @@ class Index extends Component {
     )
   }
 
-  render() {
-    const { current_user } = this.props;
 
-    const { projectsList , recommendList , languageList , languageId , 
-      isSpin, total, search, limit, page, typeList, categoryList , 
-      recommendOriList , CategoryList , category_id } = this.state;
+  render() {
+    const { current_user, mygetHelmetapi} = this.props;
+
+    const { projectsList ,isSpin, total, search, limit, page, typeList, categoryList ,bannerList } = this.state;
 
     let settings={
       dots:true,
@@ -314,70 +314,59 @@ class Index extends Component {
 
     return (
       <div>
+        {bannerList ? bannerList.length === 1 ? bannerList[0].url ? <a href={bannerList[0].url} target={'_blank'}><img alt={bannerList[0].title} src={bannerList[0].image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${bannerList[0].image}` : banner} width='100%' height='100%' className='imgBox'/></a> :
+        <img alt={bannerList[0].title} src={bannerList[0].image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${bannerList[0].image}` : banner} width='100%' height='100%' className='imgBox'/> :
         <Slider {...settings} className="projectBannerBox">
-          <img src={img1} alt='' width="100%"/>
-          <img src={img2} alt=''/>
-          <img src={img3} alt=''/>
-          <img src={img4} alt=''/>
-        </Slider>
-        {/* <p className="t_project_banner">
-          <img src={banner} width="100%" alt=""/>
-        </p> */}
-        {/* {
-          recommendOriList && recommendOriList.length>0?
-            <Slider {...settings} className="recommandOri">
-              {
-                recommendOriList.map((i,k)=>{
-                  return(
-                    <li><Link to={''}><img src={getImageUrl(`/${i.avatar_url}`)} alt={i.name} title={i.name} width="80px"/></Link></li>
-                  )
-                })
-              }
-            </Slider>
-          :""
-        } */}
-        {/* {
-          recommendList && recommendList.length>0 &&
-          <Slider {...setting} className={recommendList.length>5 ? "recommandProjects":"recommandProjects mb20"}>
-            {
-              recommendList.map((item,key)=>{
-                return(
-                  <div className="items" onClick={()=>this.getoDetail(item.author && item.author.login,item.identifier)}>
-                    <div className="mainInfo">
-                      <img src={getImageUrl(`/${item.author && item.author.image_url}`)} width="50px" height="50px"alt=""/>
-                      <p className="school">{item.name}</p>
-                      <p className="name">{item.author && item.author.name}</p>
-                    </div>
-                    <div className="baseInfo">
-                      <span className="look"><i className="iconfont icon-dianjiliang font-12"></i>{item.visits}</span>
-                      <span className="type">{item.category && item.category.name}</span>
-                    </div>
-                  </div>
-                )
-              })
-            }
-          </Slider>
-        } */}
+          {bannerList.map((item) => {
+            return item.url ? (
+              <a href={item.url} target={'_blank'}>
+                <img alt={item.title} src={item.image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${item.image}` : banner} width='100%' height='100%' className='imgBox'/>
+              </a>
+            ) : <img src={item.image ? `${ mygetHelmetapi && mygetHelmetapi.current_main_site_url }${item.image}` : banner} alt="" width="100%" height='100%' className='imgBox'/>
+            ;
+          })}
+        </Slider>: <img src={banner} width="100%" alt=""/>}
+        {bannerList && bannerList.length === 0 && <img src={banner} width="100%" alt=""/>}
         <div className="ProjectListIndex">
-
-         <Affix className="affix-list-left" offsetTop={90}>
-          <div className="affix-list-content">
-            <ul className="list-l-Menu">
-              <li className="MenuTitle" onClick={() => {this.getType();this.changeType(undefined, this.state.typeList);}}>
-                <span><i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
-                语言</span></li>
-              <div className="list-affix">{typeList}</div>
-            </ul>
-            <ul className="list-l-Menu">
-              <li className="MenuTitle" onClick={() => {this.getCategory();this.changeCategory(undefined, this.state.categoryList);}}>
-                <span><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>项目类别</span>
-              </li>
-              <div className="list-affix">{categoryList}</div>
-            </ul>
-          </div>
+          <Affix className="affix-list-left" offsetTop={90}>
+            <div className="affix-list-content">
+              <ul className="list-l-Menu">
+                <li
+                  className="MenuTitle"
+                  onClick={() => {
+                    this.getType();
+                    this.changeType(undefined, this.state.typeList);
+                  }}
+                >
+                  <span>
+                    <i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
+                    语言
+                  </span>
+                </li>
+                <div className="list-affix">{typeList}</div>
+              </ul>
+              <ul className="list-l-Menu">
+                <li
+                  className="MenuTitle"
+                  onClick={() => {
+                    this.getCategory();
+                    this.changeCategory(undefined, this.state.categoryList);
+                  }}
+                >
+                  <span>
+                    <i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>
+                    项目类别
+                  </span>
+                </li>
+                <div className="list-affix">{categoryList}</div>
+              </ul>
+            </div>
           </Affix>
 
-          <div className="list-right boxShandow radius-2" style={{padding:0}}>
+          <div
+            className="list-right boxShandow radius-2"
+            style={{ padding: 0 }}
+          >
             <Spin spinning={isSpin}>
               <div className="list-r-operation">
                 <div>
@@ -392,35 +381,47 @@ class Index extends Component {
                   />
                 </div>
                 <div>
-                  {
-                    current_user && current_user.login &&
+                  {current_user && current_user.login && (
                     <Popover
-                      overlayClassName="newPopUl" 
-                      content={this.newItem()} 
-                      trigger={["click"]} 
-                      placement='bottom' 
+                      overlayClassName="newPopUl"
+                      content={this.newItem()}
+                      trigger={["click"]}
+                      placement="bottom"
                       className="mr50"
                     >
                       <a className="ant-dropdown-link">
-                        <span className="color-blue font-16"><img src={img_new} alt="" width="13px" /> 新建</span>
+                        <span className="color-blue font-16">
+                          <img src={img_new} alt="" width="13px" /> 新建
+                        </span>
                       </a>
                     </Popover>
-                  }
+                  )}
 
-                  <Popover content={this.menu()} trigger={['click']} placement='bottom'>
+                  <Popover
+                    content={this.menu()}
+                    trigger={["click"]}
+                    placement="bottom"
+                  >
                     <a className="ant-dropdown-link">
-                      <span className="color-blue font-16">排序 <img src={img_array} alt="" width="10px" /></span>
+                      <span className="color-blue font-16">
+                        排序 <img src={img_array} alt="" width="10px" />
+                      </span>
                     </a>
                   </Popover>
                 </div>
               </div>
-              <ListItem {...this.props} {...this.state} projects={projectsList} getListData={this.getListData}></ListItem>
-              {this.pagination(total,limit,page)}
+              <ListItem
+                {...this.props}
+                {...this.state}
+                projects={projectsList}
+                getListData={this.getListData}
+              ></ListItem>
+              {this.pagination(total, limit, page)}
             </Spin>
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 export default Index;

src/forge/Main/Index.scss

@@ -525,6 +525,9 @@
 }
 
 .projectBannerBox{
+  .imgBox{
+    max-height: 250px;
+  }
   .slick-arrow{
     width: 70px;
     height: 70px;
@@ -535,12 +538,12 @@
   }
   .slick-dots{
     width: 1200px;
-    text-align: left;
     left: 50%;
     margin-left: -600px;
     bottom: 7%;
     position: absolute;
     display: flex!important;
+    justify-content: center;
     z-index: 2;
     li{
       background-color: rgba(225,225,225,0.5);

src/forge/Team/Index.scss

@@ -40,7 +40,17 @@
   margin:0px auto;
   padding-top:18px;
   .newsAndTrends{
-    .contentNews{padding-bottom: 35px;}
+    .contentNews{
+      padding-bottom: 35px;
+      line-height: 1.5;
+      color:#26314d;
+    }
+    .newTil{
+      font-weight:700;
+      color:#1e2941;
+      display: inline-block;
+      margin-bottom: 15px !important;
+    }
     .contentNews, .titleHead{
       display: flex;
       align-items: center;
@@ -476,7 +486,7 @@
     flex-wrap: wrap;
     padding-bottom: 50px;
     .project{
-      width: 370px;
+      width: 48%;
       height: 160px;
       margin-top: 25px;
       padding: 16px 30px 12px 16px;
@@ -510,6 +520,9 @@
       text-align: right;
     }
   }
+  .organizationDetailContent{
+    padding: 0 16px;
+  }
 }
 .navBox{
   display: inline-block;

src/forge/Team/List.jsx

@@ -134,7 +134,10 @@ function List(props){
         </div>}
         <div className='contentNews'>
           {organizeDetail.news_banner_id && <div className='newImg'><img src={`${mygetHelmetapi && mygetHelmetapi.current_main_site_url}/api/attachments/${organizeDetail.news_banner_id}`} alt=''/></div>}
-          {organizeDetail.news_content && <div style={{flexGrow: 1}} className='pr10'>{organizeDetail.news_content}</div>}
+          {organizeDetail.news_content && <div style={{flexGrow: 1}} className='pr10 font-15'>
+            {organizeDetail.news_url ? <a className='font-16 newTil' href={organizeDetail.news_url}>{organizeDetail.news_title}</a> : <p className='font-16 newTil'>{organizeDetail.news_title}</p>}
+            <div>{organizeDetail.news_content}</div>
+          </div>}
         </div>
       </div>}
       {/* 概览or仓库 */}
@@ -205,7 +208,7 @@ function List(props){
           </div>}
           {organizeDetail && organizeDetail.memo && <div className='organizationIntroduceBox'>
             <div className='headCont font-16 flexBox mb20'>组织介绍</div>
-            <RenderHtml className="break_word_comments imageLayerParent" value={organizeDetail && organizeDetail.memo} url={props.history.location}/>
+            <RenderHtml className="organizationDetailContent" value={organizeDetail && organizeDetail.memo} url={props.history.location}/>
           </div>}
           {organizeDetail && proList && !organizeDetail.memo && proList.length === 0 && !organizeDetail.is_admin && <NoData _html="暂无数据"/>}
         </div>}

src/forge/Team/Setting/TeamSettingHomePage.jsx

@@ -47,18 +47,33 @@ export default Form.create()(
     function updateDetail(){
       validateFields((error,values)=>{
         if(!error){
-          const {news_content} = values;
-          const params = {
-            news_content,
-            news_banner_id: imageId,
-            memo: description
-          }
-          const url = `/organizations/${organizeDetail.id}/update_other.json`;
-          axios.post(url,params).then(result=>{
-            if(result && result.data){
-              showNotification("组织信息更新成功！");
+          const {news_url, news_title, news_content} = values;
+          console.log('news_title', news_title, news_content);
+          if((!news_title && news_content) || (!news_content && news_title)){
+            console.log('cuo');
+            const cont = !news_title ? 'news_title' : 'news_content';
+            console.log(cont);
+            form.setFields({[cont]: {value:form.getFieldValue(cont),errors:[new Error('新闻动态标题和内容必须同时输入')]}});
+          }else{
+            const params = {
+              news_url,
+              news_title,
+              news_content,
+              news_banner_id: imageId,
+              memo: description
             }
-          }).catch(error=>{})
+            console.log('成功', params);
+            const url = `/organizations/${organizeDetail.id}/update_other.json`;
+            axios.post(url,params).then(result=>{
+              if(result && result.data){
+                showNotification("组织信息更新成功！");
+                // form.resetFields();
+                setFieldsValue({
+                  ...params
+                })
+              }
+            }).catch(error=>{})
+          }
         }
       })
     }
@@ -84,14 +99,32 @@ export default Form.create()(
                 <UploadImg getImageId={getImageId} imageId={imageId}/>
               )}
               <div style={{marginTop: '-30px', position: 'relative', zIndex: '1'}} className='mb20 ml30'><a onClick={()=>{deleteImg()}}>删除</a></div>
+              {helper(
+                "新闻动态原文链接",
+                "news_url",
+                [],
+                <Input
+                  placeholder="请输入新闻动态原文链接"
+                  maxLength={50}
+                />
+              )}
+              {helper(
+                "新闻动态标题",
+                "news_title",
+                [],
+                <Input
+                  placeholder="请输入新闻动态"
+                  maxLength={45}
+                />
+              )}
               <div className="pr">
                 <span className="toprightNum">{descNum}/200</span>
                 {helper(
-                  "新闻动态",
+                  "新闻动态内容",
                   "news_content",
                   [],
                   <TextArea
-                    placeholder="请输入新闻动态"
+                    placeholder="请输入新闻内容"
                     maxLength={200}
                     onChange={(e)=>{setDescNum(e.target.value ? e.target.value.length :0)}}
                     autoSize