CheckboxItem不用看,还没完善,有一些语法重复判断需要更改
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import './index.less'
import NavBar from '@/NavBar/'
import {getAddressList} from '@api/home'
import {ListView,PullToRefresh,Checkbox} from 'antd-mobile'
import { connect} from 'react-redux'
import {AsyncSelectorAddress} from "@redux/action"
const CheckboxItem = Checkbox.CheckboxItem;
class App extends Component {
constructor(props){
super();
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
dataSource:dataSource.cloneWithRows([]),
refreshing: true,
isLoading: true,
height: document.documentElement.clientHeight,
pageNum: 1,
pageSize: 10,
total: null,
addressList: []
};
}
componentDidMount(){
const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
this.setState({
height: hei,
});
this._getAddressList()
}
_getAddressList(){
const {pageNum,pageSize,addressList,dataSource} = this.state
this.setState({
refreshing: true,
isLoading: true,
})
getAddressList({pageNum,pageSize,}).then(res => {
if(res&&res.code===0){
if(pageNum===1){
this.setState({
addressList:res.data.list,
dataSource: dataSource.cloneWithRows(res.data.list),
pageNum: pageNum +1,
refreshing: false,
isLoading: false,
total: res.data.total
})
}else{
this.setState({
addressList:addressList.concat(res.data.list),
total: res.data.total
},()=>{
this.setState({
dataSource: dataSource.cloneWithRows(this.state.addressList),
pageNum: pageNum +1,
refreshing: false,
isLoading: false
})
})
}
}
})
}
onRefresh =()=> {
this.setState({
pageNum: 1
},()=>{
this._getAddressList()
})
}
onEndReached = ()=>{
if(this.state.addressList.length === this.state.total){
this.setState({
refreshing: false,
isLoading: false
})
return
}
this._getAddressList()
}
onChange = (e,item)=>{
e = e || window.event;
e.stopPropagation()
let obj = this.state.addressList.map(v=>{
if(v.id === item.id){
v.isDefault = true
return v
}else{
v.isDefault = false
return v
}
})
this.setState({
addressList: obj
})
}
addressClick = (e,item)=>{
// let nodeText = document.getElementsByTagName('body')
// nodeText[0].style.backgroundColor = 'red'
this.props.dispatchAddress(item)
this.props.history.goBack()
}
row =(item)=> {
return (
this.addressClick(e,item)}>
this.onChange(e,item)}>
{item.phone} {item.isDefault ? 默认 : '' }
{item.provinceName}{item.cityName}{item.districtName}{item.streetName}{item.address}
{/* 编辑 */}
)
}
// 渲染行数据之间的间隔DOM
renderSeparator = (sectionId, rowId) => {
return (
);
}
render() {
return (
this.lv = el}
dataSource={this.state.dataSource}
renderFooter={() => (
{this.state.isLoading ? '加载中...' : this.state.addressList.length >10 ? '我是有底线的~' : null}
)}
useBodyScroll
renderRow={(item)=>this.row(item)}
renderSeparator={(sectionId, rowId) => this.renderSeparator(sectionId, rowId)}
style={{
height: this.state.height,
margin: '5px 0',
overflow: 'auto',
minHeight: '100'
}}
pullToRefresh={ }
onEndReachedThreshold={10}
onEndReached={this.onEndReached} //上拉加载
pageSize={10}
/>
)
}
}
export default connect(null,dispatch=>({
dispatchAddress(data){
dispatch(AsyncSelectorAddress(data))
}
}))(App)