RefoundStatistics.js
3.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
'use strict';
import Immutable, {List, Record} from 'immutable';
import React, {Component} from 'react';
import {
ScrollView,
Dimensions,
} from 'react-native';
import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import CalendarTrigger from './calendar/CalendarTrigger';
import CalendarPicker from './calendar/CalendarPicker';
import ChartView from './LineChart/ChartView'
export default class RefoundStatistics extends Component {
static propTypes = {
section1: React.PropTypes.arrayOf(
React.PropTypes.shape({
top: React.PropTypes.string,
bottom: React.PropTypes.string,
arrowUp: React.PropTypes.bool,
})
),
section2: React.PropTypes.arrayOf(
React.PropTypes.shape({
top: React.PropTypes.string,
bottom: React.PropTypes.string,
arrowUp: React.PropTypes.bool,
})
),
section3: React.PropTypes.arrayOf(
React.PropTypes.shape({
top: React.PropTypes.string,
bottom: React.PropTypes.string,
arrowUp: React.PropTypes.bool,
})
),
};
constructor(props) {
super(props);
let selectdDate = new Date().getFullYear() + '年' + (new Date().getMonth()) + '月';
this.state = {
showPicker: false,
selectdDate,
selected: null,
selectMode: 'month',
};
this.toogleSelector = this.toogleSelector.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onOK = this.onOK.bind(this);
this.calendarModes = [{
type: 'month',
text: '月',
}];
}
toogleSelector() {
this.setState({
showPicker: !this.state.showPicker
});
}
onCancel() {
this.toogleSelector();
}
onOK(selected) {
console.log(selected);
let selectdDate;
let year = selected.year;
selectdDate = selected.year + '年' + selected.month + '月';
this.setState({
showPicker: !this.state.showPicker,
selectdDate,
selected,
selectMode: selected.selectMode,
});
}
render() {
const months = ['4月','5月','6月','7月','8月','9月'];
return (
<ScrollView contentContainerStyle={{flex: 1}}>
<CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
<Placeholder />
<TrendTextSection content={this.props.section1} />
<TrendTextSection content={this.props.section2} />
<TrendTextSection content={this.props.section3} />
<Placeholder />
<ChartView
chartTitle={'近6个月退货趋势'}
xData={months}
yData={this.props.sixMonthValue}
/>
{this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}
</ScrollView>
);
}
}