'完善部分页面'

App.js

@@ -47,7 +47,7 @@ const RootNavigator = createStackNavigator(
     SearchResult: { screen: SearchResult },
   },
   {
-    initialRouteName: "CourseDetails",
+    initialRouteName: "MainPage",
     headerMode: "null"
   }
 );

pages/buy/buy.js

@@ -12,11 +12,14 @@ import {
     FlatList,
     TouchableHighlight,
     DeviceEventEmitter,
-    ScrollView
+    ScrollView,
+    Modal,
+    Animated
 } from "react-native";
 import BasePage from "../BasePage";
 import Dimensions from '../utils/dimensions';
 import TopicTitle from '../components/TopicTitle';
+import CourseTitle from "../components/CourseTitle";
 
 export default class Buy extends BasePage {
     state = {
@@ -24,7 +27,9 @@ export default class Buy extends BasePage {
             { title: '1个月', originPrice: '199', price: '49', },
             { title: '12个月', originPrice: '499', price: '199' }
         ],
-        currentTapindex: 0
+        currentTapindex: 0,
+        slideAnim: new Animated.Value(-150),
+        ifDialogShow: false
     };
     itemTap = (index) => {
         this.setState({
@@ -40,16 +45,44 @@ export default class Buy extends BasePage {
             </TouchableOpacity>
         )
     }
+    changeMethod = () => {
+        this.setState({
+            ifDialogShow: !this.state.ifDialogShow
+        }, () => {
+            Animated.timing(
+                this.state.slideAnim,
+                {
+                    toValue: 0,
+                    duration: 300,
+                }
+            ).start();
+        })
+    }
     render() {
         return (
             <View style={{ flex: 1 }}>
+                <View
+                    style={{
+                        height: 30,
+                        marginTop: 30
+                    }}
+                >
+                    <CourseTitle
+                        width={this.getWindowWidth()}
+                        title="VIP购买"
+                        lefttype={1}
+                        textcolor={"#231F20"}
+                        backPress={() => this.goBack()}
+                    // backPress={() => alert("左侧按钮")}
+                    />
+                </View>
                 <View style={styles.top}>
                     <Text style={styles.title}>套餐选择</Text>
                     <View>
                         {this.state.shopData.map((item, index) => this.renderItem(item, index))}
                     </View>
                 </View>
-                <TouchableOpacity style={styles.payment} onPress={() => alert(123)}>
+                <TouchableOpacity style={styles.payment} onPress={() => this.changeMethod()}>
                     <Text style={styles.left}>支付方式</Text>
                     <View style={styles.right}>
                         <Text style={styles.method}>微信支付</Text>
@@ -62,7 +95,32 @@ export default class Buy extends BasePage {
                         <Text style={styles.bottomRightText}>支付</Text>
                     </TouchableOpacity>
                 </View>
+                {
+                    this.state.ifDialogShow
+                        ?
+                        <View style={{ ...styles.dialog }}>
+                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
+                                <Text>选择支付方式</Text>
+                                {/* <View> */}
+
+                                {/* </View> */}
+                            </Animated.View>
+                        </View>
+                        :
+                        null
+                }
+
+                {/* <Modal
+                    animationType="none "
+                    transparent={true}
+                    visible={true}
+                    onRequestClose={() => {
+                        alert("Modal has been closed.");
+                    }}
+                    
+                ></Modal> */}
             </View>
+
         )
     }
 }
@@ -179,5 +237,20 @@ const styles = StyleSheet.create({
         color: '#fff',
         textAlign: 'center',
         lineHeight: 60,
+    },
+    dialog: {
+        width: Dimensions.width,
+        height: Dimensions.height,
+        position: 'absolute',
+        backgroundColor: '#000',
+        opacity: 0.4
+
+    },
+    payMethod: {
+        width: Dimensions.width,
+        height: 150,
+        position: 'absolute',
+        // bottom: 0,
+        backgroundColor: '#fff'
     }
 })

pages/components/CourseTitle.js

@@ -31,7 +31,8 @@ export default class CourseTitle extends Component<Props> {
           flex: 1,
           width: this.props.width,
           height: this.props.height,
-          flexDirection: "column"
+          flexDirection: "column",
+          // backgroundColor: this.props.backgroundColor ?  this.props.backgroundColor : '#fff'
         }}
       >
         <View
@@ -42,7 +43,8 @@ export default class CourseTitle extends Component<Props> {
         <View
           style={{
             flex: 1,
-            flexDirection: "row"
+            flexDirection: "row",
+            alignItems: 'center'
           }}
         >
           <View
@@ -83,7 +85,7 @@ export default class CourseTitle extends Component<Props> {
             }}
           >
             <TouchableOpacity activeOpacity={1} onPress={this.props.rightPress}>
-              {this.selectRightIcon()}
+              {this.props.righttype ? this.selectRightIcon() : null}
             </TouchableOpacity>
           </View>
         </View>
@@ -130,6 +132,7 @@ export default class CourseTitle extends Component<Props> {
         break;
       case 2:
         //个人中心，右侧是设置
+        right = require("../images/common/setting.png");
         break;
     }
     return (

pages/components/MainPage.js

@@ -111,15 +111,15 @@ export default class MainPage extends BasePage {
                 ...styles.callUpGrade,
                 opacity: this.state.fadeAnim
               }}>
-              <View style={styles.gradeItem}>
+              <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>小学</Text>
-              </View>
-              <View style={styles.gradeItemMid}>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.gradeItemMid}>
                 <Text style={styles.gradeText}>学前</Text>
-              </View>
-              <View style={styles.gradeItem}>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>中学</Text>
-              </View>
+              </TouchableOpacity>
             </Animated.View>
           ) : (
               null

pages/userCenter.js

@@ -22,6 +22,7 @@ import Dimensions from './utils/dimensions';
 import ShopBox from "./components/ShopBox";
 import TopicTitle from './components/TopicTitle';
 import ScrollRow from './components/ScrollRow';
+import CourseTitle from "./components/CourseTitle";
 
 export default class userCenter extends BasePage {
     state = {
@@ -81,6 +82,10 @@ export default class userCenter extends BasePage {
             </TouchableOpacity>
         )
     }
+    goBack() {
+        //返回上一页
+        this.props.navigation.goBack();
+    }
     render() {
         return (
 
@@ -92,6 +97,31 @@ export default class userCenter extends BasePage {
                         }
                         style={{ width: '100%', height: 203 }}
                     >
+                        <StatusBar
+                            backgroundColor={"transparent"}
+                            barStyle={"dark-content"}
+                            // backgroundColor={"white"}
+                            translucent={true}
+                            hidden={false}
+                        />
+                        <View
+                            style={{
+                                height: 30,
+                                // backgroundColor: "white"
+                                marginTop: 20
+                            }}
+                        >
+                            <CourseTitle
+                                width={this.getWindowWidth()}
+                                title="个人中心"
+                                lefttype={2}
+                                righttype={2}
+                                textcolor={"#fff"}
+                                backPress={() => this.goBack()}
+                            // backgroundColor={"transparent"}
+                            // rightPress={this.showSharedDialog.bind(this)}
+                            />
+                        </View>
                         <View style={styles.userInfo}>
                             <TouchableOpacity onPress={() => this.goTo(`PersonalInfo`)}>
                                 <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
@@ -117,7 +147,7 @@ export default class userCenter extends BasePage {
 
                 </View>
                 <View style={styles.discountSection}>
-                    <ShopBox data={this.state.shopData} discount={this.state.discount} nav={this.props.navigation.navigate}/>
+                    <ShopBox data={this.state.shopData} discount={this.state.discount} nav={this.props.navigation.navigate} />
                 </View>
                 <View style={styles.recordSection}>
                     <TopicTitle title={'观看记录'} ifTubeShow={true} />