Authored by chenl

增加Sale1t1l4r楼层,review by luliang。

'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
TouchableOpacity,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimerMixin from 'react-timer-mixin';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import HeadTitleCell from '../cell/HeadTitleCell';
import ImageSlider from '../cell/ImageSlider';
/**
* 首页 sale 楼层,
* 这个楼层是标题、banner、左带倒计时大图,右四小图
**/
export default class Sale1T1L4R extends Component{
constructor(props) {
super(props);
this.state = {
remainTime : "",
};
}
componentWillUnmount() {
this.timer && TimerMixin.clearTimeout(this.timer);
}
render(){
let data = this.props.data;
let banner = data.get("banner");
let title = data.get("title");
let imglst = data.get("list");
//初始化时间,待测
let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
let rightTopBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
let rightTopSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(2).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let rightBottomBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
let rightBottomSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
return(
<View style={styles.container}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} />
<ImageSlider
resource={banner}
sliderWidth={width}
sliderHeight={bannerHeight}
onPressSlideItem={this.props.onPressSlideItem}
/>
<View style={styles.imageContainer}>
<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/>
<Image style={styles.timerImage} source={require("../../images/ic_limit_times.png")}/>
<Text style={styles.timerText}>{remainTime}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.rightTopBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).toJS())}>
<YH_Image style={styles.rightTopBigImage} url={rightTopBigImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightTopSmallImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).toJS())}>
<YH_Image style={styles.rightTopSmallImage} url={rightTopSmallImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightBottomBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(3).toJS())}>
<YH_Image style={styles.rightBottomBigImage} url={rightBottomBigImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightBottomSmallImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(4).toJS())}>
<YH_Image style={styles.rightBottomSmallImage} url={rightBottomSmallImageUrl}/>
</TouchableOpacity>
</View>
</View>
);
}
};
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let bannerHeight = Math.floor(width / 3);
let leftBigImageWidth = width * 310 / 740;
let leftBigImageHeight = leftBigImageWidth * 422 / 310;
let rightBigImageWidth = width * 330 / 740;
let rightBigImageHeight = rightBigImageWidth * 210 / 330;
let rightSmallImageWidth = width * 100 / 740;
let rightSmallImageHeight = rightSmallImageWidth * 210 / 100;
let styles = StyleSheet.create({
container: {
width: width,
backgroundColor: "#e5e5e5",
},
imageContainer: {
width: width,
height: 422 * DEVICE_WIDTH_RATIO,
},
leftBigImageContainer: {
position: 'absolute',
top: 0,
left: 0,
width: leftBigImageWidth,
height: leftBigImageHeight,
},
leftBigImage: {
width: leftBigImageWidth,
height: leftBigImageHeight,
},
timerImage:{
position: 'absolute',
top: 20,
},
timerText:{
position: 'absolute',
top: 50,
textAlign: 'center',
},
rightTopBigImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth,
width: rightBigImageWidth,
height: rightBigImageHeight,
},
rightTopBigImage: {
width: rightBigImageWidth,
height: rightBigImageHeight,
},
rightTopSmallImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightTopSmallImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightBottomBigImageContainer: {
position: 'absolute',
top: rightBigImageHeight,
left: leftBigImageWidth,
width: rightBigImageWidth,
height: rightBigImageHeight,
marginTop: 2,
},
rightBottomBigImage: {
width: rightBigImageWidth,
height: rightBigImageHeight,
},
rightBottomSmallImageContainer: {
position: 'absolute',
top: rightBigImageHeight,
left: leftBigImageWidth + rightBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
marginTop: 2,
},
rightBottomBigImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
});
... ...