mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit bdbc52aa3ac973d7365d559cbe2ffccc3d73aae3 1 parent 5bef1f2a

修复了限时特卖楼层的问题。review by luliang。

Inline Side-by-side
Showing 7 changed files with 110 additions and 12 deletions
@@ -3,6 +3,8 @@ @@ -3,6 +3,8 @@
3 import React, {Component} from 'react'; 3 import React, {Component} from 'react';
4 import ReactNative, { 4 import ReactNative, {
5 View, 5 View,
  6 + Image,
  7 + Text,
6 TouchableOpacity, 8 TouchableOpacity,
7 StyleSheet, 9 StyleSheet,
8 Dimensions, 10 Dimensions,
@@ -28,24 +30,66 @@ export default class Sale1T1L4R extends Component{ @@ -28,24 +30,66 @@ export default class Sale1T1L4R extends Component{
28 constructor(props) { 30 constructor(props) {
29 super(props); 31 super(props);
30 32
  33 + this._caculateTimerState = this._caculateTimerState.bind(this);
  34 +
31 this.state = { 35 this.state = {
32 - remainTime : "", 36 + remainHour : "00",
  37 + remainMinute : "00",
  38 + remainSecond : "00",
  39 + timeOut: true,
33 }; 40 };
34 } 41 }
35 42
  43 + componentDidMount() {
  44 +
  45 + this.timer = TimerMixin.setInterval(() => {
  46 + if(diffTime > 0){
  47 + diffTime = diffTime - 1;
  48 + this._caculateTimerState();
  49 + }
  50 + }, 1000);
  51 + }
  52 +
36 componentWillUnmount() { 53 componentWillUnmount() {
37 - this.timer && TimerMixin.clearTimeout(this.timer); 54 + this.timer && TimerMixin.clearInterval(this.timer);
  55 + }
  56 +
  57 +
  58 + _caculateTimerState() {
  59 +
  60 + if(diffTime > 0){
  61 + let hour = parseInt(diffTime / (60 * 60), 10);
  62 + let minute = parseInt(diffTime % (60 * 60) / 60, 10);
  63 + let second = diffTime % 60;
  64 + this.setState({
  65 + remainHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour),
  66 + remainMinute: minute < 0 ? '00' : (minute < 10 ? ('0' + minute) : minute),
  67 + remainSecond: second < 0 ? '00' : (second < 10 ? ('0' + second) : second),
  68 + timeOut: false,
  69 + });
  70 + }
  71 + else{
  72 + this.setState({
  73 + remainHour: '00',
  74 + remainMinute: '00',
  75 + remainSecond: '00',
  76 + timeOut: true,
  77 + });
  78 + this.timer && TimerMixin.clearInterval(this.timer);
  79 + }
38 } 80 }
39 81
40 82
41 render(){ 83 render(){
42 84
43 let data = this.props.data; 85 let data = this.props.data;
44 - let banner = data.get("banner"); 86 + let banner = data.get("big_image");
45 let title = data.get("title"); 87 let title = data.get("title");
46 let imglst = data.get("list"); 88 let imglst = data.get("list");
47 89
48 - //初始化时间,待测 90 + //剩余时间
  91 + time = imglst.get(0).get("end_time");
  92 + diffTime = time - Date.parse(new Date()) / 1000;
49 93
50 let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2); 94 let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
51 let rightTopBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightBigImageWidth, rightBigImageHeight, 2); 95 let rightTopBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
@@ -53,8 +97,14 @@ export default class Sale1T1L4R extends Component{ @@ -53,8 +97,14 @@ export default class Sale1T1L4R extends Component{
53 let rightBottomBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightBigImageWidth, rightBigImageHeight, 2); 97 let rightBottomBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
54 let rightBottomSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2); 98 let rightBottomSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
55 99
  100 + let containerHeight = 40 + leftBigImageHeight;
  101 + if(banner.toJS().length > 0){
  102 + containerHeight = containerHeight + bannerHeight;
  103 + }
  104 +
  105 +
56 return( 106 return(
57 - <View style={styles.container}> 107 + <View style={[styles.container, {height: containerHeight}]}>
58 <HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore} /> 108 <HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore} />
59 109
60 <ImageSlider 110 <ImageSlider
@@ -70,9 +120,18 @@ export default class Sale1T1L4R extends Component{ @@ -70,9 +120,18 @@ export default class Sale1T1L4R extends Component{
70 onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}> 120 onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
71 <YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/> 121 <YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/>
72 122
73 - <Image style={styles.timerImage} source={require("../../images/ic_limit_times.png")}/>  
74 -  
75 - <Text style={styles.timerText}>{remainTime}</Text> 123 + <View style={styles.timerImageContainer}>
  124 + <Image style={styles.timerImage} source={require("../../images/home_sale_time.png")}/>
  125 + <Image source={require("../../images/home_sale_time_text.png")}/>
  126 + </View>
  127 +
  128 + <View style={styles.timerTextContainer}>
  129 + <Text style={styles.timerText}>{this.state.remainHour}</Text>
  130 + <Text style={styles.timerTextSymbol}>:</Text>
  131 + <Text style={styles.timerText}>{this.state.remainMinute}</Text>
  132 + <Text style={styles.timerTextSymbol}>:</Text>
  133 + <Text style={styles.timerText}>{this.state.remainSecond}</Text>
  134 + </View>
76 135
77 </TouchableOpacity> 136 </TouchableOpacity>
78 137
@@ -102,6 +161,10 @@ export default class Sale1T1L4R extends Component{ @@ -102,6 +161,10 @@ export default class Sale1T1L4R extends Component{
102 161
103 }; 162 };
104 163
  164 +
  165 +let time = 0;
  166 +let diffTime = 0;
  167 +
105 let {width} = Dimensions.get('window'); 168 let {width} = Dimensions.get('window');
106 const DEVICE_WIDTH_RATIO = width / 320; 169 const DEVICE_WIDTH_RATIO = width / 320;
107 170
@@ -121,7 +184,6 @@ let styles = StyleSheet.create({ @@ -121,7 +184,6 @@ let styles = StyleSheet.create({
121 184
122 container: { 185 container: {
123 width: width, 186 width: width,
124 - height: 40 + bannerHeight + leftBigImageHeight,  
125 backgroundColor: "#e5e5e5", 187 backgroundColor: "#e5e5e5",
126 }, 188 },
127 189
@@ -143,15 +205,41 @@ let styles = StyleSheet.create({ @@ -143,15 +205,41 @@ let styles = StyleSheet.create({
143 height: leftBigImageHeight, 205 height: leftBigImageHeight,
144 }, 206 },
145 207
146 - timerImage:{ 208 + timerImageContainer:{
  209 + width: leftBigImageWidth,
147 position: 'absolute', 210 position: 'absolute',
148 top: 20, 211 top: 20,
  212 + flexDirection: 'row',
  213 + alignItems: 'center',
  214 + justifyContent: 'center',
149 }, 215 },
150 216
151 - timerText:{ 217 + timerImage:{
  218 + paddingRight: 10,
  219 + },
  220 +
  221 + timerTextContainer:{
  222 + width: leftBigImageWidth,
152 position: 'absolute', 223 position: 'absolute',
153 top: 50, 224 top: 50,
154 - textAlign: 'center', 225 + flexDirection: 'row',
  226 + alignItems: 'center',
  227 + justifyContent: 'center',
  228 + },
  229 +
  230 + timerText:{
  231 + backgroundColor: '#ffffff',
  232 + padding: 1,
  233 + borderRadius: 2,
  234 + color: '#444444',
  235 + fontWeight: 'bold',
  236 + },
  237 +
  238 + timerTextSymbol:{
  239 + paddingLeft: 4,
  240 + paddingRight: 4,
  241 + color: '#ffffff',
  242 + fontWeight: 'bold',
155 }, 243 },
156 244
157 rightTopBigImageContainer: { 245 rightTopBigImageContainer: {
@@ -36,6 +36,7 @@ import PopularSingleProduct from '../floor/PopularSingleProduct'; @@ -36,6 +36,7 @@ import PopularSingleProduct from '../floor/PopularSingleProduct';
36 import ShopRecommend from '../floor/ShopRecommend'; 36 import ShopRecommend from '../floor/ShopRecommend';
37 import SixLinesFloor from '../floor/SixLinesFloor'; 37 import SixLinesFloor from '../floor/SixLinesFloor';
38 import LivePicture from '../floor/LivePicture'; 38 import LivePicture from '../floor/LivePicture';
  39 +import Sale1T1L4R from '../floor/Sale1T1L4R';
39 import SmallPic from '../floor/SmallPic'; 40 import SmallPic from '../floor/SmallPic';
40 import RecommendContentOne from '../floor/RecommendContentOne'; 41 import RecommendContentOne from '../floor/RecommendContentOne';
41 import RecommendContentTwo from '../floor/RecommendContentTwo'; 42 import RecommendContentTwo from '../floor/RecommendContentTwo';
@@ -364,6 +365,15 @@ export default class Home extends Component { @@ -364,6 +365,15 @@ export default class Home extends Component {
364 /> 365 />
365 ) 366 )
366 } 367 }
  368 + case 'sale-1t-1l-4r':{
  369 + return (
  370 + <Sale1T1L4R
  371 + data={rowData.get('data')}
  372 + onPressImageItem={this.props.onPressImageItem}
  373 + onPressTitleMore={this.props.onPressTitleMore}
  374 + />
  375 + )
  376 + }
367 case 'vipUse':{ 377 case 'vipUse':{
368 return ( 378 return (
369 <VipUserFloor 379 <VipUserFloor