mobile / yh_vendor · Commits

Go to a project

Authored by 盖剑秋
Commit d68046f410c36439a90c8183e9e3bd58744dfaf5 1 parent 418de1b1

Account settlement component, reviewer:yu liang.

Inline Side-by-side
Showing 7 changed files with 217 additions and 66 deletions
... ... @@ -39,6 +39,8 @@ import guideInitialState from './reducers/guide/guideInitialState';
import homeInitialState from './reducers/home/homeInitialState';
import messageInitialState from './reducers/message/messageInitialState';
import userInitialState from './reducers/user/userInitialState';
import accountSettlementaInitialState from './reducers/accountSettlement/accountSettlementInitialState';
import App from './containers/App';
import GuideContainer from './containers/GuideContainer';
... ... @@ -69,6 +71,7 @@ function getInitialState() {
home: (new homeInitialState),
message: (new messageInitialState),
user: (new userInitialState),
// accountSettlement: (new accountSettlementaInitialState),
};
return _initState;
}
... ...
'use strict';
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
ListView,
} from 'react-native';
let seporatorColor = '#e5e5e5'
export default class AccountSettlement extends Component {
constructor(props) {
super (props);
this.dataSource = new ListView.DataSource({
rowHasChanged:(r1,r2)=>r1!==r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});
this.renderRow = this.renderRow.bind(this);
}
renderRow(Data,sectionId) {
switch (sectionId) {
case 'SECTION_HEADER':
return (
<View style={styles.headerContainer}>
<Text style={[styles.commonText, styles.headerText]}>
{Data.title}
</Text>
<Text style={[styles.valueText, styles.headerText]}>
{Data.content}
</Text>
</View>
);
case 'SECTION_SEPORATOR':
return(
<View style={{
height:15,
borderBottomWidth:0.5,
borderColor:seporatorColor,
}}/>
);
case 'SECTION_TITLE':
return(
<View style={styles.cellContainer}>
<Text style={[styles.inCellText,{flex:0.9}]}>品牌</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:1.0}]}>生成日期</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:0.8}]}>状态</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:1.3}]}>账单金额（元）</Text>
</View>
);
case 'SECTION_CONTENT':
return (
<View style={styles.cellContainer}>
<Text style={[styles.inCellText,{flex:0.9}]}>{Data.brand}</Text>
<Text style={[styles.inCellText,{flex:1.0}]}>{Data.date}</Text>
<Text style={[styles.inCellText,{flex:0.8}]}>{Data.status}</Text>
<Text style={[styles.inCellText,{flex:1.3}]}>{Data.bill}</Text>
</View>
);
}
return (<Text>Error data source</Text>);
}
render() {
return (
<ListView
style={styles.container}
dataSource = {this.dataSource.cloneWithRowsAndSections(this.props.dataBlob)}
renderRow = {this.renderRow}
onEndReachedThreshold = {-200}
onEndReached = {this.props.fetchNextPage}
/>
);
}
}
const styles = StyleSheet.create({
cellContainer: {
backgroundColor:'white',
borderColor:'red',
flexDirection: 'row',
height: 45,
borderBottomWidth:0.5,
borderColor:seporatorColor,
},
inCellText:{
fontSize: 14,
marginTop: 15,
color: '#444444',
flex:1,
borderBottomWidth:0.5,
borderColor:seporatorColor,
textAlign: 'center',
},
container: {
top: 64,
flex:1,
},
headerContainer: {
flex: 1,
height: 80,
backgroundColor:'white',
flexDirection:'column',
borderBottomWidth:0.5,
borderColor:seporatorColor,
},
commonText:{
fontSize: 14,
marginTop: 20,
fontWeight:"300",
color: '#444444'
},
valueText:{
fontSize: 21,
marginTop: 10,
fontWeight: 'bold',
color: '#d0021b'
},
headerText: {
left:15,
},
});
... ...
... ... @@ -38,7 +38,9 @@ export default keyMirror({
PHONE_CALL: null,
ABOUT_US: null,
ACCOUNT_LIST_REQUEST:null,
ACCOUNT_LIST_SUCCESS:null,
ACCOUNT_LIST_FAILURE:null,
/*
GET_PROFILE_REQUEST: null,
GET_PROFILE_SUCCESS: null,
... ...
... ... @@ -2,6 +2,9 @@
'use strict';
import React, { Component } from 'react';
import AccountSettlement from '../components/AccountSettlement'
import {
StyleSheet,
View,
... ... @@ -12,7 +15,7 @@ from 'react-native';
export default class AccountSettlementContainer extends Component {
constructor(props){
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged:(r1,r2)=>r1!==r2,
... ... @@ -106,7 +109,6 @@ export default class AccountSettlementContainer extends Component {
],
};
this.renderRow = this.renderRow.bind(this);
this.fetchNextPage = this.fetchNextPage.bind(this);
this.state = {dataBlob:this.dataBlob};
}
... ... @@ -122,7 +124,8 @@ export default class AccountSettlementContainer extends Component {
date: '2016-01-23',
status: '已出账单',
bill:'923.00'
},{
},
{
brand:'vans',
date: '2016-01-23',
status: '已出账单',
... ... @@ -132,71 +135,13 @@ export default class AccountSettlementContainer extends Component {
console.log(this.dataBlob.SECTION_CONTENT);
this.setState({dataBlob:this.dataBlob});
}
renderRow(Data,sectionId) {
switch (sectionId) {
case 'SECTION_HEADER':
return (
<View style={styles.headerContainer}>
<Text style={[styles.commonText, styles.headerText]}>
{Data.title}
</Text>
<Text style={[styles.valueText, styles.headerText]}>
{Data.content}
</Text>
</View>
);
case 'SECTION_SEPORATOR':
return(
<View style=
{{
height:15,
borderBottomWidth:0.5,
borderColor:seporatorColor,
}}/>
);
case 'SECTION_TITLE':
return(
<View style={styles.cellContainer}>
<Text style={[styles.inCellText,{flex:0.9}]}>品牌</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:1.0}]}>生成日期</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:0.8}]}>状态</Text>
<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
<Text style={[styles.inCellText,{flex:1.3}]}>账单金额（元）</Text>
</View>
);
case 'SECTION_CONTENT':
return (
<View style={styles.cellContainer}>
<Text style={[styles.inCellText,{flex:0.9}]}>{Data.brand}</Text>
<Text style={[styles.inCellText,{flex:1.0}]}>{Data.date}</Text>
<Text style={[styles.inCellText,{flex:0.8}]}>{Data.status}</Text>
<Text style={[styles.inCellText,{flex:1.3}]}>{Data.bill}</Text>
</View>
);
}
return (<Text>Error data source</Text>);
}
render() {
return (
<View style={{flex:1}}>
<ListView
style={styles.container}
dataSource = {this.dataSource.cloneWithRowsAndSections(this.state.dataBlob)}
renderRow = {this.renderRow}
onEndReachedThreshold = {100}
onEndReached = {this.fetchNextPage}
>
</ListView>
<AccountSettlement
dataBlob={this.state.dataBlob}
fetchNextPage={this.fetchNextPage}
/>
</View>
);
}
}
... ...
'use strict';
import Request from '../services/Request';
const {
ACCOUNT_LIST_REQUEST,
ACCOUNT_LIST_SUCCESS,
ACCOUNT_LIST_FAILURE,
} = require('../../constants/actionTypes').default;
/**
* Request next page of account settlement data list...
* @method nextPageOfDataRequest
* @return {JS Objecrt}
*/
export function nextPageOfDataRequest() {
return {
type: ACCOUNT_LIST_REQUEST,
}
}
/**
* Success to fetch data..
* @method nextPageOfDataSuccess
* @param {Maybe array} json remote data
* @return {[type]} [description]
*/
export function nextPageOfDataSuccess(json) {
return {
type: ACCOUNT_LIST_SUCCESS,
playload: json,
}
}
export function nextPageOfDataFailure(error) {
return {
type: ACCOUNT_LIST_FAILURE,
playload: error,
}
}
... ...
'use strict';
import {List, Record} from 'immutable';
let InitialState = Record({
error: null,
isValid: false,
isFetching: false,
});
export default InitialState;
... ...