收银台界面

src/pages/VerticalPage.js

@@ -55,31 +55,31 @@ class VerticalPage extends Component {
     return String(index);
   };
 
-  stepOne = async () => {
-    await this.setState({
-      visibleActive: true,
-    });
-    setTimeout(() => {
-      this.setState({
-        visibleActive: false,
-      });
-    }, 3000);
-  };
-
-  stepTwo = () => {
-    let {visibleActive} = this.state;
-    if (visibleActive) {
-      this.setState({
-        maskVisible: false,
-      });
-      setTimeout(() => {
-        this.setState({
-          visibleActive: false,
-          maskVisible: true,
-        });
-      }, 5000);
-    }
-  };
+  // stepOne = async () => {
+  //   await this.setState({
+  //     visibleActive: true,
+  //   });
+  //   setTimeout(() => {
+  //     this.setState({
+  //       visibleActive: false,
+  //     });
+  //   }, 3000);
+  // };
+  //
+  // stepTwo = () => {
+  //   let {visibleActive} = this.state;
+  //   if (visibleActive) {
+  //     this.setState({
+  //       maskVisible: false,
+  //     });
+  //     setTimeout(() => {
+  //       this.setState({
+  //         visibleActive: false,
+  //         maskVisible: true,
+  //       });
+  //     }, 5000);
+  //   }
+  // };
 
   wxFacepay = async () => {
     const {goodsArr} = this.props;
@@ -341,15 +341,15 @@ class VerticalPage extends Component {
               style={{backgroundColor: '#fc4000', marginRight: 50}}>
               <Text style={styles.btnText}>输入条码</Text>
             </Touch>
-            <Touch
-              onPress={() => this.props.handleCodeless()}
-              style={{
-                backgroundColor: '#fc4000',
-                marginRight: 50,
-                marginLeft: 50,
-              }}>
-              <Text style={styles.btnText}>无码商品</Text>
-            </Touch>
+            {/*<Touch*/}
+            {/*  onPress={() => this.props.handleCodeless()}*/}
+            {/*  style={{*/}
+            {/*    backgroundColor: '#fc4000',*/}
+            {/*    marginRight: 50,*/}
+            {/*    marginLeft: 50,*/}
+            {/*  }}>*/}
+            {/*  <Text style={styles.btnText}>无码商品</Text>*/}
+            {/*</Touch>*/}
             <Touch
               onPress={this.props.clearList}
               style={{backgroundColor: '#fc4000', marginLeft: 50}}>
@@ -372,6 +372,17 @@ class VerticalPage extends Component {
               );
             })}
           </View>
+          <View style={styles.shadow} />
+          <Touch onPress={this.wxFacepay}>
+            <View style={styles.guide}>
+              <Text style={styles.guideText}>点击进入</Text>
+              <Image
+                source={require('../assets/down.png')}
+                style={styles.down}
+              />
+              <Text style={styles.guideText}>人脸支付</Text>
+            </View>
+          </Touch>
           <View style={styles.payment}>
             <View style={styles.paymentLeft}>
               <View style={styles.barcode}>
@@ -562,9 +573,9 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#fff',
-    paddingBottom: 20,
-    paddingTop: 20,
-    marginBottom: 35,
+    paddingBottom: 10,
+    paddingTop: 10,
+    marginBottom: 17.5,
     borderBottomWidth: 1,
     borderBottomColor: '#959595',
     elevation: 3,
@@ -581,9 +592,9 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#fff',
-    paddingBottom: 20,
-    paddingTop: 20,
-    marginBottom: 30,
+    paddingBottom: 10,
+    paddingTop: 10,
+    marginBottom: 15,
     borderBottomWidth: 1,
     borderBottomColor: '#959595',
     elevation: 5,
@@ -596,7 +607,7 @@ const styles = {
     shadowRadius: 5,
   },
   btnText: {
-    fontSize: 25,
+    fontSize: 20,
     color: '#fff',
     paddingTop: 10,
     paddingBottom: 10,
@@ -616,7 +627,7 @@ const styles = {
     justifyContent: 'center',
     backgroundColor: '#4D4D4D',
     padding: 10,
-    marginBottom: 20,
+    marginBottom: 10,
     marginLeft: 20,
     marginRight: 20,
     // borderBottomWidth: 1,
@@ -643,6 +654,28 @@ const styles = {
     marginLeft: 5,
     marginRight: 5,
   },
+  shadow: {
+    height: 2,
+    elevation: 2,
+    border: 1,
+    borderColor: '#888888',
+    marginBottom: 4,
+  },
+  guide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // backgroundColor: 'rgb(27,125,199)',
+    backgroundColor: '#1b7dc7',
+  },
+  guideText: {
+    fontSize: 30,
+    color: '#fff',
+  },
+  down: {
+    width: 50,
+    height: 70,
+  },
   payment: {
     display: 'flex',
     flexDirection: 'row',
@@ -650,7 +683,7 @@ const styles = {
     marginBottom: 10,
   },
   paymentLeft: {
-    width: '40%',
+    width: '34%',
     display: 'flex',
     flexDirection: 'row',
     alignContent: 'space-around',
@@ -714,25 +747,26 @@ const styles = {
     fontSize: 40,
   },
   faceScan: {
-    width: '20%',
+    width: '32%',
     display: 'flex',
     justifyContent: 'center',
+    alignItems: 'center',
     flexDirection: 'column',
     borderWidth: 1,
     borderColor: '#00BBFF',
     backgroundColor: '#fff',
     elevation: 3,
-    shadowColor: '#888888',
-    shadowOffset: {
-      height: 0,
-      width: 0,
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 5,
+    // shadowColor: '#888888',
+    // shadowOffset: {
+    //   height: 0,
+    //   width: 0,
+    // },
+    // shadowOpacity: 0.5,
+    // shadowRadius: 5,
   },
   faceGif: {
     width: '100%',
-    height: 180,
+    height: 210,
   },
   facePay: {
     display: 'flex',
@@ -749,7 +783,7 @@ const styles = {
     marginLeft: 10,
   },
   paymentRight: {
-    width: '40%',
+    width: '34%',
     display: 'flex',
     justifyContent: 'center',
     // overflow: 'hidden',
@@ -777,47 +811,40 @@ const styles = {
   paymentRightTitle: {
     display: 'flex',
     flexDirection: 'row',
-    // alignContent: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
   paymentRightContents: {
     display: 'flex',
     flexDirection: 'column',
-    // alignContent: 'center',
-    // alignItems: 'center',
     marginRight: 40,
   },
   paymentRightText: {
     fontSize: 35,
-    // marginRight: 5,
   },
   paymentRightImage: {
     width: 50,
     height: 50,
     marginTop: 5,
     marginBottom: 5,
-    // marginLeft: 5,
   },
   paymentRightCode: {
     display: 'flex',
     flexDirection: 'row',
-    // alignContent: 'center',
-    // alignItems: 'center',
   },
   firstThStyle: {
     width: '40%',
     alignItems: 'flex-start',
-    paddingTop: 20,
-    paddingBottom: 20,
+    paddingTop: 18,
+    paddingBottom: 18,
     paddingLeft: 10,
     paddingRight: 10,
   },
   ThStyle: {
     width: '20%',
     alignItems: 'center',
-    paddingTop: 20,
-    paddingBottom: 20,
+    paddingTop: 18,
+    paddingBottom: 18,
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -834,10 +861,9 @@ const styles = {
   },
   firstTdStyle: {
     width: '40%',
-    // alignItems: 'center',
     alignItems: 'flex-start',
-    paddingTop: 20,
-    paddingBottom: 20,
+    paddingTop: 18,
+    paddingBottom: 18,
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -846,8 +872,8 @@ const styles = {
     width: '20%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 20,
-    paddingBottom: 20,
+    paddingTop: 18,
+    paddingBottom: 18,
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -861,10 +887,6 @@ const styles = {
     justifyContent: 'center',
     backgroundColor: '#fc4000',
     padding: 20,
-    // paddingTop: 20,
-    // paddingRight: 20,
-    // paddingBottom: 20,
-    // paddingLeft: 20,
   },
   explainText1: {
     fontSize: 30,