优化刷卡弹窗效果

android @ 6fc46902

-Subproject commit fa20326dbf101fa51561d92998b181f8d46e5ede
+Subproject commit 6fc469027cd79cc658acbe06d1a70214859ea480

src/components/ModalView.js

+import React, {Component} from 'react';
+import {StyleSheet, View} from 'react-native';
+
+class ModalView extends Component {
+  render() {
+    const {visible, children} = this.props;
+    return visible ? (
+      <View style={styles.modal} visible={visible}>
+        {children}
+      </View>
+    ) : null;
+  }
+}
+
+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)',
+    // backgroundColor: 'transparent',
+    zIndex: 999,
+  },
+});
+
+export default ModalView;

src/models/card.js

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

src/models/goods.js

@@ -8,6 +8,7 @@ export default {
     total: 0,
     preTotal: 0,
     status: -1,
+    cardVisible: false,
   },
   reducers: {
     setOrder(state, {data}) {
@@ -21,6 +22,10 @@ export default {
       state.bags = data;
       return {...state};
     },
+    cardVisible(state, {visible}) {
+      state.cardVisible = visible;
+      return {...state};
+    },
   },
   effects: {
     *getBags(action, {put, call}) {

src/models/index.js

@@ -11,7 +11,6 @@ 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');
 
@@ -80,5 +79,4 @@ export default [
   agora,
   lucky,
   searchGoods,
-  card,
 ];

src/pages/CounterMixins.js

@@ -138,17 +138,22 @@ const CounterMixins = ComposeComponent => {
           cardId,
         })
         .then(async ({data}) => {
+          this.props.dispatch({
+            type: 'goods/cardVisible',
+            visible: false,
+          });
           if (data.code === 1) {
             this.orderId = data.data.orderId;
             await this.successPay(true);
           } else {
             Toast.hide();
             Speech.speak(data.msg);
+            this.setState({voiceModal: true, voiceTitle: data.msg});
           }
         });
       setTimeout(() => {
         this.setState({voiceModal: false});
-      }, 2000);
+      }, 3000);
     };
 
     componentWillUnmount = () => {
@@ -581,7 +586,7 @@ const CounterMixins = ComposeComponent => {
     };
 
     submitBarcode = async barcode => {
-      if (this.props.card) {
+      if (this.props.goods.cardVisible) {
         return await this.handleCard(barcode || this.barcode);
       }
       this.errGood = null;
@@ -1023,11 +1028,10 @@ const CounterMixins = ComposeComponent => {
     };
   }
 
-  return connect(({goods, admin, store, card}) => ({
+  return connect(({goods, admin, store}) => ({
     goods,
     admin,
     store,
-    card,
   }))(Mixins);
 };
 

yarn.lock

@@ -5891,18 +5891,6 @@ 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"