适配马里奥设备

src/components/PhoneModal.js

@@ -6,6 +6,7 @@ import ModalStyles from './Modal/styles';
 import {colors, font} from '../utils/common';
 import Touch from './Touch';
 import phone from '../assets/Vertical/phone.png';
+import {width} from '../utils/screen';
 
 const mStyles = {
   ...ModalStyles,
@@ -70,8 +71,19 @@ class PhoneModal extends Component {
   };
 
   render() {
-    const {onCall, ...props} = this.props;
+    const {onCall, faceType, ...props} = this.props;
     const {value} = this.state;
+    if (faceType === 'alipay') {
+      styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
+      styles.keyTouchOnSure = {
+        ...styles.keyTouchOnSure,
+        backgroundColor: '#1b7dc7',
+      };
+      styles.keyTouchSure = {
+        ...styles.keyTouchSure,
+        backgroundColor: '#87CEFA',
+      };
+    }
     return (
       <Modal styles={mStyles} {...props}>
         <View style={styles.modalBackgroundStyle}>
@@ -101,7 +113,12 @@ class PhoneModal extends Component {
               </View>
             </View>
             <View style={styles.container}>
-              <Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
+              <Text
+                style={{
+                  color: 'red',
+                  fontSize: width > 471 ? 45 : 32,
+                  marginBottom: width > 471 ? 10 : 8,
+                }}>
                 请输入接收验证码的手机号
               </Text>
               <View
@@ -115,7 +132,8 @@ class PhoneModal extends Component {
                     fontSize: 35,
                     width: '80%',
                     textAlign: 'center',
-                    padding: 30,
+                    padding: width > 471 ? 30 : 20,
+                    color: '#000',
                   }}
                   placeholder="安全输入不留痕迹"
                   placeholderTextColor="lightgray"
@@ -204,9 +222,9 @@ const styles = {
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: 30,
-    marginRight: 30,
-    marginTop: 10,
+    marginLeft: width > 471 ? 30 : 24,
+    marginRight: width > 471 ? 30 : 24,
+    marginTop: width > 471 ? 10 : 5,
   },
   left: {
     flexDirection: 'row',
@@ -215,18 +233,18 @@ const styles = {
   right: {
     flexDirection: 'row-reverse',
     alignItems: 'center',
-    marginTop: 15,
+    marginTop: width > 471 ? 15 : 12,
   },
   img: {
-    width: 80,
-    height: 80,
-    marginRight: 10,
+    width: width > 471 ? 80 : 60,
+    height: width > 471 ? 80 : 60,
+    marginRight: width > 471 ? 10 : 5,
     resizeMode: 'contain',
   },
   phone: {
-    width: 40,
-    height: 40,
-    marginRight: 10,
+    width: width > 471 ? 40 : 30,
+    height: width > 471 ? 40 : 30,
+    marginRight: width > 471 ? 10 : 8,
     resizeMode: 'contain',
   },
   image: {
@@ -236,13 +254,13 @@ const styles = {
     alignItems: 'center',
   },
   logo: {
-    width: 150,
-    height: 150,
+    width: width > 471 ? 150 : 120,
+    height: width > 471 ? 150 : 120,
     resizeMode: 'contain',
   },
   text: {
     color: '#FFFFFF',
-    fontSize: 30,
+    fontSize: width > 471 ? 30 : 25,
   },
   container: {
     flex: 0.2,
@@ -355,7 +373,7 @@ const styles = {
     marginHorizontal: 5,
   },
   keyUnitClose: {
-    fontSize: 50,
+    fontSize: width > 471 ? 50 : 40,
     color: '#FFFFFF',
   },
 };

src/components/VerifyCodeModal.js

@@ -6,6 +6,7 @@ import ModalStyles from './Modal/styles';
 import {colors, font} from '../utils/common';
 import Touch from './Touch';
 import phone from '../assets/Vertical/phone.png';
+import {width} from '../utils/screen';
 
 const mStyles = {
   ...ModalStyles,
@@ -79,8 +80,19 @@ class VerifyCodeModal extends Component {
   };
 
   render() {
-    const {onCall, ...props} = this.props;
+    const {onCall, faceType, ...props} = this.props;
     const {value} = this.state;
+    if (faceType === 'alipay') {
+      styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
+      styles.keyTouchOnSure = {
+        ...styles.keyTouchOnSure,
+        backgroundColor: '#1b7dc7',
+      };
+      styles.keyTouchSure = {
+        ...styles.keyTouchSure,
+        backgroundColor: '#87CEFA',
+      };
+    }
     return (
       <Modal styles={mStyles} {...props}>
         <View style={styles.modalBackgroundStyle}>
@@ -198,9 +210,9 @@ const styles = {
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: 30,
-    marginRight: 30,
-    marginTop: 10,
+    marginLeft: width > 471 ? 30 : 24,
+    marginRight: width > 471 ? 30 : 24,
+    marginTop: width > 471 ? 10 : 8,
   },
   left: {
     flexDirection: 'row',
@@ -209,18 +221,18 @@ const styles = {
   right: {
     flexDirection: 'row-reverse',
     alignItems: 'center',
-    marginTop: 15,
+    marginTop: width > 471 ? 15 : 12,
   },
   img: {
-    width: 80,
-    height: 80,
-    marginRight: 10,
+    width: width > 471 ? 80 : 60,
+    height: width > 471 ? 80 : 60,
+    marginRight: width > 471 ? 10 : 5,
     resizeMode: 'contain',
   },
   phone: {
-    width: 40,
-    height: 40,
-    marginRight: 10,
+    width: width > 471 ? 40 : 30,
+    height: width > 471 ? 40 : 30,
+    marginRight: width > 471 ? 10 : 8,
     resizeMode: 'contain',
   },
   image: {
@@ -230,13 +242,13 @@ const styles = {
     alignItems: 'center',
   },
   logo: {
-    width: 150,
-    height: 150,
+    width: width > 471 ? 150 : 120,
+    height: width > 471 ? 150 : 120,
     resizeMode: 'contain',
   },
   text: {
     color: '#FFFFFF',
-    fontSize: 30,
+    fontSize: width > 471 ? 30 : 25,
   },
   container: {
     flex: 0.3,
@@ -247,8 +259,8 @@ const styles = {
   },
   tips: {
     color: 'red',
-    fontSize: 45,
-    marginBottom: 10,
+    fontSize: width > 471 ? 45 : 32,
+    marginBottom: width > 471 ? 10 : 8,
     textAlign: 'center',
   },
   codeView: {
@@ -256,7 +268,7 @@ const styles = {
     justifyContent: 'space-around',
     alignItems: 'center',
     flex: 0.5,
-    marginTop: 30,
+    marginTop: width > 471 ? 30 : 24,
   },
   code: {
     height: '100%',
@@ -370,7 +382,7 @@ const styles = {
     marginHorizontal: 5,
   },
   keyUnitClose: {
-    fontSize: 50,
+    fontSize: width > 471 ? 50 : 40,
     color: '#FFFFFF',
   },
 };

src/pages/CounterMixins.js

@@ -140,7 +140,6 @@ const CounterMixins = ComposeComponent => {
       }
       window.socket.on('cmdOperate', this.command.bind(this));
       window.socket.on('adsOperate', ({adsData}) => {
-        console.warn(adsData);
         this.setState({
           autoplayTime: Number(adsData.time),
           imgArr: adsData[adsData.type],

src/pages/FacePage.js

@@ -33,7 +33,7 @@ class FacePage extends Component {
     tip: '',
     tipsModal: false,
     faceType: 'wxpay',
-    sleep: false,
+    sleep: true,
   };
 
   async componentWillMount() {
@@ -393,8 +393,7 @@ class FacePage extends Component {
     clearTimeout(this.wakeUpTimeout);
     this.wakeUpTimeout = setTimeout(() => {
       this.setState({sleep: true});
-    }, 60 * 60 * 1000);
-    // }, 18888);
+    }, 18888);
   };
 
   render() {
@@ -411,9 +410,10 @@ class FacePage extends Component {
       tip,
       tipsModal,
       sleep,
+      faceType,
     } = this.state;
     let {dispatch} = this.props;
-    if (this.state.faceType === 'alipay') {
+    if (faceType === 'alipay') {
       styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
       styles.btnCome = {...styles.btnCome, backgroundColor: '#1b7dc7'};
       styles.footer = {...styles.footer, backgroundColor: '#1b7dc7'};
@@ -431,6 +431,7 @@ class FacePage extends Component {
           // onRequestClose={this.handleClose}
           onCall={this.onCall}
           onSubmit={this.onSubmit}
+          faceType={faceType}
         />
         <VerifyCodeModal
           visible={verifyCodeModal}
@@ -440,6 +441,7 @@ class FacePage extends Component {
           // onRequestClose={this.handleCodeClose}
           onCall={this.onCall}
           onSubmit={this.onCodeSubmit}
+          faceType={faceType}
         />
         <OrderDetailsModal
           visible={orderDetailsModal}
@@ -455,6 +457,7 @@ class FacePage extends Component {
           talkCall={talkCall}
           customerPhone={customerPhone}
           current={current}
+          faceType={faceType}
         />
         <View style={styles.header}>
           <View style={styles.title}>
@@ -509,7 +512,7 @@ class FacePage extends Component {
             <View style={styles.click}>
               <Image
                 source={
-                  this.state.faceType === 'wxpay'
+                  faceType === 'wxpay'
                     ? require('../assets/wxpay.png')
                     : require('../assets/Vertical/alipay01.png')
                 }
@@ -525,7 +528,11 @@ class FacePage extends Component {
         {talkCall === 1 ? (
           <View style={styles.onCall}>
             <Image
-              source={require('../assets/call.gif')}
+              source={
+                faceType === 'wxpay'
+                  ? require('../assets/call.gif')
+                  : require('../assets/call_blue.gif')
+              }
               style={styles.callGif}
             />
             <Text style={styles.onCallText}>正在语音通话中</Text>
@@ -534,7 +541,7 @@ class FacePage extends Component {
           <View style={styles.onCall}>
             <Image
               source={
-                this.state.faceType === 'wxpay'
+                faceType === 'wxpay'
                   ? require('../assets/call.gif')
                   : require('../assets/call_blue.gif')
               }
@@ -547,7 +554,7 @@ class FacePage extends Component {
             <View style={styles.call}>
               <Image
                 source={
-                  this.state.faceType === 'wxpay'
+                  faceType === 'wxpay'
                     ? require('../assets/call.gif')
                     : require('../assets/call_blue.gif')
                 }
@@ -701,7 +708,7 @@ const styles = {
     // flex: 0.2,
     marginTop: '30%',
     width: '100%',
-    height: 200,
+    height: width > 471 ? 200 : 160,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -713,24 +720,24 @@ const styles = {
     backgroundColor: '#FC4000',
     width: '70%',
     // height: '18%',
-    height: 200,
+    height: width > 471 ? 200 : 160,
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 5,
   },
   tipText: {
-    fontSize: 40,
+    fontSize: width > 471 ? 40 : 32,
     color: '#fff',
     textAlign: 'center',
-    paddingTop: 40,
-    paddingBottom: 40,
+    paddingTop: width > 471 ? 40 : 32,
+    paddingBottom: width > 471 ? 40 : 32,
     paddingLeft: 5,
     paddingRight: 5,
   },
   callTouch: {
     width: '30%',
     // height: '18%',
-    height: 200,
+    height: width > 471 ? 200 : 160,
     marginLeft: 5,
     backgroundColor: '#FC4000',
   },
@@ -744,17 +751,17 @@ const styles = {
     // marginLeft: 5,
   },
   callTipsText: {
-    fontSize: 40,
+    fontSize: width > 471 ? 40 : 32,
     color: '#fff',
     textAlign: 'center',
-    paddingTop: 70,
+    paddingTop: width > 471 ? 70 : 56,
     // paddingBottom: 40,
-    paddingLeft: 10,
-    paddingRight: 10,
+    paddingLeft: width > 471 ? 10 : 8,
+    paddingRight: width > 471 ? 10 : 8,
   },
   callTipsImg: {
-    width: 80,
-    height: 60,
+    width: width > 471 ? 80 : 64,
+    height: width > 471 ? 60 : 48,
   },
 };