界面适配

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, height} from '../utils/screen';
 import Speech from '../utils/Speech';
 import delay from '../utils/delay';
 import {leaveTalkCall, onTalkCall} from '../utils/agora';
@@ -384,6 +384,7 @@ class VerticalPage extends Component {
     });
     this.totalPrice = totalPrice;
     this.totalCount = totalCount;
+    console.warn(width, height);
     return (
       <View style={styles.main}>
         <View style={styles.header}>
@@ -412,8 +413,10 @@ class VerticalPage extends Component {
               />
             </View>
             <View style={{width: '10%', flexDirection: 'column'}}>
-              <View style={{height: 81, backgroundColor: '#fff'}} />
-              <View style={{height: 8}} />
+              <View
+                style={{height: width > 801 ? 81 : 77, backgroundColor: '#fff'}}
+              />
+              <View style={{height: width > 801 ? 8 : 10}} />
               <View style={styles.pagination}>
                 <Touch
                   disabled={current <= 1}
@@ -509,7 +512,6 @@ class VerticalPage extends Component {
               </View>
               <View style={styles.amount}>
                 <Text style={styles.leftText2}>
-                  {' '}
                   {NP.round(Number(totalPrice) + Number(totalCount), 2).toFixed(
                     2,
                   )}
@@ -518,7 +520,6 @@ class VerticalPage extends Component {
                   {NP.round(total, 2).toFixed(2)}
                 </Text>
                 <Text style={styles.leftText2}>
-                  {' '}
                   -{NP.round(totalCount, 2).toFixed(2)}
                 </Text>
                 <View style={styles.leftLine2} />
@@ -564,10 +565,10 @@ class VerticalPage extends Component {
                 </View>
                 <View style={styles.paymentRightCode}>
                   <QRCode
-                    logoSize={50}
+                    logoSize={width > 801 ? 50 : 40}
                     // logoBackgroundColor="#fc4000"
                     logo={require('../assets/logo2.png')}
-                    size={200}
+                    size={width > 801 ? 200 : 180}
                     value={`${qrHost || login}/#/counter-order-${admin.socket}`}
                   />
                 </View>
@@ -588,30 +589,34 @@ class VerticalPage extends Component {
             </Text>
           </View>
         </View>
-        <View style={styles.footer}>
-          <Swiper
-            style={styles.swiper} // 样式
-            loop // 如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
-            autoplay // 自动轮播
-            autoplayTimeout={10} // 每隔4秒切换
-            horizontal // 水平方向，为false可设置为竖直方向
-            showsButtons={false} // 为false时不显示控制按钮
-            showsPagination={false} // 为false不显示下方圆点
-          >
-            <Image
-              source={require('../assets/Vertical/first.jpg')}
-              style={styles.swiperImg}
-            />
-            <Image
-              source={require('../assets/Vertical/second.jpg')}
-              style={styles.swiperImg}
-            />
-            <Image
-              source={require('../assets/Vertical/third.jpg')}
-              style={styles.swiperImg}
-            />
-          </Swiper>
-        </View>
+        {width > 801 ? (
+          <View style={styles.footer}>
+            <Swiper
+              style={styles.swiper} // 样式
+              loop // 如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
+              autoplay // 自动轮播
+              autoplayTimeout={10} // 每隔4秒切换
+              horizontal // 水平方向，为false可设置为竖直方向
+              showsButtons={false} // 为false时不显示控制按钮
+              showsPagination={false} // 为false不显示下方圆点
+            >
+              <Image
+                source={require('../assets/Vertical/first.jpg')}
+                style={styles.swiperImg}
+              />
+              <Image
+                source={require('../assets/Vertical/second.jpg')}
+                style={styles.swiperImg}
+              />
+              <Image
+                source={require('../assets/Vertical/third.jpg')}
+                style={styles.swiperImg}
+              />
+            </Swiper>
+          </View>
+        ) : (
+          <View />
+        )}
       </View>
     );
   }
@@ -627,16 +632,16 @@ const styles = {
     flexDirection: 'row',
     backgroundColor: '#fc4000',
     height: '6%',
-    paddingRight: 40,
-    paddingLeft: 40,
+    paddingRight: width > 801 ? 40 : 20,
+    paddingLeft: width > 801 ? 40 : 20,
   },
   left: {
     flexDirection: 'row',
-    width: '60%',
+    width: width > 801 ? '60%' : '55%',
   },
   counterText: {
-    marginLeft: 40,
-    marginRight: 40,
+    marginLeft: width > 801 ? 40 : 20,
+    marginRight: width > 801 ? 40 : 20,
   },
   right: {
     flexDirection: 'row',
@@ -645,7 +650,7 @@ const styles = {
     width: 60,
     height: 60,
     marginRight: 10,
-    marginLeft: 20,
+    marginLeft: width > 801 ? 20 : 15,
   },
   number: {
     fontSize: 45,
@@ -662,7 +667,7 @@ const styles = {
     flexDirection: 'row',
   },
   container: {
-    height: '62%',
+    height: width > 801 ? '62%' : '94%',
   },
   goodsStyle: {
     width: '100%',
@@ -801,7 +806,7 @@ const styles = {
     width: '34%',
     display: 'flex',
     flexDirection: 'row',
-    alignContent: 'space-around',
+    // alignContent: 'space-around',
     borderLeftWidth: 1,
     borderTopWidth: 1,
     borderBottomWidth: 1,
@@ -828,7 +833,8 @@ const styles = {
     width: '50%',
     display: 'flex',
     flexDirection: 'column',
-    alignContent: 'center',
+    // alignContent: 'center',
+    justifyContent: 'center',
     alignItems: 'flex-end',
   },
   leftLine1: {
@@ -838,28 +844,29 @@ const styles = {
     height: 1,
   },
   amount: {
-    width: '40%',
+    width: '50%',
     display: 'flex',
     flexDirection: 'column',
-    alignContent: 'center',
-    alignItems: 'center',
+    // alignContent: 'center',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
   },
   total: {
     color: 'red',
-    fontSize: 40,
+    fontSize: width > 801 ? 40 : 35,
   },
   leftLine2: {
-    width: '100%',
+    width: '70%',
     borderWidth: 1,
     borderColor: '#959595',
     height: 1,
   },
   leftText1: {
-    fontSize: 40,
-    marginRight: 30,
+    fontSize: width > 801 ? 40 : 35,
+    marginRight: width > 801 ? 30 : 18,
   },
   leftText2: {
-    fontSize: 40,
+    fontSize: width > 801 ? 40 : 35,
   },
   faceScan: {
     width: '32%',
@@ -932,14 +939,14 @@ const styles = {
   paymentRightContents: {
     display: 'flex',
     flexDirection: 'column',
-    marginRight: 40,
+    marginRight: width > 801 ? 40 : 10,
   },
   paymentRightText: {
-    fontSize: 35,
+    fontSize: width > 801 ? 35 : 30,
   },
   paymentRightImage: {
-    width: 50,
-    height: 50,
+    width: width > 801 ? 50 : 40,
+    height: width > 801 ? 50 : 40,
     marginTop: 5,
     marginBottom: 5,
   },
@@ -977,8 +984,8 @@ const styles = {
   firstTdStyle: {
     width: '40%',
     alignItems: 'flex-start',
-    paddingTop: 18,
-    paddingBottom: 18,
+    paddingTop: width > 801 ? 18 : 16,
+    paddingBottom: width > 801 ? 18 : 16,
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -987,8 +994,8 @@ const styles = {
     width: '20%',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 18,
-    paddingBottom: 18,
+    paddingTop: width > 801 ? 18 : 16,
+    paddingBottom: width > 801 ? 18 : 16,
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -1001,10 +1008,10 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#fc4000',
-    padding: 20,
+    padding: width > 801 ? 20 : 10,
   },
   explainText1: {
-    fontSize: 30,
+    fontSize: width > 801 ? 30 : 25,
     color: '#fff',
     marginRight: 3,
   },
@@ -1012,20 +1019,20 @@ const styles = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    width: 40,
-    height: 40,
+    width: width > 801 ? 40 : 35,
+    height: width > 801 ? 40 : 35,
     backgroundColor: '#fff',
     borderRadius: 20,
     marginRight: 5,
   },
   explainText2: {
     color: '#fc4000',
-    fontSize: 30,
+    fontSize: width > 801 ? 30 : 25,
   },
   code: {
-    fontSize: 30,
+    fontSize: width > 801 ? 30 : 25,
     color: '#fff',
-    marginRight: 50,
+    marginRight: width > 801 ? 50 : 25,
   },
   footer: {
     height: '32%',