刷脸支付增加了获取红包的功能；修复人脸识别手机号码以及验证码弹窗刷新后输入数据没清空的问题

src/components/PhoneModal.js

@@ -24,6 +24,12 @@ class PhoneModal extends Component {
     value: '',
   };
 
+  componentWillMount = async () => {
+    this.setState({
+      value: '',
+    });
+  };
+
   getKeyboard = () => {
     const rows = [];
     let items = [];
@@ -48,7 +54,7 @@ class PhoneModal extends Component {
     return <View style={styles.NumberTop}>{rows}</View>;
   };
 
-  pressKey = index => {
+  pressKey = async index => {
     let {value} = this.state;
     const {onSubmit} = this.props;
     if (index < 10) {
@@ -56,8 +62,8 @@ class PhoneModal extends Component {
     } else if (index === 11) {
       value = value.substr(0, value.length - 1);
     } else if (index === 12) {
-      this.setState({value: ''});
-      onSubmit(value);
+      await this.setState({value: ''});
+      await onSubmit(value);
       return;
     }
     this.setState({value});

src/components/RedPacketModal.js

+import React, {Component} from 'react';
+import {Modal, View, Text, Image} from 'react-native';
+import Touch from './Touch';
+import ModalStyles from './Modal/styles';
+import {font} from '../utils/common';
+import NP from '../utils/np';
+
+const mStyles = {
+  ...ModalStyles,
+  innerContainer: {
+    ...ModalStyles.innerContainer,
+    // width: 380,
+  },
+  header: {
+    ...ModalStyles.header,
+    fontSize: font.title,
+  },
+};
+
+class RedPacketModal extends Component {
+  receive = async () => {
+    let {onCloseLucky, onReceiveLucky} = this.props;
+    onReceiveLucky();
+    onCloseLucky();
+  };
+
+  closeLucky = () => {
+    let {onCloseLucky} = this.props;
+    onCloseLucky();
+  };
+
+  render() {
+    // 红包弹窗
+    const {luckyVisible, amount} = this.props;
+    return (
+      <Modal visible={luckyVisible} maskClosable transparent styles={mStyles}>
+        <View style={styles.modalBackgroundStyle}>
+          <View style={styles.modal}>
+            <View style={styles.background}>
+              <Image
+                source={require('../assets/Vertical/red.png')}
+                style={styles.img}
+              />
+            </View>
+            <View style={styles.content}>
+              <View style={styles.top}>
+                <Text style={styles.topText}>恭喜您获得</Text>
+                <Text style={styles.topAmountText}>
+                  {NP.round(amount || 0, 2).toFixed(2)}元
+                </Text>
+              </View>
+              <Touch onPress={this.receive} style={styles.bottom}>
+                <View style={styles.btnReceive}>
+                  <Text style={styles.receviceText}>立即领取</Text>
+                </View>
+              </Touch>
+            </View>
+            <Touch onPress={this.closeLucky} style={styles.close}>
+              <Image
+                source={require('../assets/Vertical/close.png')}
+                style={styles.btnClose}
+              />
+            </Touch>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = {
+  modalBackgroundStyle: {
+    flex: 1,
+    // backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: 'rgba(3, 3, 3, .2)',
+  },
+  modal: {
+    height: '60%',
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: '30%',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  background: {
+    width: '100%',
+    height: '100%',
+  },
+  img: {
+    width: '100%',
+    height: '100%',
+  },
+  content: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '45%',
+    left: 0,
+  },
+  top: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  topText: {
+    color: '#ffffff',
+    fontSize: 40,
+  },
+  topAmountText: {
+    color: '#ffffff',
+    fontSize: 80,
+    lineHeight: 100,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  bottom: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnReceive: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 400,
+    height: 100,
+    backgroundColor: '#FFD101',
+    borderRadius: 100,
+  },
+  receviceText: {
+    fontSize: 45,
+    color: '#ffffff',
+  },
+  close: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 30,
+  },
+  btnClose: {
+    width: 60,
+    height: 60,
+  },
+};
+
+export default RedPacketModal;

src/components/VerifyCodeModal.js

@@ -24,6 +24,12 @@ class VerifyCodeModal extends Component {
     value: '',
   };
 
+  componentWillMount = async () => {
+    this.setState({
+      value: '',
+    });
+  };
+
   getKeyboard = () => {
     const rows = [];
     let items = [];
@@ -48,19 +54,25 @@ class VerifyCodeModal extends Component {
     return <View style={styles.NumberTop}>{rows}</View>;
   };
 
-  pressKey = index => {
+  pressKey = async index => {
     let {value} = this.state;
     const {onSubmit} = this.props;
     if (index < 10 && value.length < 4) {
       value += index;
       if (value.length === 4) {
-        onSubmit(value);
+        this.setState({value});
+        clearInterval(this.onPressKey);
+        this.onPressKey = setTimeout(async () => {
+          await this.setState({value: ''});
+          await onSubmit(value);
+        }, 2000);
+        return;
       }
     } else if (index === 11) {
       value = value.substr(0, value.length - 1);
     } else if (index === 12) {
-      // this.setState({value: ''});
-      onSubmit(value);
+      await this.setState({value: ''});
+      await onSubmit(value);
       return;
     }
     this.setState({value});

src/models/index.js

@@ -9,6 +9,7 @@ import hkvs from './hkvs';
 import user from './user';
 import store from './store';
 import agora from './agora';
+import lucky from './lucky';
 
 const {width: _width, height: _height} = Dimensions.get('window');
 
@@ -75,4 +76,5 @@ export default [
   user,
   store,
   agora,
+  lucky,
 ];

src/models/lucky.js

+import * as api from '../services/lucky';
+
+export default {
+  namespace: 'lucky',
+  state: {},
+  reducers: {},
+  effects: {
+    async getLucky(action) {
+      let {data} = await api.getLucky(action);
+      return data;
+    },
+    async receiveLucky(action) {
+      return await api.receiveLucky(action);
+    },
+  },
+};

src/pages/CounterMixins.js

@@ -14,6 +14,7 @@ import Speech from '../utils/Speech';
 import Toast from '../components/Toast';
 import NP from '../utils/np';
 import {total} from '../utils/validity';
+import RedPacketModal from '../components/RedPacketModal';
 
 window.RN = RN;
 window.Toast = Toast;
@@ -51,6 +52,7 @@ const CounterMixins = ComposeComponent => {
       voiceModal: false,
       title: '',
       dot: false,
+      luckyVisible: false,
     };
 
     componentWillMount = async () => {
@@ -272,6 +274,28 @@ const CounterMixins = ComposeComponent => {
       this.clearList();
       this.setState({voiceModal: true, voiceTitle: msg});
       Speech.speak(msg);
+      this.onLucky();
+    };
+
+    // 付款成功，若达到领取红包的金额则弹出领取红包的弹窗
+    onLucky = async () => {
+      // 支付成功，用户完成付款
+      let {dispatch} = this.props;
+      let {code: codeLucky, data: dataLucky} = await dispatch({
+        type: 'lucky/getLucky',
+        orderId: this.orderId,
+      });
+      if (codeLucky === 1) {
+        this.setState({
+          luckyVisible: true,
+          amount: dataLucky.amount,
+        });
+        setTimeout(() => {
+          this.setState({
+            luckyVisible: false,
+          });
+        }, 10000);
+      }
     };
 
     speak = (msg, showModal, duration = 3000) => {
@@ -523,6 +547,7 @@ const CounterMixins = ComposeComponent => {
       }
       if (res.code === 1) {
         // 付款成功
+        this.orderId = res.data.orderId;
         if (res.data.users) {
           this.barcodeUser = res.data;
           await this.selectUserModal();
@@ -531,7 +556,7 @@ const CounterMixins = ComposeComponent => {
           // 没有匹配到支付宝用户
           const voiceTitle =
             '为了正常出店，首次使用支付宝付款码，请用进店微信扫描屏幕二维码';
-          this.orderId = res.data.orderId;
+          // this.orderId = res.data.orderId;
           this.alipayUserId = res.data.alipayUserId;
           Speech.speak(voiceTitle);
           this.setState({voiceTitle});
@@ -633,8 +658,22 @@ const CounterMixins = ComposeComponent => {
       this.submitBarcode(goods.bags[index].barcode);
     };
 
+    onCloseLucky = () => {
+      this.setState({
+        luckyVisible: false,
+      });
+    };
+
+    onReceiveLucky = async () => {
+      const {data} = await this.props.dispatch({
+        type: 'lucky/receiveLucky',
+        orderId: this.orderId,
+      });
+      Toast.success(data.msg);
+    };
+
     render = () => {
-      let {voiceModal, voiceTitle, title} = this.state;
+      let {voiceModal, voiceTitle, title, luckyVisible, amount} = this.state;
       return (
         <View style={{flex: 1}}>
           <NumberModal
@@ -644,6 +683,13 @@ const CounterMixins = ComposeComponent => {
             onSubmit={this.handleScan}
             dot={this.state.dot}
           />
+          <RedPacketModal
+            luckyVisible={luckyVisible}
+            amount={amount}
+            orderId={this.orderId}
+            onReceiveLucky={this.onReceiveLucky}
+            onCloseLucky={this.onCloseLucky}
+          />
           <Modal
             maskClosable
             styles={mStyles}

src/services/lucky.js

+import axios from 'axios';
+
+export function getLucky({orderId}) {
+  return axios.get(`/store/lucky/${orderId}`);
+}
+
+export function receiveLucky({orderId}) {
+  return axios.get(`/store/lucky/receive/${orderId}`);
+}