ShopRecommend.js 3.69 KB
'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    ListView,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} from 'react-native';

import Immutable, {Map} from 'immutable';
import HeadTitleCell from '../cell/HeadTitleCell';
import YH_GoodsStore from '../../../common/components/YH_GoodsStore';
import SlicedImage from '../../../common/components/SlicedImage';


/**
 *   好店推荐楼层,
 *   这个楼层是滚动的3D大图
 **/
export default class ShopRecommend extends Component{

	constructor(props) {
	   super(props);

       this.onClick = this.onClick.bind(this);
	}

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.data, this.props.data)
            && Immutable.is(nextProps.favoriteState, this.props.favoriteState)) {
            return false;
        } else {
            return true;
        }
    }

    onClick(event: Event) {
        let type = event.nativeEvent.type;
        let index = event.nativeEvent.index;
        let realIndex = 0;
        if (type == 'favorite') {
            let shopId = event.nativeEvent.shopId;
            this.props.onPressShopFavorite && this.props.onPressShopFavorite(shopId, index);
        } else {
            let {list} = this.props.data.toJS();
            let url = event.nativeEvent.url;
            let shopId = event.nativeEvent.shopId;
            let type = event.nativeEvent.type;
            let imageUrl = '';
            
            for (var i = 0; i < list.length; i++) {
                let shopItem = list[i];
                if (shopId == shopItem.shopId) {
                    if (type == 'top') {
                        realIndex = i * 4 + 1;
                        imageUrl = shopItem.src && SlicedImage.getSlicedUrl(shopItem.src, 240*DEVICE_WIDTH_RATIO, 116*DEVICE_WIDTH_RATIO, 2);
                    } else if (type == 'left') {
                        realIndex = i * 4 + 2;
                        imageUrl = shopItem.goods0 && shopItem.goods0.src && SlicedImage.getSlicedUrl(shopItem.goods0.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                    } else if (type == 'right') {
                        realIndex = i * 4 + 4;
                        imageUrl = shopItem.goods2 && shopItem.goods2.src && SlicedImage.getSlicedUrl(shopItem.goods2.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                    } else if (type == 'center') {
                        realIndex = i * 4 + 3;
                        imageUrl = shopItem.goods1 && shopItem.goods1.src && SlicedImage.getSlicedUrl(shopItem.goods1.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                    }
                    break;
                }
            }

            this.props.onPressShopRecommendItem && this.props.onPressShopRecommendItem(url, imageUrl, realIndex);
        }
    }

	render(){
        let {title, list} = this.props.data.toJS();
        let state = this.props.favoriteState.toJS();
		return (
            <View style={styles.container}>
                <HeadTitleCell title={title.name} moreUrl={title.more_url} 
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={title.yh_exposureData}/>
                <YH_GoodsStore style={styles.store} dataSource={list} favoriteState={state} onClick={this.onClick}/>
            </View>
        );
	}

};

let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;

let storeHeight = Math.ceil(239 * DEVICE_WIDTH_RATIO + 10);
let containerHeight = 40 + storeHeight;

let styles = StyleSheet.create({
    container: {
        width,
        height: containerHeight,
        backgroundColor: '#f0f0f0',
    },
	store: {
        width: width,
        height: storeHeight,
    },



});