Skip to content

J
jinfa-platform
Commit 590ad7a4 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:资讯模块接口对接

parent d57e90fc
Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 100 deletions
src/pages/lxMall/information/components/breadCrumbs/index.less
View file @ 590ad7a4
......@@ -8,6 +8,10 @@
color: #666666;
font-size: 14px;
&>a {
color: #666666;
}
&.arrow {
padding: 0 5px;
}
......
src/pages/lxMall/information/components/breadCrumbs/index.tsx
View file @ 590ad7a4
......@@ -6,7 +6,7 @@ import cx from 'classnames'
import styles from './index.less'
interface BreadCrumbsPropsType {
pathname?: string
}
const handlePreeEnter = (e) => {
......@@ -15,13 +15,26 @@ const handlePreeEnter = (e) => {
}
const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => {
const { pathname } = props
return (
<div className={styles.information_bread_crumbs}>
<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={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}>
<Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} />
......
src/pages/lxMall/information/components/informationRight/index.less
View file @ 590ad7a4
......@@ -94,6 +94,11 @@
&:hover {
background: #f2f2f2;
}
&>a {
display: block;
color: #333333;
}
}
}
}
......
src/pages/lxMall/information/components/informationRight/index.tsx
View file @ 590ad7a4
......@@ -149,7 +149,9 @@ const InformationRight: React.FC = () => {
{
hotLabel.map(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>
))
}
......@@ -177,9 +179,15 @@ const InformationRight: React.FC = () => {
{
recommendNews && recommendNews.map((item: any, index: number) => index > 0 && (
<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}>
<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>
</div>
......
src/pages/lxMall/information/detail.less
View file @ 590ad7a4
......@@ -155,6 +155,10 @@
color: #000000;
margin-top: 10px;
.text_clamp(2);
&>a {
color: #000000;
}
}
}
}
......
src/pages/lxMall/information/detail.tsx
View file @ 590ad7a4
import React from 'react'
import React, { useEffect, useState } from 'react'
import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight'
import cx from 'classnames'
......@@ -6,85 +6,117 @@ import { Link } from 'umi'
import ImageBox from '@/components/ImageBox'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
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'
interface InformationDetailPropsType {
location: any
}
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 (
<div className={styles.information_detail}>
<div className={styles.information_detail_container}>
<BreadCrumbs />
<BreadCrumbs {...props} pathname="文章详情" />
<div className={styles.information_detail_wrap}>
<div className={styles.information_detail_panel}>
<div className={styles.information_detail_title}>河北省重点行业清洁生产评审结果公布，11家皮革企业获通过</div>
<div className={styles.information_detail_view}>
<div className={styles.information_detail_view_item}>
<ClockCircleOutlined />
<span className={styles.information_detail_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_detail_view_item}>
<EyeOutlined />
<span className={styles.information_detail_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_detail_split}></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>
{
newsDetail ? (
<div className={styles.information_detail_panel}>
<div className={styles.information_detail_title}>{newsDetail.title}</div>
<div className={styles.information_detail_view}>
<div className={styles.information_detail_view_item}>
<ClockCircleOutlined />
<span className={styles.information_detail_view_item_text}>{(moment(newsDetail.createTime).format('YYYY-MM-DD HH:mm:ss'))}</span>
</div>
<div className={styles.information_detail_view_item}>
<EyeOutlined />
<span className={styles.information_detail_view_item_text}>{numFormat(newsDetail.readCount)}</span>
</div>
</div>
<Link to="/infomation/detail?id=2">【制革技术干货】中华皮革技术群聊天记录整理（三十三）</Link>
</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 className={styles.information_detail_split}></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}>
{newsDetail.digest}
</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>
<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
}
<InformationRight />
</div>
</div>
......
src/pages/lxMall/information/index.tsx
View file @ 590ad7a4
......@@ -128,7 +128,6 @@ const Information: React.FC<InformationPropsType> = (props) => {
* @param page
*/
const handlePageChange = (page) => {
console.log(page, 'page')
setCurrent(page)
fetchNewsByColumn(showColumnId, page)
}
......@@ -136,7 +135,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
return (
<div className={styles.information}>
<div className={styles.information_container}>
<BreadCrumbs />
<BreadCrumbs {...props} />
<div className={styles.information_focus}>
<div className={styles.information_focus_left}>
<Carousel
......
src/pages/lxMall/information/search.tsx
View file @ 590ad7a4
import React, { Fragment } from 'react'
import React, { useEffect, useState } from 'react'
import cx from 'classnames'
import { Pagination } from 'antd'
import { Link } from 'umi'
......@@ -7,10 +7,16 @@ import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox'
import BreadCrumbs from './components/breadCrumbs'
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'
interface InformationPropsType {
location: any
}
const MockList = [
......@@ -107,45 +113,108 @@ const MockList = [
]
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 (
<div className={styles.information}>
<div className={styles.information_container}>
<BreadCrumbs />
<BreadCrumbs {...props} pathname={searchValue} />
<div className={cx(styles.information_wrap, styles.no_mar_top)}>
<div className={styles.information_left}>
<div className={styles.information_title}>
<span>资讯搜索：</span>
{
searchValue && <label>{searchValue}</label>
}
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
<ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_latest_release_list_item_main}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link></p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
{
newsList && newsList.map(item => (
<div className={styles.information_latest_release_list_item} key={`information_latest_release_list_item_${item.id}`}>
<ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_latest_release_list_item_main}>
<p><Link to={`/infomation/detail?id=${item.id}`}>{item.title}</Link></p>
<div className={styles.information_common_view}>
<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 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 className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
))
}
</div>
{
newsList && newsList.length > 0 && (
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
</div>
)
}
</div>
<InformationRight />
</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