优化刷卡弹窗效果

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);
 };
 

src/pages/VerticalPage.js

@@ -9,6 +9,7 @@ import CounterMixins from './CounterMixins';
 import NP from '../utils/np';
 import AutoClick from '../utils/AutoClick';
 import Touch from '../components/Touch';
+import ModalView from '../components/ModalView';
 import counterText from '../assets/Vertical/counterText.png';
 import img24h from '../assets/Vertical/24h.png';
 import phone from '../assets/Vertical/phone.png';
@@ -50,6 +51,7 @@ class VerticalPage extends Component {
     logo: '',
     priceVisible: true,
     isCard: false,
+    cardVisible: false,
   };
 
   async componentWillMount() {
@@ -138,16 +140,12 @@ class VerticalPage extends Component {
       group,
     });
     if (data.code === 1 && data.data) {
-      if (data.data.cardCounter) {
+      const state = {priceVisible: data.data.priceVisible};
+      if (data.data.cardCounter)
         // 是否支持刷卡
-        this.setState({
-          isCard: true,
-        });
-      }
-      await this.setState({
-        logo: `${ossLink}/${data.data.logo}`,
-        priceVisible: data.data.priceVisible,
-      });
+        state.isCard = true;
+      if (data.data.logo) state.logo = `${ossLink}/${data.data.logo}`;
+      this.setState(state);
     }
   };
 
@@ -546,11 +544,22 @@ class VerticalPage extends Component {
   };
 
   cardPayPay = async () => {
-    Speech.speak('请刷卡');
-    Toast.loading('请刷卡', 2000, () => {
-      this.props.dispatch({type: 'card/change'});
+    const {goodsArr} = this.props;
+    if (goodsArr.length === 0) {
+      this.props.speak('请先扫描商品条码，再刷卡付款', true);
+      return;
+    }
+    Speech.speak('请刷卡付款');
+    this.props.dispatch({
+      type: 'goods/cardVisible',
+      visible: true,
+    });
+    setTimeout(() => {
+      this.props.dispatch({
+        type: 'goods/cardVisible',
+        visible: false,
       });
-    this.props.dispatch({type: 'card/change'});
+    }, 8000);
   };
 
   render() {
@@ -610,6 +619,7 @@ class VerticalPage extends Component {
     const facepay =
       this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay;
     return (
+      <View style={{flex: 1, position: 'relative'}}>
         <View style={styles.main}>
           {goodsArr.length === 0 && stype === 'guard' ? (
             <View style={styles.guardModal}>
@@ -695,7 +705,9 @@ class VerticalPage extends Component {
                         }>
                         <View style={styles.firstTdStyle}>
                           <Text style={styles.TdText} numberOfLines={1}>
-                          {item.spec ? `${item.name}(${item.spec})` : item.name}
+                            {item.spec
+                              ? `${item.name}(${item.spec})`
+                              : item.name}
                           </Text>
                         </View>
                         <View style={styles.TdStyle}>
@@ -934,9 +946,10 @@ class VerticalPage extends Component {
                 </View>
                 <View style={styles.amount}>
                   <Text style={styles.leftText2}>
-                  {NP.round(Number(totalPrice) + Number(totalCount), 2).toFixed(
+                    {NP.round(
+                      Number(totalPrice) + Number(totalCount),
                       2,
-                  )}
+                    ).toFixed(2)}
                   </Text>
                   <Text style={styles.leftText2}>
                     {NP.round(total, 2).toFixed(2)}
@@ -1006,7 +1019,9 @@ class VerticalPage extends Component {
                       // logoBackgroundColor="#fc4000"
                       logo={logoVisible && require('../assets/logo2.png')}
                       size={width > 801 ? 200 : scaleSize(250)}
-                    value={`${qrHost || login}/#/counter-order-${admin.socket}`}
+                      value={`${qrHost || login}/#/counter-order-${
+                        admin.socket
+                      }`}
                     />
                   </View>
                 </View>
@@ -1110,6 +1125,22 @@ class VerticalPage extends Component {
             <View />
           )}
         </View>
+        <ModalView visible={goods.cardVisible}>
+          <View
+            style={{
+              width: scaleSize(900),
+              height: scaleSize(300),
+              backgroundColor: 'white',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Text style={{fontSize: scaleSize(30), color: '#555'}}>
+              请刷卡付款
+            </Text>
+            <Image source={require('../assets/voice.gif')} />
+          </View>
+        </ModalView>
+      </View>
     );
   }
 }

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"