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

@@ -3,6 +3,7 @@
 import React from 'react';
 import React from 'react';
 import ReactNative from 'react-native';
 import ReactNative from 'react-native';
 import Immutable, {Map} from 'immutable';
 import Immutable, {Map} from 'immutable';
+import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
 
 
 const {
 const {
   AppRegistry,
   AppRegistry,
@@ -14,6 +15,7 @@ const {
   TouchableOpacity,
   TouchableOpacity,
   Platform,
   Platform,
   NativeModules,
   NativeModules,
+  ListView,
 } = ReactNative;
 } = ReactNative;
 
 
 
 
@@ -23,6 +25,14 @@ export default class GoodsCell extends React.Component {
         this.state = {
         this.state = {
             moreProduct: true,
             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){
     shouldComponentUpdate(nextProps,nextState){
@@ -33,23 +43,46 @@ 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'}}/>);
-		}
-        let list = originList;
-        if (this.state.moreProduct && listSize > 2) {
-            list = originList.slice(0,2);
-        }
-        let surplusSize = listSize-2;
-        let moreStr = '展开剩余'+ surplusSize + '个商品';
+    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}
+			/>
+		);
+    }
+
+    //两列多行的样式
+    _renderCellType2(list) {
         let backgroundWidth =  width;
         let backgroundWidth =  width;
-        let showMoreViewHeigth = (this.state.moreProduct && listSize > 2)?60:0;
-		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
-		return(
+        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>
+        );
+    }
+
+    //单列多行的样式
+    _renderCellType1(list) {
+
+        let backgroundWidth =  width;
+		let backgroundHeight = Math.ceil(list.size) * (rowHeight+1);
+
+        return(
 			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
 			<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
                 {list.map((value, i) => {
                 {list.map((value, i) => {
                     let product = value?value.toJS():null;
                     let product = value?value.toJS():null;
@@ -101,21 +134,53 @@ export default class GoodsCell extends React.Component {
                         </TouchableOpacity>
                         </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);
-
-                    this.setState({moreProduct: !this.state.moreProduct});
-                }}>
-                    <View style={styles.more}>
-                        <Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
-                        <View style={styles.arrowView}>
-                            <Image source={require('../../image/arrow_ic.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
+			</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}>
+                            <Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
+                            <View style={styles.arrowView}>
+                                <Image source={require('../../image/arrow_ic.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
+                            </View>
                         </View>
                         </View>
-                    </View>
-                </TouchableOpacity>:null}
+                    </TouchableOpacity>:null}
 			</View>
 			</View>
 		);
 		);
     }
     }
@@ -125,6 +190,9 @@ let {width, height} = Dimensions.get('window');
 const DEVICE_WIDTH_RATIO = width / 750;
 const DEVICE_WIDTH_RATIO = width / 750;
 let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
 let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
 let imageWidth =  Math.ceil((rowHeight - 20) * (235/314));
 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({
 let styles = StyleSheet.create({
     content_View: {
     content_View: {
@@ -132,6 +200,13 @@ let styles = StyleSheet.create({
         width:width,
         width:width,
         backgroundColor: 'white',
         backgroundColor: 'white',
     },
     },
+    contentContainer:{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    listContainer: {
+		width: width / 2,
+	},
     single_View: {
     single_View: {
         height: rowHeight,
         height: rowHeight,
         width:width,
         width:width,