支付宝设备的界面兼容

src/pages/CounterMixins.js

@@ -15,6 +15,7 @@ import Toast from '../components/Toast';
 import NP from '../utils/np';
 import {total} from '../utils/validity';
 import RedPacketModal from '../components/RedPacketModal';
+import {width, scaleSize} from '../utils/screen';
 
 window.RN = RN;
 window.Toast = Toast;
@@ -24,11 +25,12 @@ const mStyles = {
   ...ModalStyles,
   innerContainer: {
     ...ModalStyles.innerContainer,
-    width: 777,
+    width: width > 777 ? 777 : scaleSize(900),
   },
   header: {
     ...ModalStyles.header,
     fontSize: font.title,
+    width: width > 777 ? '100%' : '95%',
   },
 };
 

src/pages/VerticalPage.js

@@ -15,7 +15,7 @@ import phone from '../assets/Vertical/phone.png';
 import {login} from '../utils/config';
 import {colors} from '../utils/common';
 import WxFacepay from '../utils/WxFacepay';
-import {width} from '../utils/screen';
+import {width, setSpText, scaleSize, scaleHeight} from '../utils/screen';
 import Speech from '../utils/Speech';
 import delay from '../utils/delay';
 import Smilepay from '../utils/Smilepay';
@@ -294,7 +294,12 @@ class VerticalPage extends Component {
             </View>
           </View>
         </View>
-        <View style={{height: 20, backgroundColor: '#F0F0F0'}} />
+        <View
+          style={{
+            height: width > 801 ? 20 : scaleHeight(30),
+            backgroundColor: '#F0F0F0',
+          }}
+        />
       </View>
     );
   };
@@ -499,9 +504,12 @@ class VerticalPage extends Component {
             </View>
             <View style={{width: '10%', flexDirection: 'column'}}>
               <View
-                style={{height: width > 801 ? 81 : 77, backgroundColor: '#fff'}}
+                style={{
+                  height: width > 801 ? 81 : scaleHeight(118),
+                  backgroundColor: '#fff',
+                }}
               />
-              <View style={{height: width > 801 ? 8 : 10}} />
+              <View style={{height: width > 801 ? 8 : scaleHeight(17.1)}} />
               <View style={styles.pagination}>
                 <Touch
                   disabled={current <= 1}
@@ -676,10 +684,10 @@ class VerticalPage extends Component {
                 </View>
                 <View style={styles.paymentRightCode}>
                   <QRCode
-                    logoSize={width > 801 ? 50 : 40}
+                    logoSize={width > 801 ? 50 : scaleSize(60)}
                     // logoBackgroundColor="#fc4000"
                     logo={require('../assets/logo2.png')}
-                    size={width > 801 ? 200 : 180}
+                    size={width > 801 ? 200 : scaleSize(250)}
                     value={`${qrHost || login}/#/counter-order-${admin.socket}`}
                   />
                 </View>
@@ -798,40 +806,30 @@ const styles = {
     flexDirection: 'row',
     backgroundColor: '#fc4000',
     height: '6%',
-    paddingRight: width > 801 ? 40 : 20,
-    paddingLeft: width > 801 ? 40 : 20,
+    paddingRight: width > 801 ? 40 : scaleSize(25),
+    paddingLeft: width > 801 ? 40 : scaleSize(25),
   },
   left: {
     flexDirection: 'row',
     width: width > 801 ? '60%' : '55%',
   },
   counterText: {
-    marginLeft: width > 801 ? 40 : 20,
-    marginRight: width > 801 ? 40 : 20,
+    marginLeft: width > 801 ? 40 : scaleSize(22),
+    marginRight: width > 801 ? 40 : scaleSize(22),
   },
   right: {
     flexDirection: 'row',
   },
   phone: {
-    width: 60,
-    height: 60,
-    marginRight: 10,
-    marginLeft: width > 801 ? 20 : 15,
+    width: width > 801 ? 60 : scaleSize(75),
+    height: width > 801 ? 60 : scaleSize(75),
+    marginRight: width > 801 ? 10 : scaleSize(20),
+    marginLeft: width > 801 ? 20 : scaleSize(15),
   },
   number: {
-    fontSize: 45,
+    fontSize: width > 801 ? 45 : setSpText(60),
     color: '#ffffff',
   },
-  navMask: {
-    width,
-    height: '6%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    backgroundColor: 'transparent',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
   container: {
     height: width > 801 ? '62%' : '94%',
   },
@@ -848,11 +846,11 @@ const styles = {
     justifyContent: 'center',
   },
   paginationText: {
-    fontSize: 40,
+    fontSize: width > 801 ? 40 : setSpText(50),
   },
   imgPagination: {
-    width: 50,
-    height: 50,
+    width: width > 801 ? 50 : scaleSize(75),
+    height: width > 801 ? 50 : scaleSize(75),
   },
   btnHighStyle: {
     flexDirection: 'row',
@@ -1068,7 +1066,7 @@ const styles = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: 10,
+    marginTop: width > 801 ? 10 : scaleSize(10),
   },
   payImage: {
     width: 30,
@@ -1131,21 +1129,23 @@ const styles = {
   firstThStyle: {
     width: '40%',
     alignItems: 'flex-start',
-    paddingTop: 18,
-    paddingBottom: 18,
-    paddingLeft: 10,
-    paddingRight: 10,
+    justifyContent: 'center',
+    paddingTop: width > 801 ? 18 : scaleHeight(30),
+    paddingBottom: width > 801 ? 18 : scaleHeight(30),
+    paddingLeft: width > 801 ? 10 : scaleSize(20),
+    paddingRight: width > 801 ? 10 : scaleSize(20),
   },
   ThStyle: {
     width: '20%',
     alignItems: 'center',
-    paddingTop: 18,
-    paddingBottom: 18,
-    paddingLeft: 10,
-    paddingRight: 10,
+    justifyContent: 'center',
+    paddingTop: width > 801 ? 18 : scaleHeight(30),
+    paddingBottom: width > 801 ? 18 : scaleHeight(30),
+    paddingLeft: width > 801 ? 10 : scaleSize(20),
+    paddingRight: width > 801 ? 10 : scaleSize(20),
   },
   ThText: {
-    fontSize: 30,
+    fontSize: setSpText(40),
   },
   oddCell: {
     flexDirection: 'row',
@@ -1158,23 +1158,24 @@ const styles = {
   firstTdStyle: {
     width: '40%',
     alignItems: 'flex-start',
-    paddingTop: 18,
-    paddingBottom: 18,
-    paddingLeft: 10,
-    paddingRight: 10,
+    justifyContent: 'center',
+    paddingTop: width > 801 ? 18 : scaleHeight(30),
+    paddingBottom: width > 801 ? 18 : scaleHeight(30),
+    paddingLeft: width > 801 ? 10 : scaleSize(20),
+    paddingRight: width > 801 ? 10 : scaleSize(20),
   },
   TdStyle: {
     flexDirection: 'row',
     width: '20%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: width > 801 ? 18 : 18,
-    paddingBottom: width > 801 ? 18 : 18,
-    paddingLeft: 10,
-    paddingRight: 10,
+    paddingTop: width > 801 ? 18 : scaleHeight(30),
+    paddingBottom: width > 801 ? 18 : scaleHeight(30),
+    paddingLeft: width > 801 ? 10 : scaleSize(20),
+    paddingRight: width > 801 ? 10 : scaleSize(20),
   },
   TdText: {
-    fontSize: 25,
+    fontSize: width > 801 ? 25 : setSpText(30),
   },
   explain: {
     display: 'flex',