feat: 适配刷卡

package.json

@@ -31,6 +31,7 @@
     "react-native-code-push": "^6.3.0",
     "react-native-keyevent": "0.2.8",
     "react-native-qrcode-svg": "6.0.6",
+    "react-native-root-modal": "^5.0.1",
     "react-native-svg": "12.1.0",
     "react-native-swiper": "1.6.0",
     "react-native-vector-icons": "6.6.0",

src/components/ModalView.js

+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import Modal from 'react-native-root-modal';
+
+class ModalView extends Component {
+  render() {
+    const {visible, children} = this.props;
+    return (
+      <Modal style={styles.modal} visible={visible}>
+        {children}
+      </Modal>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+});
+
+export default ModalView;

src/models/card.js

+export default {
+  namespace: 'card',
+  state: false,
+  reducers: {
+    change(bool) {
+      return !bool;
+    },
+  },
+};

src/models/index.js

@@ -11,6 +11,7 @@ import store from './store';
 import agora from './agora';
 import lucky from './lucky';
 import searchGoods from './searchGoods';
+import card from './card';
 
 const {width: _width, height: _height} = Dimensions.get('window');
 
@@ -79,4 +80,5 @@ export default [
   agora,
   lucky,
   searchGoods,
+  card,
 ];

src/pages/CounterMixins.js

@@ -125,6 +125,10 @@ const CounterMixins = ComposeComponent => {
       this.listen();
     };
 
+    handleCard = async cardId => {
+      console.log(cardId);
+    };
+
     componentWillUnmount = () => {
       clearInterval(this.clearListInter);
       clearInterval(this.payInter);
@@ -555,6 +559,10 @@ const CounterMixins = ComposeComponent => {
     };
 
     submitBarcode = async barcode => {
+      console.log(this.props.card);
+      if (this.props.card) {
+        return await this.handleCard(barcode || this.barcode);
+      }
       this.errGood = null;
       if (!window.auth) {
         const msg = '系统未授权，无法查询商品';
@@ -994,7 +1002,12 @@ const CounterMixins = ComposeComponent => {
     };
   }
 
-  return connect(({goods, admin, store}) => ({goods, admin, store}))(Mixins);
+  return connect(({goods, admin, store, card}) => ({
+    goods,
+    admin,
+    store,
+    card,
+  }))(Mixins);
 };
 
 const CloseButton = ({onClose, style}) => {

src/pages/VerticalPage.js

@@ -5,7 +5,6 @@ import Swiper from 'react-native-swiper';
 import QRCode from 'react-native-qrcode-svg';
 import Icon from 'react-native-vector-icons/Ionicons';
 import Icons from 'react-native-vector-icons/MaterialIcons';
-// import { connect } from 'react-redux';
 import CounterMixins from './CounterMixins';
 import NP from '../utils/np';
 import AutoClick from '../utils/AutoClick';
@@ -32,13 +31,13 @@ import Smilepay from '../utils/Smilepay';
 import {leaveTalkCall, onTalkCall} from '../utils/agora';
 import Toast from '../components/Toast';
 import {ossLink} from '../utils/config';
+import ModalView from '../components/ModalView';
 
 let pageSize = 8; // 分页大小
 window.pageSize = pageSize;
 
 // const wait = t => new Promise(resolve => setTimeout(resolve, t));
 
-// @connect(({ app }) => ({ app }))
 class VerticalPage extends Component {
   state = {
     contact: '',
@@ -51,6 +50,7 @@ class VerticalPage extends Component {
     logoVisible: true,
     logo: '',
     priceVisible: true,
+    isCard: false,
   };
 
   async componentWillMount() {
@@ -139,6 +139,12 @@ class VerticalPage extends Component {
       group,
     });
     if (data.code === 1 && data.data) {
+      if (data.data.cardCounter) {
+        // 是否支持刷卡
+        this.setState({
+          isCard: true,
+        });
+      }
       await this.setState({
         logo: `${ossLink}/${data.data.logo}`,
         priceVisible: data.data.priceVisible,
@@ -540,6 +546,10 @@ class VerticalPage extends Component {
     }
   };
 
+  cardPayPay = async () => {
+    this.props.dispatch({type: 'card/change'});
+  };
+
   render() {
     let {
       admin,
@@ -549,6 +559,7 @@ class VerticalPage extends Component {
       autoplayTime,
       imgArr,
       adType,
+      card,
     } = this.props;
     let {
       contact,
@@ -557,6 +568,7 @@ class VerticalPage extends Component {
       logo,
       priceVisible,
       stype,
+      isCard,
     } = this.state;
     pageSize =
       goods && goods.bags.length > 0
@@ -897,14 +909,16 @@ class VerticalPage extends Component {
           {/*  })}*/}
           {/*</View>*/}
           <View style={styles.shadow} />
-          <Touch onPress={facepay}>
+          <Touch onPress={isCard ? this.cardPayPay : facepay}>
             <View style={styles.guide}>
               <Text style={styles.guideText}>点击进入</Text>
               <Image
                 source={require('../assets/down.png')}
                 style={styles.down}
               />
-              <Text style={styles.guideText}>人脸支付</Text>
+              <Text style={styles.guideText}>
+                {isCard ? '刷卡支付' : '人脸支付'}
+              </Text>
             </View>
           </Touch>
           <View style={styles.payment}>
@@ -935,14 +949,19 @@ class VerticalPage extends Component {
               </View>
             </View>
             <View style={styles.faceScan}>
-              <Touch onPress={facepay}>
+              <Touch onPress={isCard ? this.cardPayPay : facepay}>
                 <View>
                   <Image
-                    source={require('../assets/Vertical/face.gif')}
+                    source={
+                      isCard
+                        ? require('../assets/Vertical/card.png')
+                        : require('../assets/Vertical/face.gif')
+                    }
                     style={styles.faceGif}
                     alt=""
                   />
                   <View style={styles.facePay}>
+                    {!isCard && (
                       <Image
                         source={
                           this.state.faceType === 'wxpay'
@@ -952,7 +971,10 @@ class VerticalPage extends Component {
                         style={styles.payImage}
                         alt=""
                       />
-                    <Text style={styles.payText}>点击刷脸支付</Text>
+                    )}
+                    <Text style={styles.payText}>
+                      {this.state.isCard ? '点击刷脸支付' : '点击刷卡支付'}
+                    </Text>
                   </View>
                 </View>
               </Touch>
@@ -960,7 +982,9 @@ class VerticalPage extends Component {
             <View style={styles.paymentRight}>
               <View style={styles.paymentRightTitle}>
                 <View style={styles.paymentRightContents}>
-                  <Text style={styles.paymentRightText}>扫码</Text>
+                  <Text style={styles.paymentRightText}>
+                    {isCard ? '刷卡' : '扫码'}
+                  </Text>
                   <Text style={styles.paymentRightText}>支付</Text>
                   <Image
                     source={require('../assets/Vertical/alipay01.png')}
@@ -972,6 +996,11 @@ class VerticalPage extends Component {
                     style={styles.paymentRightImage}
                     alt=""
                   />
+                  <Image
+                    source={require('../assets/Vertical/card.png')}
+                    style={styles.paymentRightImage}
+                    alt=""
+                  />
                 </View>
                 <View style={styles.paymentRightCode}>
                   <QRCode
@@ -995,7 +1024,7 @@ class VerticalPage extends Component {
               <Text style={styles.explainText2}>2</Text>
             </View>
             <Text style={styles.explainText1}>
-              微信/支付宝扫二维码或付款码付款
+              {isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
             </Text>
           </View>
         </View>
@@ -1082,6 +1111,10 @@ class VerticalPage extends Component {
         ) : (
           <View />
         )}
+
+        <ModalView visible={card} maskClosable transparent>
+          <Text>请刷卡</Text>
+        </ModalView>
       </View>
     );
   }
@@ -1473,8 +1506,8 @@ const styles = {
     fontSize: width > 801 ? 35 : 30,
   },
   paymentRightImage: {
-    width: width > 801 ? 50 : 40,
-    height: width > 801 ? 50 : 40,
+    width: width > 801 ? 40 : 30,
+    height: width > 801 ? 40 : 30,
     marginTop: 5,
     marginBottom: 5,
   },

src/utils/config.js

@@ -2,7 +2,7 @@ const app = ''; // eg: .25h/.eg
 export const isProd = process.env.NODE_ENV === 'production';
 export const host = isProd
   ? `https://api${app}.vs-u.com`
-  : 'http://192.168.88.43:7001';
+  : 'http://192.168.88.88:7001';
 export const login = `https://m${app}.vs-u.com`;
 export const qrHost = login;
 export const imgUrl = 'http://barcod.oss-cn-shenzhen.aliyuncs.com/images/';

yarn.lock

@@ -5891,6 +5891,18 @@ react-native-qrcode-svg@6.0.6:
     prop-types "^15.5.10"
     qrcode "^1.3.2"
 
+react-native-root-modal@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/react-native-root-modal/download/react-native-root-modal-5.0.1.tgz#8b49f523f70732f1697961edc42174f81259e6c1"
+  integrity sha1-i0n1I/cHMvFpeWHtxCF0+BJZ5sE=
+  dependencies:
+    react-native-root-siblings "^4.0.0"
+
+react-native-root-siblings@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.nlark.com/react-native-root-siblings/download/react-native-root-siblings-4.1.1.tgz#b7742db7634a87f507eb99a5fd699c4f10c46ab0"
+  integrity sha1-t3Qtt2NKh/UH65ml/WmcTxDEarA=
+
 react-native-svg@12.1.0:
   version "12.1.0"
   resolved "https://registry.npm.taobao.org/react-native-svg/download/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d"