修复人脸语音通话问题

src/components/PhoneModal.js

@@ -5,6 +5,7 @@ import MIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ModalStyles from './Modal/styles';
 import {colors, font} from '../utils/common';
 import Touch from './Touch';
+import phone from '../assets/Vertical/phone.png';
 
 const mStyles = {
   ...ModalStyles,
@@ -63,7 +64,7 @@ class PhoneModal extends Component {
   };
 
   render() {
-    const {onClose, ...props} = this.props;
+    const {onCall, ...props} = this.props;
     const {value} = this.state;
     return (
       <Modal styles={mStyles} {...props}>
@@ -78,11 +79,13 @@ class PhoneModal extends Component {
                   />
                   <Text style={styles.text}>安全验证手机号</Text>
                 </View>
+                <Touch onPress={() => onCall()}>
                   <View style={styles.right}>
-                  <Touch onPress={() => onClose()}>
-                    <Icon name="md-close" color={'#FFFFFF'} size={50} />
-                  </Touch>
+                    {/*<Icon name="md-close" color={'#FFFFFF'} size={50} />*/}
+                    <Text style={styles.text}>呼叫客服</Text>
+                    <Image style={styles.phone} source={phone} />
                   </View>
+                </Touch>
               </View>
               <View style={styles.image}>
                 <Image
@@ -206,6 +209,7 @@ const styles = {
   right: {
     flexDirection: 'row-reverse',
     alignItems: 'center',
+    marginTop: 15,
   },
   img: {
     width: 80,
@@ -213,6 +217,12 @@ const styles = {
     marginRight: 10,
     resizeMode: 'contain',
   },
+  phone: {
+    width: 40,
+    height: 40,
+    marginRight: 10,
+    resizeMode: 'contain',
+  },
   image: {
     flex: 1,
     flexDirection: 'row',

src/components/VerifyCodeModal.js

@@ -5,6 +5,7 @@ import MIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ModalStyles from './Modal/styles';
 import {colors, font} from '../utils/common';
 import Touch from './Touch';
+import phone from '../assets/Vertical/phone.png';
 
 const mStyles = {
   ...ModalStyles,
@@ -52,10 +53,13 @@ class VerifyCodeModal extends Component {
     const {onSubmit} = this.props;
     if (index < 10 && value.length < 4) {
       value += index;
+      if (value.length === 4) {
+        onSubmit(value);
+      }
     } else if (index === 11) {
       value = value.substr(0, value.length - 1);
     } else if (index === 12) {
-      this.setState({value: ''});
+      // this.setState({value: ''});
       onSubmit(value);
       return;
     }
@@ -63,7 +67,7 @@ class VerifyCodeModal extends Component {
   };
 
   render() {
-    const {onClose, ...props} = this.props;
+    const {onCall, ...props} = this.props;
     const {value} = this.state;
     return (
       <Modal styles={mStyles} {...props}>
@@ -78,11 +82,13 @@ class VerifyCodeModal extends Component {
                   />
                   <Text style={styles.text}>安全验证手机号</Text>
                 </View>
+                <Touch onPress={() => onCall()}>
                   <View style={styles.right}>
-                  <Touch onPress={() => onClose()}>
-                    <Icon name="md-close" color={'#FFFFFF'} size={50} />
-                  </Touch>
+                    {/*<Icon name="md-close" color={'#FFFFFF'} size={50} />*/}
+                    <Text style={styles.text}>呼叫客服</Text>
+                    <Image style={styles.phone} source={phone} />
                   </View>
+                </Touch>
               </View>
               <View style={styles.image}>
                 <Image
@@ -191,6 +197,7 @@ const styles = {
   right: {
     flexDirection: 'row-reverse',
     alignItems: 'center',
+    marginTop: 15,
   },
   img: {
     width: 80,
@@ -198,6 +205,12 @@ const styles = {
     marginRight: 10,
     resizeMode: 'contain',
   },
+  phone: {
+    width: 40,
+    height: 40,
+    marginRight: 10,
+    resizeMode: 'contain',
+  },
   image: {
     flex: 1,
     flexDirection: 'row',

src/pages/FacePage.js

 import React, {Component} from 'react';
-import {View, Text, Image, Dimensions, Modal} from 'react-native';
+import {View, Text, Image, Dimensions} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {connect} from 'react-redux';
 // import RtcEngine from 'react-native-agora';
@@ -89,17 +89,17 @@ class FacePage extends Component {
     }
   };
 
-  handleClose = () => {
-    this.setState({
-      phoneModal: false,
-    });
-  };
-
-  handleCodeClose = () => {
-    this.setState({
-      verifyCodeModal: false,
-    });
-  };
+  // handleClose = () => {
+  //   this.setState({
+  //     phoneModal: false,
+  //   });
+  // };
+  //
+  // handleCodeClose = () => {
+  //   this.setState({
+  //     verifyCodeModal: false,
+  //   });
+  // };
 
   handleOrderClose = () => {
     this.setState({
@@ -125,7 +125,7 @@ class FacePage extends Component {
         window.socket.on('talkCall', this.handleTalkCall);
       }
       if (!window.socket.hasListeners('talkLeave')) {
-        // 语音通话中
+        // 断开语音通话
         window.socket.on('talkLeave', this.leaveC);
       }
     } catch (e) {
@@ -142,7 +142,7 @@ class FacePage extends Component {
         type: 'agora/agora',
       });
       await onTalkCall(data);
-      this.setState({
+      await this.setState({
         talkCall: 1,
       });
     } catch (e) {
@@ -347,16 +347,18 @@ class FacePage extends Component {
           visible={phoneModal}
           transparent
           // maskClosable
-          onClose={this.handleClose}
-          onRequestClose={this.handleClose}
+          // onClose={this.handleClose}
+          // onRequestClose={this.handleClose}
+          onCall={this.onCall}
           onSubmit={this.onSubmit}
         />
         <VerifyCodeModal
           visible={verifyCodeModal}
           transparent
           // maskClosable
-          onClose={this.handleCodeClose}
-          onRequestClose={this.handleCodeClose}
+          // onClose={this.handleCodeClose}
+          // onRequestClose={this.handleCodeClose}
+          onCall={this.onCall}
           onSubmit={this.onCodeSubmit}
         />
         <OrderDetailsModal