安全检查提示弹窗

src/components/LoadingModal.js

+import React, {Component} from 'react';
+import {Modal, View, Text, Image} from 'react-native';
+import ModalStyles from './Modal/styles';
+import {font} from '../utils/common';
+import {setSpText} from '../utils/screen';
+
+const mStyles = {
+  ...ModalStyles,
+  innerContainer: {
+    ...ModalStyles.innerContainer,
+  },
+  header: {
+    ...ModalStyles.header,
+    fontSize: font.title,
+  },
+};
+
+class LoadingModal extends Component {
+  render() {
+    const {...props} = this.props;
+    return (
+      <Modal styles={mStyles} {...props}>
+        <View style={styles.modalBackgroundStyle}>
+          <View style={styles.modal}>
+            <View style={styles.top}>
+              <Image
+                key={'blurryImage'}
+                source={require('../assets/Face/loading.gif')}
+                style={styles.image}
+              />
+            </View>
+            <View style={styles.bottom}>
+              <Text style={styles.tips}>正在进行安全检查，请靠中间站稳</Text>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = {
+  modalBackgroundStyle: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // opacity: 0.8,
+  },
+  modal: {
+    height: '100%',
+    width: '100%',
+    // marginLeft: '10%',
+    // marginTop: '40%',
+    // borderRadius: 20,
+    // backgroundColor: '#fff',
+    flexDirection: 'column',
+  },
+  top: {
+    flex: 0.8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    // width: '80%',
+    // height: '80%',
+    // width: scaleSize(400),
+    // height: scaleSize(400),
+  },
+  bottom: {
+    flex: 0.2,
+    flexDirection: 'row',
+    // alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tips: {
+    fontSize: setSpText(70),
+    color: 'red',
+  },
+};
+
+export default LoadingModal;

src/pages/FacePage.js

@@ -8,6 +8,7 @@ import PhoneModal from '../components/PhoneModal';
 import VerifyCodeModal from '../components/VerifyCodeModal';
 import OrderDetailsModal from '../components/OrderDetailsModal';
 import TipsModal from '../components/TipsModal';
+import LoadingModal from '../components/LoadingModal';
 import delay from '../utils/delay';
 import Speech from '../utils/Speech';
 import WxFacepay from '../utils/WxFacepay';
@@ -33,6 +34,7 @@ class FacePage extends Component {
     tipsModal: false,
     faceType: 'wxpay',
     sleep: true,
+    loadingModal: false,
   };
 
   async componentWillMount() {
@@ -68,6 +70,7 @@ class FacePage extends Component {
       }
       this.phone = _phone;
       this.setState({
+        loadingModal: false,
         phoneModal: false,
         verifyCodeModal: true,
       });
@@ -135,6 +138,9 @@ class FacePage extends Component {
   };
 
   doorOpen = () => {
+    this.setState({
+      loadingModal: false,
+    });
     this.wakeUp();
   };
 
@@ -194,6 +200,7 @@ class FacePage extends Component {
         verifyCodeModal: false,
         current: 1,
         tipsModal: false,
+        loadingModal: false,
         sleep: true,
         tip: '',
       });
@@ -207,11 +214,12 @@ class FacePage extends Component {
         let tipText = ret.msg;
         Speech.speak(tipText);
         this.userId = ret.userId;
-        this.setState({tip: tipText, tipsModal: true});
+        this.setState({tip: tipText, tipsModal: true, loadingModal: false});
         if (ret.code === 401) {
           // 需要验证手机号
           this.setState({
             phoneModal: true,
+            loadingModal: false,
           });
         } else if (ret.orders && ret.orders.length > 0) {
           let goodsArr = [];
@@ -222,6 +230,7 @@ class FacePage extends Component {
           });
           this.setState({
             orderDetailsModal: true,
+            loadingModal: false,
             goodsArr,
             customerPhone: ret.phone || '0000',
             current: 1,
@@ -231,7 +240,7 @@ class FacePage extends Component {
         let tipText = ret.msg.replace(/扫码/g, '人脸识别');
         Speech.speak(tipText);
         if (ret.code !== 1) {
-          this.setState({tip: tipText, tipsModal: true});
+          this.setState({tip: tipText, tipsModal: true, loadingModal: false});
         }
       }
     } else {
@@ -295,6 +304,9 @@ class FacePage extends Component {
         wxtoken: res.token,
         nickname: res.nickname,
       });
+      this.setState({
+        loadingModal: true,
+      });
       this.handleDoorLogin(ret);
     }
   };
@@ -334,6 +346,9 @@ class FacePage extends Component {
         type: 'store/wxdoor',
         alipayUid: res.uid,
       });
+      this.setState({
+        loadingModal: true,
+      });
       this.handleDoorLogin(ret);
     }
   };
@@ -411,6 +426,7 @@ class FacePage extends Component {
       tipsModal,
       sleep,
       faceType,
+      loadingModal,
     } = this.state;
     let {dispatch} = this.props;
     if (faceType === 'alipay') {
@@ -464,6 +480,7 @@ class FacePage extends Component {
           rightTouch={this.closeTips}
           faceType={faceType}
         />
+        <LoadingModal transparent visible={loadingModal} />
         <View style={styles.header}>
           <View style={styles.title}>
             <View style={styles.left}>