Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

pages/buy/buy.js

@@ -14,7 +14,7 @@ import {
     DeviceEventEmitter,
     ScrollView,
     Modal,
-    Animated
+    Animated,
 } from "react-native";
 import BasePage from "../BasePage";
 import Dimensions from '../utils/dimensions';
@@ -29,7 +29,8 @@ export default class Buy extends BasePage {
         ],
         currentTapindex: 0,
         slideAnim: new Animated.Value(-150),
-        ifDialogShow: false
+        ifDialogShow: false,
+        payType: 1
     };
     itemTap = (index) => {
         this.setState({
@@ -45,17 +46,43 @@ export default class Buy extends BasePage {
             </TouchableOpacity>
         )
     }
-    changeMethod = () => {
-        this.setState({
-            ifDialogShow: !this.state.ifDialogShow
-        }, () => {
+    dialogComeout = (index) => {
+        if (index) {
+            this.setState({
+                ifDialogShow: true
+            }, () => {
+                Animated.timing(
+                    this.state.slideAnim,
+                    {
+                        toValue: 0,
+                        duration: 300,
+                    }
+                ).start();
+            })
+        } else {
             Animated.timing(
                 this.state.slideAnim,
                 {
-                    toValue: 0,
-                    duration: 300,
+                    toValue: -150,
+                    duration: 200,
                 }
             ).start();
+            setTimeout(() => {
+                this.setState({
+                    ifDialogShow: false
+                })
+            }, 210)
+        }
+
+    }
+    setPayMethod = (type) => {
+        this.setState({
+            payType: type
+        },()=>{
+            setTimeout(() => {
+                this.dialogComeout(false)
+            }, 100)
+            
         })
     }
     render() {
@@ -82,7 +109,7 @@ export default class Buy extends BasePage {
                         {this.state.shopData.map((item, index) => this.renderItem(item, index))}
                     </View>
                 </View>
-                <TouchableOpacity style={styles.payment} onPress={() => this.changeMethod()}>
+                <TouchableOpacity style={styles.payment} onPress={() => this.dialogComeout(true)}>
                     <Text style={styles.left}>支付方式</Text>
                     <View style={styles.right}>
                         <Text style={styles.method}>微信支付</Text>
@@ -98,14 +125,45 @@ export default class Buy extends BasePage {
                 {
                     this.state.ifDialogShow
                         ?
-                        <View style={{ ...styles.dialog }}>
-                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
-                                <Text>选择支付方式</Text>
-                                {/* <View> */}
+                        <TouchableHighlight
+                            onPress={() => { this.dialogComeout(false) }}
+                            style={{ ...styles.dialog }}
+                            underlayColor={0.1}
+                        >
+                            <Animated.View
+                                style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
+                                onPress={() => { alert(12311) }}
+                            >
+                                <Text style={styles.payText}>选择支付方式</Text>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(1)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
+                                        <Text>微信支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 1
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
 
-                                {/* </View> */}
+                                </TouchableOpacity>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(2)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
+                                        <Text>支付宝支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 2
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
+                                </TouchableOpacity>
                             </Animated.View>
-                        </View>
+                        </TouchableHighlight>
                         :
                         null
                 }
@@ -242,8 +300,7 @@ const styles = StyleSheet.create({
         width: Dimensions.width,
         height: Dimensions.height,
         position: 'absolute',
-        backgroundColor: '#000',
-        opacity: 0.4
+        backgroundColor: 'rgba(0,0,0,0.4)',
 
     },
     payMethod: {
@@ -251,6 +308,32 @@ const styles = StyleSheet.create({
         height: 150,
         position: 'absolute',
         // bottom: 0,
-        backgroundColor: '#fff'
+        backgroundColor: '#fff',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start'
+    },
+    payDialog: {
+        width: '90%',
+        borderTopWidth: 1,
+        borderColor: '#e4e4e4',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1
+    },
+    dialogRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    payIcon: {
+        marginRight: 17
+    },
+    payText: {
+        fontSize: 16,
+        color: '#191919',
+        alignContent: 'center',
+        flex: 1,
+        lineHeight: 50
     }
 })

pages/components/BirthdayModal.js

@@ -0,0 +1,527 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  TextInput,
+  Button,
+  StatusBar,
+  Modal,
+  ScrollView,
+  TouchableHighlight,
+  DeviceEventEmitter,
+  findNodeHandle,
+  UIManager
+} from "react-native";
+
+type Props = {};
+export default class BirthdayModal extends Component<Props> {
+  state = {
+    text_height: -1,
+    modalVisible: false,
+    year_type: false, //true为闰年，false为平年
+    year_array_views: [],
+    year_array: [],
+    year_array_views_index: -1,
+    month_array_views: [],
+    month_array_views_indexs: -1,
+    month_array: [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    day_array: [
+      "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"
+    ],
+    day_array_views: [],
+    day_array_views_index: -1
+  };
+
+  render() {
+    return (
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            flexDirection: "column"
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 3.2,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              width: "100%"
+            }}
+            activeOpacity={1}
+            onPress={() =>
+              this.setState({
+                modalVisible: false
+              })
+            }
+          />
+          <View
+            style={{
+              flex: 2,
+              backgroundColor: "white",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%"
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  flex: 1
+                }}
+                activeOpacity={1}
+                onPress={() => this.cancel()}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "rgba(59, 59, 59, 1)",
+                      textAlignVertical: "center"
+                    }}
+                  >
+                    取消
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              <View style={{ flex: 3.5 }} />
+              <TouchableOpacity
+                style={{
+                  flex: 1
+                }}
+                activeOpacity={1}
+                onPress={() => this.commit()}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "rgba(59, 59, 59, 1)",
+                      textAlignVertical: "center"
+                    }}
+                  >
+                    完成
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View
+              style={{
+                flex: 0.05,
+                width: "90%",
+                backgroundColor: "rgba(246, 247, 248, 1)"
+              }}
+            />
+            <View
+              style={{
+                flex: 5,
+                flexDirection: "row"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  style={{
+                    flex: 1
+                  }}
+                  ref={view => (this.year_scroll = view)}
+                  onLayout={() => this.year_onlayout()}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_year_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.month_scroll = view)}
+                  onLayout={() => this.month_onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_month_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.day_scroll = view)}
+                  onLayout={() => this.day__onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_day_item()}
+                </ScrollView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  componentWillMount() {
+    var date = new Date();
+    var year = parseInt(this.props.year);
+    if (this.state.year_array.length == 0) {
+      let position = 0;
+      for (
+        let index = parseInt(year - 50);
+        index < parseInt(year + 10);
+        index++
+      ) {
+        if (parseInt(year) == index) {
+          this.setState({
+            year_array_views_index: position
+          });
+        }
+
+        this.state.year_array.push(index);
+        position++;
+      }
+    }
+    console.log(parseInt(date.getDate()));
+    this.setState({
+      month_array_views_indexs: parseInt(this.props.month) - 1,
+      day_array_views_index: parseInt(this.props.day) - 1
+    });
+
+    // var hour = date.getHours().toString();
+    // var minute = date.getMinutes().toString();
+  }
+
+  year_onlayout() {
+    if (this.state.year_array_views_index != -1) {
+      this.year_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.year_array_views_index,
+        duration: 500
+      });
+    }
+  }
+
+  month_onlayout() {
+    if (this.state.month_array_views_indexs != -1) {
+      this.month_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.month_array_views_indexs,
+        duration: 500
+      });
+    }
+  }
+
+  day__onlayout() {
+    if (this.state.day_array_views_index != -1) {
+      this.day_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.day_array_views_index,
+        duration: 500
+      });
+    }
+  }
+
+  create_year_item() {
+    this.state.year_array_views = [];
+    for (var i = 0; i < this.state.year_array.length; i++) {
+      let index = i;
+      let textstyle = null;
+      if (this.state.year_array_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.year_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_year_item(index)}
+          onLayout={event => this.text_onLayout(event)}
+        >
+          {this.state.year_array[i]}年
+        </Text>
+      );
+    }
+    return this.state.year_array_views;
+  }
+
+  click_year_item(index) {
+    this.setState({
+      year_array_views_index: index,
+      year_type: this.getRunYear(this.state.year_array[index])
+    });
+  }
+
+  create_month_item() {
+    this.state.month_array_views = [];
+    for (var i = 0; i < this.state.month_array.length; i++) {
+      let index = i;
+      let textstyle = null;
+      if (this.state.month_array_views_indexs == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.month_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_month_item(index)}
+        >
+          {this.state.month_array[i]}月
+        </Text>
+      );
+    }
+    return this.state.month_array_views;
+  }
+
+  click_month_item(index) {
+    this.setState({
+      month_array_views_indexs: index
+    });
+  }
+
+  create_day_item() {
+    this.state.day_array_views = [];
+    var forNum = 0;
+    //获取月份
+    var month_index = this.state.month_array_views_indexs;
+    switch (month_index + 1) {
+      case 1:
+      case 3:
+      case 5:
+      case 7:
+      case 8:
+      case 10:
+      case 12:
+        //31天
+        forNum = 31;
+        break;
+      case 4:
+      case 6:
+      case 9:
+      case 11:
+        //30天
+        forNum = 30;
+        break;
+      case 2:
+        //2月判断平年闰年
+        if (
+          this.getRunYear(
+            this.state.year_array[this.state.year_array_views_index]
+          )
+        ) {
+          //闰年2月29
+          forNum = 29;
+        } else {
+          //平年2月28
+          forNum = 28;
+        }
+        break;
+    }
+
+    for (var i = 0; i < forNum; i++) {
+      //console.log(i);
+      let index = i;
+      let textstyle = null;
+      if (this.state.day_array_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.day_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_day_item(index)}
+        >
+          {this.state.day_array[i]}日
+        </Text>
+      );
+    }
+
+    return this.state.day_array_views;
+  }
+  click_day_item(index) {
+    this.setState({
+      day_array_views_index: index
+    });
+  }
+
+  text_onLayout = event => {
+    if (this.state.text_height == -1) {
+      this.setState({
+        text_height: event.nativeEvent.layout.height
+      });
+    } else {
+    }
+  };
+
+  commit() {
+    if (
+      this.state.year_array_views_index == -1 ||
+      this.state.month_array_views_indexs == -1 ||
+      this.state.day_array_views_index == -1
+    ) {
+      alert("请选择完整日期");
+    } else {
+      var year = this.state.year_array[this.state.year_array_views_index];
+
+      var month = this.state.month_array[this.state.month_array_views_indexs];
+
+      var day = this.state.day_array[this.state.day_array_views_index];
+
+      this.props.birthdaycommit(year, month, day);
+      this.setModalVisible(false);
+    }
+  }
+
+  cancel() {
+    this.setModalVisible(false);
+    // alert(this.getmyDate());
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+  getmyDate() {
+    var date = new Date();
+    var year = date.getFullYear().toString();
+    var month = (date.getMonth() + 1).toString();
+    var day = date.getDate().toString();
+    var hour = date.getHours().toString();
+    var minute = date.getMinutes().toString();
+
+    return year + "年" + month + "月" + day + "日" + " " + hour + ":" + minute;
+  }
+
+  getRunYear(year) {
+    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
+      //闰年2月29
+      // console.log("闰年");
+      return true;
+    } else {
+      //平年2月28
+      // console.log("平年");
+      return false;
+    }
+  }
+}
+const styles = StyleSheet.create({
+  item_text: {
+    color: "rgba(77, 77, 77, 1)",
+    fontSize: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    width: "100%",
+    textAlignVertical: "center",
+    textAlign: "center"
+  },
+  item_text_click: {
+    color: "rgba(59, 149, 243, 1)",
+    fontSize: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    width: "100%",
+    textAlignVertical: "center",
+    textAlign: "center"
+  }
+});

pages/components/CusVideo.js

@@ -590,7 +590,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   player_time: {
-    fontSize: 18,
+    fontSize: 16,
     color: "white",
     alignItems: "center",
     justifyContent: "center",

pages/components/GradeSelectionModal.js

@@ -0,0 +1,251 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  TextInput,
+  Button,
+  StatusBar,
+  Modal,
+  ScrollView,
+  TouchableHighlight,
+  DeviceEventEmitter,
+  findNodeHandle,
+  UIManager
+} from "react-native";
+
+import CitysData from "../../data/citys.json";
+
+type Props = {};
+export default class GradeSelectionModal extends Component<Props> {
+  state = {
+    modalVisible: false,
+    click_index: this.props.grade_index,
+    item_width: 0,
+    item_height: 0,
+    grade_data: [
+      "一年级",
+      "二年级",
+      "三年级",
+      "四年级",
+      "五年级",
+      "六年级",
+      "七年级",
+      "八年级",
+      "九年级"
+    ]
+  };
+
+  render() {
+    return (
+      <Modal
+        // animationType="fade"
+        animationType="none"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <View
+            style={{
+              width: "92%",
+              backgroundColor: "white",
+              height: "80%",
+              borderRadius: 20,
+              flexDirection: "column",
+              overflow: "hidden",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Text
+                style={{
+                  textAlign: "center",
+                  fontSize: 22,
+                  color: "rgba(58, 58, 58, 1)"
+                }}
+              >
+                我所在的年级
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 3,
+                width: "100%",
+                marginTop: 5
+              }}
+            >
+              {this.centerView()}
+            </View>
+            <View style={{ flex: 2, width: "90%" }}>
+              <ImageBackground
+                source={require("../images/userInfo/logoutbg1.png")}
+                style={{
+                  flex: 1,
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "100%"
+                }}
+                imageStyle={{
+                  resizeMode: "contain"
+                }}
+              >
+                <TouchableOpacity
+                  style={{
+                    width: "100%",
+                    alignItems: "center",
+                    height: "40%",
+                    justifyContent: "center"
+                  }}
+                  activeOpacity={1}
+                  onPress={() => this.commit()}
+                >
+                  <Text
+                    style={{
+                      fontSize: 30,
+                      color: "white",
+                      width: "100%",
+                      textAlign: "center"
+                    }}
+                  >
+                    确定
+                  </Text>
+                </TouchableOpacity>
+              </ImageBackground>
+            </View>
+            <View style={{ flex: 0.5 }} />
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  centerView() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "space-evenly",
+            width: "90%",
+            flexDirection: "row",
+            //换行显示
+            flexWrap: "wrap",
+            alignItems: "center"
+          }}
+          onLayout={event => this.onLayout(event)}
+        >
+          {this.centerItem()}
+        </View>
+      </View>
+    );
+  }
+  onLayout(event) {
+    // alert(event.nativeEvent.layout.width);
+    // alert(event.nativeEvent.layout.width / 3);
+    this.setState({
+      item_width: event.nativeEvent.layout.width / 3.5,
+      item_height: event.nativeEvent.layout.height / 3
+    });
+  }
+  centerItem() {
+    let arr = [];
+    for (let i = 0; i < this.state.grade_data.length; i++) {
+      let index = i;
+      let color = "";
+      if (this.state.click_index == i) {
+        color = "rgba(88, 168, 250, 1)";
+      } else {
+        color = "rgba(61, 192, 252, 0.15)";
+      }
+      arr[i] = (
+        <TouchableOpacity
+          activeOpacity={1}
+          key={i}
+          style={{
+            margin: 1,
+            height: this.state.item_height,
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+          onPress={() => this.clickGrade(index)}
+        >
+          <View
+            style={{
+              width: this.state.item_width,
+              height: this.state.item_height / 2,
+              backgroundColor: color,
+              borderRadius: 20
+            }}
+          >
+            <Text style={styles.item_text}>{this.state.grade_data[i]}</Text>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+
+    return arr;
+  }
+  commit() {
+    this.props.commitGrade(
+      this.state.grade_data[this.state.click_index],
+      this.state.click_index
+    );
+    this.setModalVisible(false);
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+  clickGrade(index) {
+    this.setState({
+      click_index: index
+    });
+  }
+}
+const styles = StyleSheet.create({
+  item_text: {
+    flex: 1,
+    textAlign: "center",
+    textAlignVertical: "center",
+    color: "rgba(58, 58, 58, 1)",
+    fontSize: 16
+  }
+});

pages/components/MainPage.js

@@ -78,7 +78,34 @@ export default class MainPage extends BasePage {
     schedule: [],
     recommend: [],
     listData: [],
-    banner:[]
+    banner: [],
+    currentSwitch: { title: '学前', param: 'PRESCHOOL' },
+    switchList: [
+      { title: '幼儿园', param: 'KINDERGARTEN' },
+      { title: '学前', param: 'PRESCHOOL' },
+      { title: '小学', param: 'PRIMARY_SCHOOL' },
+      { title: '中学', param: 'MIDDLE_SCHOOL' },
+    ]
+  }
+
+  renderBtn = (item, index) => {
+    return (
+      this.state.currentSwitch.param === item.param
+        ?
+        null
+        :
+        <TouchableOpacity onPress={()=>this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
+          <Text style={styles.gradeText}>{item.title}</Text>
+        </TouchableOpacity>
+    )
+  }
+
+  switchGrade=(index)=>{
+    const obj = this.state.switchList[index]
+    this.setState({
+      currentSwitch: obj
+    })
+    this.hideGradeMenu()
   }
 
   render() {
@@ -95,7 +122,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }}  onScroll={this.hideGradeMenu} >
+        <ScrollView style={{ height: Dimensions.height }} onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -111,7 +138,7 @@ export default class MainPage extends BasePage {
                 ...styles.callUpGrade,
                 opacity: this.state.fadeAnim
               }}>
-              <TouchableOpacity style={styles.gradeItem}>
+              {/* <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>小学</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItemMid}>
@@ -119,7 +146,8 @@ export default class MainPage extends BasePage {
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>中学</Text>
-              </TouchableOpacity>
+              </TouchableOpacity> */}
+              {this.state.switchList.map((item, index) => this.renderBtn(item, index))}
             </Animated.View>
           ) : (
               null
@@ -154,13 +182,13 @@ export default class MainPage extends BasePage {
               style={styles.rightBtn}
             >
               <Image
-                source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
+                source={require('../images/common/switch.png')}
                 style={styles.rightBtnIcon}
               />
               <Text
                 style={styles.rightBtnText}
               >
-                {this.state.grade}
+                {this.state.currentSwitch.title}
               </Text>
             </View>
           </TouchableOpacity>
@@ -206,7 +234,7 @@ export default class MainPage extends BasePage {
       return (
         <TouchableOpacity
           style={{ width: 172, height: 86, marginRight: 12 }}
-          onPress={()=>this.toNextPage('SchedulePage')}
+          onPress={() => this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
         >

pages/components/PersonalInfo.js

@@ -26,31 +26,46 @@ import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
 import ChosePhoto from "./ChosePhoto";
 import RegionModal from "./RegionModal";
+import BirthdayModal from "./BirthdayModal";
+import GradeSelectionModal from "./GradeSelectionModal";
 import Header from "./Header";
 import PersonalInfoDialog from "./PersonalInfoDialog";
 
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
+    updateNS_show: false,
     nickName: "初始昵称",
     schoolName: "未设置",
-    cisys: "北京市"
+    cisys: "北京市",
+    grade_text: "七年级",
+    grade_index: 6,
+    birthday_year: 0,
+    birthday_month: 0,
+    birthday_day: 0,
+    birthday_time: 0
   };
-  updateState(data) {
-    this.setState(data);
-  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <PersonalInfoDialog
-          ref={view => (this.dialog = view)}
-          updateParentState={this.updateState.bind(this)}
-        />
         <ChosePhoto ref={view => (this.chosephoto = view)} />
         <RegionModal
           ref={view => (this.regionmodal = view)}
           cityscommit={this.cityscommit.bind(this)}
         />
+        <GradeSelectionModal
+          ref={view => (this.gradeselectionModal = view)}
+          commitGrade={this.commitGrade.bind(this)}
+          grade_index={this.state.grade_index}
+        />
+        <BirthdayModal
+          ref={view => (this.birthdaymodal = view)}
+          birthdaycommit={this.birthdaycommit.bind(this)}
+          year={this.state.birthday_year}
+          month={this.state.birthday_month}
+          day={this.state.birthday_day}
+        />
         <StatusBar backgroundColor={"transparent"} translucent={true} />
 
         <View
@@ -275,7 +290,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      生日。。。。
+                      {this.state.birthday_time}
                     </Text>
                   </View>
                   <View
@@ -426,7 +441,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      年级。。。
+                      {this.state.grade_text}
                     </Text>
                   </View>
                   <View
@@ -499,18 +514,30 @@ export default class PersonalInfo extends BasePage {
               </View>
               <View style={{ flex: 1 }} />
             </View>
-            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 0.8 }} />
           </View>
         </View>
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateNS_show={this.state.updateNS_show}
+          updateParentState={this.updateState.bind(this)}
+        />
       </View>
     );
   }
 
-  // userInfo123() {
-  //   return (
-
-  //   );
-  // }
+  componentWillMount() {
+    var date = new Date();
+    var year = date.getFullYear().toString();
+    var month = (date.getMonth() + 1).toString();
+    var day = date.getDate().toString();
+    this.setState({
+      birthday_year: year,
+      birthday_month: month,
+      birthday_day: day,
+      birthday_time: year + "年" + month + "月" + day + "日"
+    });
+  }
 
   getArraowImg(type) {
     return (
@@ -578,21 +605,28 @@ export default class PersonalInfo extends BasePage {
         this.chosephoto.setModalVisible(true);
         break;
       case 1:
+        this.setState({
+          updateNS_show: true
+        });
         this.dialog.setInfo("修改昵称", "昵称");
         this.dialog.setModalVisible(true, 1);
         break;
       case 2:
-        alert("生日");
+        // alert("生日");
+        this.birthdaymodal.setModalVisible(true);
         break;
       case 3:
         this.regionmodal.setModalVisible(true);
         break;
       case 4:
+        this.setState({
+          updateNS_show: true
+        });
         this.dialog.setInfo("我的学校", "学校名称");
         this.dialog.setModalVisible(true, 2);
         break;
       case 5:
-        alert("我的年级");
+        this.gradeselectionModal.setModalVisible(true);
         break;
     }
   }
@@ -600,10 +634,24 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
+  updateState(data) {
+    this.setState(data);
+  }
 
   cityscommit(provinces_name, citys_name) {
     this.setState({
-      cisys: provinces_name + citys_name
+      cisys: provinces_name + "-" + citys_name
+    });
+  }
+  commitGrade(text, index) {
+    this.setState({
+      grade_text: text,
+      grade_index: index
+    });
+  }
+  birthdaycommit(year, month, day) {
+    this.setState({
+      birthday_time: year + "年" + month + "月" + day + "日"
     });
   }
 }
@@ -617,9 +665,9 @@ const styles = StyleSheet.create({
     marginTop: 1
   },
   item_text: {
-    flex: 2,
+    flex: 3,
     textAlignVertical: "center",
     color: "black",
-    fontSize: 20
+    fontSize: 16
   }
 });

pages/components/PersonalInfoDialog.js

@@ -50,6 +50,10 @@ export default class PersonalInfoDialog extends Component<Props> {
       placeholder: holder
     });
   }
+  cancel() {
+    let data = { updateNS_show: false };
+    this.props.updateParentState(data);
+  }
 
   touchDown() {
     this.setState({
@@ -75,27 +79,19 @@ export default class PersonalInfoDialog extends Component<Props> {
       touch_cancel_textcolor: "#58A8FA"
     });
   }
-  setParentState() {
+  setParentState(bool) {
     let data;
     if (this.state.updateType == 1) {
-      data = { nickName: this.state.input_text };
+      data = { nickName: this.state.input_text, updateNS_show: bool };
     } else if (this.state.updateType == 2) {
-      data = { schoolName: this.state.input_text };
+      data = { schoolName: this.state.input_text, updateNS_show: bool };
     }
     this.props.updateParentState(data);
-    this.setModalVisible(false);
   }
 
   render() {
-    return (
-      <Modal
-        animationType="fade"
-        transparent={true}
-        visible={this.state.modalVisible}
-        onRequestClose={() => {
-          this.setState({ modalVisible: false });
-        }}
-      >
+    if (this.props.updateNS_show) {
+      return (
         <View
           style={{
             flex: 1,
@@ -104,7 +100,8 @@ export default class PersonalInfoDialog extends Component<Props> {
             alignItems: "center",
             justifyContent: "center",
             backgroundColor: "rgba(0, 0, 0, 0.3)",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "absolute"
           }}
         >
           <View
@@ -187,7 +184,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     onPressIn={() => this.touchDown()}
                     onPressOut={() => this.touchUp()}
                     onPress={() => {
-                      this.setParentState();
+                      this.setParentState(false);
                     }}
                   >
                     <Text
@@ -216,7 +213,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     activeOpacity={1}
                     onPressIn={() => this.touchCancelDown()}
                     onPressOut={() => this.touchCancelUp()}
-                    onPress={() => this.setModalVisible(false)}
+                    onPress={() => this.cancel()}
                   >
                     <Text
                       style={{
@@ -236,7 +233,9 @@ export default class PersonalInfoDialog extends Component<Props> {
             </View>
           </View>
         </View>
-      </Modal>
-    );
+      );
+    } else {
+      return null;
+    }
   }
 }

pages/components/RegionModal.js

@@ -273,7 +273,6 @@ export default class RegionModal extends Component<Props> {
   };
 
   get_city(index) {
-    console.log(index);
     this.setState({
       city_data: CitysData.provinces[index].citys,
       text_color: "blue",

pages/components/ScheduleFlatItem.js

@@ -50,7 +50,7 @@ export default class ScheduleFlatItem extends Component<Props> {
               style={{
                 flex: 2.5,
                 backgroundColor: this.props.data.typecolor,
-                width: "95%",
+                width: "100%",
                 height: "70%",
                 alignItems: "center",
                 justifyContent: "center",
@@ -59,7 +59,7 @@ export default class ScheduleFlatItem extends Component<Props> {
             >
               <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
             </View>
-            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 0.2 }} />
             <View
               style={{
                 flex: 10,

pages/components/SharedDialog.js

@@ -138,6 +138,7 @@ export default class SharedDialog extends Component<Props> {
                 flex: 2,
                 backgroundColor: "white",
                 flexDirection: "row",
+                justifyContent: "center",
                 width: "100%"
               }}
             >
@@ -168,7 +169,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >
@@ -177,6 +178,7 @@ export default class SharedDialog extends Component<Props> {
                   </View>
                 </TouchableOpacity>
               </View>
+              <View style={{ flex: 0.3 }} />
               <View
                 style={{
                   flex: 1
@@ -203,7 +205,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >