mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit abc9e67311372bfff47a0b24fe59d31b87c721a5 1 parent cda87da4

秒杀刷新，review by 孙凯

Inline Side-by-side
Showing 5 changed files with 81 additions and 28 deletions
@@ -85,9 +85,16 @@ export default class ProductListView extends Component { @@ -85,9 +85,16 @@ export default class ProductListView extends Component {
85 <TouchableOpacity onPress={() => { 85 <TouchableOpacity onPress={() => {
86 this.props.onPressRemindBtn && this.props.onPressRemindBtn(rowData); 86 this.props.onPressRemindBtn && this.props.onPressRemindBtn(rowData);
87 }}> 87 }}>
88 - <View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor}]}>  
89 - <Text style={{color:btnTextcolor}}>{tipState}</Text>  
90 - </View> 88 + {
  89 + (tipState=='取消提醒')?
  90 + <View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor,borderWidth:1.0}]}>
  91 + <Text style={{color:btnTextcolor}}>{tipState}</Text>
  92 + </View>
  93 + :<View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor}]}>
  94 + <Text style={{color:btnTextcolor}}>{tipState}</Text>
  95 + </View>
  96 + }
  97 +
91 </TouchableOpacity> 98 </TouchableOpacity>
92 99
93 </View> 100 </View>
@@ -75,6 +75,7 @@ export default class Seckill extends Component { @@ -75,6 +75,7 @@ export default class Seckill extends Component {
75 <TimeListView 75 <TimeListView
76 resource={this.queryActivityInfo.secKillProductVoList.toArray()} 76 resource={this.queryActivityInfo.secKillProductVoList.toArray()}
77 onPressTimeItem={this.props.onPressTimeItem} 77 onPressTimeItem={this.props.onPressTimeItem}
  78 + onFocusToCurStartedActivity={this.props.onFocusToCurStartedActivity}
78 diff={diff} 79 diff={diff}
79 /> 80 />
80 ); 81 );
@@ -20,6 +20,7 @@ export default class SeckillTimeListView extends Component { @@ -20,6 +20,7 @@ export default class SeckillTimeListView extends Component {
20 super(props); 20 super(props);
21 this._renderRow = this._renderRow.bind(this); 21 this._renderRow = this._renderRow.bind(this);
22 this._renderSeparator = this._renderSeparator.bind(this); 22 this._renderSeparator = this._renderSeparator.bind(this);
  23 + this._scrollToFocusActivity = this._scrollToFocusActivity.bind(this);
23 24
24 this.dataSource = new ListView.DataSource({ 25 this.dataSource = new ListView.DataSource({
25 rowHasChanged: (r1, r2) => r1.key != r2.key, 26 rowHasChanged: (r1, r2) => r1.key != r2.key,
@@ -35,11 +36,43 @@ export default class SeckillTimeListView extends Component { @@ -35,11 +36,43 @@ export default class SeckillTimeListView extends Component {
35 }; 36 };
36 } 37 }
37 38
  39 + _scrollToFocusActivity = () => {
  40 + //focus
  41 + if (this.secKillProductVoList.length >= 1) {
  42 + let listLength = this.secKillProductVoList.length;
  43 + let curFocusIndex = 0;
  44 + let scrollX = 0;
  45 + this.secKillProductVoList.forEach((activityItem, i) => {
  46 + if (activityItem.get('activityId') === this.curFocusActivity.get('activityId')) {
  47 + curFocusIndex = i;
  48 + }
  49 + });
  50 + // if (curFocusIndex > 1 && curFocusIndex < listLength-2) {
  51 + scrollX = (curFocusIndex - 1) * rowContainerWidth;
  52 + this.listView && this.listView.scrollTo({x: scrollX, y: 0, animated: false});
  53 +
  54 + // }
  55 + }
  56 + }
  57 +
38 componentDidMount() { 58 componentDidMount() {
  59 +
  60 + let jumpToTimeoutActivity = () => {
  61 + this.secKillProductVoList.forEach((activityItem, i) => {
  62 + let nowTime = Date.parse(new Date()) / 1000 + diffTime;
  63 + let startTime = activityItem.get('startTime') / 1000;
  64 + let offsetTime = nowTime - startTime;
  65 + if (activityItem.get('focus') == false && Math.abs(offsetTime) <= 2) {
  66 + this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(activityItem.toJS());
  67 + }
  68 + });
  69 + };
  70 +
39 this.timer = setInterval(function () { 71 this.timer = setInterval(function () {
40 if (!this.curFocusActivity && this.curFocusActivity.size > 0 && !this.curFocusActivity.has('over')) { 72 if (!this.curFocusActivity && this.curFocusActivity.size > 0 && !this.curFocusActivity.has('over')) {
41 return; 73 return;
42 } 74 }
  75 + jumpToTimeoutActivity();
43 let nowTime = Date.parse(new Date()) / 1000 + diffTime; 76 let nowTime = Date.parse(new Date()) / 1000 + diffTime;
44 let time = this.curFocusActivity.has('now') ? this.curFocusActivity.get('endTime'): this.curFocusActivity.get('startTime') / 1000; 77 let time = this.curFocusActivity.has('now') ? this.curFocusActivity.get('endTime'): this.curFocusActivity.get('startTime') / 1000;
45 let offsetTime = time - nowTime; 78 let offsetTime = time - nowTime;
@@ -48,13 +81,15 @@ export default class SeckillTimeListView extends Component { @@ -48,13 +81,15 @@ export default class SeckillTimeListView extends Component {
48 let second = offsetTime % 60; 81 let second = offsetTime % 60;
49 82
50 if (offsetTime <= 0) { 83 if (offsetTime <= 0) {
  84 + if (!this.state.tickTimeOut) {
  85 + this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(this.curFocusActivity.toJS());
  86 + }
51 this.setState({ 87 this.setState({
52 tickHour: '00', 88 tickHour: '00',
53 tickMinute: '00', 89 tickMinute: '00',
54 tickSecond: '00', 90 tickSecond: '00',
55 tickTimeOut: true, 91 tickTimeOut: true,
56 }); 92 });
57 - this.props.onPressTimeItem && this.props.onPressTimeItem(this.curFocusActivity.toJS());  
58 } else { 93 } else {
59 this.setState({ 94 this.setState({
60 tickHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour), 95 tickHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour),
@@ -65,23 +100,7 @@ export default class SeckillTimeListView extends Component { @@ -65,23 +100,7 @@ export default class SeckillTimeListView extends Component {
65 } 100 }
66 101
67 }.bind(this), 1000); 102 }.bind(this), 1000);
68 -  
69 - //focus  
70 - if (this.secKillProductVoList.length >= 1) {  
71 - let listLength = this.secKillProductVoList.length;  
72 - let curFocusIndex = 0;  
73 - let scrollX = 0;  
74 - this.secKillProductVoList.forEach((activityItem, i) => {  
75 - if (activityItem.get('activityId') === this.curFocusActivity.get('activityId')) {  
76 - curFocusIndex = i;  
77 - }  
78 - });  
79 - if (curFocusIndex > 1 && curFocusIndex < listLength-2) {  
80 - scrollX = (curFocusIndex - 1) * rowContainerWidth;  
81 - this.listView.scrollTo({x: scrollX, y: 0, animated: false});  
82 -  
83 - }  
84 - } 103 + this._scrollToFocusActivity();
85 104
86 } 105 }
87 106
@@ -89,6 +108,15 @@ export default class SeckillTimeListView extends Component { @@ -89,6 +108,15 @@ export default class SeckillTimeListView extends Component {
89 this.timer && clearInterval(this.timer); 108 this.timer && clearInterval(this.timer);
90 } 109 }
91 110
  111 + componentWillReceiveProps(nextProps) {
  112 + if (nextProps.resource && nextProps.resource.length > 0) {
  113 + let focusActivity = nextProps.resource.find(activityTimeItem => activityTimeItem.get('focus'));
  114 + this.curFocusActivity = focusActivity;
  115 + }
  116 + this._scrollToFocusActivity();
  117 +
  118 + }
  119 +
92 _renderRow(rowData, sectionID, rowID) { 120 _renderRow(rowData, sectionID, rowID) {
93 rowData = rowData.toJS(); 121 rowData = rowData.toJS();
94 let colorStyle = rowData.focus ? {color: '#d30018'} : {color: '#3e3e3e'}; 122 let colorStyle = rowData.focus ? {color: '#d30018'} : {color: '#3e3e3e'};
@@ -176,15 +204,19 @@ export default class SeckillTimeListView extends Component { @@ -176,15 +204,19 @@ export default class SeckillTimeListView extends Component {
176 } 204 }
177 diffTime = diff; 205 diffTime = diff;
178 this.secKillProductVoList = resource; 206 this.secKillProductVoList = resource;
  207 + backgroundWidth = Math.max(rowContainerWidth * (resource.length - 1) + rowContainerFocusWidth, width);
  208 +
179 return ( 209 return (
180 <View style={[styles.container]}> 210 <View style={[styles.container]}>
181 <ListView 211 <ListView
182 - contentContainerStyle={[styles.contentContainer]} 212 + ref={(ref)=>this.listView=ref}
  213 + contentContainerStyle={[styles.contentContainer,{width:backgroundWidth}]}
183 enableEmptySections={true} 214 enableEmptySections={true}
184 dataSource={this.dataSource.cloneWithRows(resource)} 215 dataSource={this.dataSource.cloneWithRows(resource)}
185 renderSeparator={this._renderSeparator} 216 renderSeparator={this._renderSeparator}
186 renderRow={this._renderRow} 217 renderRow={this._renderRow}
187 - scrollEnabled={false} 218 + scrollEnabled={true}
  219 + horizontal={true}
188 scrollsToTop={false} 220 scrollsToTop={false}
189 /> 221 />
190 </View> 222 </View>
@@ -202,7 +234,7 @@ let rowContainerFocusWidth = Math.ceil((294 * width) / 750); @@ -202,7 +234,7 @@ let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
202 let styles = StyleSheet.create({ 234 let styles = StyleSheet.create({
203 container: { 235 container: {
204 marginLeft: -1, 236 marginLeft: -1,
205 - width: width + 2, 237 + width: backgroundWidth + 2,
206 height: backgroundHeight, 238 height: backgroundHeight,
207 borderTopColor: 'transparent', 239 borderTopColor: 'transparent',
208 borderBottomColor: '#e5e5e5', 240 borderBottomColor: '#e5e5e5',
@@ -46,6 +46,7 @@ class SeckillContainer extends Component { @@ -46,6 +46,7 @@ class SeckillContainer extends Component {
46 this._onPressRemindBtn = this._onPressRemindBtn.bind(this); 46 this._onPressRemindBtn = this._onPressRemindBtn.bind(this);
47 this._onRefresh = this._onRefresh.bind(this); 47 this._onRefresh = this._onRefresh.bind(this);
48 this._onClearRemindTip = this._onClearRemindTip.bind(this); 48 this._onClearRemindTip = this._onClearRemindTip.bind(this);
  49 + this._onFocusToCurStartedActivity = this._onFocusToCurStartedActivity.bind(this);
49 } 50 }
50 51
51 componentDidMount() { 52 componentDidMount() {
@@ -72,6 +73,10 @@ class SeckillContainer extends Component { @@ -72,6 +73,10 @@ class SeckillContainer extends Component {
72 this.props.actions.addCancelUserReminderClearTip(); 73 this.props.actions.addCancelUserReminderClearTip();
73 } 74 }
74 75
  76 + _onFocusToCurStartedActivity(activity) {
  77 + this.props.actions.getSeckillQueryActivity(activity.startTime);
  78 + }
  79 +
75 render() { 80 render() {
76 81
77 let { 82 let {
@@ -96,6 +101,7 @@ class SeckillContainer extends Component { @@ -96,6 +101,7 @@ class SeckillContainer extends Component {
96 onPressRemindBtn={this._onPressRemindBtn} 101 onPressRemindBtn={this._onPressRemindBtn}
97 onRefresh={this._onRefresh} 102 onRefresh={this._onRefresh}
98 onClearRemindTip={this._onClearRemindTip} 103 onClearRemindTip={this._onClearRemindTip}
  104 + onFocusToCurStartedActivity={this._onFocusToCurStartedActivity}
99 /> 105 />
100 ); 106 );
101 } 107 }
@@ -153,10 +153,12 @@ export function setStartTime(startTime) { @@ -153,10 +153,12 @@ export function setStartTime(startTime) {
153 /* 153 /*
154 * 秒杀时间栏 154 * 秒杀时间栏
155 */ 155 */
156 -export function getSeckillQueryActivity() { 156 +export function getSeckillQueryActivity(inStartTime = 0) {
157 return (dispatch, getState) => { 157 return (dispatch, getState) => {
158 let {app, seckill, startTime} = getState(); 158 let {app, seckill, startTime} = getState();
159 - 159 + if (inStartTime) {
  160 + startTime = inStartTime;
  161 + }
160 dispatch(queryActivityRequest()); 162 dispatch(queryActivityRequest());
161 return new SeckillService(app.host).fetchQueryActivity() 163 return new SeckillService(app.host).fetchQueryActivity()
162 .then(json => { 164 .then(json => {
@@ -391,8 +393,13 @@ export function refreshList() { @@ -391,8 +393,13 @@ export function refreshList() {
391 return (dispatch, getState) => { 393 return (dispatch, getState) => {
392 let {app, seckill} = getState(); 394 let {app, seckill} = getState();
393 let {queryActivityInfo,queryProductList} = seckill; 395 let {queryActivityInfo,queryProductList} = seckill;
394 - if (curActivityId !== 0) {  
395 - dispatch(getSeckillRemindList(curActivityId)); 396 +
  397 + if (curActivityId !== 0 && queryActivityInfo.secKillProductVoList) {
  398 + queryActivityInfo.secKillProductVoList.forEach((activityInfo, i) => {
  399 + if (activityInfo.get('activityId') === curActivityId) {
  400 + dispatch(getSeckillQueryActivity(activityInfo.get('startTime')));
  401 + }
  402 + });
396 } else { 403 } else {
397 dispatch(getSeckillQueryActivity()); 404 dispatch(getSeckillQueryActivity());
398 } 405 }