sourcecode/front/project/h5/routes/page/message/page.js

import React from 'react';
import { Badge, ListView } from 'antd-mobile';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatDate } from '@src/services/Tools';
import ListData from '@src/services/ListData';
import { My } from '../../../stores/my';

export default class extends Page {
  initState() {
    return {
      listMap: {},
    };
  }

  initData() {
    return this.initListKeys(['message'])
      .then(() => {
        return this.getList('message', 1);
      });
  }

  initListKeys(keys) {
    const { listMap } = this.state;
    keys.forEach((key) => {
      listMap[key] = new ListData();
    });
    this.setState({ listMap });
    return Promise.resolve();
  }

  getList(key, page) {
    My.message(Object.assign({ page }, this.state.search))
      .then((result) => {
        const { listMap } = this.state;
        if (page === 1) { // todo 是否重新读取第一页为刷新所有数据
          listMap[key] = new ListData();
        }
        listMap[key].get(page, result, this.state.search.size);
        this.setState({ listMap });
      });
  }

  readAll() {
    My.readAllMessage()
      .then(() => {
        this.refresh();
      });
  }

  renderView() {
    return (
      <div>
        <div className="all" onClick={() => {
          this.readAll();
        }}>
          <Assets name="clean" />
          全部已读2
        </div>
        {this.renderList()}
      </div>
    );
  }

  renderRow(rowData) {
    return <div className="item">
      <div className="detail">
        <div className="title">
          {rowData.title}
          {rowData.isRead > 0 && <Badge dot />}
        </div>
        <div className="desc">{rowData.description}</div>
        {rowData.link && <a href={rowData.link}>查看详情</a>}
      </div>
      <div className="date-time">
        <div className="date">{formatDate(rowData.createTime, 'YYYY-MM-DD')}</div>
        <div className="time">{formatDate(rowData.createTime, 'HH:mm:ss')}</div>
      </div>
    </div>;
  }

  renderList() {
    const { listMap } = this.state;
    const { message = {} } = listMap;
    const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = message;
    if (total === 0) return this.renderEmpty();
    return <ListView
      className="list"
      ref={el => { this.lv = el; }}
      dataSource={dataSource}
      renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
        {loading ? '加载中...' : (bottom ? '没有更多了' : '')}
      </div>)}
      renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
      style={{
        height: this.state.height,
        overflow: 'auto',
      }}
      pageSize={this.state.search.size}
      scrollRenderAheadDistance={500}
      onEndReached={() => {
        if (loading) return;
        if (bottom) {
          if (!finish) {
            message.finish = true;
            // this.setState({ time: new Date() })
          }
          return;
        }
        this.getList('message', maxSectionId + 1);
      }}
      onEndReachedThreshold={10}
    />;
  }

  renderEmpty() {
    return <div />;
  }
}