|
|
|
@ -1,11 +1,10 @@
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
import {Row, Col, List, Avatar, Space, Pagination} from 'antd';
|
|
|
|
|
import {stores_Context} from '../config'
|
|
|
|
|
import {observer} from 'mobx-react';
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import { Row, Col, List, Avatar, Space, Pagination } from 'antd';
|
|
|
|
|
import { stores_Context } from '../config';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import 'moment/locale/zh-cn';
|
|
|
|
|
|
|
|
|
|
class WhatsApp_session extends Component {
|
|
|
|
|
|
|
|
|
|
static contextType = stores_Context;
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
@ -13,20 +12,22 @@ class WhatsApp_session extends Component {
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
console.info('Wechat_session.componentDidMount');
|
|
|
|
|
const {whatsAppStore} = this.context;
|
|
|
|
|
const { whatsAppStore } = this.context;
|
|
|
|
|
whatsAppStore.fetchWechatUserList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleUserClick(user) {
|
|
|
|
|
const {whatsAppStore} = this.context;
|
|
|
|
|
const { whatsAppStore } = this.context;
|
|
|
|
|
whatsAppStore.fetchContactList(user);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleContactClick(contact) {
|
|
|
|
|
const {whatsAppStore} = this.context;
|
|
|
|
|
const { whatsAppStore } = this.context;
|
|
|
|
|
whatsAppStore.fetchChatMsgList(contact, 0, 20);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handlePageChanged(page, pageSize) {
|
|
|
|
|
const {whatsAppStore} = this.context;
|
|
|
|
|
const { whatsAppStore } = this.context;
|
|
|
|
|
whatsAppStore.fetchChatMsgList(whatsAppStore.selectedContact, page, pageSize);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -34,7 +35,7 @@ class WhatsApp_session extends Component {
|
|
|
|
|
const msgDate = new Date(chatMsg.msgtime);
|
|
|
|
|
const msgDateText = msgDate.toLocaleDateString() + ' ' + msgDate.toLocaleTimeString();
|
|
|
|
|
return (
|
|
|
|
|
<List.Item className='ant-list-item-no-flex'>
|
|
|
|
|
<List.Item className="ant-list-item-no-flex">
|
|
|
|
|
<List.Item.Meta
|
|
|
|
|
avatar={<Avatar src={chatMsg.from_avatar} />}
|
|
|
|
|
title={chatMsg.from_name}
|
|
|
|
@ -42,34 +43,25 @@ class WhatsApp_session extends Component {
|
|
|
|
|
/>
|
|
|
|
|
{this.renderMsgContent(chatMsg)}
|
|
|
|
|
</List.Item>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderMsgContent(chatMsg) {
|
|
|
|
|
if (chatMsg.msgtype === 'file') {
|
|
|
|
|
return (
|
|
|
|
|
<a href={chatMsg.content.fileurl}>{chatMsg.content.filename}</a>
|
|
|
|
|
)
|
|
|
|
|
return <a href={chatMsg.content.fileurl}>{chatMsg.content.filename}</a>;
|
|
|
|
|
} else if (chatMsg.msgtype === 'image') {
|
|
|
|
|
return (
|
|
|
|
|
<img style={{width: '50%', height: '50%'}} alt={chatMsg.msgid} src={chatMsg.content.imageurl} />
|
|
|
|
|
)
|
|
|
|
|
return <img style={{ width: '50%', height: '50%' }} alt={chatMsg.msgid} src={chatMsg.content.imageurl} />;
|
|
|
|
|
} else if (chatMsg.msgtype === 'text') {
|
|
|
|
|
return (
|
|
|
|
|
<>{chatMsg.content.text}</>
|
|
|
|
|
)
|
|
|
|
|
return <>{chatMsg.content.text}</>;
|
|
|
|
|
} else if (chatMsg.msgtype === 'link') {
|
|
|
|
|
return (
|
|
|
|
|
<a href={chatMsg.content.link_url}>{chatMsg.content.title}</a>
|
|
|
|
|
)
|
|
|
|
|
return <a href={chatMsg.content.link_url}>{chatMsg.content.title}</a>;
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<>未知消息[{chatMsg.msgtype}]</>
|
|
|
|
|
)
|
|
|
|
|
return <>未知消息[{chatMsg.msgtype}]</>;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const {whatsAppStore} = this.context;
|
|
|
|
|
const { whatsAppStore } = this.context;
|
|
|
|
|
const userList = whatsAppStore.userList;
|
|
|
|
|
const contactList = whatsAppStore.contactList;
|
|
|
|
|
const chatMsgList = whatsAppStore.chatMsgList;
|
|
|
|
@ -80,32 +72,34 @@ class WhatsApp_session extends Component {
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<List
|
|
|
|
|
style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
|
|
|
|
|
style={{ maxHeight: 800, minHeight: 800, overflowY: 'auto' }}
|
|
|
|
|
bordered={true}
|
|
|
|
|
itemLayout="horizontal"
|
|
|
|
|
dataSource={userList}
|
|
|
|
|
renderItem={(user) => (
|
|
|
|
|
<List.Item onClick={() => {this.handleUserClick(user)}}>
|
|
|
|
|
<List.Item.Meta
|
|
|
|
|
avatar={<Avatar src={user.avatar} />}
|
|
|
|
|
title={user.username}
|
|
|
|
|
/>
|
|
|
|
|
<List.Item
|
|
|
|
|
onClick={() => {
|
|
|
|
|
this.handleUserClick(user);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<List.Item.Meta avatar={<Avatar src={user.avatar} />} title={user.username} />
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<List
|
|
|
|
|
style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
|
|
|
|
|
style={{ maxHeight: 800, minHeight: 800, overflowY: 'auto' }}
|
|
|
|
|
bordered={true}
|
|
|
|
|
itemLayout="horizontal"
|
|
|
|
|
dataSource={contactList}
|
|
|
|
|
renderItem={(contact) => (
|
|
|
|
|
<List.Item onClick={() => {this.handleContactClick(contact)}}>
|
|
|
|
|
<List.Item.Meta
|
|
|
|
|
avatar={<Avatar src={contact.avatar} />}
|
|
|
|
|
title={contact.username}
|
|
|
|
|
/>
|
|
|
|
|
<List.Item
|
|
|
|
|
onClick={() => {
|
|
|
|
|
this.handleContactClick(contact);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<List.Item.Meta avatar={<Avatar src={contact.avatar} />} title={contact.username} />
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
@ -113,7 +107,7 @@ class WhatsApp_session extends Component {
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
|
|
|
|
<List
|
|
|
|
|
style={{maxHeight: 800, minHeight: 800, overflowY: 'auto'}}
|
|
|
|
|
style={{ maxHeight: 800, minHeight: 800, overflowY: 'auto' }}
|
|
|
|
|
bordered={true}
|
|
|
|
|
itemLayout="horizontal"
|
|
|
|
|
dataSource={chatMsgList}
|
|
|
|
@ -122,17 +116,16 @@ class WhatsApp_session extends Component {
|
|
|
|
|
<Pagination
|
|
|
|
|
current={chatMsgPage.currpage}
|
|
|
|
|
pageSize={20}
|
|
|
|
|
total={chatMsgPage.totalpage*20}
|
|
|
|
|
onChange={(page, pageSize) => { this.handlePageChanged(page, pageSize)}} />
|
|
|
|
|
|
|
|
|
|
total={chatMsgPage.totalpage * 20}
|
|
|
|
|
onChange={(page, pageSize) => {
|
|
|
|
|
this.handlePageChanged(page, pageSize);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Space>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
</Row>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
export default observer(WhatsApp_session);
|
|
|
|
|
|
|
|
|
|