add yohoCoin RN UI review by zhanglixia

@@ -2,6 +2,12 @@
 
 import React, {Component} from 'react';
 import Immutable, {Map} from 'immutable';
+import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
+import YohoCoinNumHeader from './YohoCoinNumHeader';
+import YohoCoinBanner from './YohoCoinBanner';
+import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
+import DeviceInfo from 'react-native-device-info';
+import Weixin from '../../../guang/components/detail/Weixin';
 
 import ReactNative, {
     View,
@@ -21,6 +27,13 @@ export default class YohoCoin extends Component {
 
     constructor(props) {
         super(props);
+        this.renderRow = this.renderRow.bind(this);
+        this.renderSectionHeader = this.renderSectionHeader.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
+        });
     }
 
     shouldComponentUpdate(nextProps){
@@ -32,6 +45,50 @@ export default class YohoCoin extends Component {
         }
     }
 
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+        if (sectionID == 'yohoCoin') {
+            return (<YohoCoinNumHeader resource = {rowData} onPressYohoCoinDetail = {this.props.onPressYohoCoinDetail}/>)
+        }else if (sectionID == 'banner') {
+            return(<YohoCoinBanner resource = {rowData} onPressProduct={this.props.onPressBanner}/>)
+        }else if (sectionID == 'weixin') {
+            return(<Weixin resource={rowData} onPressWeixin={this.props.onPressWeixin}/>)
+        }else if (sectionID == 'favoriteTitle') {
+            let listNum = rowData;
+            if (listNum == 0) {
+                return null;
+            }
+            let fontFamilyStyle = {};
+     		if (Platform.OS === 'ios') {
+     			let systemVersion = DeviceInfo.getSystemVersion();
+     			systemVersion = parseFloat(systemVersion);
+     			if (systemVersion >= 9.0) {
+     				fontFamilyStyle = {fontFamily: 'PingFang SC'};
+     			}
+     		}
+    	  	return(
+				<View style={styles.title}>
+					<Text style={[styles.text, fontFamilyStyle]}>你可能喜欢</Text>
+				</View>
+    		);
+        }else if (sectionID == 'favorite') {
+            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.onPressProductCell}/>
+            );
+        }
+        return null;
+    }
+
+    renderSectionHeader(sectionData, sectionID) {
+        return null;
+    }
+
     render() {
 
         let {resource} = this.props;
@@ -42,18 +99,62 @@ export default class YohoCoin extends Component {
             favorite,
         } = resource;
 
+        let list = favorite?favorite.get('list'):null;
+
+        let dataSource = {
+            yohoCoin: [yohoCoin],
+            banner: [banner],
+            weixin: [weixin],
+            favoriteTitle: [list?list.size:0],
+            favorite: list?list.toArray():[],
+        }
+
         return (
             <View style={styles.container}>
-                <Text>YohoCoin</Text>
+                <ListView
+                    ref='YohoCoinList'
+                    contentContainerStyle={styles.contentContainer}
+                    enableEmptySections={true}
+                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
+                    renderRow={this.renderRow}
+                    renderSectionHeader={this.renderSectionHeader}
+                    onEndReached={() => {
+                        if (list && list.size > 0) {
+                            this.props.onEndReached && this.props.onEndReached();
+                        }
+                    }}
+                />
             </View>
         );
     }
 }
 
 let {width, height} = Dimensions.get('window');
+let rowWidth = Math.ceil(137.5 * width / 320);
+let rowMarginHorizontal = (width - rowWidth * 2) / 3;
 
 let styles = StyleSheet.create({
     container: {
         flex: 1,
     },
+    contentContainer:{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    listContainer: {
+        width: width / 2,
+    },
+    title: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 40,
+        width: width,
+        backgroundColor: 'white',
+    },
+    text: {
+        textAlign: 'left',
+        fontSize: 17,
+        fontWeight: 'bold',
+        color: 'rgba(0,0,0,0.3)',
+    },
 });

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Swiper from 'react-native-swiper';
+import YH_Image from '../../../common/components/YH_Image';
+import {getSlicedUrl} from '../../../classify/utils/Utils';
+
+const {
+    View,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+import Immutable, {Map} from 'immutable';
+
+export default class YohoCoinBanner extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this.dot = <View
+            style={{
+                backgroundColor:'rgba(0,0,0,.2)',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: (Platform.OS === 'ios')?3:1,
+                marginBottom: 0,
+            }}
+        />;
+        this.activeDot = <View
+            style={{
+                backgroundColor:'white',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: 3,
+                marginBottom: 0,
+            }}
+        />;
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    render() {
+
+		let resource = this.props.resource?this.props.resource.toJS():null;
+
+        if (!resource) {
+			return null;
+		}
+		let error = resource.error;
+		let data = resource.list;
+		if (error) {
+			return null;
+		}
+
+        if (data.length == 1) {
+			let newSrc = getSlicedUrl(data[0].src, width, swiperHeight);
+            return (
+				<View style={styles.container}>
+					<View style={{
+						width: width,
+						height: 20,
+						backgroundColor: 'rgb(240,240,240)',
+	        		}}/>
+	                <TouchableOpacity
+	                    activeOpacity={1}
+	                    style={{width: width, height: swiperHeight}}
+	                    onPress={() => {
+                            this.props.onPressProduct && this.props.onPressProduct(data[0].url)
+	                    }}
+	                >
+	                    <YH_Image
+	                        url={newSrc}
+	                        style={{ width: width, height: swiperHeight}}
+	                    />
+	                </TouchableOpacity>
+					<View style={{
+						width: width,
+						height: 15,
+						backgroundColor: 'rgb(240,240,240)',
+	        		}}/>
+				</View>
+            );
+        } else {
+            return (
+				<View style={styles.container}>
+					<View style={{
+						width: width,
+						height: 20,
+						backgroundColor: '#e0e0e0',
+					}}/>
+	                <Swiper
+	                    style={styles.banner}
+	                    showsButtons={false}
+	                    loop={true}
+	                    autoplay={true}
+	                    autoplayTimeout={2}
+	                    paginationStyle={{bottom: 8}}
+	                    dot={this.dot}
+	                    activeDot={(Platform.OS === 'ios')?this.activeDot:null}
+	                    width={width}
+	                    height={swiperHeight}
+	                >
+	                    {data.map((item, i) => {
+							let newSrc = getSlicedUrl(item.src, width, swiperHeight);
+	                        return (
+	                            <TouchableOpacity
+	                                key={i}
+	                                activeOpacity={1}
+	                                onPress={() => {
+                                        this.props.onPressProduct && this.props.onPressProduct(item.url,row_ID,1,template_name,template_id)
+	                                }}
+	                            >
+	                                <YH_Image
+	                                    url={newSrc}
+	                                    style={{width: width, height: swiperHeight}}
+	                                />
+	                            </TouchableOpacity>
+	                        );
+	                    })}
+	                </Swiper>
+					<View style={{
+						width: width,
+						height: 15,
+						backgroundColor: '#e0e0e0',
+					}}/>
+				</View>
+            );
+        }
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+let swiperHeight = Math.ceil((200 / 640) * width);
+
+let styles = StyleSheet.create({
+	container: {
+		width: width,
+		height: swiperHeight + 20 + 15,
+		backgroundColor: 'white',
+	},
+
+});

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+
+const {
+    Image,
+    View,
+    Text,
+    StyleSheet,
+    Dimensions,
+    TouchableOpacity,
+} = ReactNative;
+
+export default class YohoCoinNumHeader extends React.Component {
+
+    constructor(props) {
+        super (props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    render() {
+		let resource = this.props.resource?this.props.resource.toJS():null;
+		if (!resource) {
+			return null;
+		}
+		let notice = resource.notice;
+		let yohocoin_num = resource.yohocoin_num;
+		let yohoCoinCode = resource.yohoCoinCode;
+
+		let heigth_t = notice == '' ? headerHeight : headerHeight + noticeViewHeight;
+		return (
+			<View style={{width: width,height: heigth_t,backgroundColor: 'white',}}>
+				<View style={{width: width,height: headerHeight,backgroundColor: 'white',}}>
+					<View style={styles.numView}>
+						<Text style={styles.numText}>{yohocoin_num}</Text>
+					</View>
+					<View style={styles.numDetailView}>
+						<Image style={styles.icon} source={require('../../image/yohocoin_icon.png')}/>
+						<Text style={styles.numDetailText}>个有货币</Text>
+					</View>
+					<View style={styles.button}>
+						<TouchableOpacity
+						   activeOpacity={1}
+						   style={{width: 100, 	height: ( 38/154 ) * 100}}
+						   onPress={() => {
+								this.props.onPressYohoCoinDetail && this.props.onPressYohoCoinDetail(yohoCoinCode)
+						   }}
+					   	>
+							<Image style={styles.image} source={require('../../image/check_detail_btn.png')}/>
+						</TouchableOpacity>
+					</View>
+				</View>
+				{notice != '' ?
+					<View style={styles.notice}>
+						<Image style={styles.noticeIcon} source={require('../../image/yohocoin_notice_ic.png')}/>
+						<Text style={styles.noticeText}>{notice}</Text>
+					</View>
+				: null}
+			</View>
+		)
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+let headerHeight = Math.ceil((250 / 640) * width);
+let noticeViewHeight = Math.ceil((70 / 640) * width);
+
+const styles = StyleSheet.create({
+	numView: {
+		marginTop: 20,
+		width: width,
+		height: 60,
+		backgroundColor: 'white',
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	numText: {
+		width:width,
+        backgroundColor: 'white',
+		color: 'rgb(206,11,36)',
+		fontSize: 60,
+		textAlign: 'center',
+	},
+	numDetailView: {
+		width: width,
+		height: 25,
+		backgroundColor: 'white',
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+	},
+	icon: {
+		width: 15,
+		height: 15,
+	},
+	numDetailText: {
+		backgroundColor: 'white',
+		color: 'gray',
+		fontSize: 14,
+		textAlign: 'center',
+	},
+	button: {
+		marginTop: 7,
+		width: width,
+		height: 40,
+		backgroundColor: 'white',
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	image: {
+		width: 100,
+		height: ( 38/154 ) * 100,
+	},
+	notice: {
+		width: width,
+		height: noticeViewHeight,
+		backgroundColor: 'rgb(217,217,217)',
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+	noticeIcon: {
+		width: 15,
+		height: 15,
+		marginLeft: 15,
+	},
+	noticeText: {
+		backgroundColor: 'transparent',
+		color: 'rgb(206,11,36)',
+		fontSize: 11,
+		marginLeft: 20,
+	}
+});

@@ -44,6 +44,11 @@ function mapDispatchToProps(dispatch) {
 class YohoCoinContainer extends Component {
     constructor(props) {
         super(props);
+        this._onEndReached = this._onEndReached.bind(this);
+        this._onPressProductCell = this._onPressProductCell.bind(this);
+        this._onPressWeixin = this._onPressWeixin.bind(this);
+        this._onPressBanner = this._onPressBanner.bind(this);
+        this._onPressYohoCoinDetail = this._onPressYohoCoinDetail.bind(this);
     }
 
     componentDidMount() {
@@ -57,6 +62,31 @@ class YohoCoinContainer extends Component {
 
     }
 
+    _onPressWeixin(data) {
+        ReactNative.NativeModules.YH_CommonHelper.copyWechatIdToClipboard(data);
+    }
+
+    _onEndReached() {
+        this.props.actions.fetchFavoriteList();
+    }
+
+    _onPressYohoCoinDetail(yohoCoinCode) {
+        ReactNative.NativeModules.YH_MyAssetsViewHelper.pushCoinDetail(yohoCoinCode);
+    }
+
+    _onPressBanner (url){
+        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
+    }
+
+    _onPressProductCell(product) {
+        let productSkn = product && product.get('product_skn', 0);
+        if (!productSkn) {
+            return;
+        }
+        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
+        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
+    }
+
     render() {
         let {yohoCoin} = this.props;
 
@@ -64,6 +94,11 @@ class YohoCoinContainer extends Component {
             <View style={styles.container}>
                 <YohoCoin
                     resource={yohoCoin}
+                    onEndReached={this._onEndReached}
+                    onPressProductCell= {this._onPressProductCell}
+                    onPressWeixin={this._onPressWeixin}
+                    onPressBanner={this._onPressBanner}
+                    onPressYohoCoinDetail={this._onPressYohoCoinDetail}
                 />
             </View>
         );

@@ -8,6 +8,7 @@ let InitialState = Record({
 		notice: '',
 		isFetching: false,
 		error: null,
+		yohoCoinCode: '20151230-102233',
 	})),
 
 	banner: new (Record({