Skip to content

B
bh_face_counter
Commit 019af583 by zeven
Options

人脸识别或出店失败出现二维码扫码

parent 85c3f209
Showing with 105 additions and 30 deletions
package.json
{ {
"name": "zm-face-counter", "name": "zm-face-counter",
"version": "1.1.1", "version": "1.1.2",
"private": true, "private": true,
"scripts": { "scripts": {
"android": "react-native run-android", "android": "react-native run-android",
......
src/components/TipsModal.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Modal, View, Text, Image} from 'react-native'; import {Modal, View, Text, Image, Dimensions} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import ModalStyles from './Modal/styles'; import ModalStyles from './Modal/styles';
import {font} from '../utils/common'; import {font} from '../utils/common';
import {scaleSize, setSpText} from '../utils/screen'; import {scaleSize, setSpText} from '../utils/screen';
...@@ -16,9 +17,11 @@ const mStyles = { ...@@ -16,9 +17,11 @@ const mStyles = {
}, },
}; };
const {width, height} = Dimensions.get('window');
class TipsModal extends Component { class TipsModal extends Component {
render() { render() {
const { let {
tip, tip,
title, title,
leftText, leftText,
...@@ -26,6 +29,8 @@ class TipsModal extends Component { ...@@ -26,6 +29,8 @@ class TipsModal extends Component {
leftTouch, leftTouch,
rightTouch, rightTouch,
faceType, faceType,
qrCode,
onMaskPress,
...props ...props
} = this.props; } = this.props;
if (faceType === 'alipay') { if (faceType === 'alipay') {
...@@ -42,6 +47,11 @@ class TipsModal extends Component { ...@@ -42,6 +47,11 @@ class TipsModal extends Component {
return ( return (
<Modal styles={mStyles} {...props}> <Modal styles={mStyles} {...props}>
<View style={styles.modalBackgroundStyle}> <View style={styles.modalBackgroundStyle}>
<Touch
style={styles.mask}
onPress={() => onMaskPress && onMaskPress()}>
<View />
</Touch>
<View style={styles.modal}> <View style={styles.modal}>
<View style={styles.header}> <View style={styles.header}>
<Image <Image
...@@ -52,16 +62,34 @@ class TipsModal extends Component { ...@@ -52,16 +62,34 @@ class TipsModal extends Component {
<Text style={styles.title}>{title}</Text> <Text style={styles.title}>{title}</Text>
</View> </View>
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.tip}>{tip}</Text> {qrCode && (
</View> <View style={styles.qrcode}>
<View style={styles.footer}> <QRCode
<Touch style={styles.left} onPress={() => leftTouch()}> logoSize={50}
<Text style={styles.call}>{leftText}</Text> // logoBackgroundColor="#fc4000"
</Touch> logo={require('../assets/logo2.png')}
<Touch style={styles.right} onPress={() => rightTouch()}> size={250}
<Text style={styles.reset}>{rightText}</Text> value={qrCode}
</Touch> />
</View>
)}
<Text
ellipsizeMode="tail"
numberOfLines={qrCode ? 1 : 3}
style={styles.tip}>
{tip}
</Text>
</View> </View>
{!qrCode && (
<View style={styles.footer}>
<Touch style={styles.left} onPress={() => leftTouch()}>
<Text style={styles.call}>{leftText}</Text>
</Touch>
<Touch style={styles.right} onPress={() => rightTouch()}>
<Text style={styles.reset}>{rightText}</Text>
</Touch>
</View>
)}
</View> </View>
</View> </View>
</Modal> </Modal>
...@@ -74,6 +102,11 @@ const styles = { ...@@ -74,6 +102,11 @@ const styles = {
flex: 1, flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)',
}, },
mask: {
width,
height,
position: 'absolute',
},
modal: { modal: {
height: '35%', height: '35%',
width: '80%', width: '80%',
...@@ -91,6 +124,10 @@ const styles = { ...@@ -91,6 +124,10 @@ const styles = {
borderTopLeftRadius: 20, borderTopLeftRadius: 20,
borderTopRightRadius: 20, borderTopRightRadius: 20,
}, },
qrcode: {
marginTop: 110,
marginBottom: 10,
},
image: { image: {
width: scaleSize(60), width: scaleSize(60),
height: scaleSize(60), height: scaleSize(60),
...@@ -103,7 +140,7 @@ const styles = { ...@@ -103,7 +140,7 @@ const styles = {
}, },
container: { container: {
flex: 0.45, flex: 0.45,
flexDirection: 'row', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
padding: scaleSize(60), padding: scaleSize(60),
......
src/pages/FacePage.js
...@@ -18,6 +18,7 @@ import {onTalkCall, leaveTalkCall} from '../utils/agora'; ...@@ -18,6 +18,7 @@ import {onTalkCall, leaveTalkCall} from '../utils/agora';
import Toast from '../components/Toast'; import Toast from '../components/Toast';
import Screensaver from '../components/Screensaver'; import Screensaver from '../components/Screensaver';
import {width, setSpText, scaleSize} from '../utils/screen'; import {width, setSpText, scaleSize} from '../utils/screen';
import {qrHost} from '../utils/config';
class FacePage extends Component { class FacePage extends Component {
state = { state = {
...@@ -35,6 +36,7 @@ class FacePage extends Component { ...@@ -35,6 +36,7 @@ class FacePage extends Component {
faceType: 'wxpay', faceType: 'wxpay',
sleep: true, sleep: true,
loadingModal: false, loadingModal: false,
qrCode: '',
}; };
async componentWillMount() { async componentWillMount() {
...@@ -139,7 +141,10 @@ class FacePage extends Component { ...@@ -139,7 +141,10 @@ class FacePage extends Component {
} }
}; };
doorOpen = () => { doorOpen = ({action}) => {
this.action = action;
if (action === '进店') this.action = 'leave';
else if (action === '出店') this.action = 'enter';
this.loading(false); this.loading(false);
this.wakeUp(); this.wakeUp();
}; };
...@@ -214,26 +219,38 @@ class FacePage extends Component { ...@@ -214,26 +219,38 @@ class FacePage extends Component {
let tipText = ret.msg; let tipText = ret.msg;
Speech.speak(tipText); Speech.speak(tipText);
this.userId = ret.userId; this.userId = ret.userId;
this.setState({tip: tipText, tipsModal: true, loadingModal: false});
if (ret.code === 401) { if (ret.code === 401) {
// 需要验证手机号 // 需要验证手机号
this.setState({ this.setState({
phoneModal: true, phoneModal: true,
loadingModal: false, loadingModal: false,
}); });
} else if (ret.orders && ret.orders.length > 0) { return;
let goodsArr = []; }
ret.orders.map(v1 => { // else if (ret.orders && ret.orders.length > 0) {
v1.goods.map(v2 => { // // 有购物订单
goodsArr.push(v2); // let goodsArr = [];
}); // ret.orders.map(v1 => {
}); // v1.goods.map(v2 => {
// goodsArr.push(v2);
// });
// });
// this.setState({
// orderDetailsModal: true,
// loadingModal: false,
// goodsArr,
// customerPhone: ret.phone || '0000',
// current: 1,
// });
// }
if (ret.action && !/您没有进店信息/.test(tipText)) {
this.setQrcode({action: ret.action, tip: tipText});
} else {
this.setState({ this.setState({
orderDetailsModal: true, tip: tipText,
tipsModal: true,
loadingModal: false, loadingModal: false,
goodsArr, qrCode: null,
customerPhone: ret.phone || '0000',
current: 1,
}); });
} }
} else if (ret.msg) { } else if (ret.msg) {
...@@ -248,6 +265,18 @@ class FacePage extends Component { ...@@ -248,6 +265,18 @@ class FacePage extends Component {
} }
}; };
setQrcode = ({action, tip}) => {
const state = {
qrCode: `${qrHost}/#/store-${action}-j${this.storeKey}`,
};
if (tip) {
state.tip = tip;
state.tipsModal = true;
state.loadingModal = false;
}
this.setState(state);
};
authinfo = async () => { authinfo = async () => {
const rawdata = await WxFacepay.rawdata(); const rawdata = await WxFacepay.rawdata();
const {data} = await this.props.dispatch({ const {data} = await this.props.dispatch({
...@@ -261,8 +290,9 @@ class FacePage extends Component { ...@@ -261,8 +290,9 @@ class FacePage extends Component {
wechatFace = async () => { wechatFace = async () => {
const {orderDetailsModal, tipsModal} = this.state; const {orderDetailsModal, tipsModal} = this.state;
if (orderDetailsModal || tipsModal) { if (orderDetailsModal || tipsModal) {
// 出现订单弹窗，不做人脸识别
return; return;
} // 出现订单弹窗，不做人脸识别 }
const tipText = '正在人脸识别，请看向屏幕，靠中间站稳'; const tipText = '正在人脸识别，请看向屏幕，靠中间站稳';
Speech.speak(tipText); Speech.speak(tipText);
// this.setState({tip: tipText, tipsModal: true}); // this.setState({tip: tipText, tipsModal: true});
...@@ -285,7 +315,10 @@ class FacePage extends Component { ...@@ -285,7 +315,10 @@ class FacePage extends Component {
let res = (await WxFacepay.faceinfo(params)) || {}; let res = (await WxFacepay.faceinfo(params)) || {};
if (!res.openid) { if (!res.openid) {
// 返回错误自动重新识别 // 返回错误自动重新识别
res = (await WxFacepay.faceinfo(params)) || {}; // res = (await WxFacepay.faceinfo(params)) || {};
// 返回错误出现二维码扫码
Speech.speak('请扫码开门');
this.setQrcode({action: this.action, tip: '请扫码开门'});
} }
if (window.socket) { if (window.socket) {
// 返回结果，立即重新连接socket // 返回结果，立即重新连接socket
...@@ -336,6 +369,8 @@ class FacePage extends Component { ...@@ -336,6 +369,8 @@ class FacePage extends Component {
const res = await Smilepay.verify(JSON.parse(data.data)); const res = await Smilepay.verify(JSON.parse(data.data));
if (res.code !== '1000') { if (res.code !== '1000') {
Toast.show(res.msg); Toast.show(res.msg);
Speech.speak('请扫码开门');
this.setQrcode({action: this.action, tip: '请扫码开门'});
return; return;
} }
this.loading(true); this.loading(true);
...@@ -428,6 +463,7 @@ class FacePage extends Component { ...@@ -428,6 +463,7 @@ class FacePage extends Component {
sleep, sleep,
faceType, faceType,
loadingModal, loadingModal,
qrCode,
} = this.state; } = this.state;
let {dispatch} = this.props; let {dispatch} = this.props;
if (faceType === 'alipay') { if (faceType === 'alipay') {
...@@ -473,12 +509,14 @@ class FacePage extends Component { ...@@ -473,12 +509,14 @@ class FacePage extends Component {
<TipsModal <TipsModal
visible={tipsModal} visible={tipsModal}
transparent transparent
title={'操作失败'} title={'开门失败'}
tip={tip} tip={tip}
qrCode={qrCode}
leftText={'呼叫客服'} leftText={'呼叫客服'}
rightText={'重新识别'} rightText={'重新识别'}
leftTouch={this.onCall} leftTouch={this.onCall}
rightTouch={this.closeTips} rightTouch={this.closeTips}
onMaskPress={() => this.setState({tipsModal: false})}
faceType={faceType} faceType={faceType}
/> />
<LoadingModal transparent visible={loadingModal} /> <LoadingModal transparent visible={loadingModal} />
......
src/utils/config.js
...@@ -2,7 +2,7 @@ const app = ''; // eg: .25h/.eg ...@@ -2,7 +2,7 @@ const app = ''; // eg: .25h/.eg
export const isProd = process.env.NODE_ENV === 'production'; export const isProd = process.env.NODE_ENV === 'production';
export const host = isProd export const host = isProd
? `https://api${app}.vs-u.com` ? `https://api${app}.vs-u.com`
: 'http://192.168.1.88:7001'; : 'http://192.168.88.88:7001';
export const login = `https://m${app}.vs-u.com`; export const login = `https://m${app}.vs-u.com`;
export const qrHost = login; export const qrHost = login;
export const imgUrl = 'http://barcod.oss-cn-shenzhen.aliyuncs.com/images/'; export const imgUrl = 'http://barcod.oss-cn-shenzhen.aliyuncs.com/images/';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment