Skip to content

B
bh_face_counter
Commit 74ea0e13 by 修福龙
Options

操作失败提示弹窗

parent 19357b33
Showing with 169 additions and 103 deletions
src/components/TipsModal.js 0 → 100644
import React, {Component} from 'react';
import {Modal, View, Text, Image} from 'react-native';
import ModalStyles from './Modal/styles';
import {font} from '../utils/common';
import {scaleSize, setSpText} from '../utils/screen';
import Touch from './Touch';
const mStyles = {
...ModalStyles,
innerContainer: {
...ModalStyles.innerContainer,
},
header: {
...ModalStyles.header,
fontSize: font.title,
},
};
class TipsModal extends Component {
render() {
const {
tip,
title,
leftText,
rightText,
leftTouch,
rightTouch,
faceType,
...props
} = this.props;
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.right = {
...styles.right,
backgroundColor: '#1b7dc7',
};
styles.call = {
...styles.call,
color: '#1b7dc7',
};
}
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modalBackgroundStyle}>
<View style={styles.modal}>
<View style={styles.header}>
<Image
source={require('../assets/Vertical/tip_modal.png')}
style={styles.image}
tintColor="white"
/>
<Text style={styles.title}>{title}</Text>
</View>
<View style={styles.container}>
<Text style={styles.tip}>{tip}</Text>
</View>
<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>
</Modal>
);
}
}
const styles = {
modalBackgroundStyle: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal: {
height: '35%',
width: '80%',
marginLeft: '10%',
marginTop: '40%',
borderRadius: 20,
backgroundColor: '#fff',
flexDirection: 'column',
},
header: {
flex: 0.25,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#2BA245',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
image: {
width: scaleSize(60),
height: scaleSize(60),
marginLeft: scaleSize(20),
marginRight: scaleSize(20),
},
title: {
fontSize: setSpText(45),
color: '#fff',
},
container: {
flex: 0.45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: scaleSize(60),
},
tip: {
textAlign: 'center',
fontSize: setSpText(65),
},
footer: {
flex: 0.3,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
left: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '50%',
height: '100%',
borderTopColor: '#ccc',
borderTopWidth: 1,
borderBottomLeftRadius: 20,
backgroundColor: '#f0f0f0',
},
call: {
fontSize: setSpText(65),
color: '#2BA245',
},
right: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '50%',
height: '100%',
backgroundColor: '#2BA245',
borderBottomRightRadius: 20,
},
reset: {
fontSize: setSpText(65),
color: '#fff',
},
};
export default TipsModal;
src/pages/FacePage.js
......@@ -7,6 +7,7 @@ import Touch from '../components/Touch';
import PhoneModal from '../components/PhoneModal';
import VerifyCodeModal from '../components/VerifyCodeModal';
import OrderDetailsModal from '../components/OrderDetailsModal';
import TipsModal from '../components/TipsModal';
import delay from '../utils/delay';
import Speech from '../utils/Speech';
import WxFacepay from '../utils/WxFacepay';
......@@ -15,7 +16,7 @@ import phone from '../assets/Vertical/phone.png';
import {onTalkCall, leaveTalkCall} from '../utils/agora';
import Toast from '../components/Toast';
import Screensaver from '../components/Screensaver';
import {width, setSpText, scaleSize, scaleHeight} from '../utils/screen';
import {width, setSpText, scaleSize} from '../utils/screen';
class FacePage extends Component {
state = {
......@@ -97,18 +98,6 @@ class FacePage extends Component {
}
};
// handleClose = () => {
// this.setState({
// phoneModal: false,
// });
// };
//
// handleCodeClose = () => {
// this.setState({
// verifyCodeModal: false,
// });
// };
handleOrderClose = () => {
this.setState({
orderDetailsModal: false,
......@@ -402,6 +391,11 @@ class FacePage extends Component {
}, 18888);
};
closeTips = async () => {
await this.setState({tipsModal: false});
await this.face();
};
render() {
const {
verifyCodeModal,
......@@ -432,9 +426,6 @@ class FacePage extends Component {
<PhoneModal
visible={phoneModal}
transparent
// maskClosable
// onClose={this.handleClose}
// onRequestClose={this.handleClose}
onCall={this.onCall}
onSubmit={this.onSubmit}
faceType={faceType}
......@@ -442,9 +433,6 @@ class FacePage extends Component {
<VerifyCodeModal
visible={verifyCodeModal}
transparent
// maskClosable
// onClose={this.handleCodeClose}
// onRequestClose={this.handleCodeClose}
onCall={this.onCall}
onSubmit={this.onCodeSubmit}
faceType={faceType}
......@@ -465,6 +453,17 @@ class FacePage extends Component {
current={current}
faceType={faceType}
/>
<TipsModal
visible={tipsModal}
transparent
title={'操作失败'}
tip={tip}
leftText={'呼叫客服'}
rightText={'重新识别'}
leftTouch={this.onCall}
rightTouch={this.closeTips}
faceType={faceType}
/>
<View style={styles.header}>
<View style={styles.title}>
<View style={styles.left}>
......@@ -491,28 +490,6 @@ class FacePage extends Component {
style={{flex: 1, width}}
/>
</Touch>
{tipsModal && tip && (
<View style={styles.modal}>
<Touch
onPress={() => this.setState({tipsModal: false, tip: ''})}
feedback={false}
style={styles.tips}>
<Text style={styles.tipText}>{tip}</Text>
</Touch>
<Touch
onPress={this.onCall}
feedback={false}
style={styles.callTouch}>
<View style={styles.callTips}>
<Text style={styles.callTipsText}>呼叫客服</Text>
<Image
source={require('../assets/up.png')}
style={styles.callTipsImg}
/>
</View>
</Touch>
</View>
)}
</View>
<Touch onPress={this.face} style={styles.btnCome} feedback={false}>
<View style={styles.click}>
......@@ -583,7 +560,6 @@ const styles = {
},
header: {
flex: 0.2,
// backgroundColor: '#00CD66',
backgroundColor: 'rgb(0,205,102)',
width: '100%',
flexDirection: 'column',
......@@ -641,13 +617,11 @@ const styles = {
flex: 0.7,
},
faceGif: {
// flex: 0.7,
position: 'relative',
zIndex: 2,
},
btnCome: {
flex: 0.15,
// backgroundColor: '#00CD66',
backgroundColor: 'rgb(0,205,102)',
width: '80%',
borderRadius: 30,
......@@ -664,12 +638,10 @@ const styles = {
clickText: {
fontSize: setSpText(70),
color: '#fff',
// marginTop: scaleSize(50),
},
wxpay: {
width: scaleSize(90),
height: scaleSize(80),
// marginTop: width > 471 ? 30 : 24,
marginRight: scaleSize(20),
},
up: {
......@@ -679,7 +651,6 @@ const styles = {
footer: {
flex: 0.2,
width: '100%',
// backgroundColor: '#44c571',
backgroundColor: 'rgb(68, 197, 114)',
},
call: {
......@@ -696,7 +667,6 @@ const styles = {
callText: {
fontSize: setSpText(150),
color: '#fff',
// marginLeft: -50,
},
onCall: {
flex: 0.2,
......@@ -712,61 +682,6 @@ const styles = {
color: '#fff',
marginLeft: scaleSize(-100),
},
modal: {
// flex: 0.2,
marginTop: '30%',
width: '100%',
height: scaleHeight(400),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
zIndex: 999,
},
tips: {
flexDirection: 'row',
backgroundColor: '#FC4000',
width: '70%',
// height: '18%',
height: scaleHeight(400),
justifyContent: 'center',
alignItems: 'center',
marginRight: scaleSize(15),
},
tipText: {
fontSize: setSpText(70),
color: '#fff',
textAlign: 'center',
},
callTouch: {
width: '30%',
// height: '18%',
height: scaleHeight(400),
marginLeft: scaleSize(15),
backgroundColor: '#FC4000',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
callTips: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#FC4000',
// width: '30%',
// height: '18%',
// marginLeft: 5,
},
callTipsText: {
fontSize: setSpText(70),
color: '#fff',
textAlign: 'center',
paddingTop: scaleSize(30),
},
callTipsImg: {
width: scaleSize(150),
height: scaleSize(150),
},
};
export default connect(({store}) => ({store}))(FacePage);
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