'增加购买页面等'

App.js

@@ -27,6 +27,9 @@ import CourseDetails from "./pages/CourseDetails";
 import userCenter from "./pages/userCenter";
 import Order from './pages/buy/order'
 import Ticket from './pages/buy/ticket'
+import Buy from './pages/buy/buy'
+import Login from './pages/Login'
+import SearchResult from './pages/searchResult'
 
 const RootNavigator = createStackNavigator(
   {
@@ -39,6 +42,9 @@ const RootNavigator = createStackNavigator(
     CourseDetails: { screen: CourseDetails },
     Order: { screen: Order },
     Ticket: { screen: Ticket },
+    Login: { screen: Login },
+    Buy: { screen: Buy },
+    SearchResult: { screen: SearchResult },
   },
   {
     initialRouteName: "MainPage",

pages/Login.js

@@ -0,0 +1,166 @@
+/* 
+ * 登录
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ImageBackground,
+    Button,
+    StatusBar,
+    Modal,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    TextInput,
+    ScrollView
+} from "react-native";
+import BasePage from "./BasePage";
+import Dimensions from './utils/dimensions';
+import ShopBox from "./components/ShopBox";
+import TopicTitle from './components/TopicTitle';
+import ScrollRow from './components/ScrollRow';
+
+export default class Login extends BasePage {
+    state = {
+
+
+    };
+    render() {
+        return (
+            <View style={styles.wrapper}>
+                <View style={styles.jump}>
+                    <TouchableOpacity style={styles.jumpBtn}>
+                        <Text style={styles.jumpText}>跳过</Text>
+                        <Image source={require('./images/common/arrowRight.png')}></Image>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.phoneNumberBox}>
+                    <Text style={styles.phoneNumber}>手机号</Text>
+                    <TextInput
+                        style={styles.phoneText}
+                        onChangeText={(text) => this.setState({ text })}
+                        value={this.state.text}
+                        placeholder={'请输入手机号'}
+                    />
+                </View>
+                <View style={styles.signNumberBox}>
+                    <Text style={styles.phoneNumber}>验证码</Text>
+                    <View style={styles.signNumberLine2}>
+                        <TextInput
+                            style={styles.signText}
+                            onChangeText={(text) => this.setState({ text })}
+                            value={this.state.text}
+                            placeholder={'请输入验证码'}
+                        />
+                        <TouchableOpacity>
+                            <Text style={styles.getSign}>获取验证码</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <View style={styles.loginIn}>
+                    <Text style={styles.loginText}>登录</Text>
+                </View>
+                <View style={styles.wechatLogin}>
+                    <Image source={require('./images/common/wechat.png')}></Image>
+                    <Text style={styles.wechatLoginText}>微信登录</Text>
+                    <Image source={require('./images/common/arrowRight.png')}></Image>
+                </View>
+            </View>
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1
+    },
+    jumpText: {
+        color: '#3e3e3e',
+        fontSize: 16,
+        marginRight: 4
+    },
+    jump: {
+        // width: Dimensions.width,
+        flex: 2,
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        paddingHorizontal: '8%'
+    },
+    jumpBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    phoneNumberBox: {
+        flex: 2,
+        paddingHorizontal: '8%'
+    },
+    phoneNumber: {
+        color: '#3e3e3e',
+        fontSize: 18,
+        marginBottom: 10
+    },
+    phoneText: {
+        width: '100%',
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#f3f3f3'
+    },
+    signNumberBox: {
+        flex: 2,
+        paddingHorizontal: '8%'
+    },
+    signNumberLine2: {
+        flexDirection: 'row',
+        width: Dimensions.width,
+    },
+    signText: {
+        width: '54%',
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#f3f3f3',
+        marginRight: 9
+    },
+    getSign: {
+        width: 105,
+        height: Dimensions.getHeight(50),
+        borderRadius: 25,
+        backgroundColor: '#38da84',
+        lineHeight: Dimensions.getHeight(50),
+        color: '#fff',
+        fontSize: 16,
+        textAlign: 'center'
+    },
+    loginIn: {
+        flex: 3,
+        paddingHorizontal: '8%'
+    },
+    loginText: {
+        width: '100%',
+        height: Dimensions.getHeight(50),
+        backgroundColor: '#63aeff',
+        textAlign: 'center',
+        lineHeight: Dimensions.getHeight(50),
+        color: '#fff',
+        fontSize: 20,
+        borderRadius: 25
+    },
+    wechatLogin: {
+        flex: 3,
+        flexDirection: 'row',
+        paddingHorizontal: '33.6%',
+        alignItems: 'center',
+        justifyContent: 'center',
+
+    },
+    wechatLoginText: {
+        fontSize: 16,
+        color: '#3e3e3e',
+        marginHorizontal: 6
+    }
+})

pages/buy/buy.js

@@ -0,0 +1,183 @@
+/* 
+ * 
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    FlatList,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    ScrollView
+} from "react-native";
+import BasePage from "../BasePage";
+import Dimensions from '../utils/dimensions';
+import TopicTitle from '../components/TopicTitle';
+
+export default class Buy extends BasePage {
+    state = {
+        shopData: [
+            { title: '1个月', originPrice: '199', price: '49', },
+            { title: '12个月', originPrice: '499', price: '199' }
+        ],
+        currentTapindex: 0
+    };
+    itemTap = (index) => {
+        this.setState({
+            currentTapindex: index
+        })
+    }
+    renderItem = (item, index) => {
+        return (
+            <TouchableOpacity style={this.state.currentTapindex === index ? styles.itemWrapperTap : styles.itemWrapperNormal} onPress={() => { this.itemTap(index) }} key={index}>
+                <Text style={this.state.currentTapindex === index ? styles.timeLengthTap : styles.timeLength}>{item.title}</Text>
+                <Text style={this.state.currentTapindex === index ? styles.priceTap : styles.price}>￥{item.price}元</Text>
+                <Text style={this.state.currentTapindex === index ? styles.originPriceTap : styles.originPrice}>原价:￥{item.originPrice}</Text>
+            </TouchableOpacity>
+        )
+    }
+    render() {
+        return (
+            <View style={{ flex: 1 }}>
+                <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)}>
+                    <Text style={styles.left}>支付方式</Text>
+                    <View style={styles.right}>
+                        <Text style={styles.method}>微信支付</Text>
+                        <Image source={require('../images/common/arrowRight.png')} />
+                    </View>
+                </TouchableOpacity>
+                <View style={styles.bottom}>
+                    <Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
+                    <TouchableOpacity style={styles.bottomRight}>
+                        <Text style={styles.bottomRightText}>支付</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    top: {
+        width: Dimensions.width,
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingBottom: 20
+    },
+    title: {
+        fontSize: 20,
+        color: '#a8674d',
+        marginTop: 22,
+    },
+    itemWrapperNormal: {
+        borderWidth: 1,
+        borderColor: '#a8674d',
+        borderRadius: 27,
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        width: '86%',
+        height: Dimensions.getHeight(53),
+        marginTop: 20,
+    },
+    itemWrapperTap: {
+        // borderWidth: 1,
+        // borderColor: '#a8674d',
+        borderRadius: 27,
+        backgroundColor: '#ff7525',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        width: '86%',
+        height: Dimensions.getHeight(53),
+        marginTop: 20,
+    },
+    originPriceTap: {
+        fontSize: 14,
+        color: '#fff',
+        textDecorationLine: 'line-through'
+    },
+    originPrice: {
+        fontSize: 14,
+        color: '#a8674d',
+        textDecorationLine: 'line-through'
+    },
+    priceTap: {
+        fontSize: 20,
+        color: '#fff',
+    },
+    price: {
+        fontSize: 20,
+        color: '#a8674d',
+    },
+    timeLengthTap: {
+        fontSize: 18,
+        color: '#fff',
+    },
+    timeLength: {
+        fontSize: 18,
+        color: '#a8674d',
+    },
+    payment: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: Dimensions.width,
+        height: 60,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderColor: '#f3f2f7',
+        borderTopWidth: 6,
+        borderBottomWidth: 6,
+        paddingHorizontal: 33
+    },
+    left: {
+        fontSize: 16
+    },
+    right: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    method: {
+        color: '#a8674d',
+        fontSize: 16,
+        marginRight: 7
+    },
+    bottom: {
+        width: Dimensions.width,
+        height: 60,
+        flexDirection: 'row',
+        position: 'absolute',
+        bottom: 0,
+    },
+    bottomLeft: {
+        width: '58%',
+        textAlign: 'center',
+        lineHeight: 60,
+        color: '#a8674d',
+        fontSize: 20
+    },
+    bottomRight: {
+        width: '42%',
+        fontSize: 16,
+        color: '#fff',
+        backgroundColor: '#f5880d',
+        alignItems: 'center'
+    },
+    bottomRightText: {
+        fontSize: 20,
+        color: '#fff',
+        textAlign: 'center',
+        lineHeight: 60,
+    }
+})

pages/components/MainPage.js

@@ -95,7 +95,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }} >
+        <ScrollView style={{ height: Dimensions.height }}  onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}

pages/components/ShopBox.js

@@ -83,26 +83,30 @@ export default class ShopBox extends Component {
                 source={item.background}
                 style={styles.item}
                 key={index}
+
             >
-                <Text
-                    style={styles.title}
-                >{item.title}</Text>
-                <View
-                    style={styles.line2}
-                >
-                    <Text style={styles.price}>￥{item.price}</Text>
-                    <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
-                </View>
-                <View
-                    style={styles.line3}
-                >
-                    <Text style={styles.buy}>立即购买</Text>
-                    <Image
-                        source={require('../images/shopBox/arrow.png')}
-                        style={styles.arrow}
-                    />
+                <TouchableOpacity onPress={() => this.props.nav('Buy')}>
+                    <Text
+                        style={styles.title}
+                    >{item.title}</Text>
+                    <View
+                        style={styles.line2}
+                    >
+                        <Text style={styles.price}>￥{item.price}</Text>
+                        <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
+                    </View>
+                    <View
+                        style={styles.line3}
+                    >
+                        <Text style={styles.buy}>立即购买</Text>
+                        <Image
+                            source={require('../images/shopBox/arrow.png')}
+                            style={styles.arrow}
+                        />
+
+                    </View>
+                </TouchableOpacity>
 
-                </View>
             </ImageBackground>
         )
     }

pages/searchResult.js

@@ -0,0 +1,74 @@
+/* 
+ * 搜索结果页面
+*/
+import React, { Component } from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ImageBackground,
+    Button,
+    StatusBar,
+    Modal,
+    TouchableHighlight,
+    DeviceEventEmitter,
+    FlatList,
+    TextInput
+} from "react-native";
+import BasePage from "./BasePage";
+import Dimensions from './utils/dimensions';
+import ShopBox from "./components/ShopBox";
+import TopicTitle from './components/TopicTitle';
+import ScrollRow from './components/ScrollRow';
+
+export default class SearchResult extends BasePage {
+    state = {
+        text: '123123123123'
+    };
+    searchBox = () => {
+        return (
+            <View style={styles.searchBox}>
+                <TextInput
+                    style={styles.searchInput}
+                    onChangeText={(text) => this.setState({ text })}
+                    value={this.state.text}
+                    renderItem={item => this.renderItem(item)}
+                />
+            </View>
+        )
+    }
+    renderItem = (item) =>{
+        return (
+            <View>
+                
+            </View>
+        )
+    } 
+    render() {
+        return (
+            <FlatList
+                ListHeaderComponent={() => this.searchBox()}
+            />
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    searchBox: {
+        width: Dimensions.width,
+        height: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f6f7f8'
+    },
+    searchInput: {
+        width: '88.5%',
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#fff'
+    }
+})

pages/userCenter.js

@@ -117,7 +117,7 @@ export default class userCenter extends BasePage {
 
                 </View>
                 <View style={styles.discountSection}>
-                    <ShopBox data={this.state.shopData} discount={this.state.discount} />
+                    <ShopBox data={this.state.shopData} discount={this.state.discount} nav={this.props.navigation.navigate}/>
                 </View>
                 <View style={styles.recordSection}>
                     <TopicTitle title={'观看记录'} ifTubeShow={true} />