添加 一个recommend_content_two 控件 review by hongmo

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Swiper from 'react-native-swiper';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import SlicedImage from '../../../common/components/SlicedImage';
+import Immutable, {Map} from 'immutable';
+
+const {
+    View,
+    Image,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+export default class GlobalHomeSwiper extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this.dot = <View
+            style={{
+                backgroundColor:'rgba(0,0,0,.2)',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: (Platform.OS === 'ios')?3:23,
+                marginBottom: 0,
+            }}
+        />;
+        this.activeDot = <View
+            style={{
+                backgroundColor:'white',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: 3,
+                marginBottom: 0,
+            }}
+        />;
+    }
+
+    shouldComponentUpdate(nextProps){
+
+		if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+		} else {
+            return true;
+		}
+	}
+
+
+    render() {
+
+        let {resource} = this.props;
+        let res = resource.toJS();
+        let list = res.data;
+
+        if (!list) {
+			return null;
+		}
+
+        if (list.length == 1) {
+            return (
+                <View style={styles.container}>
+                    <TouchableOpacity
+                        activeOpacity={1}
+                        style={{width: width, height: height-15}}
+                        onPress={() => {
+                            // this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url);
+                        }}
+                    >
+                        <SlicedImage source={{uri: list[0].src}} style={width, height-15}/>
+                    </TouchableOpacity>
+                </View>
+            );
+        } else {
+            return (
+                <View style={styles.container}>
+                    <Swiper
+                        style={styles.banner}
+                        showsButtons={false}
+                        loop={true}
+                        autoplay={true}
+                        autoplayTimeout={2}
+                        paginationStyle={{bottom: 8}}
+                        dot={this.dot}
+                        activeDot={(Platform.OS === 'ios')?this.activeDot:null}
+                        width={width}
+                        height={height-15}
+                    >
+                        {list.map((item, i) => {
+                            return (
+                                <TouchableOpacity
+                                    key={i}
+                                    activeOpacity={1}
+                                    onPress={() => {
+     		                            this.props.onPressSlideItem && this.props.onPressSlideItem(item.url);
+                                    }}
+                                >
+                                    <SlicedImage source={{uri: item.src}} style={{width, height}}/>
+                                </TouchableOpacity>
+                            );
+                        })}
+                    </Swiper>
+                </View>
+            );
+        }
+    }
+}
+
+let {width} = Dimensions.get('window');
+let height = Math.ceil((310 / 640) * width);
+
+let styles = StyleSheet.create({
+
+    container: {
+        width: width,
+        height: height,
+        backgroundColor:'#f0f0f0',
+    },
+    banner: {
+
+    },
+
+});

@@ -13,7 +13,8 @@ import ReactNative, {
     Platform,
 } from 'react-native';
 
-
+import GlobalHomeSwiper from './GlobalHomeSwiper';
+import RecommendContentTwo from './RecommendContentTwo';
 
 export default class Home extends Component {
 
@@ -51,6 +52,36 @@ export default class Home extends Component {
     }
 
     _renderRow(rowData: object, sectionID: number, rowID: number) {
+        // console.log(rowData.toJS());
+        if (rowData.get('template_name') == 'focus') {
+            return (
+                <GlobalHomeSwiper resource={rowData}/>
+            );
+        }else if (rowData.get('template_name') == 'recommend_content_two') {
+            return (
+                <RecommendContentTwo resource={rowData}/>
+            );
+        }else if (rowData.get('template_name') == 'recommend_content_five') {
+            return (
+                <Text>recommend_content_five</Text>
+            );
+        }else if (rowData.get('template_name') == 'recommend_content_one') {
+            return (
+                <Text>recommend_content_one</Text>
+            );
+        }else if (rowData.get('template_name') == 'divideImage') {
+            return (
+                <Text>divideImage</Text>
+            );
+        }else if (rowData.get('template_name') == 'small_pic') {
+            return (
+                <Text>small_pic</Text>
+            );
+        }else if (rowData.get('template_name') == 'paramsGroup') {
+            return (
+                <Text>paramsGroup</Text>
+            );
+        }
         return null;
     }
 
@@ -64,8 +95,7 @@ export default class Home extends Component {
 
     render() {
         let {list, ptr, isFetching, endReached} = this.props.data;
-        let dataSource = list.toJS();
-
+        let dataSource = list.toArray();
         let isPullToRefresh = ptr && isFetching;
         let isLoadingMore = dataSource.size != 0 && !ptr && isFetching;
 

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import {getSlicedUrl} from '../../../classify/utils/Utils';
+import Immutable, {Map} from 'immutable';
+import DeviceInfo from 'react-native-device-info';
+
+const {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ListView,
+  Dimensions,
+  TouchableOpacity,
+  PixelRatio,
+  Platform,
+} = ReactNative;
+
+export default class RecommendContentTwo extends React.Component {
+    constructor(props) {
+      super(props);
+      this.dataSource = new ListView.DataSource({
+          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+      });
+	  this.renderHeader = this.renderHeader.bind(this);
+	  this.renderRow = this.renderRow.bind(this);
+    }
+
+    shouldComponentUpdate(nextProps){
+
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+	renderHeader() {
+		let fontFamilyStyle = {};
+		if (Platform.OS === 'ios') {
+			let systemVersion = DeviceInfo.getSystemVersion();
+			systemVersion = parseFloat(systemVersion);
+			if (systemVersion >= 9.0) {
+				fontFamilyStyle = {fontFamily: 'PingFang SC'};
+			}
+		}
+
+        let data = this.props.resource.get('data');
+        let res = data.toJS();
+		let big_imageData = res.big_image;
+		let newSrc = getSlicedUrl(big_imageData[0].src, 320, 200, 2);
+        let title = res.title;
+		return(
+			<View style={styles.titleView}>
+				<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
+				<View style={styles.title}>
+					<Text style={[styles.text, fontFamilyStyle]}>{title.title}</Text>
+				</View>
+				<Image
+					source={{uri: newSrc}}
+					style={styles.largeImage}
+					resizeMode={'contain'}
+				></Image>
+				<View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
+			</View>
+		);
+	}
+
+    renderRow(rowData,sectionID,rowID,highlightRow) {
+
+        let newSrc = getSlicedUrl(rowData.src, 100, 100, 2);
+        return (
+            <TouchableOpacity activeOpacity={0.5} onPress={() => {
+				// this.props.onPressBrandItem && this.props.onPressBrandItem(rowData);
+			}}>
+                <View style={styles.row}>
+                    <View style={styles.thumbnailV}>
+                          <Image
+                            source={{uri: newSrc}}
+                            style={styles.thumbnail}
+                            // resizeMode={'contain'}
+                          ></Image>
+                    </View>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+    render() {
+		let {resource} = this.props;
+        let data = resource.get('data');
+        let res = data.toJS();
+		let big_imageData = res.big_image;
+        let title = res.title;
+		let list = res.list;
+
+        if (resource && list.length == 0) {
+			return null;
+		}
+
+		let backgroundWidth =  width;
+		let backgroundHeight =  largeImageH + Math.ceil(list.length / 3) * itemWidth + 40;
+		return (
+			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'#f0f0f0'}}>
+				<ListView
+					contentContainerStyle={styles.contentContainer}
+					dataSource={this.dataSource.cloneWithRows(list)}
+					renderRow={this.renderRow}
+					renderHeader={this.renderHeader}
+					enableEmptySections={true}
+					pageSize={Math.ceil(list.length/3)}
+					scrollEnabled={false}
+					scrollsToTop={false}
+				/>
+				<View style={{
+					width: width,
+					height: 15,
+					backgroundColor: '#f0f0f0',
+				}}/>
+			</View>
+		);
+    }
+};
+
+
+let {width, height} = Dimensions.get('window');
+let itemWidth= Math.ceil(width/3);
+let itemHeight = itemWidth;
+let largeImageW = width;
+let largeImageH = Math.ceil((200/320)*width);
+
+let styles = StyleSheet.create({
+	contentContainer: {
+		flexDirection: 'row',
+        flexWrap: 'wrap',
+		alignItems:'flex-start',
+	},
+    row: {
+        width: itemWidth,
+        height: itemWidth,
+        backgroundColor: '#e5e5e5',
+     },
+    thumbnailV: {
+		width: itemWidth,
+		height: itemHeight,
+	},
+    thumbnail: {
+		width: itemWidth-0.5,
+		height: itemHeight-0.5,
+        backgroundColor: 'white',
+		borderRightWidth: 0.5,
+        borderBottomWidth: 0.5,
+        borderColor: '#e5e5e5',
+	},
+	titleView: {
+		height: largeImageH+40,
+		width:width,
+        backgroundColor: 'white',
+    },
+	title: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: 39,
+		width:width,
+        backgroundColor: 'white',
+    },
+	text: {
+		textAlign: 'center',
+		fontSize: 16,
+		fontWeight: 'bold',
+		color: '#444',
+    },
+	largeImage: {
+		width: largeImageW,
+		height: largeImageH,
+		backgroundColor: 'white',
+	},
+});

@@ -11,4 +11,8 @@ export default keyMirror({
     GET_GLOBAL_HOME_RESOURCE_SUCCESS: null,
     GET_GLOBAL_HOME_RESOURCE_FAILURE: null,
 
+    GET_GLOBAL_PRODUCT_LIST_REQUEST: null,
+    GET_GLOBAL_PRODUCT_LIST_SUCCESS: null,
+    GET_GLOBAL_PRODUCT_LIST_FAILURE: null,
+
 });

@@ -11,10 +11,12 @@ const {
 	GET_GLOBAL_HOME_RESOURCE_SUCCESS,
 	GET_GLOBAL_HOME_RESOURCE_FAILURE,
 
+	GET_GLOBAL_PRODUCT_LIST_REQUEST,
+	GET_GLOBAL_PRODUCT_LIST_SUCCESS,
+	GET_GLOBAL_PRODUCT_LIST_FAILURE,
 } = require('../../constants/actionTypes').default;
 
 
-
 export function getGlobalHomeResourceRequest(reload) {
     return {
         type: GET_GLOBAL_HOME_RESOURCE_REQUEST,
@@ -49,3 +51,38 @@ export function getGlobalHomeResource(reload=false) {
 		});
 	};
 }
+
+
+export function getGlobalProductListRequest() {
+    return {
+        type: GET_GLOBAL_PRODUCT_LIST_REQUEST,
+    }
+}
+
+export function getGlobalProductListSuccess(json) {
+    return {
+        type: GET_GLOBAL_PRODUCT_LIST_SUCCESS,
+        payload: json
+    }
+}
+
+export function getGlobalProductListFailure(error) {
+    return {
+        type: GET_GLOBAL_PRODUCT_LIST_FAILURE,
+        payload: error
+    }
+}
+export function getGlobalProductList() {
+	return (dispatch, getState) => {
+		let {app, home} = getState();
+
+		dispatch(getGlobalProductListRequest());
+        return new HomeService(app.serviceHost).getGlobalProductList()
+        .then(json => {
+			dispatch(getGlobalProductListSuccess(json));
+		})
+		.catch(error => {
+			dispatch(getGlobalProductListFailure(error));
+		});
+	};
+}

@@ -10,6 +10,10 @@ const {
 	GET_GLOBAL_HOME_RESOURCE_SUCCESS,
 	GET_GLOBAL_HOME_RESOURCE_FAILURE,
 
+	GET_GLOBAL_PRODUCT_LIST_REQUEST,
+	GET_GLOBAL_PRODUCT_LIST_SUCCESS,
+	GET_GLOBAL_PRODUCT_LIST_FAILURE,
+
 } = require('../../constants/actionTypes').default;
 
 const initialState = new InitialState;
@@ -52,6 +56,21 @@ export default function homeReducer(state=initialState, action) {
 			.set('ptr', false);
 		}
 		break;
+		case GET_GLOBAL_PRODUCT_LIST_REQUEST:
+		{
+
+		}
+		break;
+		case GET_GLOBAL_PRODUCT_LIST_SUCCESS:
+		{
+
+		}
+		break;
+		case GET_GLOBAL_PRODUCT_LIST_FAILURE:
+		{
+
+		}
+		break;
     }
 
     return state;

@@ -28,6 +28,25 @@ export default class HomeService {
 		.catch((error) => {
 			throw(error);
 		});
-}
+	}
+
+	async getGlobalProductList(fromPage='iFP_GlobalProductList',limit= 60,page,order,sort) {
+		return await this.api.post({
+			url: '/product/api/v2/detail/getlist',
+			body: {
+				fromPage,
+				limit,
+				page,
+				order,
+				sort,
+			}
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((error) => {
+			throw(error);
+		});
+	}
 
 }