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 {
<TouchableOpacity onPress={() => {
this.props.onPressRemindBtn && this.props.onPressRemindBtn(rowData);
}}>
<View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor}]}>
<Text style={{color:btnTextcolor}}>{tipState}</Text>
</View>
{
(tipState=='取消提醒')?
<View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor,borderWidth:1.0}]}>
<Text style={{color:btnTextcolor}}>{tipState}</Text>
</View>
:<View style={[styles.priceClickTipViewRight,{backgroundColor: btnBgColor}]}>
<Text style={{color:btnTextcolor}}>{tipState}</Text>
</View>
}
</TouchableOpacity>
</View>
... ...
... ... @@ -75,6 +75,7 @@ export default class Seckill extends Component {
<TimeListView
resource={this.queryActivityInfo.secKillProductVoList.toArray()}
onPressTimeItem={this.props.onPressTimeItem}
onFocusToCurStartedActivity={this.props.onFocusToCurStartedActivity}
diff={diff}
/>
);
... ...
... ... @@ -20,6 +20,7 @@ export default class SeckillTimeListView extends Component {
super(props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this._scrollToFocusActivity = this._scrollToFocusActivity.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
... ... @@ -35,11 +36,43 @@ export default class SeckillTimeListView extends Component {
};
}
_scrollToFocusActivity = () => {
//focus
if (this.secKillProductVoList.length >= 1) {
let listLength = this.secKillProductVoList.length;
let curFocusIndex = 0;
let scrollX = 0;
this.secKillProductVoList.forEach((activityItem, i) => {
if (activityItem.get('activityId') === this.curFocusActivity.get('activityId')) {
curFocusIndex = i;
}
});
// if (curFocusIndex > 1 && curFocusIndex < listLength-2) {
scrollX = (curFocusIndex - 1) * rowContainerWidth;
this.listView && this.listView.scrollTo({x: scrollX, y: 0, animated: false});
// }
}
}
componentDidMount() {
let jumpToTimeoutActivity = () => {
this.secKillProductVoList.forEach((activityItem, i) => {
let nowTime = Date.parse(new Date()) / 1000 + diffTime;
let startTime = activityItem.get('startTime') / 1000;
let offsetTime = nowTime - startTime;
if (activityItem.get('focus') == false && Math.abs(offsetTime) <= 2) {
this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(activityItem.toJS());
}
});
};
this.timer = setInterval(function () {
if (!this.curFocusActivity && this.curFocusActivity.size > 0 && !this.curFocusActivity.has('over')) {
return;
}
jumpToTimeoutActivity();
let nowTime = Date.parse(new Date()) / 1000 + diffTime;
let time = this.curFocusActivity.has('now') ? this.curFocusActivity.get('endTime'): this.curFocusActivity.get('startTime') / 1000;
let offsetTime = time - nowTime;
... ... @@ -48,13 +81,15 @@ export default class SeckillTimeListView extends Component {
let second = offsetTime % 60;
if (offsetTime <= 0) {
if (!this.state.tickTimeOut) {
this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(this.curFocusActivity.toJS());
}
this.setState({
tickHour: '00',
tickMinute: '00',
tickSecond: '00',
tickTimeOut: true,
});
this.props.onPressTimeItem && this.props.onPressTimeItem(this.curFocusActivity.toJS());
} else {
this.setState({
tickHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour),
... ... @@ -65,23 +100,7 @@ export default class SeckillTimeListView extends Component {
}
}.bind(this), 1000);
//focus
if (this.secKillProductVoList.length >= 1) {
let listLength = this.secKillProductVoList.length;
let curFocusIndex = 0;
let scrollX = 0;
this.secKillProductVoList.forEach((activityItem, i) => {
if (activityItem.get('activityId') === this.curFocusActivity.get('activityId')) {
curFocusIndex = i;
}
});
if (curFocusIndex > 1 && curFocusIndex < listLength-2) {
scrollX = (curFocusIndex - 1) * rowContainerWidth;
this.listView.scrollTo({x: scrollX, y: 0, animated: false});
}
}
this._scrollToFocusActivity();
}
... ... @@ -89,6 +108,15 @@ export default class SeckillTimeListView extends Component {
this.timer && clearInterval(this.timer);
}
componentWillReceiveProps(nextProps) {
if (nextProps.resource && nextProps.resource.length > 0) {
let focusActivity = nextProps.resource.find(activityTimeItem => activityTimeItem.get('focus'));
this.curFocusActivity = focusActivity;
}
this._scrollToFocusActivity();
}
_renderRow(rowData, sectionID, rowID) {
rowData = rowData.toJS();
let colorStyle = rowData.focus ? {color: '#d30018'} : {color: '#3e3e3e'};
... ... @@ -176,15 +204,19 @@ export default class SeckillTimeListView extends Component {
}
diffTime = diff;
this.secKillProductVoList = resource;
backgroundWidth = Math.max(rowContainerWidth * (resource.length - 1) + rowContainerFocusWidth, width);
return (
<View style={[styles.container]}>
<ListView
contentContainerStyle={[styles.contentContainer]}
ref={(ref)=>this.listView=ref}
contentContainerStyle={[styles.contentContainer,{width:backgroundWidth}]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(resource)}
renderSeparator={this._renderSeparator}
renderRow={this._renderRow}
scrollEnabled={false}
scrollEnabled={true}
horizontal={true}
scrollsToTop={false}
/>
</View>
... ... @@ -202,7 +234,7 @@ let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
width: backgroundWidth + 2,
height: backgroundHeight,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
... ...
... ... @@ -46,6 +46,7 @@ class SeckillContainer extends Component {
this._onPressRemindBtn = this._onPressRemindBtn.bind(this);
this._onRefresh = this._onRefresh.bind(this);
this._onClearRemindTip = this._onClearRemindTip.bind(this);
this._onFocusToCurStartedActivity = this._onFocusToCurStartedActivity.bind(this);
}
componentDidMount() {
... ... @@ -72,6 +73,10 @@ class SeckillContainer extends Component {
this.props.actions.addCancelUserReminderClearTip();
}
_onFocusToCurStartedActivity(activity) {
this.props.actions.getSeckillQueryActivity(activity.startTime);
}
render() {
let {
... ... @@ -96,6 +101,7 @@ class SeckillContainer extends Component {
onPressRemindBtn={this._onPressRemindBtn}
onRefresh={this._onRefresh}
onClearRemindTip={this._onClearRemindTip}
onFocusToCurStartedActivity={this._onFocusToCurStartedActivity}
/>
);
}
... ...
... ... @@ -153,10 +153,12 @@ export function setStartTime(startTime) {
/*
* 秒杀时间栏
*/
export function getSeckillQueryActivity() {
export function getSeckillQueryActivity(inStartTime = 0) {
return (dispatch, getState) => {
let {app, seckill, startTime} = getState();
if (inStartTime) {
startTime = inStartTime;
}
dispatch(queryActivityRequest());
return new SeckillService(app.host).fetchQueryActivity()
.then(json => {
... ... @@ -391,8 +393,13 @@ export function refreshList() {
return (dispatch, getState) => {
let {app, seckill} = getState();
let {queryActivityInfo,queryProductList} = seckill;
if (curActivityId !== 0) {
dispatch(getSeckillRemindList(curActivityId));
if (curActivityId !== 0 && queryActivityInfo.secKillProductVoList) {
queryActivityInfo.secKillProductVoList.forEach((activityInfo, i) => {
if (activityInfo.get('activityId') === curActivityId) {
dispatch(getSeckillQueryActivity(activityInfo.get('startTime')));
}
});
} else {
dispatch(getSeckillQueryActivity());
}
... ...