呼叫客服弹窗

src/pages/VerticalPage.js

 import React, {Component} from 'react';
-import {View, Text, Image, Modal, Button, ScrollView} from 'react-native';
+import {View, Text, Image, Modal, ScrollView} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import Swiper from 'react-native-swiper';
 import QRCode from 'react-native-qrcode-svg';
@@ -14,6 +14,7 @@ import counterText from '../assets/Vertical/counterText.png';
 import img24h from '../assets/Vertical/24h.png';
 import phone from '../assets/Vertical/phone.png';
 import guide from '../assets/Vertical/guide.jpg';
+import call from '../assets/Vertical/call.png';
 import {login} from '../utils/config';
 import {colors} from '../utils/common';
 import WxFacepay from '../utils/WxFacepay';
@@ -359,6 +360,8 @@ class VerticalPage extends Component {
     this.setState({
       hintVisible: true,
     });
+    clearTimeout(this.callModalTimeout);
+    this.callModalTimeout = setTimeout(() => { this.setState({ hintVisible: false }); }, 300000);
   };
 
   onNoBuy = async () => {
@@ -595,7 +598,7 @@ class VerticalPage extends Component {
         {goodsArr.length === 0 && dtype === 'guard' ? (
           <View style={styles.guardModal}>
             <View style={styles.guardModal_image}>
-              <Image source={guide} />
+              <Image style={styles.Imageee} source={guide} />
             </View>
             <View style={styles.guardModal_button}>
               <Touch onPress={() => this.onCall()}>
@@ -1098,18 +1101,31 @@ class HintPhone extends React.Component {
             <View />
           </Touch>
           <View style={styles.HintPhone}>
-            <Text style={{fontSize: 35, marginTop: 30}}>
-              如无法接通客服,可拨打电话
+            <Image style={{width: '60%', height: '60%'}} source={call} />
+            <Text style={{fontSize: scaleSize(30)}}>正在呼叫客服</Text>
+            <View style={{display: 'flex', marginTop: 10}}>
+              <Text style={{fontSize: scaleSize(20), color: '#7f7f7f'}}>
+                如无法接通客服,可拨打电话: {contact}
+              </Text>
+            </View>
+            <Touch
+              onPress={closeHint}>
+              <View
+                style={{
+                  width: scaleSize(200),
+                  height: scaleSize(65),
+                  borderRadius: 100,
+                  backgroundColor: '#fc4000',
+                  marginTop: 30,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <Text style={{color: '#ffffff', fontSize: scaleSize(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>
+            </Touch>
           </View>
         </View>
       </Modal>
@@ -1119,12 +1135,14 @@ class HintPhone extends React.Component {
 
 const styles = {
   HintPhone: {
-    width: '70%',
+    width: '50%',
     height: '25%',
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff',
     position: 'absolute',
     top: '20%',
-    left: '15%',
+    left: '25%',
+    display: 'flex',
+    justifyContent: 'center',
     alignItems: 'center',
     opacity: 40,
   },
@@ -1608,6 +1626,10 @@ const styles = {
     justifyContent: 'center',
     alignItems: 'center',
   },
+  Imageee: {
+    height: '65%',
+    width: '80%',
+  },
   guardModal_button: {
     height: '30%',
     width: '100%',
@@ -1625,7 +1647,6 @@ const styles = {
     alignItems: 'center',
     width: scaleSize(350),
     height: scaleSize(125),
-    fontSize: scaleSize(75),
     marginRight: 50,
   },
   guardModal_button_nobuy: {