uatcomponent/src/container/recommendProductList/recommendProductList.js

公司内部使用自定义简单组件

/**
* 备注：推荐商品列表
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		FlatList,
		Dimensions,
} from 'react-native';
import { RecommendListModel,ComponentProps, RecommendProductProps, URequestModel, ResponseClass, FooterStatus,  RecommendItemProps, LinkType, } from "../../model";
import { RecommendProductItem } from 'uatcomponent/src/container/recommendProductList/view/recommendProductItem';
import { Footer } from 'uatcomponent/src/container/recommendProductList/view/footer';
import { EmptyView } from 'uatcomponent/src/container/recommendProductList/view/emptyView';
import { Loading } from 'uatcomponent/src/container/recommendProductList/view/loading';
import { data } from 'uatcomponent/src/container/recommendProductList/recommendProductList.data';
import { autoBaseUrl, isWidthDevice } from 'uatcomponent/src/util';
import { ProductList } from 'uatcomponent/src/container/productList/productList';

type Props = {
		style : ViewStyle,
		
} & ComponentProps<RecommendListModel,RecommendProductProps>;



type State = {
	isLoadingData : Boolean,//是否获取初次数据中
	isLoadingMore : Boolean,//是否加载更多数据中
	pageNum       : Number ,//页数
	lastLoadCount : Number ,//最后一次记录到的数据条数
	footerStatus  : FooterStatus,//底部组件状态
	data 					: RecommendProductProps[],//数据列表
};

const SCREEN_WIDTH : Number = Dimensions.get('window').width;
export class RecommendProductList extends Component <Props,State>{
		static defaultProps :Props = {
		}
		state:State={
			isLoadingData : true,
			isLoadingMore : false,
			pageNum  			: 1,
			lastLoadCount : 0,
			footerStatus  : 'hide',
			data 					: [],

		}
		/**渲染底部视图
		 * 当组件处于最底部时，需要显示加载更多样式
		 */
		footerRender = ()=>{
			const {dataInfo} = this.props;
			const {footerStatus} = this.state;
			if(dataInfo.arr.length == dataInfo.index+1){
				return <Footer type={footerStatus}/>
			}else{
				return <View />
			}
		}

		componentDidMount () {
			this.getData(this.state.pageNum);
		}

		/**获取数据 */
		getData = (pageNum : Number)=>{
			let requestInfo : URequestModel = this.props.request(this.props.data);
			if(!requestInfo){
				this.handleRequestFail(this.props,this.state);
			}else{
				this.preHandleRequest(pageNum);
				let params : URequestModel = {...requestInfo,params:{...requestInfo.params,pageNum:pageNum}}
				let info : Object = { 
															method:requestInfo.method,
															headers:requestInfo.header,
														}
				if(requestInfo.method!='GET'){
					info['body']=JSON.stringify(requestInfo.params);
				}
				console.log(requestInfo.url)
				fetch(requestInfo.url,info)
						.then(res=>res.json())
						.then(res=>{

							this.afterHandleRequest(new ResponseClass(res),pageNum);
						})
						.catch(err=>{
							this.handleRequestFail(pageNum,err)
						})
			}
		}

		/**请求前处理 
		 * @param pageNum 请求页数
		*/
		preHandleRequest = (pageNum:Number)=>{
			this.setState({
				isLoadingData : pageNum==1 || !pageNum,
				isLoadingMore : !(pageNum==1||!pageNum),
				footerStatus  : pageNum>1?'loading':'normal',
			})
		}

		/**请求后处理 */
		afterHandleRequest = (response:ResponseClass,pageNum:Number)=>{
			if(response.isSuccess()){
				this.setState({
					isLoadingData:false,
					isLoadingMore:false,
					pageNum : pageNum,
					lastLoadCount : response.data instanceof Array ? response.data.length : 0,
					footerStatus :response.data.length==this.props.data.content.goodsize ?'normal':'noMore',
					// footerStatus :response.data.length==2 ?'normal':'noMore',
					data : pageNum==1 ? response.data : [...this.state.data,...response.data],
				},()=>{
					if(this.state.data.length == 0){
						this.setState({footerStatus:'hide'})
					}
				})
			}else{
				this.setState({
					isLoadingData : false,
					isLoadingMore:false,
					footerStatus:'hide',
				})
			}
		}

		/**请求失败处理 */
		handleRequestFail = (pageNum:Number,err:Error)=>{
			this.setState({
				isLoadingData :false,
				isLoadingMore:false,
				footerStatus:'loadFail',
			})
		}

		/**空数据渲染 */
		emptyRender = (state:State)=>{
			const {isLoadingData,data} = state;
			if(isLoadingData){
				return <Loading />
			}else if(data.length==0){
				return <EmptyView />
			}else{
				return <View />
			}
			
		}

		/**点击商品 */
		onItemClick = (data:RecommendItemProps)=>{
			this.props.onClick && this.props.onClick(this.props.data,{linkType:LinkType.SelectProduct,
																																link:`productDetail?ProductID=${data.item_id}`,
																																title:data.title,
																																showtitle :data.title,
																															  pic:data.pic});
		}
		render(){
				const {style,data,baseUrl,} = this.props;
		
				const {
					isLoadingData ,
					isLoadingMore ,
					pageNum ,
					lastLoadCount ,
					footerStatus ,
				} = this.state;
				const listData : RecommendProductProps[]= this.state.data;
				
				
				const isPad:Boolean = isWidthDevice();
				const columns:Number = isPad?3:2;
				
				return (
						<FlatList 
							data={listData}
							scrollEnabled={false}
							numColumns={columns}
							keyExtractor={(item,i)=>`recommendItem_${item.link}_${i}_${columns}`}
							renderItem={(item)=>{
								let STYLE:ViewStyle = ProductList.getStyleByType(isPad,item.index,columns);
								return <RecommendProductItem data={{...item.item,pic:autoBaseUrl(baseUrl,item.item.pic)}}
																						 style={STYLE} 
																						 onClick={this.onItemClick}
																						 itemWidth={STYLE.width} />
							}}
							ListFooterComponent={this.footerRender}
							ListEmptyComponent={()=>this.emptyRender(this.state)}
						/>
				)
		}
}

const styles = StyleSheet.create({
		container:{},
		itemContainer_left:{width:'50%',height:(SCREEN_WIDTH/2)+48,paddingLeft:10,paddingRight:5},
		itemContainer_right:{width:'50%',height:(SCREEN_WIDTH/2)+48,paddingRight:10,paddingLeft:5},
})