DoubleImage.js 4.69 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';

const {
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    StyleSheet,
	Platform,
} = ReactNative;

export default class DoubleImage extends React.Component {

    constructor(props) {
        super (props);
    }

    shouldComponentUpdate(nextProps,nextState){
        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    render() {

        let {resource} = this.props;
        if (!resource) {
            return null;
        }
        let list = resource.get('module_data').get('data').toJS();
        let properties = resource.get('module_data').get('properties').toJS();
        let isModuleMargin = properties.isModuleMargin;
        let backgroundHeight =isModuleMargin?(width/2+10):width/2;

        let data1 = list?list[0]:null;
        let backgroundImage1 = data1.pic;
        let linkType1 = data1.linkType;
        let product1 = data1.product;
        let salePrice1 = product1?parseFloat(product1.sales_price):0;
        let originPrice1 = product1?parseFloat(product1.market_price):0;
        let name1 = product1?product1.product_name:'';
        let price1 = '¥' + salePrice1.toFixed(2);
        let sale1 = '¥' + originPrice1.toFixed(2);
        let saleAble1 = false;//salePrice1>0?true:false;
        let linkReource1 = data1.resource;

        let data2 = list?list[1]:null;
        let backgroundImage2 = data2.pic;
        let linkType2 = data2.linkType;
        let product2 = data2.product;
        let salePrice2 = product2?parseFloat(product2.sales_price):0;
        let originPrice2 = product2?parseFloat(product2.market_price):0;
        let name2 = product2?product2.product_name:'';
        let price2 = '¥' + salePrice2.toFixed(2);
        let sale2 = '¥' + originPrice2.toFixed(2);
        let saleAble2 = false;//salePrice2>0?true:false;
        let linkReource2 = data2.resource;

        return(
            <View style={{flexDirection: 'row',width: width,height: backgroundHeight,backgroundColor: 'white',}}>
                    <TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
                        <YH_Image
                            url={backgroundImage1}
                            style={styles.thumbnail}
                        ></YH_Image>
                        {linkType1=='1'?<View style={styles.titleView}>
    						<Text style={styles.title} numberOfLines={1}>{name1}</Text>
                            <View style={styles.saleView}>
                                <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble1?'red':'white',}}>{price1}</Text>
                                {saleAble1?<Text style={styles.deleteSale}>{sale1}</Text>:null}
                            </View>
    					</View>:null}
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
                        <YH_Image
                            url={backgroundImage2}
                            style={styles.thumbnail}
                        ></YH_Image>
                        {linkType2=='1'?<View style={styles.titleView}>
    						<Text style={styles.title} numberOfLines={1}>{name2}</Text>
                            <View style={styles.saleView}>
    						    <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble2?'red':'white',}}>{price2}</Text>
                                {saleAble2?<Text style={styles.deleteSale}>{sale2}</Text>:null}
                            </View>
    					</View>:null}
                    </TouchableOpacity>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    titleView: {
        width: width/2,
        height: 45,
        position: 'absolute',
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: width/2-45,
    },
    thumbnail: {
        width: width/2,
        height: width/2,
    },
    title: {
        marginTop: 8,
        marginLeft: 10,
        width: width/2-20,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        fontWeight: 'bold',
    },
    saleView:{
		flexDirection: 'row',
    },
    deleteSale: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 10,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    }
});