增加我的个人中心资源位。review by liben。

+'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 Immutable, {Map} from 'immutable';
+import RecyclerSwiper from '../../../common/recycler-swiper/recyclerswiper'
+
+const {
+    View,
+    Image,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+const YH_Swiper = (Platform.OS === 'ios') ? Swiper : RecyclerSwiper;
+
+
+export default class ImageSlider extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this.dot = <View
+            style={{
+                backgroundColor:'rgba(237, 237, 237, 0.5)',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: 3,
+                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)
+            && nextProps.sliderWidth == this.props.sliderWidth
+            && nextProps.sliderHeight == this.props.sliderHeight) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    render() {
+
+        let {resource, sliderWidth, sliderHeight} = this.props;
+        if (!resource || resource.size == 0) {
+            return null;
+        }
+
+        let data = this.props.resource.toJS();
+        if (data.length == 1) {
+            let imageUrl = YH_Image.getSlicedUrl(data[0].src, sliderWidth, sliderHeight, 2);
+            return (
+                <TouchableOpacity
+                    activeOpacity={1}
+                    style={{width: sliderWidth, height: sliderHeight}}
+                    onPress={() => {
+                        this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url, imageUrl, 0);
+                    }}
+                >
+                    <YH_Image
+                        url={imageUrl}
+                        style={{ width: sliderWidth, height: sliderHeight}}
+                    />
+                </TouchableOpacity>
+            );
+        } else {
+            return (
+                <YH_Swiper
+                    showsButtons={false}
+                    loop={true}
+                    autoplay={true}
+                    autoplayTimeout={3}
+                    dot={this.dot}
+                    activeDot={(Platform.OS === 'ios') ? this.activeDot : null}
+                    width={sliderWidth}
+                    height={sliderHeight}
+                    paginationStyle={{
+                        backgroundColor: 'rgba(68, 68, 68, 0.2)',
+                        bottom: 10,
+                        height: 10,
+                        width: data.length * 12,
+                        borderRadius: 5,
+                        marginLeft: (sliderWidth - data.length * 12)/2,
+                        paddingBottom: 3,
+                    }}
+                >
+                    {data.map((item, i) => {
+                        let imageUrl = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);
+                        return (
+                            <TouchableOpacity
+                                key={i}
+                                activeOpacity={1}
+                                yh_exposureData={item.yh_exposureData}
+                                onPress={() => {
+                                    this.props.onPressSlideItem && this.props.onPressSlideItem(item.url, imageUrl,i);
+                                }}
+                                onPressIn={() => {
+                                    this.props.onChildScrollToPreventRefresh && this.props.onChildScrollToPreventRefresh();
+                                }}
+                            >
+                                <YH_Image
+                                    url={imageUrl}
+                                    style={{width: sliderWidth, height: sliderHeight}}
+                                />
+                            </TouchableOpacity>
+                        );
+                    })}
+                </YH_Swiper>
+            );
+        }
+    }
+}

+'use strict';
+
+import React, {Component} from 'react';
+import Immutable, {Map} from 'immutable';
+
+import SlicedImage from '../../../common/components/SlicedImage';
+import YH_Image from '../../../common/components/YH_Image';
+
+
+import ReactNative, {
+    View,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
+
+/**
+ *   分割线楼层
+ **/
+export default class DivideImage extends Component{
+
+
+	constructor(props) {
+	  super(props);
+	}
+
+
+	render(){
+		let data = this.props.data;
+		let url = data && data.get(0,{}).get("src",'');
+
+		let imageUrl = SlicedImage.getSlicedUrl(url, width, height, 2);
+
+		return(
+			<View style={styles.container}>
+				<YH_Image style={styles.immage} url={imageUrl} />
+			</View>
+        );
+	}
+
+};
+
+let {width} = Dimensions.get('window');
+let height = 10;
+
+let styles = StyleSheet.create({
+
+	container: {
+        width: width,
+		height: height,
+		backgroundColor: "#f0f0f0",
+    },
+
+    immage: {
+        width: width,
+		height: height,
+    },
+
+});

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import ImageSlider from '../cell/ImageSlider';
+import Immutable, {Map} from 'immutable';
+
+const {
+    View,
+    Image,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+
+export default class SingleImage extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.data, this.props.data)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+    
+    render() {
+        return (
+            <ImageSlider
+                resource={this.props.data}
+                sliderWidth={width}
+                sliderHeight={sliderHeight}
+                onPressSlideItem={this.props.onPressSlideItem}
+            />
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+let sliderHeight = Math.ceil(width * 234 / 750);
\ No newline at end of file

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import YH_Image from '../../../common/components/YH_Image';
+import Immutable, {Map} from 'immutable';
+
+const {
+    View,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+export default class SmallPic extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+    }
+
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.data, this.props.data)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    render() {
+        let {data} = this.props;
+
+        if (!data || data.size == 0) {
+            return null;
+        }
+
+        let url1 = YH_Image.getSlicedUrl(data.get(0).get('src'), imageWidth, imageHeight, 2);
+        let url2 = YH_Image.getSlicedUrl(data.get(1).get('src'), imageWidth, imageHeight, 2);
+
+        return (
+            <View style={styles.container}>
+                <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={() => {
+                        this.props.onPressPicItem && this.props.onPressPicItem(data.get(0).get('url'), url1, 0);
+                    }}
+                >
+                    <YH_Image
+                        url={url1}
+                        masksToBounds={true}
+                        radius={{'topLeft':'3','topRight':'3','bottomRight':'3','bottomLeft':'3'}}
+                        style={[styles.image, styles.left]}
+                    />
+                </TouchableOpacity>
+                <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={() => {
+                        this.props.onPressPicItem && this.props.onPressPicItem(data.get(1).get('url'), url2, 1);
+                    }}
+                >
+                    <YH_Image
+                        url={url2}
+                        masksToBounds={true}
+                        radius={{'topLeft':'3','topRight':'3','bottomRight':'3','bottomLeft':'3'}}
+                        style={[styles.image, styles.right]}
+                    />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+const DEVICE_WIDTH_RATIO = width / 320;
+let containerHeight = Math.ceil(80 * (width - 45) / 2 / 137.5);
+let imageWidth = Math.ceil((width - 45) / 2);
+let imageHeight =  Math.ceil(80 * (imageWidth / 137.5));
+
+let styles = StyleSheet.create({
+    container: {
+        width: width,
+        height: containerHeight,
+        flexDirection: 'row',
+        backgroundColor: '#f0f0f0',
+    },
+    image: {
+        width: imageWidth,
+        height: imageHeight,
+        borderRadius: 3,
+        backgroundColor: 'white',
+        marginLeft: 15,
+    },
+    left: {
+
+    },
+    right: {
+
+    },
+});

@@ -81,6 +81,7 @@ export default class MineList extends React.Component {
                 iconAll={this.props.iconAll}
                 instalmentStatus={this.props.instalmentStatus}
                 mineResource={this.props.mineResource}
+                onPressFloorItem={this.props.onPressFloorItem}
             />
         );
     }

@@ -14,6 +14,7 @@ import ReactNative, {
 
 import Immutable, {Map} from 'immutable';
 import Announcement from './Announcement';
+import MineResourceList from './MineResourceList';
 import YH_Image from '../../../common/components/YH_Image';
 
 export default class MineListHeader extends React.Component {
@@ -23,6 +24,8 @@ export default class MineListHeader extends React.Component {
         this._renderMinePropertyNumberPoint = this._renderMinePropertyNumberPoint.bind(this);
         this._renderVip = this._renderVip.bind(this);
         this._renderBannerResource = this._renderBannerResource.bind(this);
+        this._calculateBannerResourceHeight = this._calculateBannerResourceHeight.bind(this);
+
     }
 
     /**
@@ -111,20 +114,54 @@ export default class MineListHeader extends React.Component {
                 );
     }
 
+    //渲染资源位
     _renderBannerResource(){
-        let mineResource = this.props.mineResource;
-
-        if(!mineResource)
-            return;
 
-        //
         return(
-
-            <View style={{width:width,height:25, backgroundColor:'red'}}>
-
-            </View>
+            <MineResourceList 
+                style={{width:width,height:500}}
+                mineResource={this.props.mineResource}
+                onPressFloorItem={this.props.onPressFloorItem}>
+            </MineResourceList>
         );
+    }
 
+    //计算资源位高度
+    _calculateBannerResourceHeight(){
+        let {mineResource} = this.props;
+        let resourceList = mineResource ? mineResource.toJS() : [];
+        let floorHeight = 0;
+        let i = 0;
+        let count = resourceList.length;
+        for(i; i < count; i++) {
+            let item = resourceList[i];
+            if (!item) {
+                continue;
+            }
+
+            let templateName = item.template_name;
+            let data = item.data;
+            if (!templateName || !data) {
+                continue;
+            }
+
+            switch(templateName) {
+                case 'single_image': {
+                    floorHeight = floorHeight + Math.ceil(width * 234 / 750);
+                    break;
+                }
+                case 'small_pic': {
+                    floorHeight = floorHeight + Math.ceil(80 * (width - 45) / 2 / 137.5);
+                    break;
+                }
+                case 'divideImage': {
+                    floorHeight = floorHeight + 10;
+                    break;
+                }
+            }
+        }
+
+        return floorHeight;
     }
 
 
@@ -166,6 +203,13 @@ export default class MineListHeader extends React.Component {
         if (this.props.activityListInfo && this.props.activityListInfo.list && this.props.activityListInfo.list.size > 0) {
             oHigh = oHigh + rowheight * this.props.activityListInfo.list.size;
         }
+
+        //资源位高度
+        if (this.props.mineResource) {
+            let floorHeight = this._calculateBannerResourceHeight();
+            oHigh = oHigh + floorHeight;
+        }       
+
         oHigh = topHeight + oHigh;
         let bgImage = Platform.OS === 'ios' ? require('../../image/mine_top_boy.png') : require('../../image/mine_banner_boy.jpg');
         let bgHeight = Platform.OS === 'ios' ? 284 : 175;
@@ -675,7 +719,9 @@ export default class MineListHeader extends React.Component {
                         <Image style={styles.arrow} source={require('../../image/arrow_gray.png')}/>
                     </View>
                 </TouchableOpacity>
+
                 {this._renderBannerResource()}
+
                 <View style={{
                     width: width,
                     height: 10,

+'use strict';
+import React from 'react';
+
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    ListView,
+    StyleSheet,
+    Dimensions,
+    TouchableOpacity,
+    Platform,
+    PixelRatio,
+} from 'react-native';
+
+import Immutable, {Map} from 'immutable';
+import SingleImage from '../floor/SingleImage';
+import DivideImage from '../floor/DivideImage';
+import SmallPic from '../floor/SmallPic';
+
+
+
+export default class MineResourceList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this._renderRow = this._renderRow.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
+    }
+
+    _renderRow(rowData, sectionID, rowID, highlightRow) {
+
+        if(!rowData || !rowData.get('data')){
+            return null;
+        }
+
+        let template_name = rowData.get('template_name');
+        switch (template_name) {
+            case 'single_image': {
+                return (
+                    <SingleImage
+                        data={rowData.get('data')}
+                        onPressSlideItem={(jumpUrl, imageUrl, index) =>{
+                            this.props.onPressFloorItem&&this.props.onPressFloorItem(jumpUrl, imageUrl, index, rowData, rowID);
+                        }}
+                    />
+                );
+            }
+            case 'small_pic': {
+                return (
+                    <SmallPic
+                        data={rowData.get('data')}
+                        onPressPicItem={(jumpUrl, imageUrl, index) =>{
+                            this.props.onPressFloorItem&&this.props.onPressFloorItem(jumpUrl, imageUrl, index, rowData, rowID);
+                        }}
+                    />
+                );
+            }
+            case 'divideImage': {
+                return (
+                    <DivideImage data={rowData.get('data')}/>
+                );
+            }
+            default:
+                return null;
+        }
+    }
+
+
+    render() {
+        let mineResource = this.props.mineResource;
+
+        if(!mineResource)
+            return;
+        
+        let dataSource = mineResource.toArray();
+
+        return (
+            <View style={styles.container}>
+                <ListView
+                    contentContainerStyle={styles.contentContainer}
+                    enableEmptySections={true}
+                    dataSource={this.dataSource.cloneWithRows(dataSource)}
+                    renderRow={this._renderRow}
+                />
+            </View>
+        );
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+let styles = StyleSheet.create({
+    container: {
+        width: width,
+    },
+
+    contentContainer: {
+        flex: 1,
+    },
+
+});

@@ -45,6 +45,9 @@ class MineContainer extends Component {
         this._onLongPressProduct = this._onLongPressProduct.bind(this);
         this._onPressFindSimilar = this._onPressFindSimilar.bind(this);
 
+        //资源位点击楼层
+        this._onPressFloorItem = this._onPressFloorItem.bind(this);
+
         this.subscription1 = NativeAppEventEmitter.addListener(
             'UserDidLoginEvent',
             (reminder) => {
@@ -88,7 +91,7 @@ class MineContainer extends Component {
         this.props.actions.onMineCenterRefresh();
         this.props.actions.getMineAllIcon();
         this.props.actions.setShowSimilarGuider(true);
-        //this.props.actions.getMineResource();
+        this.props.actions.getMineResource();
     }
 
     componentWillUnmount() {
@@ -290,6 +293,25 @@ class MineContainer extends Component {
         });
     }
 
+    //点击资源位楼层数据
+    _onPressFloorItem(jumpUrl, imageUrl, index, floorData, floorIndex) {
+        if (!jumpUrl) {
+            return;
+        }
+        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(jumpUrl);
+
+        let floorID = floorData.get('template_id','');
+        let floorName = floorData.get('template_name','');
+        let param = {
+                        'F_ID': floorID,
+                        'F_NAME': floorName,
+                        'F_URL': jumpUrl,
+                        'F_INDEX': parseInt(floorIndex) + 1 + "",
+                        'I_INDEX': parseInt(index) + 1 + "",
+                    };
+        NativeModules.YH_CommonHelper.logEvent('YB_MY_BANNER_C', param);
+    }
+
     render() {
         let {
             isFetching,
@@ -335,6 +357,7 @@ class MineContainer extends Component {
                 onMineCenterRefresh={this._onMineCenterRefresh}
                 onLongPressProduct={this._onLongPressProduct}
                 onPressFindSimilar={this._onPressFindSimilar}
+                onPressFloorItem={this._onPressFloorItem}
                 showSimilarGuider={showSimilarGuider}
             />
         );