首页页面UI review by 盖剑秋

@@ -128,7 +128,7 @@ export default function native(platform) {
 							/>
 
 							<Scene 
-								key='Account'
+								key='AccountSettlement'
 								component={AccountSettlementContainer}
 								title='对账结算'
 								hideNavBar={false}

+'use strict';
+
+import React from 'react-native';
+
+
+let {
+    Component,
+    View,
+    Text,
+    Image,
+    ListView,
+    TouchableHighlight,
+    Dimensions,
+    StyleSheet,
+} = React;
+
+
+export default class Category extends Component {
+
+    static propTypes = {
+        content: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                type: React.PropTypes.string,
+                thumb: React.PropTypes.number,
+                title: React.PropTypes.string,
+            })
+        ),
+        onPress: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this._renderRow = this._renderRow.bind(this);
+        this._pressRow = this._pressRow.bind(this);
+
+        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+        this.dataSource = ds.cloneWithRows(this.props.content);
+    }
+
+    _pressRow(rowID) {
+        this.props.onPress && this.props.onPress(rowID);
+    }
+
+    _renderRow(rowData, sectionID, rowID) {
+        return (
+            <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor={'white'} >
+                <View style={styles.row}>
+                    <Image style={styles.thumb} source={rowData.thumb} />
+                    <Text style={styles.text}>
+                        {rowData.title}
+                    </Text>
+                </View>
+            </TouchableHighlight>
+        );
+    }
+
+	render() {
+        return (
+            <ListView
+                contentContainerStyle={styles.container}
+                dataSource={this.dataSource}
+                renderRow={this._renderRow}
+            />
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+    },
+    row: {
+        width: width / 3,
+        height: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 10,
+    },
+    image: {
+        width: 60,
+        height: 60,
+    },
+    text: {
+        margin: 8,
+        fontSize: 12,
+        color: '#444444',
+        textAlign: 'center',
+    },
+
+});
\ No newline at end of file

@@ -61,7 +61,7 @@ export default class GuideItem extends Component {
     }
 }
 
-let {height, width} = Dimensions.get('window');
+let {width, height} = Dimensions.get('window');
 let textPaddingTop = height * 7 / 10;
 let buttonMargin = (width - 165) / 2;
 

 'use strict';
 
 import React from 'react-native';
-import PlainText from './PlainText';
+import PlainTextSection from './PlainTextSection';
+import TrendTextSection from './TrendTextSection';
+import PlaceHolder from './PlaceHolder';
+import Category from './Category';
 
 let {
     Component,
     View,
     Text,
+    ScrollView,
     Platform
 } = React;
 
-import RNRF, { 
-    Route, 
-    Scene, 
-    TabBar,
-    Actions
-} from 'react-native-router-flux';
-
 export default class Home extends Component {
 
+    static propTypes = {
+        section1: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                top: React.PropTypes.string,
+                bottom: React.PropTypes.string,
+                small: React.PropTypes.string,
+                style: View.propTypes.style,
+            })
+        ),
+        section2: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                top: React.PropTypes.string,
+                bottom: React.PropTypes.string,
+                small: React.PropTypes.string,
+                style: View.propTypes.style,
+            })
+        ),
+        section3: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                type: React.PropTypes.string,
+                thumb: React.PropTypes.number,
+                title: React.PropTypes.string,
+            })
+        ),
+        onPressCategory: React.PropTypes.func,
+    };
+
 	render() {
-        
+
         return (
-            <PlainText 
-                topText={'同品类中品牌排名\n真好玩'}
-                bottomText={'76'}
-                containerStyle={{backgroundColor: 'white', width: 200, top: 100}}
-            />
+            <ScrollView>
+                
+                <TrendTextSection content={this.props.section1} />
+                <PlaceHolder />
+                <PlainTextSection content={this.props.section2} />
+                <PlaceHolder />
+                <Category content={this.props.section3} onPress={this.props.onPressCategory} />
 
+            </ScrollView>
         );
         
     }

+'use strict';
+
+import React from 'react-native';
+
+
+let {
+    Component,
+    View,
+    Text,
+    StyleSheet,
+    Dimensions
+} = React;
+
+
+export default class PlaceHolder extends Component {
+
+    static propTypes = {
+        containerStyle: View.propTypes.style,
+    };
+
+	render() {
+        
+        return (
+            <View style={[styles.container, this.props.containerStyle]} />
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        width,
+        height: 15,
+        backgroundColor: '#F0F0F0',
+    },
+
+});
\ No newline at end of file

@@ -35,24 +35,22 @@ export default class PlainText extends Component {
 
 let styles = StyleSheet.create({
     container: {
-        backgroundColor: 'white',
+        
     },
     topText: {
         fontSize: 14,
         color: '#444444',
         textAlign: 'center',
         lineHeight: 20,
-        marginTop: 20,
+        marginTop: 15,
         marginBottom: 10,
-        backgroundColor: 'yellow',
     },
     bottomText: {
         fontSize: 17,
         color: '#D0021B',
         fontWeight: 'bold',
         textAlign: 'center',
-        marginBottom: 20,
-        backgroundColor: 'yellow',
+        marginBottom: 15,
     },
 
 });
\ No newline at end of file

+'use strict';
+
+import React from 'react-native';
+import PlainText from './PlainText';
+
+let {
+    Component,
+    View,
+    Text,
+    Platform,
+    StyleSheet,
+    Dimensions
+} = React;
+
+
+export default class PlainTextSection extends Component {
+
+    static propTypes = {
+        containerStyle: View.propTypes.style,
+        content: React.PropTypes.arrayOf(
+        	React.PropTypes.shape({
+      			top: React.PropTypes.string,
+      			bottom: React.PropTypes.string,
+      			style: View.propTypes.style,
+    		})
+        ),
+    };
+
+	render() {
+
+        return (
+            <View style={[styles.container, this.props.containerStyle]}>
+            	{this.props.content.map((item, i) => <PlainText 
+            		key={i}
+                    topText={item.top}
+                    bottomText={item.bottom}
+                    containerStyle={[styles.contentContainerStyle, item.style]}
+                />)}
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        backgroundColor: 'white',
+        width,
+    },
+    contentContainerStyle: {
+        width: width / 2,
+    },
+
+});
\ No newline at end of file

+'use strict';
+
+import React from 'react-native';
+
+
+let {
+    Component,
+    View,
+    Text,
+    Image,
+    Platform,
+    StyleSheet,
+} = React;
+
+
+export default class TrendText extends Component {
+
+    static propTypes = {
+        topText: React.PropTypes.string,
+        bottomText: React.PropTypes.string,
+        smallText: React.PropTypes.string,
+        arrowUp: React.PropTypes.bool,
+        containerStyle: View.propTypes.style,
+        topTextStyle: View.propTypes.style,
+        bottomTextStyle: View.propTypes.style,
+        imageStyle: View.propTypes.style,
+        smallTextStyle: View.propTypes.style,
+    };
+
+	render() {
+        
+        let arrow = this.props.arrowUp ? require('../images/arrow_up.png') : require('../images/arrow_down.png');
+
+        return (
+            <View style={[styles.container, this.props.containerStyle]}>
+                <Text style={[styles.topText, this.props.topTextStyle]}>{this.props.topText}</Text>
+                <View style={styles.richContainer}>
+                    <Image source={arrow} style={[styles.image, this.props.imageStyle]} />
+                    <Text style={[styles.bottomText, this.props.bottomTextStyle]}>{this.props.bottomText}</Text>
+                    <Text style={[styles.smallText, this.props.smallTextStyle]}>{this.props.smallText}</Text>
+                </View>
+                
+            </View>
+        );
+    }
+}
+
+let styles = StyleSheet.create({
+    container: {
+
+    },
+    topText: {
+        fontSize: 14,
+        color: '#444444',
+        textAlign: 'center',
+        lineHeight: 20,
+        marginTop: 15,
+        marginBottom: 10,
+    },
+    richContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        alignItems: 'center',
+        marginBottom: 15,
+    },
+    image: {
+        width: 17,
+        height: 17,
+        paddingVertical: 10,
+    },
+    bottomText: {
+        fontSize: 17,
+        color: '#D0021B',
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    smallText: {
+        fontSize: 12,
+        textAlign: 'center',
+        color: '#444444',
+    },
+
+});
\ No newline at end of file

+'use strict';
+
+import React from 'react-native';
+import PlainText from './PlainText';
+import TrendText from './TrendText';
+
+let {
+    Component,
+    View,
+    Text,
+    Platform,
+    StyleSheet,
+    Dimensions
+} = React;
+
+
+export default class TrendTextSection extends Component {
+
+    static propTypes = {
+        containerStyle: View.propTypes.style,
+        content: React.PropTypes.arrayOf(
+        	React.PropTypes.shape({
+      			top: React.PropTypes.string,
+      			bottom: React.PropTypes.string,
+                small: React.PropTypes.string,
+      			style: View.propTypes.style,
+    		})
+        ),
+    };
+
+	render() {
+
+        let item1 = this.props.content[0];
+        let item2 = this.props.content[1];
+
+        return (
+            <View style={[styles.container, this.props.containerStyle]}>
+                <PlainText 
+                    topText={item1.top}
+                    bottomText={item1.bottom}
+                    containerStyle={[styles.contentContainerStyle, item1.style]}
+                />
+
+                <TrendText
+                    topText={item2.top}
+                    bottomText={item2.bottom}
+                    smallText={item2.small}
+                    containerStyle={[styles.contentContainerStyle, item2.style]}
+                />
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        backgroundColor: 'white',
+        width,
+    },
+    contentContainerStyle: {
+        width: width / 2,
+    },
+
+});
\ No newline at end of file

@@ -34,6 +34,13 @@ export default keyMirror({
     HOME_OVERVIEW_SUCCESS: null,
     HOME_OVERVIEW_FAILURE: null,
 
+    GO_TO_SALE_STATS: null,
+    GO_TO_RETURN_STATS: null,
+    GO_TO_STOCK_STATS: null,
+    GO_TO_DELIVERY_STATS: null,
+    GO_TO_REQUEST_STATS: null,
+    GO_TO_ACCOUNT_SETTLEMENT: null,
+
     /*
     GET_PROFILE_REQUEST: null,
     GET_PROFILE_SUCCESS: null,

@@ -15,5 +15,13 @@ module.exports = {
     storeKey: {
         SESSION_TOKEN_KEY: 'SESSION_TOKEN_KEY',
         GUIDE_STATE_KEY: 'GUIDE_STATE_KEY',
+    },
+    statsKey: {
+        saleStats: 'saleStats',
+        returnStats: 'returnStats',
+        stockStats: 'stockStats',
+        deliveryStats: 'deliveryStats',
+        requestStats: 'requestStats',
+        accountSettlement: 'accountSettlement',
     }
 }
\ No newline at end of file

@@ -10,13 +10,14 @@ import {Map} from 'immutable';
 import Home from '../components/Home';
 
 import * as homeActions from '../reducers/home/homeActions';
+import CONFIG from '../constants/config';
 
 let {
     Component,
+    ScrollView,
     View,
-    Text,
-    WebView,
-    StyleSheet
+    StyleSheet,
+    Dimensions
 } = React;
 
 /**
@@ -55,21 +56,102 @@ function mapDispatchToProps(dispatch) {
 
 class HomeContainer extends Component {
 
-    componentDidMount() {
+    constructor(props) {
+        super(props);
+    
+        this._onPressCategory = this._onPressCategory.bind(this);
+
+        this.content = [
+            {
+                top: '同品类中品牌排名',
+                bottom: '76',
+                //bottom: this.props.home.rank,
+            },
+            {
+                top: '较上周同期',
+                arrowUp: true,
+                //arrowUp: this.props.home.rise,
+                bottom: '28',
+                // bottom: this.props.home.riseCount,
+                small: '个名次',
+            }
+        ];
+
+        this.content2 = [
+            {
+                top: '今日有效订单的\n商品件数',
+                bottom: '7600',
+                //bottom: this.props.home.goodsCount,
+            },
+            {
+                top: '今日有效订单的\n商品金额（元）',
+                bottom: '↑↓19800.00',
+                //bottom: this.props.home.goodsCount,
+            }
+        ];
+
+        this.category = [
+            {
+                type: CONFIG.statsKey.saleStats,
+                thumb: require('../images/xiaoshou.png'),
+                title: '销售统计',
+            },
+            {
+                type: CONFIG.statsKey.returnStats,
+                thumb: require('../images/tuihuo.png'),
+                title: '退货统计',
+            },
+            {
+                type: CONFIG.statsKey.stockStats,
+                thumb: require('../images/kucun.png'),
+                title: '库存统计',
+            },
+            {
+                type: CONFIG.statsKey.deliveryStats,
+                thumb: require('../images/fahuo.png'),
+                title: '发货统计',
+            },
+            {
+                type: CONFIG.statsKey.requestStats,
+                thumb: require('../images/qingtui.png'),
+                title: '请退统计',
+            },
+            {
+                type: CONFIG.statsKey.accountSettlement,
+                thumb: require('../images/duizhang.png'),
+                title: '对账结算',
+            },
+        ];
 
     }
 
+    _onPressCategory(id) {
+        let item = this.category[id];
+        this.props.actions.goToStatsPage(item.type);
+    }
+
 	render() {
 
         return (
-            <Home />
+            <View style={styles.container}>
+                <Home 
+                    section1={this.content}
+                    section2={this.content2}
+                    section3={this.category}
+                    onPressCategory={this._onPressCategory}
+                />
+            </View>
         );
     }
 }
 
+let {width, height} = Dimensions.get('window');
 
 let styles = StyleSheet.create({
- 
+    container: {
+        top: 64,
+        height: height - 64 - 49,
+    },
  
 });
 

@@ -32,7 +32,7 @@ export function getDisplayState() {
         store.get(guideDisplayState)
             .then((state) => {
                 if (state) {
-                    Actions.Login();
+                    Actions.Drawer();
                 } else {
                     Actions.Guide();
                 }

@@ -7,6 +7,7 @@
 'use strict';
 
 import {Actions} from 'react-native-router-flux';
+import CONFIG from '../../constants/config';
 
 const {
 
@@ -14,6 +15,13 @@ const {
     HOME_OVERVIEW_SUCCESS,
     HOME_OVERVIEW_FAILURE,
 
+    GO_TO_SALE_STATS,
+    GO_TO_RETURN_STATS,
+    GO_TO_STOCK_STATS,
+    GO_TO_DELIVERY_STATS,
+    GO_TO_REQUEST_STATS,
+    GO_TO_ACCOUNT_SETTLEMENT,
+
 } = require('../../constants/actionTypes').default;
 
 export function overviewRequest(shopId) {
@@ -53,3 +61,39 @@ export function overview(shopId) {
 	
 }
 
+export function goToStatsPage(type) {
+
+    switch (type) {
+        case CONFIG.statsKey.saleStats:
+            Actions.SaleStats();
+            return {
+                type: GO_TO_SALE_STATS,
+            };
+        case CONFIG.statsKey.returnStats:
+            Actions.ReturnStats();
+            return {
+                type: GO_TO_RETURN_STATS,
+            };
+        case CONFIG.statsKey.stockStats:
+            Actions.StockStats();
+            return {
+                type: GO_TO_STOCK_STATS,
+            };
+        case CONFIG.statsKey.deliveryStats:
+            Actions.DeliveryStats();
+            return {
+                type: GO_TO_DELIVERY_STATS,
+            };
+        case CONFIG.statsKey.requestStats:
+            Actions.RequestStats();
+            return {
+                type: GO_TO_REQUEST_STATS,
+            };
+        case CONFIG.statsKey.accountSettlement:
+            Actions.AccountSettlement();
+            return {
+                type: GO_TO_ACCOUNT_SETTLEMENT,
+            };
+    }
+}
+

@@ -17,6 +17,13 @@ const {
     HOME_OVERVIEW_SUCCESS,
     HOME_OVERVIEW_FAILURE,
 
+    GO_TO_SALE_STATS,
+    GO_TO_RETURN_STATS,
+    GO_TO_STOCK_STATS,
+    GO_TO_DELIVERY_STATS,
+    GO_TO_REQUEST_STATS,
+    GO_TO_ACCOUNT_SETTLEMENT,
+
 } = require('../../constants/actionTypes').default;
 
 const initialState = new InitialState;
@@ -50,9 +57,16 @@ export default function userReducer(state = initialState, action) {
 		}
 
 		case HOME_OVERVIEW_FAILURE:
-    	return state.set('isFetching', false)
-      		.set('error', action.payload);
+	    	return state.set('isFetching', false)
+	      		.set('error', action.payload);
 
+      	case GO_TO_SALE_STATS:
+        case GO_TO_RETURN_STATS:
+        case GO_TO_STOCK_STATS:
+        case GO_TO_DELIVERY_STATS:
+        case GO_TO_REQUEST_STATS:
+        case GO_TO_ACCOUNT_SETTLEMENT:
+        	return state;
 
     }