feat: 适配刷卡

package.json

@@ -31,7 +31,6 @@
     "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/goods.js

@@ -99,5 +99,8 @@ export default {
     *getOrderCounter(action, {call}) {
       return yield call(api.getOrderCounter, action);
     },
+    *cardPay(action, {call}) {
+      return yield call(api.cardPay, action);
+    },
   },
 };

src/pages/CounterMixins.js

@@ -126,7 +126,29 @@ const CounterMixins = ComposeComponent => {
     };
 
     handleCard = async cardId => {
-      console.log(cardId);
+      Toast.hide();
+      Toast.loading('正在付款，请稍后~');
+      const {ids, noBarcode} = this.getGoods();
+      this.props
+        .dispatch({
+          type: 'goods/cardPay',
+          ids,
+          noBarcode,
+          cardId,
+        })
+        .then(async ({data}) => {
+          console.log(data);
+          if (data.code === 1) {
+            this.orderId = data.data.orderId;
+            await this.successPay(true);
+          } else {
+            Toast.hide();
+            Speech.speak(data.msg);
+          }
+        });
+      setTimeout(() => {
+        this.setState({voiceModal: false});
+      }, 2000);
     };
 
     componentWillUnmount = () => {
@@ -559,7 +581,6 @@ const CounterMixins = ComposeComponent => {
     };
 
     submitBarcode = async barcode => {
-      console.log(this.props.card);
       if (this.props.card) {
         return await this.handleCard(barcode || this.barcode);
       }

src/pages/VerticalPage.js

@@ -31,7 +31,6 @@ 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;
@@ -547,6 +546,10 @@ class VerticalPage extends Component {
   };
 
   cardPayPay = async () => {
+    Speech.speak('请刷卡');
+    Toast.loading('请刷卡', 2000, () => {
+      this.props.dispatch({type: 'card/change'});
+    });
     this.props.dispatch({type: 'card/change'});
   };
 
@@ -607,6 +610,7 @@ class VerticalPage extends Component {
       styles.guide = {...styles.guide, backgroundColor: '#1b7dc7'};
     const facepay =
       this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay;
+    console.log('card', card);
     return (
       <View style={styles.main}>
         {goodsArr.length === 0 && stype === 'guard' ? (
@@ -973,7 +977,7 @@ class VerticalPage extends Component {
                       />
                     )}
                     <Text style={styles.payText}>
-                      {this.state.isCard ? '点击刷脸支付' : '点击刷卡支付'}
+                      {isCard ? '点击刷脸支付' : '点击刷卡支付'}
                     </Text>
                   </View>
                 </View>
@@ -982,9 +986,7 @@ class VerticalPage extends Component {
             <View style={styles.paymentRight}>
               <View style={styles.paymentRightTitle}>
                 <View style={styles.paymentRightContents}>
-                  <Text style={styles.paymentRightText}>
-                    {isCard ? '刷卡' : '扫码'}
-                  </Text>
+                  <Text style={styles.paymentRightText}>扫码</Text>
                   <Text style={styles.paymentRightText}>支付</Text>
                   <Image
                     source={require('../assets/Vertical/alipay01.png')}
@@ -996,11 +998,6 @@ 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
@@ -1111,10 +1108,6 @@ class VerticalPage extends Component {
         ) : (
           <View />
         )}
-
-        <ModalView visible={card} maskClosable transparent>
-          <Text>请刷卡</Text>
-        </ModalView>
       </View>
     );
   }
@@ -1506,8 +1499,8 @@ const styles = {
     fontSize: width > 801 ? 35 : 30,
   },
   paymentRightImage: {
-    width: width > 801 ? 40 : 30,
-    height: width > 801 ? 40 : 30,
+    width: width > 801 ? 50 : 40,
+    height: width > 801 ? 50 : 40,
     marginTop: 5,
     marginBottom: 5,
   },

src/services/goods.js

@@ -78,3 +78,7 @@ export function balancePay(action) {
 export function getOrderCounter() {
   return axios.get('/store/goods/counter');
 }
+
+export function cardPay(action) {
+  return axios.post('/store/goods/cardPay', qs.stringify(action));
+}