操作失败提示弹窗

src/components/TipsModal.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 {scaleSize, setSpText} from '../utils/screen';
+import Touch from './Touch';
+
+const mStyles = {
+  ...ModalStyles,
+  innerContainer: {
+    ...ModalStyles.innerContainer,
+  },
+  header: {
+    ...ModalStyles.header,
+    fontSize: font.title,
+  },
+};
+
+class TipsModal extends Component {
+  render() {
+    const {
+      tip,
+      title,
+      leftText,
+      rightText,
+      leftTouch,
+      rightTouch,
+      faceType,
+      ...props
+    } = this.props;
+    if (faceType === 'alipay') {
+      styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
+      styles.right = {
+        ...styles.right,
+        backgroundColor: '#1b7dc7',
+      };
+      styles.call = {
+        ...styles.call,
+        color: '#1b7dc7',
+      };
+    }
+    return (
+      <Modal styles={mStyles} {...props}>
+        <View style={styles.modalBackgroundStyle}>
+          <View style={styles.modal}>
+            <View style={styles.header}>
+              <Image
+                source={require('../assets/Vertical/tip_modal.png')}
+                style={styles.image}
+                tintColor="white"
+              />
+              <Text style={styles.title}>{title}</Text>
+            </View>
+            <View style={styles.container}>
+              <Text style={styles.tip}>{tip}</Text>
+            </View>
+            <View style={styles.footer}>
+              <Touch style={styles.left} onPress={() => leftTouch()}>
+                <Text style={styles.call}>{leftText}</Text>
+              </Touch>
+              <Touch style={styles.right} onPress={() => rightTouch()}>
+                <Text style={styles.reset}>{rightText}</Text>
+              </Touch>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = {
+  modalBackgroundStyle: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modal: {
+    height: '35%',
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: '40%',
+    borderRadius: 20,
+    backgroundColor: '#fff',
+    flexDirection: 'column',
+  },
+  header: {
+    flex: 0.25,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#2BA245',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  image: {
+    width: scaleSize(60),
+    height: scaleSize(60),
+    marginLeft: scaleSize(20),
+    marginRight: scaleSize(20),
+  },
+  title: {
+    fontSize: setSpText(45),
+    color: '#fff',
+  },
+  container: {
+    flex: 0.45,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: scaleSize(60),
+  },
+  tip: {
+    textAlign: 'center',
+    fontSize: setSpText(65),
+  },
+  footer: {
+    flex: 0.3,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  left: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '50%',
+    height: '100%',
+    borderTopColor: '#ccc',
+    borderTopWidth: 1,
+    borderBottomLeftRadius: 20,
+    backgroundColor: '#f0f0f0',
+  },
+  call: {
+    fontSize: setSpText(65),
+    color: '#2BA245',
+  },
+  right: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '50%',
+    height: '100%',
+    backgroundColor: '#2BA245',
+    borderBottomRightRadius: 20,
+  },
+  reset: {
+    fontSize: setSpText(65),
+    color: '#fff',
+  },
+};
+
+export default TipsModal;

src/pages/FacePage.js

@@ -7,6 +7,7 @@ import Touch from '../components/Touch';
 import PhoneModal from '../components/PhoneModal';
 import VerifyCodeModal from '../components/VerifyCodeModal';
 import OrderDetailsModal from '../components/OrderDetailsModal';
+import TipsModal from '../components/TipsModal';
 import delay from '../utils/delay';
 import Speech from '../utils/Speech';
 import WxFacepay from '../utils/WxFacepay';
@@ -15,7 +16,7 @@ import phone from '../assets/Vertical/phone.png';
 import {onTalkCall, leaveTalkCall} from '../utils/agora';
 import Toast from '../components/Toast';
 import Screensaver from '../components/Screensaver';
-import {width, setSpText, scaleSize, scaleHeight} from '../utils/screen';
+import {width, setSpText, scaleSize} from '../utils/screen';
 
 class FacePage extends Component {
   state = {
@@ -97,18 +98,6 @@ class FacePage extends Component {
     }
   };
 
-  // handleClose = () => {
-  //   this.setState({
-  //     phoneModal: false,
-  //   });
-  // };
-  //
-  // handleCodeClose = () => {
-  //   this.setState({
-  //     verifyCodeModal: false,
-  //   });
-  // };
-
   handleOrderClose = () => {
     this.setState({
       orderDetailsModal: false,
@@ -402,6 +391,11 @@ class FacePage extends Component {
     }, 18888);
   };
 
+  closeTips = async () => {
+    await this.setState({tipsModal: false});
+    await this.face();
+  };
+
   render() {
     const {
       verifyCodeModal,
@@ -432,9 +426,6 @@ class FacePage extends Component {
         <PhoneModal
           visible={phoneModal}
           transparent
-          // maskClosable
-          // onClose={this.handleClose}
-          // onRequestClose={this.handleClose}
           onCall={this.onCall}
           onSubmit={this.onSubmit}
           faceType={faceType}
@@ -442,9 +433,6 @@ class FacePage extends Component {
         <VerifyCodeModal
           visible={verifyCodeModal}
           transparent
-          // maskClosable
-          // onClose={this.handleCodeClose}
-          // onRequestClose={this.handleCodeClose}
           onCall={this.onCall}
           onSubmit={this.onCodeSubmit}
           faceType={faceType}
@@ -465,6 +453,17 @@ class FacePage extends Component {
           current={current}
           faceType={faceType}
         />
+        <TipsModal
+          visible={tipsModal}
+          transparent
+          title={'操作失败'}
+          tip={tip}
+          leftText={'呼叫客服'}
+          rightText={'重新识别'}
+          leftTouch={this.onCall}
+          rightTouch={this.closeTips}
+          faceType={faceType}
+        />
         <View style={styles.header}>
           <View style={styles.title}>
             <View style={styles.left}>
@@ -491,28 +490,6 @@ class FacePage extends Component {
                 style={{flex: 1, width}}
               />
             </Touch>
-            {tipsModal && tip && (
-              <View style={styles.modal}>
-                <Touch
-                  onPress={() => this.setState({tipsModal: false, tip: ''})}
-                  feedback={false}
-                  style={styles.tips}>
-                  <Text style={styles.tipText}>{tip}</Text>
-                </Touch>
-                <Touch
-                  onPress={this.onCall}
-                  feedback={false}
-                  style={styles.callTouch}>
-                  <View style={styles.callTips}>
-                    <Text style={styles.callTipsText}>呼叫客服</Text>
-                    <Image
-                      source={require('../assets/up.png')}
-                      style={styles.callTipsImg}
-                    />
-                  </View>
-                </Touch>
-              </View>
-            )}
           </View>
           <Touch onPress={this.face} style={styles.btnCome} feedback={false}>
             <View style={styles.click}>
@@ -583,7 +560,6 @@ const styles = {
   },
   header: {
     flex: 0.2,
-    // backgroundColor: '#00CD66',
     backgroundColor: 'rgb(0,205,102)',
     width: '100%',
     flexDirection: 'column',
@@ -641,13 +617,11 @@ const styles = {
     flex: 0.7,
   },
   faceGif: {
-    // flex: 0.7,
     position: 'relative',
     zIndex: 2,
   },
   btnCome: {
     flex: 0.15,
-    // backgroundColor: '#00CD66',
     backgroundColor: 'rgb(0,205,102)',
     width: '80%',
     borderRadius: 30,
@@ -664,12 +638,10 @@ const styles = {
   clickText: {
     fontSize: setSpText(70),
     color: '#fff',
-    // marginTop: scaleSize(50),
   },
   wxpay: {
     width: scaleSize(90),
     height: scaleSize(80),
-    // marginTop: width > 471 ? 30 : 24,
     marginRight: scaleSize(20),
   },
   up: {
@@ -679,7 +651,6 @@ const styles = {
   footer: {
     flex: 0.2,
     width: '100%',
-    // backgroundColor: '#44c571',
     backgroundColor: 'rgb(68, 197, 114)',
   },
   call: {
@@ -696,7 +667,6 @@ const styles = {
   callText: {
     fontSize: setSpText(150),
     color: '#fff',
-    // marginLeft: -50,
   },
   onCall: {
     flex: 0.2,
@@ -712,61 +682,6 @@ const styles = {
     color: '#fff',
     marginLeft: scaleSize(-100),
   },
-  modal: {
-    // flex: 0.2,
-    marginTop: '30%',
-    width: '100%',
-    height: scaleHeight(400),
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    zIndex: 999,
-  },
-  tips: {
-    flexDirection: 'row',
-    backgroundColor: '#FC4000',
-    width: '70%',
-    // height: '18%',
-    height: scaleHeight(400),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: scaleSize(15),
-  },
-  tipText: {
-    fontSize: setSpText(70),
-    color: '#fff',
-    textAlign: 'center',
-  },
-  callTouch: {
-    width: '30%',
-    // height: '18%',
-    height: scaleHeight(400),
-    marginLeft: scaleSize(15),
-    backgroundColor: '#FC4000',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  callTips: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    // backgroundColor: '#FC4000',
-    // width: '30%',
-    // height: '18%',
-    // marginLeft: 5,
-  },
-  callTipsText: {
-    fontSize: setSpText(70),
-    color: '#fff',
-    textAlign: 'center',
-    paddingTop: scaleSize(30),
-  },
-  callTipsImg: {
-    width: scaleSize(150),
-    height: scaleSize(150),
-  },
 };
 
 export default connect(({store}) => ({store}))(FacePage);