完成微信聊天记录分页

src/charts/Wechat_session.js

@@ -1,8 +1,11 @@
 import React, {Component} from 'react';
-import {Row, Col, List, Avatar} from 'antd';
+import {Row, Col, List, Avatar, DatePicker, Pagination} from 'antd';
 import {stores_Context} from '../config'
+import * as config from "../config";
 import {observer} from 'mobx-react';
-import { toJS } from "mobx";
+import moment from "moment";
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 
 class Wechat_session extends Component {
 
@@ -12,6 +15,7 @@ class Wechat_session extends Component {
     }
 
     componentDidMount() {
+        console.info('Wechat_session.componentDidMount');
         const {wechatStore} = this.context;
         wechatStore.fetchWechatUserList();
     }
@@ -22,18 +26,23 @@ class Wechat_session extends Component {
     }
     handleContactClick(contact) {
         const {wechatStore} = this.context;
-        wechatStore.fetchChatMsgList(contact);
+        wechatStore.fetchChatMsgList(contact, 0, 20);
+    }
+    handlePageChanged(page, pageSize) {
+        const {wechatStore} = this.context;
+        wechatStore.fetchChatMsgList(wechatStore.selectedContact, page, pageSize);
     }
     render() {
         const {wechatStore} = this.context;
         const userList = wechatStore.userList;
         const contactList = wechatStore.contactList;
         const chatMsgList = wechatStore.chatMsgList;
+        const chatMsgPage = wechatStore.chatMsgPage;
 
     return (
-        <div>
+        <>
             <Row>
-                <Col span={8}>
+                <Col span={6}>
                     <List
                         itemLayout="horizontal"
                         dataSource={userList}
@@ -42,13 +51,12 @@ class Wechat_session extends Component {
                                 <List.Item.Meta
                                     avatar={<Avatar src={user.avatar} />}
                                     title={user.username}
-                                    description=""
                                 />
                             </List.Item>
                         )}
                     />
                 </Col>
-                <Col span={8}>
+                <Col span={6}>
                     <List
                         itemLayout="horizontal"
                         dataSource={contactList}
@@ -57,13 +65,12 @@ class Wechat_session extends Component {
                                 <List.Item.Meta
                                     avatar={<Avatar src={contact.avatar} />}
                                     title={contact.username}
-                                    description=""
                                 />
                             </List.Item>
                         )}
                     />
                 </Col>
-                <Col span={8}>
+                <Col span={12}>
                     <List
                         itemLayout="horizontal"
                         dataSource={chatMsgList}
@@ -72,18 +79,24 @@ class Wechat_session extends Component {
                                 <List.Item.Meta
                                     avatar={<Avatar src={chatMsg.from_avatar} />}
                                     title={chatMsg.from_name}
-                                    description={chatMsg.content.text}
+                                    description={chatMsg.msgtime}
                                 />
+                                {chatMsg.content.text}
                             </List.Item>
                         )}
                     />
+                    <Pagination 
+                        current={chatMsgPage.currpage} 
+                        pageSize={20} 
+                        total={chatMsgPage.totalpage*20}
+                        onChange={(page, pageSize) => { this.handlePageChanged(page, pageSize)}} />
                 </Col>
 
             </Row>
-        </div>
+        </>
     );
     }
 
 }
-export default observer(Wechat_session);
 
+export default observer(Wechat_session);

src/stores/Wechat.js

@@ -1,72 +1,63 @@
 import {makeAutoObservable, runInAction} from "mobx"
-import {
-    CaretUpOutlined,
-    CaretDownOutlined
-} from '@ant-design/icons';
-import {Tag} from 'antd';
 import * as config from "../config";
-import moment from "moment";
-import {NavLink} from "react-router-dom";
 import * as req from '../utils/request';
 
-
 class Wechat {
 
     constructor(rootStore) {
         this.rootStore = rootStore;
         makeAutoObservable(this);
-        
-        // req.fetchJSON(config.HT_HOST + '/weixin/wxwork/get_permit_user_list')
-        //     .then(json => {
-        //         runInAction(() => {
-        //             this.userList = json.Result.filter(user => {
-        //                 return user.SMPlatform === 'weixin';
-        //             });
-        //         });
-        //     });
     }
 
     fetchWechatUserList() {
         
         req.fetchJSON(config.HT_HOST + '/weixin/wxwork/get_permit_user_list')
             .then(json => {
+                if (json.errcode === 0) {
                     runInAction(() => {
                         this.userList = json.Result.filter(user => {
                             return user.SMPlatform === 'weixin';
                         });
                     });
+                }
             });
     }
 
-    // 
-
     fetchContactList(user) {
         
         req.fetchJSON(config.HT_HOST + '/weixin/wxwork/get_externalcontact_list?userid='+user.userid)
             .then(json => {
+                if (json.errcode === 0) {
                     runInAction(() => {
                         this.contactList = json.Result.filter(user => {
                             return user.SMPlatform === 'weixin';
                         });
                     });
+                }
             });
     }
     
-    fetchChatMsgList(contact) {
+    fetchChatMsgList(contact, page, pageSize) {
-        
+        runInAction(() => {
-        req.fetchJSON(config.HT_HOST + '/weixin/wxwork/GetChatmsg?external_userid='+contact.userid+'&Page_count=20&curr_page=0')
+            this.selectedContact = contact;
+        });
+        req.fetchJSON(config.HT_HOST + '/weixin/wxwork/GetChatmsg?external_userid='+this.selectedContact.userid+'&Page_count='+pageSize+'&curr_page='+page)
             .then(json => {
+                if (json.errcode === 0) {
                     runInAction(() => {
-                    console.info(json.chatmsg);
                         this.chatMsgList = json.chatmsg;
+                        this.chatMsgPage = json.chatpage;
                     });
+                }
             });
     }
+
     userList = [{username: '---', avatar: 'https://joeschmoe.io/api/v1/random'}];
     contactList = [{username: '---', avatar: 'https://joeschmoe.io/api/v1/random'}];
     chatMsgList = [{from_name: '---', from_avatar: 'https://joeschmoe.io/api/v1/random', content: {text: '---'}}];
+    chatMsgPage = {currpage: 1, totalpage: 1};
+    selectedContact = this.contactList[0];
 
 }
 
-
 export default Wechat;