Skip to content

C
cdsf-wx-app
Commit da60d25e by 姜雷
Options

添加下拉刷新

parent e718b2dc
Showing with 246 additions and 170 deletions
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,30 +94,46 @@ class PublicCarList extends Component {
refreshHandle = () => {
this.fetchList(true);
};
render() {
MyBody = props => {
return (
<div className={styles.publicCarList}>
<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>
{this.state.list.length ? (
this.state.list.map(i => <PublicCarItem key={i.id} data={i} />)
) : (
<div className={styles.noData}>暂无数据</div>
)}
</PullToRefresh>
<div className={styles.repairList}>
<div className={styles.listInfo}>显示最近半年的报修记录</div>
{props.children}
</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}
showView={this.showViewHandle}
/>
)}
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,49 +110,12 @@ 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
style={{
height: this.state.height,
}}
dataSource={list}
renderRow={rowData => (
<RepairItem
key={rowData.id}
data={rowData}
showView={this.showViewHandle}
/>
)}
/> */}
<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>
<div className={styles.listInfo}>显示最近半年的报修记录</div>
{props.children}
<Modal
className={styles.perViewDialog}
visible={perviewVisibility}
......@@ -160,6 +128,40 @@ class RepairList extends Component {
</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}
showView={this.showViewHandle}
/>
)}
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/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,48 +121,54 @@ 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)}
return (
<div className={styles.repairList}>
<div className={styles.listInfo}>显示最近半年的报修记录</div>
{props.children}
<Modal
key="repairImgPerview"
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,
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 => (
<RepairItem
key={i.id}
data={i}
dealHandle={this.dealHandle}
showView={this.showViewHandle}
/>
))
) : (
<div className={styles.noData}>暂无数据</div>
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}
/>
)}
</PullToRefresh>,
<Modal
key="repairImgPerview"
className={styles.perViewDialog}
visible={perviewVisibility}
transparent
maskClosable={true}
onClose={this.resetDialog}
title=""
>
<Perview data={selectedImgList} index={perviewIndex} />
</Modal>,
];
onEndReached={this.refreshHandle}
pullToRefresh={
<PullToRefresh
refreshing={this.state.refreshing}
onRefresh={this.fetchList}
/>
}
/>
);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment