add HotProducts review by zhanglixia

@@ -30,6 +30,7 @@ import Recommend from '../brandStore/brandStoreSubView/Cells/Recommend';
 import BrandProductFilter from '../brandStore/brandStoreSubView/Cells/BrandProductFilter'
 import ProductListCell from '../brandStore/brandStoreSubView/Cells/BrandProductListCell';
 import BrandStoreFilter from '../brandStore/brandStoreSubView/Cells/BrandStoreFilter';
+import HotProducts from '../brandStore/brandStoreSubView/Cells/HotProducts';
 
 
 export default class BrandStore extends Component {
@@ -143,6 +144,16 @@ export default class BrandStore extends Component {
                         );
                     }
                 break;
+                case '5':
+                    {
+                        return (
+                            <HotProducts
+                                resource={rowData}
+                                onPressRecommendItem={this.props.onPressRecommendItem}
+                            />
+                        );
+                    }
+                break;
                 default:
                     return null;
                     break;

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+
+const {
+    Image,
+	View,
+    StyleSheet,
+    Dimensions,
+	Text,
+	ListView,
+    TouchableOpacity,
+} = ReactNative;
+import {Map} from 'immutable';
+
+export default class HotProducts extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+		this.dataSource = new ListView.DataSource({
+			rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+		});
+	}
+
+    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);
+
+		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>
+
+		);
+	}
+
+	renderHeader(){
+	  	return(
+			<View style={styles.container}>
+				<View style={styles.title}>
+					<Text style={styles.text}>人气单品</Text>
+				</View>
+			</View>
+		);
+	}
+
+    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;
+        }
+
+	}
+};
+
+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;
+
+const styles = StyleSheet.create({
+	 grid:{
+		 flex: 1,
+         flexDirection: 'row',
+         flexWrap: 'wrap',
+         alignItems:'flex-start',
+     },
+
+	title:{
+		alignItems: 'center',
+		justifyContent: 'center',
+		height:64,
+		width:Dimensions.get('window').width,
+		backgroundColor:'white',
+	   	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,
+    },
+});