呼叫客服弹窗

src/pages/VerticalPage.js

 import React, {Component} from 'react';
-import {View, Text, Image, FlatList} from 'react-native';
+import {View, Text, Image, FlatList, Modal, Button} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import Swiper from 'react-native-swiper';
 import QRCode from 'react-native-qrcode-svg';
@@ -35,6 +35,7 @@ class VerticalPage extends Component {
     visibleActive: false,
     talkCall: 2, // 0请求通话，1通话中，2，已挂断通话，待机状态
     faceType: 'wxpay',
+    hintVisible: false,
   };
 
   async componentWillMount() {
@@ -244,7 +245,7 @@ class VerticalPage extends Component {
     }
   };
 
-  onCall = async () => {
+  onCall = async phone => {
     const {talkCall} = this.state;
     if (talkCall === 2) {
       Speech.speak('正在接通中请稍候');
@@ -262,6 +263,15 @@ class VerticalPage extends Component {
         });
       }, 30000);
     }
+    this.setState({
+      hintVisible: true,
+    });
+  };
+
+  closeHint = () => {
+    this.setState({
+      hintVisible: false,
+    });
   };
 
   talkCall = () => {
@@ -441,7 +451,7 @@ class VerticalPage extends Component {
       imgArr,
       adType,
     } = this.props;
-    let {contact} = this.state;
+    let {contact, hintVisible} = this.state;
     pageSize =
       goods && goods.bags.length > 0
         ? goods && goods.bags.length > 3
@@ -481,16 +491,21 @@ class VerticalPage extends Component {
       this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay;
     return (
       <View style={styles.main}>
+        <HintPhone
+          visible={hintVisible}
+          contact={contact}
+          closeHint={this.closeHint}
+        />
         <View style={styles.header}>
           <View style={styles.left}>
             <Image source={logo} />
             <Image style={styles.counterText} source={counterText} />
             <Image source={img24h} />
           </View>
-          <Touch onPress={() => this.onCall()}>
+          <Touch onPress={() => this.onCall()} style={{marginLeft: 50}}>
             <View style={styles.right}>
               <Image style={styles.phone} source={phone} />
-              <Text style={styles.number}>{contact}</Text>
+              <Text style={styles.number}>呼叫客服</Text>
             </View>
           </Touch>
         </View>
@@ -800,7 +815,52 @@ class VerticalPage extends Component {
   }
 }
 
+class HintPhone extends React.Component {
+  render() {
+    let {visible, contact, closeHint} = this.props;
+    return (
+      <Modal visible={visible} transparent>
+        <View>
+          <Touch
+            style={{
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'rgba(0, 0, 0, .5)',
+            }}
+            onPress={closeHint}>
+            <View />
+          </Touch>
+          <View style={styles.HintPhone}>
+            <Text style={{fontSize: 35, marginTop: 30}}>
+              如无法接通客服,可拨打电话
+            </Text>
+            <Text style={{fontSize: 50, marginTop: 30}}>{contact}</Text>
+            <View style={{marginTop: 80, width: 100}}>
+              <Button
+                onPress={closeHint}
+                style={{marginTop: 30}}
+                title="关闭"
+                color="#fc4000"
+              />
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
 const styles = {
+  HintPhone: {
+    width: '70%',
+    height: '25%',
+    backgroundColor: '#fff',
+    position: 'absolute',
+    top: '20%',
+    left: '15%',
+    alignItems: 'center',
+    opacity: 40,
+  },
   main: {
     backgroundColor: '#F0F0F0',
     height: '100%',