Merge branch 'develop' into 'test'

src/containers/PublicCar/PublicCarList.js

 import React, { Component } from 'react';
 import { fetchPublicCarList } from '../../api/index';
-import { PullToRefresh, Toast } from 'antd-mobile';
+import { ListView, PullToRefresh, Toast } from 'antd-mobile';
 import styles from './style.css';
 import PublicCarItem from './components/PublicCarItem';
 
 class PublicCarList extends Component {
   constructor(props) {
     super(props);
+    const list = new ListView.DataSource({
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
     this.state = {
       refreshing: false,
       down: true,
       height: document.documentElement.clientHeight,
-      list: [],
+      list: list,
+      sourceList: [],
       pagination: {
         nowDate: '',
         pageNum: 1,
-        pageSize: 50,
+        pageSize: 10,
       },
     };
   }
@@ -32,6 +36,12 @@ class PublicCarList extends Component {
     );
     this.fetchList();
   }
+  updateList = () => {
+    const { sourceList } = this.state;
+    this.setState(({ list }) => ({
+      list: list.cloneWithRows(sourceList),
+    }));
+  };
   fetchList = fetchMore => {
     const { pagination } = this.state;
     const nowDate = new Date().toISOString();
@@ -48,11 +58,11 @@ class PublicCarList extends Component {
     fetchPublicCarList(entity)
       .then(res => {
         this.setState(
-          ({ list, pagination }) =>
+          ({ sourceList, pagination }) =>
             fetchMore
               ? res.data.length
                 ? {
-                    list: [...list, ...res.data],
+                    sourceList: [...sourceList, ...res.data],
                     pagination: {
                       ...pagination,
                       pageNum: pagination.pageNum + 1,
@@ -63,14 +73,16 @@ class PublicCarList extends Component {
                     refreshing: false,
                   }
               : {
-                  list: res.data,
+                  sourceList: res.data,
                   pagination: {
                     ...pagination,
+                    pageNum: 1,
                     nowDate,
                   },
                   refreshing: false,
                 }
         );
+        this.updateList();
       })
       .catch(err => {
         Toast.fail(err.msg || '请求失败！');
@@ -82,29 +94,45 @@ class PublicCarList extends Component {
   refreshHandle = () => {
     this.fetchList(true);
   };
+  MyBody = props => {
+    return (
+      <div className={styles.repairList}>
+        <div className={styles.listInfo}>显示最近半年的报修记录</div>
+        {props.children}
+      </div>
+    );
+  };
   render() {
+    const { list, pagination } = this.state;
     return (
-      <div className={styles.publicCarList}>
-        <PullToRefresh
-          damping={60}
-          ref={el => (this.ptr = el)}
+      <ListView
         style={{
           height: this.state.height,
-            overflow: 'auto',
         }}
-          indicator={{ deactivate: '上拉可以刷新' }}
-          direction={'up'}
-          refreshing={this.state.refreshing}
-          onRefresh={this.refreshHandle}
-        >
-          <div className={styles.listInfo}>显示最近半年的报修记录</div>
-          {this.state.list.length ? (
-            this.state.list.map(i => <PublicCarItem key={i.id} data={i} />)
-          ) : (
-            <div className={styles.noData}>暂无数据</div>
+        className={styles.scrollWrap}
+        dataSource={list}
+        pageSize={pagination.pageSize}
+        renderBodyComponent={() => <this.MyBody />}
+        renderRow={rowData => (
+          <PublicCarItem
+            key={rowData.id}
+            data={rowData}
+            showView={this.showViewHandle}
+          />
         )}
-        </PullToRefresh>
-      </div>
+        onEndReached={this.refreshHandle}
+        pullToRefresh={
+          <PullToRefresh
+            refreshing={this.state.refreshing}
+            onRefresh={this.fetchList}
+          />
+        }
+        // renderFooter={() => (
+        //   <div style={{ textAlign: 'center' }}>
+        //     {this.state.refreshing ? 'Loading...' : 'Loaded'}
+        //   </div>
+        // )}
+      />
     );
   }
 }

src/containers/PublicCar/style.css

@@ -14,6 +14,9 @@
   composes: noData from '../Repair/style.css';
 }
 /* apply */
+.scrollWrap {
+  background-color: #f2f2f2;
+}
 .content {
   padding: 30px 40px 20px;
 }

src/containers/PublicCarDeal/index.js

 import React, { Component } from 'react';
-import { PullToRefresh, Modal, Toast, TextareaItem } from 'antd-mobile';
+import {
+  ListView,
+  PullToRefresh,
+  Modal,
+  Toast,
+  TextareaItem,
+} from 'antd-mobile';
 import styles from './style.css';
 import PublicCarItem from '../PublicCar/components/PublicCarItem';
 import {
@@ -16,15 +22,19 @@ import Select from './Select';
 class PublicCarDeal extends Component {
   constructor(props) {
     super(props);
+    const list = new ListView.DataSource({
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
     this.state = {
       refreshing: false,
       down: true,
       height: document.documentElement.clientHeight,
       pagination: {
         pageNum: 1,
-        pageSize: 50,
+        pageSize: 10,
       },
-      list: [],
+      list: list,
+      sourceList: [],
       dealDialogVisible: false,
       selected: {
         id: '',
@@ -38,6 +48,12 @@ class PublicCarDeal extends Component {
   componentDidMount() {
     this.fetchList();
   }
+  updateList = () => {
+    const { sourceList } = this.state;
+    this.setState(({ list }) => ({
+      list: list.cloneWithRows(sourceList),
+    }));
+  };
   fetchList = fetchMore => {
     this.setState({ refreshing: true });
     const { pagination } = this.state;
@@ -55,29 +71,24 @@ class PublicCarDeal extends Component {
     fetchApplyPublicCarList(entity)
       .then(res => {
         this.setState(
-          ({ list, pagination }) =>
+          ({ sourceList }) =>
             fetchMore
               ? res.data.length
                 ? {
-                    list: [...list, ...res.data],
-                    pagination: {
-                      ...pagination,
-                      pageNum: pagination.pageNum + 1,
-                    },
+                    sourceList: [...sourceList, ...res.data],
+                    pagination: entity,
                     refreshing: false,
                   }
                 : {
                     refreshing: false,
                   }
               : {
-                  list: res.data,
-                  pagination: {
-                    ...pagination,
-                    nowDate,
-                  },
+                  sourceList: res.data,
+                  pagination: entity,
                   refreshing: false,
                 }
         );
+        this.updateList();
       })
       .catch(err => {
         Toast.fail(err.msg || '请求失败！');
@@ -197,33 +208,16 @@ class PublicCarDeal extends Component {
       },
     }));
   };
-  render() {
+  MyBody = props => {
     const {
       selected: { value, dealOpinion, carPlate },
       dealDialogVisible,
       carPlateList,
     } = this.state;
     return (
-      <PullToRefresh
-        damping={60}
-        ref={el => (this.ptr = el)}
-        style={{
-          height: this.state.height,
-          overflow: 'auto',
-        }}
-        indicator={{ deactivate: '上拉可以刷新' }}
-        direction={'up'}
-        refreshing={this.state.refreshing}
-        onRefresh={this.refreshHandle}
-      >
+      <div className={styles.repairList}>
         <div className={styles.listInfo}>显示最近半年的报修记录</div>
-        {this.state.list.length ? (
-          this.state.list.map(i => (
-            <PublicCarItem key={i.id} data={i} dealHandle={this.dealHandle} />
-          ))
-        ) : (
-          <div className={styles.noData}>暂无数据</div>
-        )}
+        {props.children}
         <Modal
           className={styles.dealDialog}
           visible={dealDialogVisible}
@@ -300,7 +294,40 @@ class PublicCarDeal extends Component {
             ) : null}
           </div>
         </Modal>
-      </PullToRefresh>
+      </div>
+    );
+  };
+  render() {
+    const { list, pagination } = this.state;
+    return (
+      <ListView
+        style={{
+          height: this.state.height,
+        }}
+        className={styles.scrollWrap}
+        dataSource={list}
+        pageSize={pagination.pageSize}
+        renderBodyComponent={() => <this.MyBody />}
+        renderRow={rowData => (
+          <PublicCarItem
+            key={rowData.id}
+            data={rowData}
+            dealHandle={this.dealHandle}
+          />
+        )}
+        onEndReached={this.refreshHandle}
+        pullToRefresh={
+          <PullToRefresh
+            refreshing={this.state.refreshing}
+            onRefresh={this.fetchList}
+          />
+        }
+        // renderFooter={() => (
+        //   <div style={{ textAlign: 'center' }}>
+        //     {this.state.refreshing ? 'Loading...' : 'Loaded'}
+        //   </div>
+        // )}
+      />
     );
   }
 }

src/containers/Repair/RepairList.js

 import React, { Component } from 'react';
-import { PullToRefresh, Modal, Toast } from 'antd-mobile';
+import { ListView, PullToRefresh, Modal, Toast } from 'antd-mobile';
 import styles from './style.css';
 import RepairItem from './components/RepairItem';
 import { fetchRepairList } from '../../api/index';
@@ -8,14 +8,9 @@ import Perview from '../../components/Perview/Perview';
 class RepairList extends Component {
   constructor(props) {
     super(props);
-    // const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
-    // const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
-    // const list = new ListView.DataSource({
-    //   getRowData,
-    //   getSectionHeaderData: getSectionData,
-    //   rowHasChanged: (row1, row2) => row1 !== row2,
-    //   sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
-    // });
+    const list = new ListView.DataSource({
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
     this.state = {
       refreshing: false,
       down: true,
@@ -23,13 +18,15 @@ class RepairList extends Component {
       pagination: {
         nowDate: '',
         pageNum: 1,
-        pageSize: 50,
+        pageSize: 10,
       },
-      list: [],
+      list: list,
+      sourceList: [],
       perviewVisibility: false,
       selectedImgList: [],
       perviewIndex: 0,
     };
+    // this.sourceList = [];
   }
   componentDidMount() {
     let wrap = document.querySelector('.RepairContent');
@@ -43,6 +40,12 @@ class RepairList extends Component {
     );
     this.fetchList();
   }
+  updateList = () => {
+    const { sourceList } = this.state;
+    this.setState(({ list }) => ({
+      list: list.cloneWithRows(sourceList),
+    }));
+  };
   fetchList = fetchMore => {
     const { pagination } = this.state;
     const nowDate = new Date().toISOString();
@@ -59,11 +62,11 @@ class RepairList extends Component {
     fetchRepairList(entity)
       .then(res => {
         this.setState(
-          ({ list, pagination }) =>
+          ({ sourceList, pagination }) =>
             fetchMore
               ? res.data.length
                 ? {
-                    list: [...list, ...res.data],
+                    sourceList: [...sourceList, ...res.data],
                     pagination: {
                       ...pagination,
                       pageNum: pagination.pageNum + 1,
@@ -74,14 +77,16 @@ class RepairList extends Component {
                     refreshing: false,
                   }
               : {
-                  list: res.data,
+                  sourceList: res.data,
                   pagination: {
                     ...pagination,
+                    pageNum: 1,
                     nowDate,
                   },
                   refreshing: false,
                 }
         );
+        this.updateList();
       })
       .catch(err => {
         Toast.fail(err.msg || '请求失败！');
@@ -105,20 +110,37 @@ class RepairList extends Component {
       perviewVisibility: false,
     });
   };
-  render() {
-    const {
-      list,
-      perviewVisibility,
-      selectedImgList,
-      perviewIndex,
-    } = this.state;
+  MyBody = props => {
+    const { perviewVisibility, selectedImgList, perviewIndex } = this.state;
     return (
       <div className={styles.repairList}>
-        {/* <ListView
+        <div className={styles.listInfo}>显示最近半年的报修记录</div>
+        {props.children}
+        <Modal
+          className={styles.perViewDialog}
+          visible={perviewVisibility}
+          transparent
+          maskClosable={true}
+          onClose={this.resetDialog}
+          title=""
+        >
+          <Perview data={selectedImgList} index={perviewIndex} />
+        </Modal>
+      </div>
+    );
+  };
+  render() {
+    const { list, pagination } = this.state;
+
+    return (
+      <ListView
         style={{
           height: this.state.height,
         }}
+        className={styles.scrollWrap}
         dataSource={list}
+        pageSize={pagination.pageSize}
+        renderBodyComponent={() => <this.MyBody />}
         renderRow={rowData => (
           <RepairItem
             key={rowData.id}
@@ -126,39 +148,19 @@ class RepairList extends Component {
             showView={this.showViewHandle}
           />
         )}
-        /> */}
+        onEndReached={this.refreshHandle}
+        pullToRefresh={
           <PullToRefresh
-          damping={60}
-          ref={el => (this.ptr = el)}
-          style={{
-            height: this.state.height,
-            overflow: 'auto',
-          }}
-          indicator={{ deactivate: '上拉可以刷新' }}
-          direction={'up'}
             refreshing={this.state.refreshing}
-          onRefresh={this.refreshHandle}
-        >
-          <div className={styles.listInfo}>显示最近半年的报修记录</div>
-          {list.length ? (
-            list.map(i => (
-              <RepairItem key={i.id} data={i} showView={this.showViewHandle} />
-            ))
-          ) : (
-            <div className={styles.noData}>暂无数据</div>
-          )}
-        </PullToRefresh>
-        <Modal
-          className={styles.perViewDialog}
-          visible={perviewVisibility}
-          transparent
-          maskClosable={true}
-          onClose={this.resetDialog}
-          title=""
-        >
-          <Perview data={selectedImgList} index={perviewIndex} />
-        </Modal>
-      </div>
+            onRefresh={this.fetchList}
+          />
+        }
+        // renderFooter={() => (
+        //   <div style={{ textAlign: 'center' }}>
+        //     {this.state.refreshing ? 'Loading...' : 'Loaded'}
+        //   </div>
+        // )}
+      />
     );
   }
 }

src/containers/Repair/components/RepairItem.js

@@ -86,7 +86,7 @@ class RepairItem extends Component {
                     </div>
                   </div>
                 </div>,
-                <div key="uploadImg" className={styles.listLine}>
+                <div key="uploadImg" className={`${styles.listLine} ${styles.listLineImg}`}>
                   {imgList[0] &&
                     imgList.map((item, idx) => (
                       <div

src/containers/Repair/components/style.css

@@ -49,6 +49,9 @@
   line-height: 30px;
   margin-bottom: 30px;
 }
+.listLineImg {
+  justify-content: space-between;
+}
 .listLine:last-child {
   margin-bottom: 0;
 }

src/containers/Repair/style.css

@@ -3,7 +3,9 @@
   flex: auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding-bottom: 20px;
+}
+.scrollWrap {
+  background-color: #f2f2f2;
 }
 .footerTopLine {
   position: absolute;

src/containers/RepairDeal/index.js

 import React, { Component } from 'react';
-import { PullToRefresh, Modal, Toast } from 'antd-mobile';
+import { ListView, PullToRefresh, Modal, Toast } from 'antd-mobile';
 import styles from './style.css';
 import RepairItem from '../Repair/components/RepairItem';
 import { fetchReportRepairList, dealRepair } from '../../api/index';
@@ -9,6 +9,9 @@ import onCheckIcon from '../../images/Check/radio_on_btn@2x.png';
 class RepairDeal extends Component {
   constructor(props) {
     super(props);
+    const list = new ListView.DataSource({
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
     this.state = {
       refreshing: false,
       down: true,
@@ -16,14 +19,21 @@ class RepairDeal extends Component {
       pagination: {
         nowDate: '',
         pageNum: 1,
-        pageSize: 50,
+        pageSize: 10,
       },
-      list: [],
+      list: list,
+      sourceList: [],
     };
   }
   componentDidMount() {
     this.fetchList();
   }
+  updateList = () => {
+    const { sourceList } = this.state;
+    this.setState(({ list }) => ({
+      list: list.cloneWithRows(sourceList),
+    }));
+  };
   fetchList = fetchMore => {
     this.setState({ refreshing: true });
     const { pagination } = this.state;
@@ -41,29 +51,24 @@ class RepairDeal extends Component {
     fetchReportRepairList(entity)
       .then(res => {
         this.setState(
-          ({ list, pagination }) =>
+          ({ sourceList }) =>
             fetchMore
               ? res.data.length
                 ? {
-                    list: [...list, ...res.data],
-                    pagination: {
-                      ...pagination,
-                      pageNum: pagination.pageNum + 1,
-                    },
+                    sourceList: [...sourceList, ...res.data],
+                    pagination: entity,
                     refreshing: false,
                   }
                 : {
                     refreshing: false,
                   }
               : {
-                  list: res.data,
-                  pagination: {
-                    ...pagination,
-                    nowDate,
-                  },
+                  sourceList: res.data,
+                  pagination: entity,
                   refreshing: false,
                 }
         );
+        this.updateList();
       })
       .catch(err => {
         Toast.fail(err.msg || '请求失败！');
@@ -116,36 +121,12 @@ class RepairDeal extends Component {
       perviewVisibility: false,
     });
   };
-  render() {
+  MyBody = props => {
     const { perviewVisibility, selectedImgList, perviewIndex } = this.state;
-    return [
-      <PullToRefresh
-        key="repairList"
-        damping={60}
-        ref={el => (this.ptr = el)}
-        style={{
-          height: this.state.height,
-          overflow: 'auto',
-        }}
-        indicator={{ deactivate: '上拉可以刷新' }}
-        direction={'up'}
-        refreshing={this.state.refreshing}
-        onRefresh={this.refreshHandle}
-      >
+    return (
+      <div className={styles.repairList}>
         <div className={styles.listInfo}>显示最近半年的报修记录</div>
-        {this.state.list.length ? (
-          this.state.list.map(i => (
-            <RepairItem
-              key={i.id}
-              data={i}
-              dealHandle={this.dealHandle}
-              showView={this.showViewHandle}
-            />
-          ))
-        ) : (
-          <div className={styles.noData}>暂无数据</div>
-        )}
-      </PullToRefresh>,
+        {props.children}
         <Modal
           key="repairImgPerview"
           className={styles.perViewDialog}
@@ -156,8 +137,38 @@ class RepairDeal extends Component {
           title=""
         >
           <Perview data={selectedImgList} index={perviewIndex} />
-      </Modal>,
-    ];
+        </Modal>
+      </div>
+    );
+  };
+  render() {
+    const { list, pagination } = this.state;
+    return (
+      <ListView
+        style={{
+          height: this.state.height,
+        }}
+        className={styles.scrollWrap}
+        dataSource={list}
+        pageSize={pagination.pageSize}
+        renderBodyComponent={() => <this.MyBody />}
+        renderRow={rowData => (
+          <RepairItem
+            key={rowData.id}
+            data={rowData}
+            dealHandle={this.dealHandle}
+            showView={this.showViewHandle}
+          />
+        )}
+        onEndReached={this.refreshHandle}
+        pullToRefresh={
+          <PullToRefresh
+            refreshing={this.state.refreshing}
+            onRefresh={this.fetchList}
+          />
+        }
+      />
+    );
   }
 }