forked from Gitlink/forgeplus-react
Merge remote-tracking branch 'upstream/cs_news' into cs_news
This commit is contained in:
黄心宇
commit
9fe1f67141
|
|
@ -1,6 +1,5 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import { Menu } from 'antd';
|
||||
import banner from '../img/mainbanner.png'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { tempConfig } from '../tempInfo';
|
||||
import TopEdition from './TopEdition'
|
||||
|
|
@ -18,6 +17,7 @@ function PublicBanner(props){
|
|||
const info = /[A-Za-z0-9]{0,}\/news/g;
|
||||
const infodetail = /[A-Za-z0-9]{0,}\/newdetail/g;
|
||||
const project = /[A-Za-z0-9]{0,}\/projects/g;
|
||||
const source = /[A-Za-z0-9]{0,}\/source/g;
|
||||
const vip = /[A-Za-z0-9]{0,}\/VIP/g;
|
||||
if(pathname === `/zone/${deptId}`){
|
||||
setKey("1");
|
||||
|
|
@ -25,6 +25,9 @@ function PublicBanner(props){
|
|||
else if(project.test(pathname)){
|
||||
setKey("2");
|
||||
}
|
||||
else if(source.test(pathname)){
|
||||
setKey("3");
|
||||
}
|
||||
else if(info.test(pathname) || infodetail.test(pathname)){
|
||||
setKey("4");
|
||||
}
|
||||
|
|
@ -48,7 +51,7 @@ function PublicBanner(props){
|
|||
<Menu mode={"horizontal"} selectedKeys={[key]}>
|
||||
<Menu.Item key={"1"}><Link to={`/zone/${deptId}`}><img src={require(`../img/${temp}Menu1.png`)} alt="" width="29px"/>首页</Link></Menu.Item>
|
||||
<Menu.Item key={"2"}><Link to={`/zone/${deptId}/projects`}><img src={require(`../img/${temp}Menu2.png`)} alt="" width="34px"/>开源项目</Link></Menu.Item>
|
||||
{/* <Menu.Item key={"3"}><img src={Menu3} alt="" width="33px"/>资源发布</Menu.Item> */}
|
||||
<Menu.Item key={"3"}><Link to={`/zone/${deptId}/source`}><img src={require(`../img/${temp}Menu3.png`)} alt="" width="33px"/>资源发布</Link></Menu.Item>
|
||||
<Menu.Item key={"4"}><Link to={`/zone/${deptId}/news`}><img src={require(`../img/${temp}Menu4.png`)} alt="" width="32px"/>{ tempConfig[temp].mainTitle }</Link></Menu.Item>
|
||||
{/* <Menu.Item key={"5"}><img src={Menu5} alt="" width="27px"/>Sig小组</Menu.Item> */}
|
||||
<Menu.Item key={"6"}><Link to={`/zone/${deptId}/VIP`}><img src={require(`../img/${temp}Menu6.png`)} alt="" width="36px"/>{ tempConfig[temp].member }</Link></Menu.Item>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Input , Pagination, Spin } from 'antd';
|
||||
import SourceIcon from '../img/sourceIcon.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { getSourceTypeList , getSourceList , getSourceZoneList } from '../api';
|
||||
import Nodata from '../../Nodata';
|
||||
import '../indexZone1.scss';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
function Source(props){
|
||||
const { deptId } = props.match.params;
|
||||
const [ sourceList , setSourceList ] = useState(undefined);
|
||||
const [ zoneList , setZoneList ] = useState(undefined);
|
||||
const [ typeList , setTypeList ] = useState(undefined);
|
||||
const [ chooseZoneId , setChooseZoneId ] = useState(undefined);
|
||||
const [ chooseTypeId , setChooseTypeId ] = useState(undefined);
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ total , setTotal ] = useState(0);
|
||||
const [ search , setSearch ] = useState(undefined);
|
||||
const [ isSpin , setIsSpin ] = useState(true);
|
||||
const limit = 20;
|
||||
const { id , temp } = props;
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
id && getLists();
|
||||
},[id,chooseTypeId,chooseZoneId,page,search])
|
||||
|
||||
useEffect(()=>{
|
||||
id && getZoneList();
|
||||
id && getTypeList();
|
||||
},[id])
|
||||
|
||||
function getZoneList(){
|
||||
getSourceZoneList(id).then(response=>{
|
||||
if(response && response.data){
|
||||
setZoneList(response.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function getTypeList(){
|
||||
getSourceTypeList(id).then(response=>{
|
||||
if(response && response.data){
|
||||
setTypeList(response.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function getLists(){
|
||||
setIsSpin(true);
|
||||
getSourceList({
|
||||
id,pageSize:limit,pageNum:page,typeId:chooseTypeId,domainId:chooseZoneId,name:search
|
||||
}).then(response=>{
|
||||
if(response){
|
||||
setSourceList(response.data.rows);
|
||||
setTotal(response.data.total);
|
||||
setIsSpin(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
|
||||
function onSourceSearch(value){
|
||||
setSearch(value);
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className={`${temp}_source_box`}>
|
||||
<div className="source_h">
|
||||
<p className="in_title">资源发布</p>
|
||||
<div style={{marginTop:"30px",textAlign:"center"}}>
|
||||
<Search
|
||||
placeholder="请输入资源名称(共180个资源)"
|
||||
onSearch={onSourceSearch}
|
||||
style={{width:'645px',borderColor:"#fff",boxShadow:"0px 0px 10px rgba(61, 85, 183, 0.1)"}}
|
||||
size="large"
|
||||
className="source_search_box"
|
||||
enterButton={temp === "zone" ? <span><i className="iconfont icon-sousuo5 font-15"/>搜索</span> :undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sources">
|
||||
<div className="source_left_ul">
|
||||
<ul className="source_l_u">
|
||||
<p>资源领域</p>
|
||||
<div>
|
||||
{ temp === "zone1" && <li onClick={()=>setChooseZoneId(undefined)} className={!chooseZoneId ?"active":""}>全部</li>}
|
||||
{
|
||||
zoneList && zoneList.length>0&&
|
||||
zoneList.map((i,k)=>{
|
||||
return(
|
||||
<li key={k} onClick={()=>{setChooseZoneId(i.id === chooseZoneId ?undefined : i.id)}} className={chooseZoneId && chooseZoneId === i.id ? "active":"" }>{i.name}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
<ul className="source_l_u">
|
||||
<p>资源类别</p>
|
||||
<div>
|
||||
{ temp === "zone1" && <li onClick={()=>setChooseTypeId(undefined)} className={!chooseTypeId ?"active":""}>全部</li>}
|
||||
{
|
||||
typeList && typeList.length>0&&
|
||||
typeList.map((i,k)=>{
|
||||
return(
|
||||
<li key={k} onClick={()=>{setChooseTypeId(i.id === chooseTypeId ?undefined : i.id)}} className={chooseTypeId && chooseTypeId === i.id ? "active":"" }>{i.name}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="s_m_list">
|
||||
{
|
||||
sourceList && sourceList.length > 0 &&
|
||||
<div className="source_lists">
|
||||
{sourceList.map((i,k)=>{
|
||||
return(
|
||||
<div className="source_lists_card" key={k}>
|
||||
<Link to={`/zone/${deptId}/source/${i.id}`} className="task-hide">{i.name}</Link>
|
||||
<p className="task-hide-2 desc">
|
||||
{i.introduction}
|
||||
</p>
|
||||
<p className="load_count">
|
||||
<img src={SourceIcon} alt="" width="18px" className="mr5"/><span style={{color:"#5e6685"}}>{i.downloadCount}</span>
|
||||
</p>
|
||||
{temp === "zone1" && <p className="load_source">
|
||||
<span>{i.domainName}</span>
|
||||
<span>{i.typeName}</span>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{sourceList && sourceList.length === 0 &&
|
||||
<div style={{textAlign:'center'}}>
|
||||
<Nodata _html="暂无数据"/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
total > limit &&
|
||||
<div style={{textAlign:'center',padding:"20px 0px"}}>
|
||||
<Pagination pageSize={limit} total={total} current={page} onChange={(p)=>setPage(p)} showQuickJumper/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Source;
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import SourceFile from '../img/sourceFile.png';
|
||||
import RenderHtml from '../../../components/render-html';
|
||||
import { getSourceDetail } from '../api';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
function SourceDetail(props){
|
||||
const { deptId , sourceid } = props.match.params;
|
||||
const [ detail , setDetail ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(sourceid){
|
||||
getDetails();
|
||||
}
|
||||
},[sourceid])
|
||||
|
||||
function getDetails(){
|
||||
getSourceDetail(sourceid).then(response=>{
|
||||
if(response){
|
||||
setDetail(response.data.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="boxmain"style={{paddingBottom:"40px"}}>
|
||||
<Breadcrumb separator=">" style={{paddingTop:"20px"}}>
|
||||
<Breadcrumb.Item><Link className="primaryColor" to={`/zone/${deptId}/source`}>资源列表</Link></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>详情页</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
{
|
||||
detail &&
|
||||
<div className="source_detail_box">
|
||||
<div className="s_d_title">{detail.name}</div>
|
||||
{
|
||||
detail.fileList && detail.fileList.length > 0 &&
|
||||
<ul className="files_box">
|
||||
{
|
||||
detail.fileList.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<img src={SourceFile} alt="" width="20px" className="mr12"/>
|
||||
<span className="task-hide">{i.fileOriginName}</span>
|
||||
<span>{i.fileSizeInfo}</span>
|
||||
<a href={`/file/open/download/${i.fileId}`} download className="f_b_load primaryColor">下载</a>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
|
||||
{ detail.introduction &&
|
||||
<div style={{padding:"20px 0px"}}>
|
||||
<RenderHtml
|
||||
className="source_detail imageLayerParent"
|
||||
value={detail.introduction}
|
||||
url={props.history.location}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SourceDetail;
|
||||
|
|
@ -98,4 +98,31 @@ export function applyJoin(id,data) {
|
|||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
// 资源模块
|
||||
export function getSourceTypeList(id){
|
||||
return fetch({
|
||||
url:`/zone/open/${id}/resourceType/list`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export function getSourceZoneList(id){
|
||||
return fetch({
|
||||
url:`/zone/open/${id}/resourceDomain/list`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export function getSourceList(params){
|
||||
return fetch({
|
||||
url:`/zone/open/${params.id}/resource/list`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
export function getSourceDetail(id){
|
||||
return fetch({
|
||||
url:`/zone/open/resource/detail/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -15,10 +15,18 @@ import "slick-carousel/slick/slick.css";
|
|||
import "slick-carousel/slick/slick-theme.css";
|
||||
import { tempEnum } from "./tempInfo";
|
||||
|
||||
const SourceDetail = Loadable({
|
||||
loader: () => import("./Pages/sourceDetail"),
|
||||
loading: Loading,
|
||||
});
|
||||
const VIP = Loadable({
|
||||
loader: () => import("./Pages/zoneVIP"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Source = Loadable({
|
||||
loader: () => import("./Pages/source"),
|
||||
loading: Loading,
|
||||
});
|
||||
const HeaderPage = Loadable({
|
||||
loader: () => import("./Pages/headerPage"),
|
||||
loading: Loading,
|
||||
|
|
@ -115,6 +123,18 @@ function Index(props){
|
|||
<NewsDetail {...props} {...p} id={id} temp={ temp }/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/zone/:deptId/source/:sourceid"
|
||||
render={(p) => (
|
||||
<SourceDetail {...props} {...p} id={id} temp={ temp }/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/zone/:deptId/source"
|
||||
render={(p) => (
|
||||
<Source {...props} {...p} id={id} temp={ temp }/>
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/zone/:deptId/VIP"
|
||||
render={(p) => (
|
||||
|
|
|
|||
|
|
@ -1224,4 +1224,114 @@
|
|||
line-height: 32px;
|
||||
margin-bottom: 8px!important;
|
||||
}
|
||||
}
|
||||
.zone_source_box{
|
||||
padding-top: 56px;
|
||||
.source_search_box{
|
||||
.ant-input-lg{
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
.sources{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding:45px 0px;
|
||||
.source_left_ul{
|
||||
width: 610px;
|
||||
background-image:linear-gradient(89.9deg,#f5f7fa 0%,#f5f7fa 70.54%,rgba(255, 255, 255, 0.97) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding:5px 0px;
|
||||
margin-right: 6px;
|
||||
p,li{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 34px;
|
||||
width: 250px;
|
||||
}
|
||||
p{
|
||||
font-weight:700;
|
||||
color:#1f2329;
|
||||
font-size:18px;
|
||||
}
|
||||
li{
|
||||
border-right: 3px solid #fff;
|
||||
font-weight:500;
|
||||
color:#3d485d;
|
||||
cursor: pointer;
|
||||
font-size:16px;
|
||||
&.active{
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background-image:linear-gradient(89.9deg,rgba(70, 106, 255, 0) 0%,rgba(70, 106, 255, 0.09) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_m_list{
|
||||
width: 945px;
|
||||
}
|
||||
.source_lists{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.source_lists_card{
|
||||
margin-left: 29px;
|
||||
width: 286px;
|
||||
min-height: 180px;
|
||||
background-color: rgba(255, 255, 255, 0.986);
|
||||
padding:20px;
|
||||
margin-bottom: 29px;
|
||||
position: relative;
|
||||
background-image: url(./img/sourceCardBack.png);
|
||||
background-size: 100% 100%;
|
||||
border-radius: 2px;
|
||||
a.task-hide{
|
||||
color:#1f2329;
|
||||
font-size:16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.desc{
|
||||
color:#4c5876;
|
||||
height: 54px;
|
||||
line-height: 27px;
|
||||
margin-bottom: 14px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.source_detail_box{
|
||||
background-color: #fff;
|
||||
padding:10px 35px 30px;
|
||||
.s_d_title{
|
||||
padding:25px 0px;
|
||||
border-bottom: 1px dashed rgba(141, 149, 172, 0.27);
|
||||
color:#1f2329;
|
||||
font-size:22px;
|
||||
margin-bottom: 20px!important;
|
||||
}
|
||||
.files_box{
|
||||
padding:11px 30px;
|
||||
background-color:#f6f8fa;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
&>span{
|
||||
color:#3d485d;
|
||||
font-size:15px;
|
||||
min-width: 190px;
|
||||
&.task-hide{
|
||||
min-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.primaryColor{
|
||||
color: var(--primary-color)!important;
|
||||
}
|
||||
|
|
@ -646,4 +646,120 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zone1_source_box{
|
||||
padding-bottom: 30px;
|
||||
.source_h{
|
||||
padding-top: 40px;
|
||||
width: 100%;
|
||||
height:280px;
|
||||
background-image:linear-gradient(180deg,#f4f6fb 0%,#e8ebf1 100%);
|
||||
}
|
||||
.sources{
|
||||
margin-top: -97px;
|
||||
.source_left_ul{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
background-color:#fefefe;
|
||||
border-radius:4px;
|
||||
padding:30px 30px 6px;
|
||||
.source_l_u{
|
||||
display: flex;
|
||||
margin-bottom: 12px!important;
|
||||
align-items: flex-start;
|
||||
&>p{
|
||||
font-weight:400;
|
||||
color:#1f2329;
|
||||
font-size:16px;
|
||||
line-height:22px;
|
||||
height:22px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
&>div{
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
cursor: pointer;
|
||||
margin:0px 18px 12px!important;
|
||||
font-weight:400;
|
||||
color:#3d485d;
|
||||
font-size:16px;
|
||||
line-height:22px;
|
||||
height:22px;
|
||||
&.active{
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_m_list{
|
||||
width: 1200px;
|
||||
margin: 30px auto 0px;
|
||||
background-color: #fff;
|
||||
.source_lists{
|
||||
padding:0px 30px;
|
||||
.source_lists_card{
|
||||
position: relative;
|
||||
padding: 20px 0px 16px;
|
||||
border-bottom: 1px dashed rgba(170, 175, 190,0.43);
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
a.task-hide{
|
||||
display: block;
|
||||
padding-right: 100px;
|
||||
color:#1f2329;
|
||||
font-size:16px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.load_count{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top:17px;
|
||||
}
|
||||
.desc{
|
||||
margin-top: 15px;
|
||||
color:#4c5876;
|
||||
line-height:26px;
|
||||
}
|
||||
.load_source{
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
color:#8d95ac;
|
||||
font-size:14px;
|
||||
line-height:26px;
|
||||
height:26px;
|
||||
margin-top: 10px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: var(--primary-color);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
left: 0px;
|
||||
top:50%;
|
||||
margin-top: -4px;
|
||||
}
|
||||
&>span:last-child{
|
||||
padding-left: 21px;
|
||||
position: relative;
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
height: 12px;
|
||||
top: 1px;
|
||||
content: "";
|
||||
width: 1px;
|
||||
background-color: #8d95ac;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue