Merge branch 'develop' of http://git.dev.yoho.cn/mobile/yh_vendor into develop

@@ -59,6 +59,7 @@ import AboutUsContainer from './containers/AboutUsContainer'
 import StockStatsContainer from './containers/StockStatsContainer'
 import SaleStatisticsContainer from './containers/SaleStatisticsContainer'
 import DeliveryStatsContainer from './containers/DeliveryStatsContainer'
+import MessageDetailContainer from './containers/MessageDetailContainer'
 
 import NavBar from './components/NavBar';
 import TabIcon from './containers/TabIcon';
@@ -157,6 +158,24 @@ export default function native(platform) {
 								component={SaleStatisticsContainer}
 								title='销售统计'
 								hideNavBar={false}
+								navBar={NavBar}
+								titleStyle={styles.navTitle}
+								type="push"
+							/>
+							<Scene
+								key="MessageDetail"
+								component={MessageDetailContainer}
+								hideNavBar={false}
+								navBar={NavBar}
+								title={'消息'}
+								titleStyle={styles.navTitle}
+								type="push"
+							/>
+							<Scene
+								key="Test"
+								component={GuideContainer}
+								title='Test'
+								hideNavBar={false}
 								initial={false}
 								navBar={NavBar}
 								titleStyle={styles.navTitle}

@@ -5,21 +5,141 @@ import React from 'react-native';
 let {
     Component,
     View,
-    Text
+    Text,
+    ListView,
+    TouchableHighlight,
+    Dimensions,
+    StyleSheet,
+    Platform,
+    TouchableOpacity
 } = React;
 
 export default class Meassage extends Component {
+
+    static propTypes = {
+        items: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                type:React.PropTypes.string,
+                title: React.PropTypes.string,
+                time: React.PropTypes.string,
+                content: React.PropTypes.string,
+            })
+        ),
+        onPressItem: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+        this.renderItem = this.renderItem.bind(this);
+        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    }
+    
+    renderName(item) {
+        if (item.type!=='1') {
+            return (
+                <Text style={{color:'#B0B0B0',fontSize: 10,marginLeft:8, }}>尊敬的用户:</Text>
+            );
+        } else {
+            return null;
+        }
+    }
+
+    renderItem(item, sectionID, rowID) {
+        return (
+            <TouchableOpacity activeOpacity={0.5} onPress={() => this.props.onPressItem(rowID)}>
+                <View style={styles.row}>
+                    <View style={styles.row_top}>
+                        <Text style={styles.title}>{item.title}</Text>
+                        <Text style={styles.time}>{item.time}</Text>
+                    </View>
+                    <View style={styles.line}/>
+                    {this.renderName(item)}
+                    <Text style={styles.subtitle} numberOfLines={1}>{item.content}</Text>
+                    <Text style={styles.text_detail}>查看详情</Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
 	render() {
         return (
-            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center',}}>
-            	<Text>Meassage</Text>
+            <View style={styles.listContainer}>
+                <ListView style={styles.list}
+                    dataSource={this.ds.cloneWithRows(this.props.items)}
+                    renderRow={this.renderItem}
+                    renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
+                />
             </View>
         );
 
     }
 
-    
-        nextPage(){
-            Actions.Account();
-        }
-}
\ No newline at end of file
+    nextPage(){
+        
+    }
+}
+
+let {height, width} = Dimensions.get('window');
+const styles = StyleSheet.create({
+
+    listContainer:{
+        flex: 1,
+        alignItems: 'center',
+    },
+
+    list:{
+        flex: 1,
+    },
+
+    row: {
+        flexDirection: 'column',
+        height: 100,
+        width: width,
+        backgroundColor: '#F5FCFF',
+    },
+    row_top: {
+        flexDirection: 'row',
+        height: 40,
+        width: width,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    title: {
+        flex: 1,
+        color: '#444444',
+        fontSize: 14,
+        marginLeft: 10,
+    },
+    time: {
+        width: 60,
+        color: '#B0B0B0',
+        fontSize: 10,
+
+    },
+    subtitle: {
+        fontSize: 10,
+        marginLeft:8, 
+        color: '#B0B0B0',
+    },
+    text_detail: {
+        fontSize: 10,
+        alignSelf: 'flex-end',
+        marginRight:10, 
+        color: '#B0B0B0', 
+       
+    },
+    listView: {
+        marginTop: 120,
+
+    },
+    line: {
+        height: 1,
+        backgroundColor: '#B0B0B0',
+        marginLeft:8,
+        marginBottom:8,
+     },
+    separator: {
+        height: 8,
+    },
+});
\ No newline at end of file

+'use strict';
+
+import React from 'react-native';
+
+let {
+    Component,
+    View,
+    Text,
+    ListView,
+    TouchableHighlight,
+    Dimensions,
+    StyleSheet,
+    Platform,
+    TouchableOpacity
+} = React;
+
+export default class MessageDetail extends Component {
+
+    static propTypes = {
+            title: React.PropTypes.string,
+            time: React.PropTypes.string,
+            content: React.PropTypes.string,
+    };
+
+    constructor(props) {
+        super(props);
+
+    }
+
+	render() {
+        return (
+             <View style={styles.container}>
+                    <View style={styles.row_top}>
+                        <Text style={styles.title}>{this.props.title}</Text>
+                    </View>
+                    <View style={styles.line}/>
+                    <Text style={styles.subtitle}>{this.props.content}</Text>
+                    <Text style={styles.text_detail}>Yoho!buy有货</Text>
+                     <Text style={styles.text_detail}>{this.props.time}</Text>
+                </View>
+        );
+    }
+
+}
+
+let {height, width} = Dimensions.get('window');
+const styles = StyleSheet.create({
+    container:{
+        flex: 1,
+        width: width,
+        height: height,
+        paddingLeft:8,
+        top:(Platform.OS === 'android') ? 50 : 64,
+        backgroundColor: '#F5FCFF',
+    },
+    title: {
+        flex: 1,
+        color: '#444444',
+        fontSize: 20,
+        marginLeft: 10,
+        marginRight: 18,
+    },
+    row_top: {
+        flexDirection: 'row',
+        height: 50,
+        width: width,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    subtitle: {
+        fontSize: 14,
+        marginLeft:8, 
+        color: '#444444',
+        marginRight: 18,
+    },
+    column: {
+        flexDirection: 'column',
+        height: 100,
+        width: width,
+
+        backgroundColor: '#F5FCFF',
+    },
+    line: {
+        height: 1,
+        backgroundColor: '#B0B0B0',
+        marginLeft:8,
+        marginBottom:8,
+     },
+     text_detail: {
+        fontSize: 12,
+        alignSelf: 'flex-end',
+        marginRight:10, 
+        color: '#B0B0B0', 
+       
+    },
+});
\ No newline at end of file

@@ -11,6 +11,7 @@ let {
     Text,
     Dimensions,
     TextInput,
+    Platform,
     TouchableWithoutFeedback
 } = React;
 
@@ -93,7 +94,7 @@ var styles = StyleSheet.create({
       alignItems: 'center',
       width: width,
       height: height,
-      top:64,
+      top:(Platform.OS === 'android') ? 50 : 64,
       backgroundColor: '#F5FCFF'
     },
     accountContainer:{

@@ -3,6 +3,8 @@
 import React from 'react-native';
 import TrendTextSection from './TrendTextSection';
 import Placeholder from './Placeholder';
+import DateSelector from './calendar/DateSelector';
+import CalendarPicker from './calendar/CalendarPicker';
 
 let {
     Component,
@@ -33,16 +35,62 @@ export default class SaleStatistics extends Component {
         ),
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showPicker: false,
+            selectdDate: '2016-01-26',
+        };
+
+        this.toogleSelector = this.toogleSelector.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onOK = this.onOK.bind(this);
+    }
+
+    toogleSelector() {
+        this.setState({
+            showPicker: !this.state.showPicker
+        });
+    }
+
+    onCancel() {
+        this.toogleSelector();
+    }
+
+    onOK(selected) {
+        let selectdDate;
+
+        if (selected.selectMode === 'day') {
+            let day = selected.day;
+            selectdDate = day.getFullYear() + '年' + (day.getMonth() + 1) + '月' + day.getDate() + '日';
+        } else if (selected.selectMode === 'week') {
+            let from = selected.from;
+            let to = selected.to;
+            selectdDate = from.getFullYear() + '年' + (from.getMonth() + 1) + '月' + from.getDate() + '日'
+                + '-' + to.getFullYear() + '年' + (to.getMonth() + 1) + '月' + to.getDate() + '日';
+        } else if (selected.selectMode === 'month') {
+            let year = selected.year;
+            selectdDate = selected.year + '年' + selected.month + '月';
+        }
+
+        this.setState({
+            showPicker: !this.state.showPicker,
+            selectdDate
+        });
+    }
+
 	render() {
 
         return (
             <ScrollView>
-
+                <DateSelector date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
+                <Placeholder />
                 <TrendTextSection content={this.props.section1} />
                 <Placeholder />
                 <TrendTextSection content={this.props.section2} />
                 <Placeholder />
-
+                {this.state.showPicker ? <CalendarPicker onCancel={this.onCancel} onOK={this.onOK}/> : <View/>}
 
             </ScrollView>
         );

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+} = React;
+
+import Month from './Month';
+import Year from './Year';
+
+console.disableYellowBox = true;
+
+let width = Dimensions.get('window').width - 20;
+
+export default class Calendar extends Component {
+    static defaultProps = {
+        onCancel: () => {
+
+        },
+
+        onOK: () => {
+
+        },
+
+        monthsLocale: ['1月', '2月', '3月', '4月', '5月', '6月',
+            '7月', '8月', '9月', '10月', '11月', '12月'],
+        weekDaysLocale: [ '日', '一', '二', '三', '四', '五', '六'],
+
+        width: width,
+
+        selectMode: 'week',
+
+        bodyBackColor: 'white',
+        bodyTextColor: 'black',
+        headerSepColor: 'grey',
+
+        dayCommonBackColor: 'white',
+        dayCommonTextColor: '#444444',
+
+        dayDisabledBackColor: 'white',
+        dayDisabledTextColor: '#B0B0B0',
+
+        daySelectedBackColor: '#FD9D2B',
+        daySelectedTextColor: '#444444',
+
+        dayInRangeBackColor: '#FD9D2B',
+        dayInRangeTextColor: '#444444'
+    };
+
+    static propTypes = {
+        selectFrom: React.PropTypes.instanceOf(Date),
+        selectTo: React.PropTypes.instanceOf(Date),
+
+        monthsCount: React.PropTypes.number,
+
+        monthsLocale: React.PropTypes.arrayOf(React.PropTypes.string),
+        weekDaysLocale: React.PropTypes.arrayOf(React.PropTypes.string),
+        startFromMonday: React.PropTypes.bool,
+
+        onCancel: React.PropTypes.func,
+        onOK: React.PropTypes.func,
+
+        width: React.PropTypes.number,
+
+        selectMode: React.PropTypes.oneOf(['day', 'week', 'month']),
+
+        bodyBackColor: React.PropTypes.string,
+        bodyTextColor: React.PropTypes.string,
+        headerSepColor: React.PropTypes.string,
+
+        dayCommonBackColor: React.PropTypes.string,
+        dayCommonTextColor: React.PropTypes.string,
+
+        dayDisabledBackColor: React.PropTypes.string,
+        dayDisabledTextColor: React.PropTypes.string,
+
+        daySelectedBackColor: React.PropTypes.string,
+        daySelectedTextColor: React.PropTypes.string,
+
+        dayInRangeBackColor: React.PropTypes.string,
+        dayInRangeTextColor: React.PropTypes.string
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.changeSelection = this.changeSelection.bind(this);
+        this.generateMonth = this.generateMonth.bind(this);
+        this.prevMonth = this.prevMonth.bind(this);
+        this.nextMonth = this.nextMonth.bind(this);
+
+        let {selectMode, selectFrom, selectTo, monthsCount} = this.props;
+
+        this.selected = {
+            selectMode: selectMode,
+            from: null,
+            to: null,
+            day: null,
+            week: 0,
+            month: 0,
+            year: 0,
+        };
+
+        this.selectMode = selectMode;
+        this.month = this.generateMonth(new Date());
+        this.weeksInMonth = this.generateWeeks(new Date());
+        this.monthsInYear = this.generateMonthsInYear(new Date());
+        this.currentYear = new Date().getFullYear();
+
+        this.state = {
+            selectMode: this.selectMode,
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+            monthsInYear: this.monthsInYear,
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.selectMode = nextProps.selectMode;
+        this.month = this.generateMonth(this.state.month[15].date);
+        this.weeksInMonth = this.generateWeeks(this.state.month[15].date);
+        this.monthsInYear = this.generateMonthsInYear(this.state.month[15].date);
+        this.setState({
+            selectMode: this.selectMode,
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    generateMonth(currentDate) {
+        let month = this.getDates(currentDate, this.props.startFromMonday);
+
+        month = month.map((day, i) => {
+            return {
+                date: day,
+                status: 'common',
+                disabled: day.getMonth() !== currentDate.getMonth() || day > Date.now(),
+                belongWeek: Math.floor(i / 7) + 1,
+                first: false,
+                last: false,
+            }
+        });
+
+        return month;
+    }
+
+    getDates(month, startFromMonday) {
+        month = new Date(month);
+        month.setDate(1);
+
+        var delta = month.getDay();
+        if (startFromMonday) {
+            delta--;
+            if (delta === -1) delta = 6;
+        }
+
+        var startDate = new Date(month);
+        startDate.setDate(startDate.getDate() - delta);
+
+        month.setMonth(month.getMonth() + 1);
+        month.setDate(0);
+
+        delta = 6 - month.getDay();
+        if (startFromMonday) {
+            delta++;
+            if (delta === 7) delta = 0;
+        }
+
+        var lastDate = new Date(month);
+        lastDate.setDate(lastDate.getDate() + delta);
+
+        var allDates = [];
+        while (startDate <= lastDate) {
+            allDates.push(new Date(startDate));
+            startDate.setDate(startDate.getDate() + 1);
+        }
+        return allDates;
+    }
+
+    generateWeeks(date) {
+
+        let weeksNum = Math.ceil(this.month.length / 7);    //月份的周数
+
+        let monthWeeks = [];
+        for (let i = 0; i < weeksNum; i++) {
+            monthWeeks[i] = i + 1;
+        }
+
+        monthWeeks = monthWeeks.map((week) => {
+            let disabled = this.selectMode === 'week' ? false : true;
+            return {
+                week: week,
+                status: 'common',
+                disabled: disabled,
+                first: false,
+                last: false,
+            }
+        });
+
+        return monthWeeks;
+    }
+
+    generateMonthsInYear(date) {
+        let monthsInYear = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        monthsInYear = monthsInYear.map((month) => {
+            let disabled = false;
+            // let earlierYear = date.getFullYear() > new Date().getFullYear();
+            //
+            // if (earlierYear) {
+            //     let earlierMonth = date.getMonth() > new Date().getMonth();
+            //     disabled = earlierMonth ? true : false;
+            // } else {
+            //     disabled = false;
+            // }
+            return {
+                month: month,
+                status: 'common',
+                disabled: disabled,
+            }
+        });
+
+        return monthsInYear;
+    }
+
+    changeSelection(value) {
+        this.selected.selectMode = this.state.selectMode;
+
+        if (this.state.selectMode === 'week') {
+            this.selectWeek(value);
+        }
+
+        if (this.state.selectMode === 'day') {
+            this.selectDay(value);
+        }
+
+        if (this.state.selectMode === 'month') {
+            this.selectMonth(value);
+        }
+    }
+
+    selectDay(value) {
+        let {date} = value;
+        let {month} = this;
+        month = month.map((item) => {
+            let status = item.date.toDateString() === date.toDateString() ? 'selected' : 'common';
+            let first = item.date.toDateString() === date.toDateString() ? true : false;
+            let last = item.date.toDateString() === date.toDateString() ? true : false;
+            return {
+                date: item.date,
+                status: status,
+                disabled: item.disabled,
+                belongWeek: item.belongWeek,
+                first,
+                last,
+            };
+        });
+
+        this.selected.day = date;
+
+        this.month = month;
+
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    selectWeek(value) {
+        let {belongWeek} = value;
+        let {month, weeksInMonth} = this;
+
+        weeksInMonth = weeksInMonth.map((item) => {
+            let status = item.week === belongWeek ? 'selected' : 'common';
+            let first = item.week === belongWeek ? true : false;
+            return {
+                week: item.week,
+                status: status,
+                disabled: item.disabled,
+                first: first,
+                last: false,
+            };
+        });
+
+        let currentWeekDays = month.filter((day) => {
+            return day.belongWeek === belongWeek;
+        });
+
+        let firstDay = currentWeekDays[0];
+        let lastDay = currentWeekDays[currentWeekDays.length - 1];
+
+        month = month.map((day) => {
+            let status = day.belongWeek === belongWeek ? 'selected' : 'common';
+            // let first = day.date.toDateString() === firstDay.date.toDateString() ? true : false;
+            let last = day.date.toDateString() === lastDay.date.toDateString() ? true : false;
+            return {
+                date: day.date,
+                status: status,
+                disabled: day.disabled,
+                belongWeek: day.belongWeek,
+                first: false,
+                last,
+            };
+        });
+
+        this.selected.week = belongWeek;
+        this.selected.from = firstDay.date;
+        this.selected.to = lastDay.date
+
+        this.month = month;
+        this.weeksInMonth = weeksInMonth;
+
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    selectMonth(value) {
+        let {month} = value;
+        let {monthsInYear} = this;
+        monthsInYear = monthsInYear.map((item) => {
+            let status = item.month == month ? 'selected' : 'common';
+            return {
+                month: item.month,
+                status: status,
+                disabled: item.disabled,
+            };
+        });
+
+        this.selected.month = month;
+        this.selected.year = this.currentYear;
+
+        this.monthsInYear = monthsInYear;
+        this.setState({
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    prevMonth() {
+        if (this.state.selectMode === 'month') {
+            this.currentYear -= 1;
+            this.updateMonthInYear(new Date(this.currentYear, 5, 1));
+
+        } else {
+            let middleDay = this.state.month[15].date;
+            let currentMonth = middleDay.getMonth();
+            let prevMonthDate = new Date(middleDay.setMonth(currentMonth - 1));
+
+            this.updateWeekAndMonth(prevMonthDate);
+        }
+    }
+
+    nextMonth() {
+        if (this.state.selectMode === 'month') {
+            this.currentYear += 1;
+            this.updateMonthInYear(new Date(this.currentYear, 5, 1));
+
+        } else {
+            let middleDay = this.state.month[15].date;
+            let currentMonth = middleDay.getMonth();
+            let nextMonthDate = new Date(middleDay.setMonth(currentMonth + 1));
+
+            this.updateWeekAndMonth(nextMonthDate);
+        }
+    }
+
+    updateMonthInYear(date) {
+        this.monthsInYear = this.generateMonthsInYear(date);
+        this.setState({
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    updateWeekAndMonth(date) {
+        this.month = this.generateMonth(date);
+        this.weeksInMonth = this.generateWeeks(date);
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    renderContent() {
+        return (
+            <Month
+                {...this.props}
+                days={this.state.month}
+                style={styles.month}
+                changeSelection={this.changeSelection}
+                weeks={this.state.weeksInMonth}
+                months={this.state.monthsInYear}
+                year={this.currentYear}
+                prevMonth={this.prevMonth}
+                nextMonth={this.nextMonth}
+            />
+        );
+    }
+
+    renderButton() {
+        return (
+            <View style={styles.buttonContainer}>
+                <TouchableOpacity onPress={() => {this.props.onCancel()}} style={styles.button}>
+                    <Text style={[styles.text, styles.cancelText]}>
+                        取消
+                    </Text>
+                </TouchableOpacity>
+                <View style={styles.seprator} />
+                <TouchableOpacity onPress={() => {this.props.onOK(this.selected)}} style={styles.button}>
+                    <Text style={styles.text}>
+                        确定
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+    render() {
+        return (
+            <View>
+                {this.renderContent()}
+                {this.renderButton()}
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    listViewContainer: {
+        backgroundColor: 'white',
+        alignSelf: 'center',
+        transform: [{scaleY: -1}]
+    },
+    month: {
+        // transform: [{scaleY: -1}]
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderTopWidth: 1,
+        borderTopColor: '#B0B0B0',
+    },
+    button: {
+        width: width / 2,
+        height: 35,
+    },
+    text: {
+        paddingTop: 10,
+        height: 35,
+        fontSize: 14,
+        color: '#444444',
+        textAlign: 'center',
+    },
+    seprator: {
+        width: 1,
+        height: 35,
+        backgroundColor: '#B0B0B0',
+    },
+});

+'use strict';
+
+import React from 'react-native';
+import DateType from './DateType';
+import Calendar from './Calendar';
+
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Text
+} = React;
+
+export default class CalendarPicker extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedType: 'day',
+        };
+
+        this.onSelect = this.onSelect.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onOK = this.onOK.bind(this);
+    }
+
+    onSelect(selectedType) {
+        this.setState({
+            selectedType
+        });
+    }
+
+    onCancel() {
+        this.props.onCancel && this.props.onCancel();
+    }
+
+    onOK(selected) {
+        this.props.onOK && this.props.onOK(selected);
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <DateType selectedType={this.state.selectedType} onSelect={this.onSelect} />
+                <Calendar
+                    startFromMonday={true}
+                    selectMode={this.state.selectedType}
+                    onCancel={this.onCancel}
+                    onOK={this.onOK}
+                />
+            </View>
+        );
+    }
+}
+
+let styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 45,
+        left: 0,
+        right: 0,
+        backgroundColor: 'white',
+        opacity: 0.96,
+    },
+    calendarContainer: {
+
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Image,
+} = React;
+
+export default class DateSelector extends Component {
+
+    static propTypes = {
+        date: React.PropTypes.string.isRequired,
+        toogleSelector: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onPress = this.onPress.bind(this);
+    }
+
+    onPress() {
+        this.props.toogleSelector && this.props.toogleSelector();
+    }
+
+    render() {
+
+        return (
+            <TouchableOpacity
+                activeOpacity={0.5}
+                style={styles.container}
+                onPress={this.onPress}>
+                <Text style={styles.text}>{this.props.date}</Text>
+                <Image source={require('./date.png')} style={styles.thumb} />
+            </TouchableOpacity>
+        );
+    }
+}
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        height: 45,
+    },
+    text: {
+        fontSize: 14,
+        color: '#444444',
+        textAlign: 'center',
+    },
+    thumb: {
+        left: 5,
+        width: 15,
+        height: 15,
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Text,
+    Dimensions,
+} = React;
+
+export default class DateType extends Component {
+
+    static propTypes = {
+        selectedType: React.PropTypes.oneOf(['day', 'week', 'month']).isRequired,
+        onSelect: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.items = [{
+            type: 'day',
+            text: '日',
+        },
+        {
+            type: 'week',
+            text: '周',
+        },{
+            type: 'month',
+            text: '月',
+        }];
+
+        this.onSelect = this.onSelect.bind(this);
+    }
+
+    onSelect(type) {
+        this.props.onSelect && this.props.onSelect(type);
+    }
+
+    render() {
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.seprator1} />
+                <View style={styles.seprator2} />
+                {this.items.map((item, i) => {
+                    let color = item.type === this.props.selectedType ? styles.selectText : styles.normalText;
+                    return (
+                        <TouchableOpacity key={i} onPress={() => this.onSelect(item.type)}>
+                            <Text style={[styles.text, color]}>{item.text}</Text>
+                        </TouchableOpacity>
+                    );
+                })}
+
+                <View style={styles.seprator3} />
+                <View style={styles.seprator4} />
+
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        height: 45,
+    },
+    text: {
+        fontSize: 14,
+        textAlign: 'center',
+        width: width / 3,
+    },
+    normalText: {
+        color: '#B0B0B0',
+    },
+    selectText: {
+        color: '#444444',
+    },
+    seprator1: {
+        width: width,
+        height: 1,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator2: {
+        width: width,
+        height: 1,
+        top: 44,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator3: {
+        width: 1,
+        height: 15,
+        top: 15,
+        left: width / 3,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator4: {
+        width: 1,
+        height: 15,
+        top: 15,
+        left: width * 2 / 3,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Day extends Component {
+    render() {
+        let {date, status, disabled, onDayPress, width, belongWeek, first, last} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onDayPress({
+                    date,
+                    belongWeek,
+                });
+            }
+        }
+
+        let borderTopLeftRadius = first ? 5 : 0;
+        let borderBottomLeftRadius = first ? 5 : 0;
+        let borderTopRightRadius = last ? 5 : 0;
+        let borderBottomRightRadius = last ? 5 : 0;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 8, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius,borderTopRightRadius, borderBottomRightRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{date.getDate()}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    View,
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Image,
+} = React;
+
+import Day from './Day';
+import Week from './Week';
+import Year from './Year';
+
+export default class Month extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onPressPrev = this.onPressPrev.bind(this);
+        this.onPressNext = this.onPressNext.bind(this);
+
+        this.weekDaysLocale = props.weekDaysLocale.slice();
+
+        if (props.startFromMonday) {
+            this.weekDaysLocale.push(this.weekDaysLocale.shift());
+        }
+
+    }
+
+    onPressPrev() {
+        this.props.prevMonth && this.props.prevMonth();
+    }
+
+    onPressNext() {
+        this.props.nextMonth && this.props.nextMonth();
+    }
+
+    renderContent() {
+        let {
+            days, weeks, months, changeSelection, style, monthsLocale,
+            bodyBackColor, bodyTextColor, headerSepColor, width
+        } = this.props;
+
+        if (this.props.selectMode === 'month') {
+            return (
+                <View style={styles.monthContainer}>
+                    <View style={styles.monthDays}>
+                        {months.map((month, i) => {
+                            return (
+                                <Year
+                                    key={i}
+                                    {...this.props}
+                                    disabled={month.disabled}
+                                    status={month.status}
+                                    month={month.month}
+                                    onMonthPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        } else {
+            return (
+                <View style={styles.monthContainer}>
+                    <View style={styles.monthWeeks}>
+                        <View style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
+                            <Text style={{color: bodyTextColor}}>周</Text>
+                        </View>
+                        {weeks.map((week, i) => {
+                            return (
+                                <Week
+                                    key={i}
+                                    {...this.props}
+                                    disabled={week.disabled}
+                                    status={week.status}
+                                    week={week.week}
+                                    first={week.first}
+                                    onWeekPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+
+                    <View style={styles.monthDays}>
+                        {this.weekDaysLocale.map((dayName, i) => {
+                            return (
+                                <View key={i} style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
+                                    <Text style={{color: bodyTextColor}}>{dayName}</Text>
+                                </View>
+                            );
+                        })}
+                        {days.map((day, i) => {
+                            return (
+                                <Day
+                                    key={i}
+                                    {...this.props}
+                                    disabled={day.disabled}
+                                    status={day.status}
+                                    date={day.date}
+                                    belongWeek={day.belongWeek}
+                                    first={day.first}
+                                    last={day.last}
+                                    onDayPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        }
+    }
+
+    render() {
+        let {
+            year, days, weeks, changeSelection, style, monthsLocale,
+            bodyBackColor, bodyTextColor, headerSepColor, width
+        } = this.props;
+
+        let monthHeader = days[15].date.getFullYear() + '年' + monthsLocale[days[15].date.getMonth()];
+        if (this.props.selectMode === 'month') {
+            monthHeader = year + '年';
+        }
+
+        return (
+            <View style={[style, {width: width, backgroundColor: bodyBackColor}]}>
+
+                <View style={styles.headerContainer}>
+                    <TouchableOpacity onPress={this.onPressPrev}>
+                        <Image source={require('./right.png')} resizeMode={'contain'} style={styles.headerThumb}/>
+                    </TouchableOpacity>
+                    <Text style={[styles.monthHeader, {color: bodyTextColor}]}>
+                        {monthHeader}
+                    </Text>
+                    <TouchableOpacity onPress={this.onPressNext}>
+                        <Image source={require('./left.png')} resizeMode={'contain'} style={styles.headerThumb}/>
+                    </TouchableOpacity>
+                </View>
+
+
+
+                    {this.renderContent()}
+
+
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 45,
+    },
+    headerThumb: {
+        width: 20,
+        height: 15,
+    },
+    monthHeader: {
+        width: 100,
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    monthContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    },
+    monthWeeks: {
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        flex: 1,
+    },
+    monthDays: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        flex: 7,
+    },
+    weekDay: {
+        borderBottomWidth: 0,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Day extends Component {
+    render() {
+        let {week, status, disabled, onWeekPress, width, first} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onWeekPress({
+                    belongWeek: week,
+                });
+            }
+        }
+
+        let borderTopLeftRadius = first ? 5 : 0;
+        let borderBottomLeftRadius = first ? 5 : 0;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 8, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{week}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white'
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Year extends Component {
+    render() {
+        let {onMonthPress, width, disabled, status, month} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onMonthPress({
+                    month
+                });
+            }
+        }
+
+        let borderTopLeftRadius = 5;
+        let borderBottomLeftRadius = 5;
+        let borderTopRightRadius = 5;
+        let borderBottomRightRadius = 5;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 4, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius,borderTopRightRadius, borderBottomRightRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{month + '月'}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+    }
+});

@@ -21,6 +21,8 @@ export default keyMirror({
     PWD_MODIFY_REPEAT:null,
     PWD_MODIFY_SUBMIT:null,
 
+    MESSAGE_DETAIL:null,
+
     LOGIN_REQUEST: null,
     LOGIN_SUCCESS: null,
     LOGIN_FAILURE: null,

@@ -17,7 +17,8 @@ let {
     View,
     Text,
     StyleSheet,
-    Dimensions
+    Dimensions,
+    Platform,
 } = React;
 
 const actions = [
@@ -44,15 +45,64 @@ function mapDispatchToProps(dispatch) {
 }
 
 class MessageContainer extends Component {
-	render() {
 
+    constructor(props) {
+        super(props);
+        this.pressRow = this.pressRow.bind(this);
+        this.messageItems = [
+            {
+                type:'1',
+                title: '公告 商家端APP上线',
+                time:  '2016-03-26',
+                content: 'xxxxxxx',
+            },
+            {
+                type:'2',
+                title: '变价通知 昨日已有234件商品价格发生变化',
+                time:  '2016-03-26',
+                content: 'xxxxxx',
+            },
+            {
+                type:'3',
+                title: '到货入库 有800件商品到货了',
+                time:  '2016-03-26',
+                content: 'xxxxxsssssssssssssssssssssssffsssgsggsgsgsgsgsgsgsgsgsgsggsgsgssshahshshshshshshshshhshshshshshshshshshshshshshhshshshshsh',
+            },
+             {
+                type:'4',
+                title: '对账结算 新的结算订单生成',
+                time:  '2016-03-26',
+                content: 'xxxxxx',
+            },
+            {
+                type:'4',
+                title: '对账结算 新的结算订单生成',
+                time:  '2016-03-26',
+                content: 'xxxxxx',
+            },
+            {
+                type:'4',
+                title: '对账结算 新的结算订单生成',
+                time:  '2016-03-26',
+                content: 'xxxxxx',
+            },
+            {
+                type:'4',
+                title: '对账结算 新的结算订单生成',
+                time:  '2016-03-26',
+                content: 'xxxxxx',
+            },
+        ];
+    }
+    
+    pressRow(rowID){
+         this.props.actions.checkMessageDetail(this.messageItems[rowID]);
+    }
+	render() {
         return (
             <View style={styles.container}>
-                <StatusBar
-                    hidden={false}
-                    barStyle={'light-content'}
-                />
-                <Message/>
+                <Message items={this.messageItems}
+                onPressItem={this.pressRow}/>
             </View>
         );
     }
@@ -62,7 +112,7 @@ let {width, height} = Dimensions.get('window');
 
 let styles = StyleSheet.create({
     container: {
-        top: 64,
+        top:(Platform.OS === 'android') ? 50 : 64,
         height: height - 64 - 49,
     },
 

+'use strict';
+
+import React from 'react-native';
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+
+import {Map} from 'immutable';
+
+import * as messageActions from '../reducers/message/messageActions';
+import * as deviceActions from '../reducers/device/deviceActions';
+import MessageDetail from '../components/MessageDetail';
+
+let {
+    Component,
+    View,
+    Text,
+    StyleSheet,
+    Image,
+    TextInput,
+    Dimensions,
+    Alert
+} = React;
+
+/**
+ * ## Actions
+ * 3 of our actions will be available as ```actions```
+ */
+const actions = [
+    messageActions,
+    deviceActions,
+];
+
+/**
+ *  Save that state
+ */
+function mapStateToProps(state) {
+    return {
+        ...state
+    };
+};
+
+/**
+ * Bind all the functions from the ```actions``` and bind them with
+ * ```dispatch```
+ */
+function mapDispatchToProps(dispatch) {
+
+    const creators = Map()
+            .merge(...actions)
+            .filter(value => typeof value === 'function')
+            .toObject();
+
+    return {
+        actions: bindActionCreators(creators, dispatch),
+        dispatch
+    };
+}
+
+export default class MessageDetailContainer extends Component {
+
+    constructor(props) {
+        super(props);
+       
+    }
+
+  componentDidMount() {
+
+  }
+
+  componentWillUnmount() {
+
+  }
+
+	render() {
+        return (
+          <MessageDetail 
+            title={this.props.message.messageDetail.title}
+            content={this.props.message.messageDetail.content}
+            time={this.props.message.messageDetail.time}
+          />
+
+        );
+    }
+}
+let {height, width} = Dimensions.get('window');
+let textPaddingTop = height * 7 / 10;
+let buttonMargin = (width - 165) / 2;
+var styles = StyleSheet.create({
+
+});
+
+/**
+ * Connect the properties
+ */
+export default connect(mapStateToProps, mapDispatchToProps)(MessageDetailContainer);

@@ -71,7 +71,6 @@ class SalestisticsContainer extends Component {
                 top: '环比',
                 arrowUp: this.props.saleStats.amountRise,
                 bottom: `${this.props.saleStats.amountRisePercent}`,
-                bottom: '1.8%',
             }
         ];
 
@@ -83,9 +82,7 @@ class SalestisticsContainer extends Component {
             {
                 top: '环比',
                 arrowUp: this.props.saleStats.countRise,
-                arrowUp: false,
                 bottom: `${this.props.saleStats.countRisePercent}`,
-                bottom: '10.8%',
             }
         ];
 

 /**
  * # guideActions.js
- * 
+ *
  * App user guide
- * 
+ *
  */
 'use strict';
 
+import {Actions} from 'react-native-router-flux';
+import AppAuthToken from '../../services/AppAuthToken';
+import UserService from '../../services/UserService';
+
+const {
+    MESSAGE_DETAIL,
+} = require('../../constants/actionTypes').default;
+
+export function checkMessageDetail(item) {
+    Actions.MessageDetail();
+	return {
+		type: MESSAGE_DETAIL,
+		payload: item,
+	};
+}
\ No newline at end of file

@@ -15,7 +15,11 @@ import {Record} from 'immutable';
  * The fields we're concerned with
  */
 let InitialState = Record({
-	
+	messageDetail: new (Record({
+		title: '',
+		content: '',
+		time: '',
+	})),
 });
 
 export default InitialState;

@@ -14,7 +14,9 @@ import InitialState from './messageInitialState';
 
 
 const initialState = new InitialState;
-
+const {
+    MESSAGE_DETAIL,
+} = require('../../constants/actionTypes').default;
 /**
  * ## guideReducer function
  * @param {Object} state - initialState
@@ -24,7 +26,12 @@ export default function messageReducer(state = initialState, action) {
     if (!(state instanceof InitialState)) return initialState.merge(state);
 
     switch (action.type) {
-
+		case MESSAGE_DETAIL:{
+			let nextState =  state.setIn(['messageDetail', 'title'], action.payload.title)
+								.setIn(['messageDetail', 'content'], action.payload.content)
+								.setIn(['messageDetail', 'time'], action.payload.time);
+			return nextState;
+		}
 
     }