添加 goodsGroup UI review jianqiu

@@ -10,6 +10,7 @@ import GoodsCell from './GoodsCell';
 import Header from './Header';
 import Header from './Header';
 import MoreLink from './MoreLink';
 import MoreLink from './MoreLink';
 import GoodsGroupHeader from './GoodsGroupHeader';
 import GoodsGroupHeader from './GoodsGroupHeader';
+import GoodsGroupList from './GoodsGroupList';
 
 
 import ReactNative, {
 import ReactNative, {
     View,
     View,
@@ -76,8 +77,16 @@ export default class Detail extends Component {
                     <Text>weixinPublic</Text>
                     <Text>weixinPublic</Text>
                 );
                 );
             }else if (template_name == 'goods_group') {
             }else if (template_name == 'goods_group') {
+                let {resource} = this.props;
+                let {goods_group_Filter} = resource;
+                let data = rowData.get('productList')?rowData.get('productList').toArray():null;
+                let list = data?data[goods_group_Filter]:null;
+
                 return (
                 return (
-                    <GoodsGroupHeader resource={rowData}/>
+                    <View style={styles.GoodsGroupHeader}>
+                        <GoodsGroupHeader resource={{rowData,goods_group_Filter}} onPressFilter= {this.props.onPressFilter}/>
+                        <GoodsGroupList resource={list}/>
+                    </View>
                 );
                 );
             }else if (template_name == 'goods') {
             }else if (template_name == 'goods') {
                 return (
                 return (
@@ -111,6 +120,7 @@ export default class Detail extends Component {
             brand,
             brand,
             otherArticle,
             otherArticle,
             weixin,
             weixin,
+            goods_group_Filter,
         } = resource;
         } = resource;
         let list = content?content.get('data'):[];
         let list = content?content.get('data'):[];
 
 
@@ -143,4 +153,7 @@ let styles = StyleSheet.create({
     contentContainer:{
     contentContainer:{
 
 
     },
     },
+    GoodsGroupHeader: {
+        flex: 1,
+    }
 });
 });

@@ -26,17 +26,7 @@ export default class GoodsGroupHeader extends React.Component {
             rowHasChanged: (r1, r2) => r1.key != r2.key,
             rowHasChanged: (r1, r2) => r1.key != r2.key,
         });
         });
 
 
-        this.state = {
-            selectedIndex: 0,
-        };
-    }
-
-    shouldComponentUpdate(nextProps){
-        if (nextProps.dataSource == this.props.dataSource) {
-            return false;
-        } else {
-            return true;
-        }
+        this.selectedIndex = 0;
     }
     }
 
 
     _renderRow(rowData, sectionID, rowID) {
     _renderRow(rowData, sectionID, rowID) {
@@ -45,14 +35,18 @@ export default class GoodsGroupHeader extends React.Component {
 		let cover = rowData.get('cover');
 		let cover = rowData.get('cover');
 		let url = getSlicedUrl(cover.get('cover'), 640, 640, 2);
 		let url = getSlicedUrl(cover.get('cover'), 640, 640, 2);
 		let borderWidth = 0;
 		let borderWidth = 0;
-		if (this.state.selectedIndex == rowID) {
+		if (this.selectedIndex == rowID) {
 			borderWidth = 1;
 			borderWidth = 1;
 		}
 		}
+
         return (
         return (
             <View style={{backgroundColor: 'white'}}>
             <View style={{backgroundColor: 'white'}}>
                 <View key={'row' + rowID} style={styles.rowContainer}>
                 <View key={'row' + rowID} style={styles.rowContainer}>
 					<TouchableOpacity onPress={() => {
 					<TouchableOpacity onPress={() => {
-	                    // this.props.onPressFilter && this.props.onPressFilter(rowID);
+						if (this.selectedIndex == rowID) {
+							return;
+						}
+	                    this.props.onPressFilter && this.props.onPressFilter(rowID);
 	                }}>
 	                }}>
 						<View style={{width: itemW - 20,height: itemH - 20,borderColor: 'black',borderWidth: borderWidth}}>
 						<View style={{width: itemW - 20,height: itemH - 20,borderColor: 'black',borderWidth: borderWidth}}>
 							<Image source={{uri: url}} style={{width: itemW - 20 - 2*borderWidth,height: itemH - 20 - 2*borderWidth,backgroundColor:'white',}} resizeMode={'contain'}></Image>
 							<Image source={{uri: url}} style={{width: itemW - 20 - 2*borderWidth,height: itemH - 20 - 2*borderWidth,backgroundColor:'white',}} resizeMode={'contain'}></Image>
@@ -65,7 +59,10 @@ export default class GoodsGroupHeader extends React.Component {
 
 
     render() {
     render() {
 		let {resource} = this.props;
 		let {resource} = this.props;
-		let list = resource.get('data');
+		let rowData = resource?resource.rowData:null;
+		this.selectedIndex = resource?resource.goods_group_Filter:0;
+
+		let list = rowData.get('data');
 		if (!list || list.size == 0) {
 		if (!list || list.size == 0) {
 			return null;
 			return null;
 		}
 		}

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Immutable, {Map} from 'immutable';
+import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
+
+const {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ListView,
+  Dimensions,
+  TouchableOpacity,
+} = ReactNative;
+
+
+export default class GoodsGroupList extends React.Component {
+    constructor(props) {
+        super(props);
+		this.dataSource = new ListView.DataSource({
+			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+		});
+        this.renderRow = this.renderRow.bind(this);
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+	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}
+			/>
+		);
+	}
+
+    render() {
+		let {resource} = this.props;
+		let list = resource?resource.get('list'):null;
+
+		if (!list || list.size == 0) {
+			return null;
+		}
+
+        let backgroundWidth =  width;
+		let backgroundHeight = 40 + Math.ceil(list.size / 2) * (rowHeight+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 {width, height} = Dimensions.get('window');
+let rowWidth = Math.ceil(137.5 * width / 320);
+let rowMarginHorizontal = (width - rowWidth * 2) / 3;
+const DEVICE_WIDTH_RATIO = width / 320;
+let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
+
+let styles = StyleSheet.create({
+	listContainer: {
+		width: width / 2,
+	},
+	contentContainer:{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+});

@@ -45,4 +45,5 @@ export default keyMirror({
     GET_ARTICLE_LIST_SUCCESS: null,
     GET_ARTICLE_LIST_SUCCESS: null,
     GET_ARTICLE_LIST_FAILURE: null,
     GET_ARTICLE_LIST_FAILURE: null,
 
 
+    SET_GOOESGROUP_FILTER: null,
 });
 });

@@ -49,7 +49,7 @@ class DetailContainer extends Component {
 
 
         this._onRefresh = this._onRefresh.bind(this);
         this._onRefresh = this._onRefresh.bind(this);
         this._onEndReached = this._onEndReached.bind(this);
         this._onEndReached = this._onEndReached.bind(this);
-
+        this._onPressFilter = this._onPressFilter.bind(this);
 
 
     }
     }
 
 
@@ -76,6 +76,10 @@ class DetailContainer extends Component {
         });
         });
     }
     }
 
 
+    _onPressFilter(value) {
+        this.props.actions.setGoodsGroupFilter(value);
+    }
+
     render() {
     render() {
         let {detail} = this.props;
         let {detail} = this.props;
 
 
@@ -88,6 +92,7 @@ class DetailContainer extends Component {
                     resource={detail}
                     resource={detail}
                     onRefresh={this._onRefresh}
                     onRefresh={this._onRefresh}
                     onEndReached={this._onEndReached}
                     onEndReached={this._onEndReached}
+                    onPressFilter= {this._onPressFilter}
                 />
                 />
             </View>
             </View>
         );
         );

@@ -37,6 +37,8 @@ const {
     PRODUCT_BY_SKNS_SUCCESS,
     PRODUCT_BY_SKNS_SUCCESS,
     PRODUCT_BY_SKNS_FAILURE,
     PRODUCT_BY_SKNS_FAILURE,
 
 
+	SET_GOOESGROUP_FILTER,
+
 } = require('../../constants/actionTypes').default;
 } = require('../../constants/actionTypes').default;
 
 
 export function setArticleId(id) {
 export function setArticleId(id) {
@@ -540,3 +542,10 @@ export function getWeixinPublic() {
 			});
 			});
 	};
 	};
 }
 }
+
+export function setGoodsGroupFilter(filter) {
+	return {
+		type: SET_GOOESGROUP_FILTER,
+		payload: filter
+	};
+}

@@ -34,6 +34,7 @@ let InitialState = Record({
         error: null,
         error: null,
         data: List(),
         data: List(),
     })),
     })),
+	goods_group_Filter: 0,
 });
 });
 
 
 export default InitialState;
 export default InitialState;

@@ -32,6 +32,8 @@ const {
 
 
     PRODUCT_BY_SKNS_SUCCESS,
     PRODUCT_BY_SKNS_SUCCESS,
 
 
+	SET_GOOESGROUP_FILTER,
+
 } = require('../../constants/actionTypes').default;
 } = require('../../constants/actionTypes').default;
 
 
 const initialState = new InitialState;
 const initialState = new InitialState;
@@ -145,6 +147,9 @@ export default function detailReducer(state=initialState, action) {
 				} = action.payload;
 				} = action.payload;
     		return state.setIn(['content', 'data', contentIndex, 'productList'], Immutable.fromJS(productList));
     		return state.setIn(['content', 'data', contentIndex, 'productList'], Immutable.fromJS(productList));
     	}
     	}
+		case SET_GOOESGROUP_FILTER: {
+			return state.set('goods_group_Filter', action.payload);
+    	}
     }
     }
 
 
     return state;
     return state;