收银台

js/navigator/AppNavigators.js

@@ -9,8 +9,9 @@ import Register3 from "../page/Register3"
 import Meet from "../page/Meet"
 import ForgetPassWord from "../page/ForgetPassWord"
 import HomePage from "../page/HomePage"
-import userCard from "../page/userCard"
-import girlFrienfTerm from "../page/girlFrienfTerm"
+import UserCard from "../page/UserCard"
+import GirlFrienfTerm from "../page/GirlFrienfTerm"
+import GiftPay from "../page/GiftPay"
 
 const InitNavigator = createStackNavigator({
     LoginPage:{
@@ -27,14 +28,20 @@ const InitNavigator = createStackNavigator({
     }
 })
 const MainNavigator = createStackNavigator({
-    girlFrienfTerm:{
-        screen:girlFrienfTerm,
+    GiftPay:{
+        screen:GiftPay,
+        navigationOptions:{
+            headerTitle:"收银台"
+        }
+    },
+    GirlFrienfTerm:{
+        screen:GirlFrienfTerm,
         navigationOptions:{
             headerTitle:"择偶条件"
         }
     },
-    userCard:{
-        screen:userCard,
+    UserCard:{
+        screen:UserCard,
         navigationOptions:{
             header:null
         }

js/page/GiftPay.js

@@ -0,0 +1,112 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import AntDesign from "react-native-vector-icons/AntDesign"
+import FontAwesome from "react-native-vector-icons/FontAwesome"
+
+export default class GiftPay extends Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.topInfo}>
+                    <Text style={{ fontSize: unitWidth * 24, color: "#666666", marginTop: unitHeight * 20 }}>送个小礼物，敲开爱的大门，拉近彼此的距离</Text>
+                    <View style={styles.giftInfo}>
+                        <Image
+                            source={require("../../static/gift.png")}
+                            style={styles.giftImg}
+                        />
+                        <View style={styles.giftText}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginBottom: unitHeight * 20 }}>礼物：告白玫瑰</Text>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>总价：¥6</Text>
+                        </View>
+                    </View>
+                </View>
+                <View style={styles.pay}>
+                    <View style={styles.payTit}>
+                        <AntDesign
+                            name={"pay-circle1"}
+                            size={24}
+                            style={{ color: "#FA788A", marginRight: unitWidth * 12 }}
+                        />
+                        <Text style={{ color: "#666666", fontSize: unitWidth * 28 }}>请选择支付方式</Text>
+                    </View>
+                    <View style={styles.payList}>
+                        <View style={styles.payItem}>
+                            <AntDesign
+                                name={"alipay-square"}
+                                size={24}
+                                style={{ color: "#108ee9", marginRight: unitWidth * 16 }}
+                            />
+                            <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>支付宝</Text>
+                        </View>
+                        <View style={styles.payItem}>
+                            <FontAwesome
+                                name={"weixin"}
+                                size={24}
+                                style={{ color: "#04BE02", marginRight: unitWidth * 16 }}
+                            />
+                            <Text style={{ color: "#333333", fontSize: unitWidth * 28 }}>微信</Text>
+                        </View>
+
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center"
+    },
+    topInfo: {
+        width: "100%",
+        flex: 1,
+        backgroundColor: "#fff",
+        paddingLeft: unitWidth * 24,
+        marginBottom: unitHeight * 20
+    },
+    giftInfo: {
+        flexDirection: "row",
+        marginTop: unitHeight * 30
+    },
+    giftImg: {
+        width: unitWidth * 80,
+        height: unitHeight * 80,
+        marginLeft:unitWidth * 20,
+    },
+    giftText: {
+        marginLeft: unitWidth * 40
+    },
+    pay: {
+        flex: 5,
+        width: "100%",
+        backgroundColor: "#fff"
+    },
+    payTit: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: unitHeight * 35,
+        marginLeft: unitHeight * 24
+    },
+    payList: {
+        width: "100%",
+        height: unitHeight * 76,
+        paddingLeft: unitWidth * 73,
+        paddingRight: unitWidth * 73,
+        marginTop: unitHeight * 40,
+        flexDirection: "row",
+        justifyContent: "space-between"
+    },
+    payItem: {
+        width: unitWidth * 250,
+        height: unitHeight * 76,
+        flexDirection: "row",
+        borderColor: "#DEDEDE",
+        borderWidth: 1,
+        justifyContent: "center",
+        alignItems: "center"
+
+    }
+
+})

js/page/girlFrienfTerm.js

@@ -4,7 +4,7 @@ import { unitWidth, unitHeight } from "../utils/AdapterUtil";
 import RNPickerSelect from 'react-native-picker-select';
 import AntDesign from "react-native-vector-icons/AntDesign"
 import MyButtom from '../component/MyButton'
-export default class girlFrienfTerm extends React.Component {
+export default class GirlFrienfTerm extends React.Component {
     render() {
         return (
             <View style={styles.container}>

js/page/userCard.js

@@ -5,7 +5,7 @@ import Foundation from "react-native-vector-icons/Foundation"
 import FontAwesome5 from "react-native-vector-icons/FontAwesome5"
 import AntDesign from "react-native-vector-icons/AntDesign"
 import Tips from '../component/Tips'
-export default class userCard extends React.Component {
+export default class UserCard extends React.Component {
     state = {
         pageStatus: 1
     };