feat: 新增移动端资讯分享详情页面

config/router.ts

@@ -37,6 +37,14 @@ const router = [
           }
         ]
       },
+      {
+        // 移动端资讯详情
+        path: '/information/mobile/detail/:id',
+        name: 'infomationMobileDetail',
+        key: 'infomationMobileDetail',
+        hide: true,
+        component: '@/pages/lxMall/information/mobileDetail',
+      },
       memberCenterRoute,
       ...mallRoute,
       {

src/pages/lxMall/information/index.tsx

@@ -44,7 +44,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
    */
   const fetchCarouselNews = async () => {
     try {
-      let data: any = await fetchNewByLabel(2)
+      const data: any = await fetchNewByLabel(2)
       data && setCarouselNews(data)
     } catch (error) {
       console.log(error)
@@ -56,7 +56,7 @@ const Information: React.FC<InformationPropsType> = (props) => {
    */
   const fetchPhotoNews = async () => {
     try {
-      let data: any = await fetchNewByLabel(3)
+      const data: any = await fetchNewByLabel(3)
       data && setPhotoNews(data)
     } catch (error) {
       console.log(error)
@@ -66,13 +66,13 @@ const Information: React.FC<InformationPropsType> = (props) => {
   /**
    * 获取所有栏目
    */
-  const fetchAllColumn = (state: boolean = false) => {
+  const fetchAllColumn = (state = false) => {
     PublicApi.getManageContentColumnAll().then(res => {
       if (res.code === 1000) {
         setAllColumn(res.data)
         // 是否获取第一个栏目的新闻
         if (state) {
-          let firstColumn = res.data[0]
+          const firstColumn = res.data[0]
           if (firstColumn) {
             setShowColumnId(firstColumn.id)
             fetchNewsByColumn(firstColumn.id)
@@ -101,24 +101,24 @@ const Information: React.FC<InformationPropsType> = (props) => {
    * 根据栏目获取新闻列表
    */
   const fetchNewsByColumn = (columnId: number, currentPage?: number) => {
-    let param = {
+    const param: any = {
       columnId,
       current: currentPage ? currentPage : current,
       pageSize,
       status: 2,
     }
-    //@ts-ignore
+
     PublicApi.getManageContentInformationPage(param).then(res => {
       if (res.code === 1000) {
         setNewsList(res.data.data)
         setTotalCount(res.data.totalCount)
       }
-    }).catch(() => { })
+    })
   }
 
   /**
    * 切换栏目新闻
-   * @param columnId 
+   * @param columnId
    */
   const handleChangeColumn = (columnId: number) => {
     setShowColumnId(columnId)

src/pages/lxMall/information/mobileDetail.less

+.detailContainer {
+  padding: 24px 12px;
+}
+
+.title {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+
+.informationDigest {
+  background-color: #FAFBFC;
+  padding: 8px 12px;
+  color: #666666;
+  font-size: 12px;
+  border-left: 2px solid #D32F2F;
+  margin-bottom: 12px;
+}
+
+.informationInfo {
+  font-size: 12px;
+  color: #999999;
+  display: flex;
+  padding: 12px 0;
+
+  &>.date {
+    flex: 1;
+  }
+
+}
+
+.informationContent {
+
+  img, video {
+    width: 100%;
+  }
+}

src/pages/lxMall/information/mobileDetail.tsx

+import React, { useEffect, useState } from 'react'
+import { Helmet } from 'umi'
+import moment from 'moment'
+import { PublicApi } from '@/services/api'
+import { RouteChildrenProps } from 'react-router'
+import { GetManageContentInformationFindByIdResponse } from '@/services/PassApi'
+import { numFormat } from '@/utils/numberFomat'
+import styles from './mobileDetail.less'
+
+const MobileDetail: React.FC<RouteChildrenProps<{ id: string }>> = (props) => {
+  const { id } = props.match.params
+  const [newsDetail, setNewsDetail] = useState<GetManageContentInformationFindByIdResponse>()
+  const [title, setTitle] = useState<string>('资讯详情')
+
+  const fetchNewsDetail = () => {
+    const param = {
+      id
+    }
+    PublicApi.getManageContentInformationFindById(param).then(res => {
+      if (res.code === 1000) {
+        setNewsDetail(res.data)
+        setTitle(res.data.title)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (id) {
+      fetchNewsDetail()
+    }
+  }, [])
+
+  return (
+    <>
+      <Helmet>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+        <title>{title}</title>
+      </Helmet>
+      {
+        newsDetail && (
+          <div className={styles.detailContainer}>
+            <div className={styles.title}>
+              {newsDetail.title}
+            </div>
+            <div className={styles.informationInfo}>
+              <div className={styles.date}>{moment(newsDetail.createTime).format("YYYY-MM-DD")}</div>
+              <div className={styles.readCount}>{numFormat(newsDetail.readCount)} 人看过</div>
+            </div>
+            <div className={styles.informationDigest}>
+              {newsDetail.digest}
+            </div>
+            <div dangerouslySetInnerHTML={{ __html: newsDetail.content}} className={styles.informationContent}></div>
+          </div>
+        )
+      }
+    </>
+  )
+}
+
+export default MobileDetail

src/pages/lxMall/information/search.tsx

@@ -135,7 +135,7 @@ const InformationSearch: React.FC<InformationPropsType> = (props) => {
   }, [props.location.query])
 
   const fetchSearchNewsList = (currentPage: number) => {
-    let param: any = {
+    const param: any = {
       // columnId,
       current: currentPage ? currentPage : current,
       pageSize,
@@ -149,13 +149,12 @@ const InformationSearch: React.FC<InformationPropsType> = (props) => {
       param.labelId = labelId
     }
 
-    //@ts-ignore
     PublicApi.getManageContentInformationPage(param).then(res => {
       if (res.code === 1000) {
         setNewsList(res.data.data)
         setTotalCount(res.data.totalCount)
       }
-    }).catch(() => { })
+    })
   }
 
   /**