Commit 590ad7a4 authored by GuanHua's avatar GuanHua

feat:资讯模块接口对接

parent d57e90fc
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
&>a {
color: #666666;
}
&.arrow { &.arrow {
padding: 0 5px; padding: 0 5px;
} }
......
...@@ -6,7 +6,7 @@ import cx from 'classnames' ...@@ -6,7 +6,7 @@ import cx from 'classnames'
import styles from './index.less' import styles from './index.less'
interface BreadCrumbsPropsType { interface BreadCrumbsPropsType {
pathname?: string
} }
const handlePreeEnter = (e) => { const handlePreeEnter = (e) => {
...@@ -15,13 +15,26 @@ const handlePreeEnter = (e) => { ...@@ -15,13 +15,26 @@ const handlePreeEnter = (e) => {
} }
const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => { const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => {
const { pathname } = props
return ( return (
<div className={styles.information_bread_crumbs}> <div className={styles.information_bread_crumbs}>
<div className={styles.information_bread_crumbs_item}>您的位置:</div> <div className={styles.information_bread_crumbs_item}>您的位置:</div>
<div className={styles.information_bread_crumbs_item}>官网首页</div> <div className={styles.information_bread_crumbs_item}>官网首页</div>
<div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div> <div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div>
<div className={styles.information_bread_crumbs_item}>资讯</div> <div className={styles.information_bread_crumbs_item}>
{
pathname ? <a href="/infomation">资讯</a> : '资讯'
}
</div>
{
pathname && (
<>
<div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div>
<div className={styles.information_bread_crumbs_item}>{pathname}</div>
</>
)
}
<div className={styles.information_bread_crumbs_search}> <div className={styles.information_bread_crumbs_search}>
<Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} /> <Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} />
......
...@@ -94,6 +94,11 @@ ...@@ -94,6 +94,11 @@
&:hover { &:hover {
background: #f2f2f2; background: #f2f2f2;
} }
&>a {
display: block;
color: #333333;
}
} }
} }
} }
......
...@@ -149,7 +149,9 @@ const InformationRight: React.FC = () => { ...@@ -149,7 +149,9 @@ const InformationRight: React.FC = () => {
{ {
hotLabel.map(item => ( hotLabel.map(item => (
<div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}> <div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}>
<span>{item.name}</span> <span>
<Link to={`/infomation/search?labelId=${item.id}&labelName=${btoa(encodeURIComponent(item.name))}`}>{item.name}</Link>
</span>
</div> </div>
)) ))
} }
...@@ -177,9 +179,15 @@ const InformationRight: React.FC = () => { ...@@ -177,9 +179,15 @@ const InformationRight: React.FC = () => {
{ {
recommendNews && recommendNews.map((item: any, index: number) => index > 0 && ( recommendNews && recommendNews.map((item: any, index: number) => index > 0 && (
<div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}> <div key={`information_recommend_list_item_${item.id}`} className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} /> <Link to={`/infomation/detail?id=${item.id}`}>
<ImageBox imgUrl={item.imageUrl} />
</Link>
<div className={styles.information_recommend_list_item_main}> <div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>{item.title}</p> <p className={styles.information_recommend_list_item_main_title}>
<Link to={`/infomation/detail?id=${item.id}`}>
{item.title}
</Link>
</p>
<div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div> <div className={styles.information_recommend_list_item_main_date}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</div>
</div> </div>
</div> </div>
......
...@@ -155,6 +155,10 @@ ...@@ -155,6 +155,10 @@
color: #000000; color: #000000;
margin-top: 10px; margin-top: 10px;
.text_clamp(2); .text_clamp(2);
&>a {
color: #000000;
}
} }
} }
} }
......
import React from 'react' import React, { useEffect, useState } from 'react'
import BreadCrumbs from './components/breadCrumbs' import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight' import InformationRight from './components/informationRight'
import cx from 'classnames' import cx from 'classnames'
...@@ -6,85 +6,117 @@ import { Link } from 'umi' ...@@ -6,85 +6,117 @@ import { Link } from 'umi'
import ImageBox from '@/components/ImageBox' import ImageBox from '@/components/ImageBox'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons' import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg2 from '@/assets/imgs/information_2.png' import informationImg2 from '@/assets/imgs/information_2.png'
import { PublicApi } from '@/services/api'
import { GetManageContentInformationFindByIdResponse } from '@/services/PassApi'
import { numFormat } from '@/utils/numberFomat'
import moment from 'moment'
import styles from './detail.less' import styles from './detail.less'
interface InformationDetailPropsType { interface InformationDetailPropsType {
location: any
} }
const InformationDetail: React.FC<InformationDetailPropsType> = (props) => { const InformationDetail: React.FC<InformationDetailPropsType> = (props) => {
const { query: { id } } = props.location
const [newsDetail, setNewsDetail] = useState<GetManageContentInformationFindByIdResponse>()
useEffect(() => {
if (id) {
fetchNewsDetail()
}
}, [props.location])
const fetchNewsDetail = () => {
let param = {
id
}
PublicApi.getManageContentInformationFindById(param).then(res => {
if (res.code === 1000) {
setNewsDetail(res.data)
}
})
}
return ( return (
<div className={styles.information_detail}> <div className={styles.information_detail}>
<div className={styles.information_detail_container}> <div className={styles.information_detail_container}>
<BreadCrumbs /> <BreadCrumbs {...props} pathname="文章详情" />
<div className={styles.information_detail_wrap}> <div className={styles.information_detail_wrap}>
<div className={styles.information_detail_panel}> {
<div className={styles.information_detail_title}>河北省重点行业清洁生产评审结果公布,11家皮革企业获通过</div> newsDetail ? (
<div className={styles.information_detail_view}> <div className={styles.information_detail_panel}>
<div className={styles.information_detail_view_item}> <div className={styles.information_detail_title}>{newsDetail.title}</div>
<ClockCircleOutlined /> <div className={styles.information_detail_view}>
<span className={styles.information_detail_view_item_text}>2019-09-25</span> <div className={styles.information_detail_view_item}>
</div> <ClockCircleOutlined />
<div className={styles.information_detail_view_item}> <span className={styles.information_detail_view_item_text}>{(moment(newsDetail.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
<EyeOutlined /> </div>
<span className={styles.information_detail_view_item_text}>11,245</span> <div className={styles.information_detail_view_item}>
</div> <EyeOutlined />
</div> <span className={styles.information_detail_view_item_text}>{numFormat(newsDetail.readCount)}</span>
<div className={styles.information_detail_split}></div> </div>
<div className={styles.information_detail_abstract}>
<div className={cx(styles.information_detail_abstract_character, styles.left)}></div>
<div className={styles.information_detail_abstract_main}>
近日,省环保厅公布了河北省2017年重点行业清洁生产审核评估验收结果。509家企业通过了清洁生产评估和验收。本次评估审核中鞋革行业共有11家企业,均通过了清洁生产审核工作。
</div>
<div className={cx(styles.information_detail_abstract_character, styles.right)}></div>
</div>
<div className={styles.information_detail_content}>
资讯详情
<div dangerouslySetInnerHTML={{ __html: '' }}></div>
</div>
<div className={styles.information_common_tag_list}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
<div className={styles.information_detail_split}></div>
<div className={styles.information_detail_pagination}>
<div className={cx(styles.information_detail_pagination_item, styles.left)}>
<div className={cx(styles.information_detail_pagination_item_line, styles.left)}>
<div className={cx(styles.arrow_icon, styles.left)}></div>
<span>上一篇</span>
</div> </div>
<Link to="/infomation/detail?id=2">【制革技术干货】中华皮革技术群聊天记录整理(三十三)</Link> <div className={styles.information_detail_split}></div>
</div> <div className={styles.information_detail_abstract}>
<div className={styles.information_detail_pagination_split}></div> <div className={cx(styles.information_detail_abstract_character, styles.left)}></div>
<div className={cx(styles.information_detail_pagination_item, styles.right)}> <div className={styles.information_detail_abstract_main}>
<div className={cx(styles.information_detail_pagination_item_line, styles.right)}> {newsDetail.digest}
<span>下一篇</span> </div>
<div className={cx(styles.arrow_icon, styles.right)}></div> <div className={cx(styles.information_detail_abstract_character, styles.right)}></div>
</div>
<div className={styles.information_detail_content}>
<div dangerouslySetInnerHTML={{ __html: newsDetail.content }}></div>
</div>
<div className={styles.information_common_tag_list}>
{
newsDetail.contentLabelList && newsDetail.contentLabelList.map((labelItem: any) => (
<div className={styles.information_common_tag_list_item} key={`information_common_tag_list_item-${labelItem.id}`}>{labelItem.name}</div>
))
}
</div>
<div className={styles.information_detail_split}></div>
<div className={styles.information_detail_pagination}>
<div className={cx(styles.information_detail_pagination_item, styles.left)}>
<div className={cx(styles.information_detail_pagination_item_line, styles.left)}>
<div className={cx(styles.arrow_icon, styles.left)}></div>
<span>上一篇</span>
</div>
{
newsDetail.lastContentLabel ? <Link to={`/infomation/detail?id=${newsDetail.lastContentLabel.id}`}>{newsDetail.lastContentLabel.title}</Link> : <span>没有了</span>
}
</div>
<div className={styles.information_detail_pagination_split}></div>
<div className={cx(styles.information_detail_pagination_item, styles.right)}>
<div className={cx(styles.information_detail_pagination_item_line, styles.right)}>
<span>下一篇</span>
<div className={cx(styles.arrow_icon, styles.right)}></div>
</div>
{
newsDetail.nextContentLabel ? <Link to={`/infomation/detail?id=${newsDetail.nextContentLabel.id}`}>{newsDetail.nextContentLabel.title}</Link> : <span>没有了</span>
}
</div>
</div>
<div className={styles.information_title}>
<span>相关资讯</span>
</div>
<div className={styles.information_about_list}>
{
newsDetail.relatedInformation && newsDetail.relatedInformation.map(item => (
<div className={styles.information_about_list_item} key={`information_about_list_item_${item.id}`}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>
<Link to={`/infomation/detail?id=${item.id}`}>
{item.title}
</Link>
</p>
</div>
))
}
</div> </div>
<Link to="/infomation/detail?id=3">爱马仕的2018年春夏系列来了~</Link>
</div>
</div>
<div className={styles.information_title}>
<span>相关资讯</span>
</div>
<div className={styles.information_about_list}>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div> </div>
</div> ) : null
</div> }
<InformationRight /> <InformationRight />
</div> </div>
</div> </div>
......
...@@ -128,7 +128,6 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -128,7 +128,6 @@ const Information: React.FC<InformationPropsType> = (props) => {
* @param page * @param page
*/ */
const handlePageChange = (page) => { const handlePageChange = (page) => {
console.log(page, 'page')
setCurrent(page) setCurrent(page)
fetchNewsByColumn(showColumnId, page) fetchNewsByColumn(showColumnId, page)
} }
...@@ -136,7 +135,7 @@ const Information: React.FC<InformationPropsType> = (props) => { ...@@ -136,7 +135,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
return ( return (
<div className={styles.information}> <div className={styles.information}>
<div className={styles.information_container}> <div className={styles.information_container}>
<BreadCrumbs /> <BreadCrumbs {...props} />
<div className={styles.information_focus}> <div className={styles.information_focus}>
<div className={styles.information_focus_left}> <div className={styles.information_focus_left}>
<Carousel <Carousel
......
import React, { Fragment } from 'react' import React, { useEffect, useState } from 'react'
import cx from 'classnames' import cx from 'classnames'
import { Pagination } from 'antd' import { Pagination } from 'antd'
import { Link } from 'umi' import { Link } from 'umi'
...@@ -7,10 +7,16 @@ import informationImg2 from '@/assets/imgs/information_2.png' ...@@ -7,10 +7,16 @@ import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox' import ImageBox from '@/components/ImageBox'
import BreadCrumbs from './components/breadCrumbs' import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight' import InformationRight from './components/informationRight'
import moment from 'moment'
import {
GetManageContentInformationPageResponseDetail,
} from '@/services/PassApi'
import { numFormat } from '@/utils/numberFomat'
import { PublicApi } from '@/services/api'
import styles from './index.less' import styles from './index.less'
interface InformationPropsType { interface InformationPropsType {
location: any
} }
const MockList = [ const MockList = [
...@@ -107,45 +113,108 @@ const MockList = [ ...@@ -107,45 +113,108 @@ const MockList = [
] ]
const InformationSearch: React.FC<InformationPropsType> = (props) => { const InformationSearch: React.FC<InformationPropsType> = (props) => {
const { query: { keyword, labelName, labelId } } = props.location
const [newsList, setNewsList] = useState<GetManageContentInformationPageResponseDetail[]>([]) // 资讯列表
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(10)
const [totalCount, setTotalCount] = useState<number>(0)
const [searchValue, setSearchValue] = useState<string>('')
useEffect(() => {
if (keyword || keyword === "") {
setSearchValue(keyword)
}
if (labelName && labelId) {
setSearchValue(decodeURIComponent(atob(labelName)))
}
setCurrent(1)
fetchSearchNewsList(1)
}, [props.location.query])
const fetchSearchNewsList = (currentPage: number) => {
let param: any = {
// columnId,
current: currentPage ? currentPage : current,
pageSize,
status: 2,
}
if (keyword) {
param.title = keyword
}
if (labelName && labelId) {
param.columnId = labelId
}
//@ts-ignore
PublicApi.getManageContentInformationPage(param).then(res => {
if (res.code === 1000) {
setNewsList(res.data.data)
setTotalCount(res.data.totalCount)
}
}).catch(() => { })
}
/**
* 切换分页
* @param page
*/
const handlePageChange = (page) => {
setCurrent(page)
fetchSearchNewsList(page)
}
return ( return (
<div className={styles.information}> <div className={styles.information}>
<div className={styles.information_container}> <div className={styles.information_container}>
<BreadCrumbs /> <BreadCrumbs {...props} pathname={searchValue} />
<div className={cx(styles.information_wrap, styles.no_mar_top)}> <div className={cx(styles.information_wrap, styles.no_mar_top)}>
<div className={styles.information_left}> <div className={styles.information_left}>
<div className={styles.information_title}> <div className={styles.information_title}>
<span>资讯搜索:</span> <span>资讯搜索:</span>
{
searchValue && <label>{searchValue}</label>
}
</div> </div>
<div className={styles.information_latest_release_list}> <div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}> {
<ImageBox width={285} height={190} imgUrl={informationImg2} /> newsList && newsList.map(item => (
<div className={styles.information_latest_release_list_item_main}> <div className={styles.information_latest_release_list_item} key={`information_latest_release_list_item_${item.id}`}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案,如何实现全网整合</Link></p> <ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_common_view}> <div className={styles.information_latest_release_list_item_main}>
<div className={styles.information_common_view_item}> <p><Link to={`/infomation/detail?id=${item.id}`}>{item.title}</Link></p>
<ClockCircleOutlined /> <div className={styles.information_common_view}>
<span className={styles.information_common_view_item_text}>2019-09-25</span> <div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>{(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>{numFormat(item.readCount)}</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
{item.digest}
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
{
item.contentLabelList && item.contentLabelList.map((labelItem: any) => (
<div className={styles.information_common_tag_list_item} key={`information_common_tag_list_item-${labelItem.id}`}>{labelItem.name}</div>
))
}
</div>
</div> </div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外,更应该为客户制定一套合理的电商系统平台整合解决方案…
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div> </div>
</div> ))
</div> }
</div>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div> </div>
{
newsList && newsList.length > 0 && (
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
)
}
</div> </div>
<InformationRight /> <InformationRight />
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment