|
|
'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,
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
...
|
...
|
|