接 人气单品 review by zhanglixia

@@ -72,7 +72,11 @@ export default class BrandStore extends Component {
             }
             break;
             case 'productList': {
-                return null;
+                return (
+                    <BrandStoreFilter
+                        onPressFilter={this.props.onPressFilter}
+                    />
+                );
             }
             break;
             default:
@@ -146,8 +150,8 @@ export default class BrandStore extends Component {
                     {
                         return (
                             <HotProducts
-                                resource={rowData}
-                                onPressRecommendItem={this.props.onPressRecommendItem}
+                              resource={rowData}
+                              onPressRecommendItem={this.props.onPressRecommendItem}
                             />
                         );
                     }

@@ -13,6 +13,7 @@ const {
     TouchableOpacity,
 } = ReactNative;
 import {Map} from 'immutable';
+import BrandProductListCell from './BrandProductListCell';
 
 export default class HotProducts extends React.Component {
 
@@ -27,33 +28,17 @@ export default class HotProducts extends React.Component {
     componentDidMount() {
     }
 
-	_pressRow(rowData){
-		// this.props.onPressRecommendItem(rowData.url)
-  	}
-
 	renderRow(rowData,sectionID,rowID,highlightRow) {
 
-		let data = rowData.toJS();
-		let path =  data.default_images;
-		let url = data.default_images.replace('{width}', IMAGE_WIDTH).replace('{height}', IMAGE_HEIGHT);
-
+		let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
+		let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft, marginTop: 0} : {paddingLeft};
 		return (
-			<TouchableOpacity activeOpacity={0.5} onPress={() => this._pressRow(rowData)}>
-				<View style={{width:itemWidth,height:itemHeight,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
-					<View style={{width:imageWidth,height:imageHeight,marginLeft:20,marginTop:10}}>
-						<Image
-						 	source={{uri: url}}
-						 	style={{width:imageWidth,height:imageHeight}}
-							resizeMode={'cover'}>
-							<View style={styles.itemTitle}>
-			  					<Text numberOfLines={1} style={styles.itemText}>{data.product_name}</Text>
-								<Text numberOfLines={1} style={styles.itemText}>{'¥'+data.market_price}</Text>
-							</View>
-						</Image>
-					</View>
-				</View>
-			</TouchableOpacity>
-
+			<BrandProductListCell
+				style={[styles.listContainer, customStyle]}
+				key={'row' + rowID}
+				rowID={rowID}
+				data={rowData}
+			/>
 		);
 	}
 
@@ -69,36 +54,35 @@ export default class HotProducts extends React.Component {
 
     render() {
 		let list = this.props.resource;
-        if (list.length != 0) {
-            let backgroundWidth =  Dimensions.get('window').width;
-    		let backgroundHeight = 64 + 20 + Math.ceil(list.length/2) * (IMAGE_RATIO * backgroundWidth/2);
-            return (
-    			<View style={{width: backgroundWidth,height:backgroundHeight,backgroundColor:'white'}}>
-    				<ListView
-    				    automaticallyAdjustContentInsets={false}
-    				    contentContainerStyle={styles.grid}
-    				    dataSource={this.dataSource.cloneWithRows(list)}
-    				    renderRow={this.renderRow.bind(this)}
-    					renderHeader = {this.renderHeader.bind(this)}
-    					pageSize={Math.ceil(list.length/2)}
-                        enableEmptySections = {true}
-    			     />
-    			</View>
-    		);
-        }else {
-            return null;
-        }
-
+		if (list.length == 0) {
+			return null;
+		}
+
+        let backgroundWidth =  Dimensions.get('window').width;
+		let backgroundHeight = 64 + 20 + Math.ceil(list.length/2) * (rowHeight+rowMarginHorizontal);
+        return (
+			<View style={{width: backgroundWidth,height:backgroundHeight,backgroundColor:'white'}}>
+				<ListView
+				    automaticallyAdjustContentInsets={false}
+				    contentContainerStyle={styles.grid}
+				    dataSource={this.dataSource.cloneWithRows(list)}
+				    renderRow={this.renderRow.bind(this)}
+					renderHeader = {this.renderHeader.bind(this)}
+					pageSize={Math.ceil(list.length/2)}
+                    enableEmptySections = {true}
+			     />
+				 <View style={{width: width, height:20, backgroundColor:'#f0f0f0'}}>
+				 </View>
+			</View>
+		);
 	}
 };
 
-const IMAGE_WIDTH = 145;
-const IMAGE_HEIGHT = 193;
-const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
-const itemWidth= Dimensions.get('window').width/2-10;
-const itemHeight= Dimensions.get('window').width/2 * IMAGE_RATIO;
-const imageWidth= Dimensions.get('window').width/2 - 30;
-const imageHeight= (Dimensions.get('window').width/2 - 30) * IMAGE_RATIO;
+let {width, height} = Dimensions.get('window');
+let rowWidth = Math.ceil(137.5 * width / 320);
+let rowHeight = Math.ceil(254 * width / 320);
+let rowMarginTop = Math.ceil(10 * width / 320);
+let rowMarginHorizontal = (width - rowWidth * 2) / 3;
 
 const styles = StyleSheet.create({
 	 grid:{
@@ -117,23 +101,13 @@ const styles = StyleSheet.create({
 	   	borderBottomColor: '#CCC',
 	   	borderBottomWidth: 0.5,
     },
-	itemTitle:{
-		marginTop:imageHeight - 30,
-		justifyContent: 'center',
-		height:30,
-		width:imageWidth,
-		backgroundColor:'gray',
-    },
-	itemText: {
-        fontWeight: 'bold',
-		textAlign: 'left',
-		color: 'white',
-		fontSize: 10,
-    },
 	text: {
         fontWeight: 'bold',
 		textAlign: 'left',
 		color: 'gray',
 		fontSize: 20,
     },
+	listContainer: {
+        width: width / 2,
+    },
 });