feat:资讯模块接口对接

src/pages/lxMall/information/components/breadCrumbs/index.less

@@ -8,6 +8,10 @@
     color: #666666;
     font-size: 14px;
 
+    &>a {
+      color: #666666;
+    }
+
     &.arrow {
       padding: 0 5px;
     }

src/pages/lxMall/information/components/breadCrumbs/index.tsx

@@ -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

@@ -94,6 +94,11 @@
         &:hover {
           background: #f2f2f2;
         }
+
+        &>a {
+          display: block;
+          color: #333333;
+        }
       }
     }
   }

src/pages/lxMall/information/components/informationRight/index.tsx

@@ -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

@@ -155,6 +155,10 @@
         color: #000000;
         margin-top: 10px;
         .text_clamp(2);
+
+        &>a {
+          color: #000000;
+        }
       }
     }
   }

src/pages/lxMall/information/detail.tsx

-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

@@ -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

-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>