add 逛详情 商品列表 新样式 review by hongmo

@@ -3,6 +3,7 @@
 import React from 'react';
 import ReactNative from 'react-native';
 import Immutable, {Map} from 'immutable';
+import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
 
 const {
   AppRegistry,
@@ -14,6 +15,7 @@ const {
   TouchableOpacity,
   Platform,
   NativeModules,
+  ListView,
 } = ReactNative;
 
 
@@ -23,6 +25,14 @@ export default class GoodsCell extends React.Component {
         this.state = {
             moreProduct: true,
         };
+
+        this.dataSource = new ListView.DataSource({
+			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+		});
+        this.renderRow = this.renderRow.bind(this);
+        this._renderCellType1 = this._renderCellType1.bind(this);
+        this._renderCellType2 = this._renderCellType2.bind(this);
+
     }
 
     shouldComponentUpdate(nextProps,nextState){
@@ -33,22 +43,45 @@ export default class GoodsCell extends React.Component {
         }
     }
 
-    render() {
-		let {resource, articleId} = this.props;
-		let originList = resource.get('productList');
-        let listSize = originList?originList.size:0;
-		if (!originList || listSize == 0) {
-			return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+		let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
+		let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
+		return (
+			<BrandProductListCell
+				style={[styles.listContainer, customStyle]}
+				key={'row' + rowID}
+				rowID={rowID}
+				data={rowData}
+				onPressProduct={this.props.onPressProduct}
+			/>
+		);
     }
-        let list = originList;
-        if (this.state.moreProduct && listSize > 2) {
-            list = originList.slice(0,2);
+
+    //两列多行的样式
+    _renderCellType2(list) {
+        let backgroundWidth =  width;
+        let backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20;
+        return(
+            <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
+                <ListView
+                    contentContainerStyle={styles.contentContainer}
+                    initialListSize={Math.ceil(list.size)}
+                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
+                    enableEmptySections={true}
+                    renderRow={this.renderRow}
+                    scrollEnabled={false}
+                    scrollsToTop={false}
+                />
+            </View>
+        );
     }
-        let surplusSize = listSize-2;
-        let moreStr = '展开剩余'+ surplusSize + '个商品';
+
+    //单列多行的样式
+    _renderCellType1(list) {
+
         let backgroundWidth =  width;
-        let showMoreViewHeigth = (this.state.moreProduct && listSize > 2)?60:0;
-		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
+		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1);
+
         return(
 			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
                 {list.map((value, i) => {
@@ -101,12 +134,44 @@ export default class GoodsCell extends React.Component {
                         </TouchableOpacity>
                     );
                 })}
-                {(this.state.moreProduct && listSize > 2) ? <TouchableOpacity style={styles.more} activeOpacity={0.5} onPress={() => {
-                    let params = {
-                        ID: articleId + '' ,
-                    };
-                    NativeModules.YH_CommonHelper.logEvent('YB_STROLL_DETAIL_MORE_GODS_C', params);
+			</View>
+		);
+    }
 
+    render() {
+		let {resource, articleId} = this.props;
+		let originList = resource.get('productList');
+        let display_template = resource.get('display_template')?resource.get('display_template'):1;
+        let listSize = originList?originList.size:0;
+		if (!originList || listSize == 0) {
+			return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
+		}
+        let prudoctLimitRow = 2;
+        if (display_template == 2) {
+            prudoctLimitRow = 4;
+        }
+
+        let list = originList;
+        if (this.state.moreProduct && listSize > prudoctLimitRow) {
+            list = originList.slice(0,prudoctLimitRow);
+        }
+        let surplusSize = listSize-prudoctLimitRow;
+        let moreStr = '展开剩余'+ surplusSize + '个商品';
+        let backgroundWidth =  width;
+        let showMoreViewHeigth = (this.state.moreProduct && listSize > prudoctLimitRow)?60:0;
+		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
+
+        if (display_template == 2) {
+            backgroundHeight =  Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20 + showMoreViewHeigth;
+        }
+
+		return(
+			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
+                {display_template == 1 ? this._renderCellType1(list) : this._renderCellType2(list)}
+                {(this.state.moreProduct && listSize > 2) ?
+                    <TouchableOpacity style={styles.more} activeOpacity={0.5} onPress={() => {
+                        let params = {ID: articleId + ''};
+                        NativeModules.YH_CommonHelper.logEvent('YB_STROLL_DETAIL_MORE_GODS_C', params);
                         this.setState({moreProduct: !this.state.moreProduct});
                     }}>
                         <View style={styles.more}>
@@ -125,6 +190,9 @@ let {width, height} = Dimensions.get('window');
 const DEVICE_WIDTH_RATIO = width / 750;
 let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
 let imageWidth =  Math.ceil((rowHeight - 20) * (235/314));
+let rowWidth = Math.ceil(137.5 * width / 320);
+let rowMarginHorizontal = (width - rowWidth * 2) / 3;
+let cellHeight = Math.ceil(254 * (width / 320));
 
 let styles = StyleSheet.create({
     content_View: {
@@ -132,6 +200,13 @@ let styles = StyleSheet.create({
         width:width,
         backgroundColor: 'white',
     },
+    contentContainer:{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    listContainer: {
+		width: width / 2,
+	},
     single_View: {
         height: rowHeight,
         width:width,