更改了微信刷脸的页面

src/components/TipsModal.js

@@ -25,14 +25,20 @@ class TipsModal extends Component {
       tip,
       title,
       leftText,
+      contentText,
       rightText,
       leftTouch,
+      contentTouch,
       rightTouch,
       faceType,
       qrCode,
       onMaskPress,
       ...props
     } = this.props;
+    let flag = true;
+    if (contentText === '') {
+      flag = false;
+    }
     if (faceType === 'alipay') {
       styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
       styles.right = {
@@ -55,7 +61,7 @@ class TipsModal extends Component {
           <View style={styles.modal}>
             <View style={styles.header}>
               <Image
-                source={require('../assets/Vertical/tip_modal.png')}
+                source={require('../assets/Vertical/wxpay.png')}
                 style={styles.image}
                 tintColor="white"
               />
@@ -82,10 +88,19 @@ class TipsModal extends Component {
             </View>
             {!qrCode && (
               <View style={styles.footer}>
-                <Touch style={styles.left} onPress={() => leftTouch()}>
+                <Touch
+                  style={flag ? styles.left : styles.lefts}
+                  onPress={() => leftTouch()}>
                   <Text style={styles.call}>{leftText}</Text>
                 </Touch>
-                <Touch style={styles.right} onPress={() => rightTouch()}>
+                <Touch
+                  style={flag ? styles.content : styles.contents}
+                  onPress={() => contentTouch()}>
+                  <Text style={styles.reset}>{contentText}</Text>
+                </Touch>
+                <Touch
+                  style={flag ? styles.right : styles.rights}
+                  onPress={() => rightTouch()}>
                   <Text style={styles.reset}>{rightText}</Text>
                 </Touch>
               </View>
@@ -108,7 +123,7 @@ const styles = {
     position: 'absolute',
   },
   modal: {
-    height: '35%',
+    height: '40%',
     width: '80%',
     marginLeft: '10%',
     marginTop: '40%',
@@ -117,7 +132,7 @@ const styles = {
     flexDirection: 'column',
   },
   header: {
-    flex: 0.25,
+    flex: 0.2,
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#2BA245',
@@ -131,15 +146,15 @@ const styles = {
   image: {
     width: scaleSize(60),
     height: scaleSize(60),
-    marginLeft: scaleSize(20),
-    marginRight: scaleSize(20),
+    marginLeft: scaleSize(50),
+    marginRight: scaleSize(30),
   },
   title: {
     fontSize: setSpText(45),
     color: '#fff',
   },
   container: {
-    flex: 0.45,
+    flex: 0.6,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
@@ -147,10 +162,10 @@ const styles = {
   },
   tip: {
     textAlign: 'center',
-    fontSize: setSpText(65),
+    fontSize: setSpText(50),
   },
   footer: {
-    flex: 0.3,
+    flex: 0.2,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -159,29 +174,56 @@ const styles = {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '33.3%',
+    height: '100%',
+    borderBottomLeftRadius: 15,
+    backgroundColor: '#2BA245',
+  },
+  lefts: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
     width: '50%',
     height: '100%',
-    borderTopColor: '#ccc',
-    borderTopWidth: 1,
-    borderBottomLeftRadius: 20,
+    borderBottomLeftRadius: 15,
+    backgroundColor: '#2BA245',
+  },
+  content: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '33.3%',
+    height: '100%',
     backgroundColor: '#f0f0f0',
   },
+  contents: {
+    display: 'none',
+  },
   call: {
-    fontSize: setSpText(65),
-    color: '#2BA245',
+    fontSize: setSpText(45),
+    color: '#fff',
   },
   right: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '33.3%',
+    height: '100%',
+    backgroundColor: '#ced2cf',
+    borderBottomRightRadius: 15,
+  },
+  rights: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
     width: '50%',
     height: '100%',
-    backgroundColor: '#2BA245',
-    borderBottomRightRadius: 20,
+    backgroundColor: '#ced2cf',
+    borderBottomRightRadius: 15,
   },
   reset: {
-    fontSize: setSpText(65),
-    color: '#fff',
+    fontSize: setSpText(45),
+    color: '#2BA245',
   },
 };
 

src/pages/FacePage.js

@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
 import Touch from '../components/Touch';
 import PhoneModal from '../components/PhoneModal';
 import VerifyCodeModal from '../components/VerifyCodeModal';
+import QRCode from 'react-native-qrcode-svg';
 import OrderDetailsModal from '../components/OrderDetailsModal';
 import TipsModal from '../components/TipsModal';
 import LoadingModal from '../components/LoadingModal';
@@ -34,7 +35,7 @@ class FacePage extends Component {
     tip: '',
     tipsModal: false,
     faceType: 'wxpay',
-    sleep: true,
+    sleep: false,
     loadingModal: false,
     qrCode: '',
     goTipsModal: false,
@@ -487,16 +488,12 @@ class FacePage extends Component {
       type,
     } = this.state;
     let flag = '';
-    let flags = '';
     if (type === 'over') {
-      flags = '回店付款';
       flag = '我已付款';
     } else if (type === 'loss') {
       flag = '确认出店';
-      flags = '回到店里';
     } else {
-      flags = '回到店里';
-      flag = '呼叫客服';
+      flag = '';
     }
     let {dispatch} = this.props;
     if (faceType === 'alipay') {
@@ -544,12 +541,12 @@ class FacePage extends Component {
           transparent
           title={'开门失败'}
           tip={tip}
-          leftText={flags}
-          rightText={flag}
+          leftText={'回店核对'}
+          contentText={flag}
+          rightText={'呼叫客服'}
           leftTouch={this.goToo}
-          rightTouch={
-            type === 'over' || type === 'loss' ? this.goTips : this.onCall
-          }
+          contentTouch={flag === '' ? '' : this.goTips}
+          rightTouch={this.onCall}
           onMaskPress={() => this.setState({tipsModal: false})}
           faceType={faceType}
         />
@@ -568,7 +565,7 @@ class FacePage extends Component {
             <View style={styles.left}>
               <Image
                 source={require('../assets/logo2.png')}
-                style={styles.img}
+                style={styles.imgs}
               />
               <Text style={styles.text}>{storeName}</Text>
             </View>
@@ -602,50 +599,68 @@ class FacePage extends Component {
                 tintColor="white"
               />
               <Text style={styles.clickText}>点击进入</Text>
-              <Image source={require('../assets/up.png')} style={styles.up} />
+              <Image
+                source={require('../assets/finger.png')}
+                style={styles.finger}
+              />
               <Text style={styles.clickText}>刷脸开门</Text>
             </View>
           </Touch>
         </View>
-        {talkCall === 1 ? (
-          <View style={styles.onCall}>
-            <Image
-              source={
-                faceType === 'wxpay'
-                  ? require('../assets/call.gif')
-                  : require('../assets/call_blue.gif')
-              }
-              style={styles.callGif}
-            />
-            <Text style={styles.onCallText}>正在语音通话中</Text>
-          </View>
-        ) : talkCall === 0 ? (
-          <View style={styles.onCall}>
-            <Image
-              source={
-                faceType === 'wxpay'
-                  ? require('../assets/call.gif')
-                  : require('../assets/call_blue.gif')
-              }
-              style={styles.callGif}
-            />
-            <Text style={styles.onCallText}>正在接通中请稍候...</Text>
-          </View>
-        ) : (
-          <Touch onPress={this.onCall} style={styles.footer} feedback={false}>
-            <View style={styles.call}>
-              <Image
-                source={
-                  faceType === 'wxpay'
-                    ? require('../assets/call.gif')
-                    : require('../assets/call_blue.gif')
-                }
-                style={styles.callGif}
-              />
-              <Text style={styles.callText}>呼叫客服</Text>
+        <View style={styles.footer}>
+          {talkCall === 1 ? (
+            <View style={styles.footercall}>
+              <View style={styles.call}>
+                <Image
+                  source={
+                    faceType === 'wxpay'
+                      ? require('../assets/call.gif')
+                      : require('../assets/call_blue.gif')
+                  }
+                  style={styles.callGif}
+                />
+                <Text style={styles.callText}>正在语音通话中</Text>
+              </View>
             </View>
-          </Touch>
-        )}
+          ) : talkCall === 0 ? (
+            <View style={styles.footercall}>
+              <View style={styles.call}>
+                <Image
+                  source={
+                    faceType === 'wxpay'
+                      ? require('../assets/call.gif')
+                      : require('../assets/call_blue.gif')
+                  }
+                  style={styles.callGif}
+                />
+                <Text style={styles.callText}>正在接通中请稍候...</Text>
+              </View>
+            </View>
+          ) : (
+            <Touch
+              onPress={this.onCall}
+              style={styles.footercall}
+              feedback={false}>
+              <View style={styles.call}>
+                <Image
+                  source={
+                    faceType === 'wxpay'
+                      ? require('../assets/call.gif')
+                      : require('../assets/call_blue.gif')
+                  }
+                  style={styles.callGif}
+                />
+                <Text style={styles.callText}>呼叫客服</Text>
+              </View>
+            </Touch>
+          )}
+          <View style={styles.goFoot}>
+            <View style={{borderWidth: 10, borderColor: '#fff', width: 180}}>
+              <QRCode value={qrCode || `${qrHost}/#/account`} size={160} />
+            </View>
+            <Text style={styles.goText}>扫码开门</Text>
+          </View>
+        </View>
       </View>
     );
   }
@@ -678,31 +693,39 @@ const styles = {
     marginBottom: scaleSize(20),
   },
   headTitle: {
-    fontSize: setSpText(100),
+    fontSize: setSpText(70),
     color: '#fff',
   },
   left: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: scaleSize(45),
+  },
+  imgs: {
+    width: scaleSize(60),
+    height: scaleSize(60),
+    marginRight: scaleSize(20),
+    resizeMode: 'contain',
   },
   right: {
     flexDirection: 'row-reverse',
     alignItems: 'center',
+    marginTop: scaleSize(45),
   },
   img: {
-    width: scaleSize(90),
-    height: scaleSize(90),
+    width: scaleSize(40),
+    height: scaleSize(40),
     marginRight: scaleSize(20),
     resizeMode: 'contain',
   },
   text: {
     color: '#FFFFFF',
-    fontSize: setSpText(65),
+    fontSize: setSpText(35),
   },
   phone: {
-    width: scaleSize(80),
-    height: scaleSize(80),
-    marginRight: scaleSize(15),
+    width: scaleSize(40),
+    height: scaleSize(40),
+    marginRight: scaleSize(25),
     resizeMode: 'contain',
   },
   face: {
@@ -720,10 +743,10 @@ const styles = {
     zIndex: 2,
   },
   btnCome: {
-    flex: 0.15,
+    flex: 0.13,
     backgroundColor: 'rgb(0,205,102)',
-    width: '80%',
-    borderRadius: 30,
+    width: '85%',
+    borderRadius: 20,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -735,21 +758,25 @@ const styles = {
     justifyContent: 'center',
   },
   clickText: {
-    fontSize: setSpText(70),
+    fontSize: setSpText(50),
     color: '#fff',
+    marginLeft: 10,
   },
   wxpay: {
-    width: scaleSize(90),
-    height: scaleSize(80),
+    width: scaleSize(70),
+    height: scaleSize(62),
     marginRight: scaleSize(20),
   },
-  up: {
-    width: scaleSize(180),
-    height: scaleSize(200),
+  finger: {
+    width: scaleSize(60),
+    height: scaleSize(80),
+    marginLeft: 100,
+    marginRight: 20,
   },
   footer: {
     flex: 0.2,
     width: '100%',
+    flexDirection: 'row',
     backgroundColor: 'rgb(68, 197, 114)',
   },
   call: {
@@ -757,18 +784,22 @@ const styles = {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    marginTop: scaleSize(20),
   },
   callGif: {
-    width: scaleSize(500),
-    height: scaleSize(320),
-    marginLeft: scaleSize(-240),
+    width: scaleSize(300),
+    height: scaleSize(150),
+    marginLeft: scaleSize(-100),
+    marginTop: scaleSize(80),
   },
   callText: {
-    fontSize: setSpText(150),
+    fontSize: setSpText(70),
     color: '#fff',
+    marginTop: setSpText(80),
+    marginLeft: setSpText(-70),
   },
   onCall: {
-    flex: 0.2,
+    flex: 0.7,
     width: '100%',
     // backgroundColor: '#44c571',
     backgroundColor: 'rgb(68, 197, 114)',
@@ -777,9 +808,25 @@ const styles = {
     alignItems: 'center',
   },
   onCallText: {
-    fontSize: setSpText(85),
+    fontSize: setSpText(60),
     color: '#fff',
-    marginLeft: scaleSize(-100),
+    paddingTop: scaleSize(30),
+    paddingLeft: scaleSize(-30),
+  },
+  footercall: {
+    flex: 0.7,
+    borderRightColor: '#fff',
+    borderRightWidth: 2,
+  },
+  goFoot: {
+    flex: 0.3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  goText: {
+    color: '#fff',
+    fontSize: setSpText(40),
+    paddingTop: scaleSize(10),
   },
 };