6.27 集成

src/pages/PartyMemberTopic/ActivityStyle/index.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import '../Style/ld_style.less';
 import { Input, List, Pagination } from 'antd';
 import list_pic from '@/assets/topic/listNewsPic01.jpg'
 import time_icon from '@/assets/topic/timeIcon.png'
+import { getGracefulList } from './service';
+import { getImageUrl } from '../utils';
+import { history } from 'umi';
 
 const { Search } = Input;
 
@@ -29,13 +32,43 @@ const data = [
   }
 ];
 
+
+
 const PersonInfor: React.FC<{}> = () => {
+  //graceful data
+  const [gracefulList, setGracefulList] = useState<any[]>([]);
+  //get graceful
+  const getGracefulData = () => {
+    getGracefulList().then(async res => {
+      if (res?.code == 200) {
+        const data = await getImageUrl(res?.data, 'image');
+        setGracefulList(data);
+      }
+    })
+  }
+  //onclick
+  const clickTitle = (data: any) => {
+    sessionStorage.setItem("detailData", JSON.stringify(data));
+    history.push("/partyMemberTopic/newsDetail");
+  }
+  //to home
+  const toHome = () => {
+    history.push("/partyMemberTopic/home");
+  }
+  //goback lastpage
+  const toGoBack = () => {
+    window.history.go(-1);
+  }
+
+  useEffect(() => {
+    getGracefulData();
+  }, [])
   return (
     <div className="page-container">
       <div className="top-banner">
         <div className="back-home">
-          <span>返回首页</span>
-          <span>上一页</span>
+          <span onClick={() => toHome()}>返回首页</span>
+          <span onClick={() => toGoBack()}>上一页</span>
         </div>
       </div>
       <div className="search">
@@ -52,14 +85,20 @@ const PersonInfor: React.FC<{}> = () => {
       <div className="list-content">
         <List
           itemLayout="horizontal"
-          dataSource={data}
+          pagination={{
+            onChange: page => {
+              console.log(page);
+            },
+            pageSize: 2,
+          }}
+          dataSource={gracefulList}
           renderItem={item => (
             <List.Item>
               <div className="list-pic">
-                <img src={list_pic} />
-                <p className="tit">海南：党员突击队助力公司互联网化运营转型——海口联通资源普查的故事</p>
-                <p className="detail">为了夯实基础管理，助力公司互联网化运营转型，海南联通海口市分公司开展号线资源地址普查专项行动。面对时间短、任务重、人手不足的情况，海口市分公司党员主动请缨，成立党员突击队，攻坚克难</p>
-                <span className="time"><img src={time_icon} />2022-05-01</span>
+                <img src={item.imageUrl} />
+                <p className="tit" onClick={() => clickTitle(item)}>{item.title}</p>
+                <p className="detail">{item.content}</p>
+                <span className="time"><img src={time_icon} />{item.sendTime}</span>
               </div>
             </List.Item>
           )}

src/pages/PartyMemberTopic/ActivityStyle/service.ts

@@ -0,0 +1,6 @@
+import request from '@/utils/request';
+
+//活动风采列表
+export async function getGracefulList() {
+    return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventStyle/list');
+}