Skip to content

B
bh_face_counter
Commit 920397aa by 王崇仁
Options

更改了微信刷脸的页面

parent b0fda40f
Showing with 182 additions and 93 deletions
src/components/TipsModal.js
...@@ -25,14 +25,20 @@ class TipsModal extends Component { ...@@ -25,14 +25,20 @@ class TipsModal extends Component {
tip, tip,
title, title,
leftText, leftText,
contentText,
rightText, rightText,
leftTouch, leftTouch,
contentTouch,
rightTouch, rightTouch,
faceType, faceType,
qrCode, qrCode,
onMaskPress, onMaskPress,
...props ...props
} = this.props; } = this.props;
let flag = true;
if (contentText === '') {
flag = false;
}
if (faceType === 'alipay') { if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'}; styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.right = { styles.right = {
...@@ -55,7 +61,7 @@ class TipsModal extends Component { ...@@ -55,7 +61,7 @@ class TipsModal extends Component {
<View style={styles.modal}> <View style={styles.modal}>
<View style={styles.header}> <View style={styles.header}>
<Image <Image
source={require('../assets/Vertical/tip_modal.png')} source={require('../assets/Vertical/wxpay.png')}
style={styles.image} style={styles.image}
tintColor="white" tintColor="white"
/> />
...@@ -82,10 +88,19 @@ class TipsModal extends Component { ...@@ -82,10 +88,19 @@ class TipsModal extends Component {
</View> </View>
{!qrCode && ( {!qrCode && (
<View style={styles.footer}> <View style={styles.footer}>
<Touch style={styles.left} onPress={() => leftTouch()}> <Touch
style={flag ? styles.left : styles.lefts}
onPress={() => leftTouch()}>
<Text style={styles.call}>{leftText}</Text> <Text style={styles.call}>{leftText}</Text>
</Touch> </Touch>
<Touch style={styles.right} onPress={() => rightTouch()}> <Touch
style={flag ? styles.content : styles.contents}
onPress={() => contentTouch()}>
<Text style={styles.reset}>{contentText}</Text>
</Touch>
<Touch
style={flag ? styles.right : styles.rights}
onPress={() => rightTouch()}>
<Text style={styles.reset}>{rightText}</Text> <Text style={styles.reset}>{rightText}</Text>
</Touch> </Touch>
</View> </View>
...@@ -108,7 +123,7 @@ const styles = { ...@@ -108,7 +123,7 @@ const styles = {
position: 'absolute', position: 'absolute',
}, },
modal: { modal: {
height: '35%', height: '40%',
width: '80%', width: '80%',
marginLeft: '10%', marginLeft: '10%',
marginTop: '40%', marginTop: '40%',
...@@ -117,7 +132,7 @@ const styles = { ...@@ -117,7 +132,7 @@ const styles = {
flexDirection: 'column', flexDirection: 'column',
}, },
header: { header: {
flex: 0.25, flex: 0.2,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
backgroundColor: '#2BA245', backgroundColor: '#2BA245',
...@@ -131,15 +146,15 @@ const styles = { ...@@ -131,15 +146,15 @@ const styles = {
image: { image: {
width: scaleSize(60), width: scaleSize(60),
height: scaleSize(60), height: scaleSize(60),
marginLeft: scaleSize(20), marginLeft: scaleSize(50),
marginRight: scaleSize(20), marginRight: scaleSize(30),
}, },
title: { title: {
fontSize: setSpText(45), fontSize: setSpText(45),
color: '#fff', color: '#fff',
}, },
container: { container: {
flex: 0.45, flex: 0.6,
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -147,10 +162,10 @@ const styles = { ...@@ -147,10 +162,10 @@ const styles = {
}, },
tip: { tip: {
textAlign: 'center', textAlign: 'center',
fontSize: setSpText(65), fontSize: setSpText(50),
}, },
footer: { footer: {
flex: 0.3, flex: 0.2,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -159,29 +174,56 @@ const styles = { ...@@ -159,29 +174,56 @@ const styles = {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: '33.3%',
height: '100%',
borderBottomLeftRadius: 15,
backgroundColor: '#2BA245',
},
lefts: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '50%', width: '50%',
height: '100%', height: '100%',
borderTopColor: '#ccc', borderBottomLeftRadius: 15,
borderTopWidth: 1, backgroundColor: '#2BA245',
borderBottomLeftRadius: 20, },
content: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '33.3%',
height: '100%',
backgroundColor: '#f0f0f0', backgroundColor: '#f0f0f0',
}, },
contents: {
display: 'none',
},
call: { call: {
fontSize: setSpText(65), fontSize: setSpText(45),
color: '#2BA245', color: '#fff',
}, },
right: { right: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: '33.3%',
height: '100%',
backgroundColor: '#ced2cf',
borderBottomRightRadius: 15,
},
rights: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '50%', width: '50%',
height: '100%', height: '100%',
backgroundColor: '#2BA245', backgroundColor: '#ced2cf',
borderBottomRightRadius: 20, borderBottomRightRadius: 15,
}, },
reset: { reset: {
fontSize: setSpText(65), fontSize: setSpText(45),
color: '#fff', color: '#2BA245',
}, },
}; };
......
src/pages/FacePage.js
...@@ -6,6 +6,7 @@ import {connect} from 'react-redux'; ...@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
import Touch from '../components/Touch'; import Touch from '../components/Touch';
import PhoneModal from '../components/PhoneModal'; import PhoneModal from '../components/PhoneModal';
import VerifyCodeModal from '../components/VerifyCodeModal'; import VerifyCodeModal from '../components/VerifyCodeModal';
import QRCode from 'react-native-qrcode-svg';
import OrderDetailsModal from '../components/OrderDetailsModal'; import OrderDetailsModal from '../components/OrderDetailsModal';
import TipsModal from '../components/TipsModal'; import TipsModal from '../components/TipsModal';
import LoadingModal from '../components/LoadingModal'; import LoadingModal from '../components/LoadingModal';
...@@ -34,7 +35,7 @@ class FacePage extends Component { ...@@ -34,7 +35,7 @@ class FacePage extends Component {
tip: '', tip: '',
tipsModal: false, tipsModal: false,
faceType: 'wxpay', faceType: 'wxpay',
sleep: true, sleep: false,
loadingModal: false, loadingModal: false,
qrCode: '', qrCode: '',
goTipsModal: false, goTipsModal: false,
...@@ -487,16 +488,12 @@ class FacePage extends Component { ...@@ -487,16 +488,12 @@ class FacePage extends Component {
type, type,
} = this.state; } = this.state;
let flag = ''; let flag = '';
let flags = '';
if (type === 'over') { if (type === 'over') {
flags = '回店付款';
flag = '我已付款'; flag = '我已付款';
} else if (type === 'loss') { } else if (type === 'loss') {
flag = '确认出店'; flag = '确认出店';
flags = '回到店里';
} else { } else {
flags = '回到店里'; flag = '';
flag = '呼叫客服';
} }
let {dispatch} = this.props; let {dispatch} = this.props;
if (faceType === 'alipay') { if (faceType === 'alipay') {
...@@ -544,12 +541,12 @@ class FacePage extends Component { ...@@ -544,12 +541,12 @@ class FacePage extends Component {
transparent transparent
title={'开门失败'} title={'开门失败'}
tip={tip} tip={tip}
leftText={flags} leftText={'回店核对'}
rightText={flag} contentText={flag}
rightText={'呼叫客服'}
leftTouch={this.goToo} leftTouch={this.goToo}
rightTouch={ contentTouch={flag === '' ? '' : this.goTips}
type === 'over' || type === 'loss' ? this.goTips : this.onCall rightTouch={this.onCall}
}
onMaskPress={() => this.setState({tipsModal: false})} onMaskPress={() => this.setState({tipsModal: false})}
faceType={faceType} faceType={faceType}
/> />
...@@ -568,7 +565,7 @@ class FacePage extends Component { ...@@ -568,7 +565,7 @@ class FacePage extends Component {
<View style={styles.left}> <View style={styles.left}>
<Image <Image
source={require('../assets/logo2.png')} source={require('../assets/logo2.png')}
style={styles.img} style={styles.imgs}
/> />
<Text style={styles.text}>{storeName}</Text> <Text style={styles.text}>{storeName}</Text>
</View> </View>
...@@ -602,50 +599,68 @@ class FacePage extends Component { ...@@ -602,50 +599,68 @@ class FacePage extends Component {
tintColor="white" tintColor="white"
/> />
<Text style={styles.clickText}>点击进入</Text> <Text style={styles.clickText}>点击进入</Text>
<Image source={require('../assets/up.png')} style={styles.up} /> <Image
source={require('../assets/finger.png')}
style={styles.finger}
/>
<Text style={styles.clickText}>刷脸开门</Text> <Text style={styles.clickText}>刷脸开门</Text>
</View> </View>
</Touch> </Touch>
</View> </View>
{talkCall === 1 ? ( <View style={styles.footer}>
<View style={styles.onCall}> {talkCall === 1 ? (
<Image <View style={styles.footercall}>
source={ <View style={styles.call}>
faceType === 'wxpay' <Image
? require('../assets/call.gif') source={
: require('../assets/call_blue.gif') faceType === 'wxpay'
} ? require('../assets/call.gif')
style={styles.callGif} : require('../assets/call_blue.gif')
/> }
<Text style={styles.onCallText}>正在语音通话中</Text> style={styles.callGif}
</View> />
) : talkCall === 0 ? ( <Text style={styles.callText}>正在语音通话中</Text>
<View style={styles.onCall}> </View>
<Image
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.onCallText}>正在接通中请稍候...</Text>
</View>
) : (
<Touch onPress={this.onCall} style={styles.footer} feedback={false}>
<View style={styles.call}>
<Image
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.callText}>呼叫客服</Text>
</View> </View>
</Touch> ) : talkCall === 0 ? (
)} <View style={styles.footercall}>
<View style={styles.call}>
<Image
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.callText}>正在接通中请稍候...</Text>
</View>
</View>
) : (
<Touch
onPress={this.onCall}
style={styles.footercall}
feedback={false}>
<View style={styles.call}>
<Image
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.callText}>呼叫客服</Text>
</View>
</Touch>
)}
<View style={styles.goFoot}>
<View style={{borderWidth: 10, borderColor: '#fff', width: 180}}>
<QRCode value={qrCode || `${qrHost}/#/account`} size={160} />
</View>
<Text style={styles.goText}>扫码开门</Text>
</View>
</View>
</View> </View>
); );
} }
...@@ -678,31 +693,39 @@ const styles = { ...@@ -678,31 +693,39 @@ const styles = {
marginBottom: scaleSize(20), marginBottom: scaleSize(20),
}, },
headTitle: { headTitle: {
fontSize: setSpText(100), fontSize: setSpText(70),
color: '#fff', color: '#fff',
}, },
left: { left: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
marginTop: scaleSize(45),
},
imgs: {
width: scaleSize(60),
height: scaleSize(60),
marginRight: scaleSize(20),
resizeMode: 'contain',
}, },
right: { right: {
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
alignItems: 'center', alignItems: 'center',
marginTop: scaleSize(45),
}, },
img: { img: {
width: scaleSize(90), width: scaleSize(40),
height: scaleSize(90), height: scaleSize(40),
marginRight: scaleSize(20), marginRight: scaleSize(20),
resizeMode: 'contain', resizeMode: 'contain',
}, },
text: { text: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: setSpText(65), fontSize: setSpText(35),
}, },
phone: { phone: {
width: scaleSize(80), width: scaleSize(40),
height: scaleSize(80), height: scaleSize(40),
marginRight: scaleSize(15), marginRight: scaleSize(25),
resizeMode: 'contain', resizeMode: 'contain',
}, },
face: { face: {
...@@ -720,10 +743,10 @@ const styles = { ...@@ -720,10 +743,10 @@ const styles = {
zIndex: 2, zIndex: 2,
}, },
btnCome: { btnCome: {
flex: 0.15, flex: 0.13,
backgroundColor: 'rgb(0,205,102)', backgroundColor: 'rgb(0,205,102)',
width: '80%', width: '85%',
borderRadius: 30, borderRadius: 20,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
...@@ -735,21 +758,25 @@ const styles = { ...@@ -735,21 +758,25 @@ const styles = {
justifyContent: 'center', justifyContent: 'center',
}, },
clickText: { clickText: {
fontSize: setSpText(70), fontSize: setSpText(50),
color: '#fff', color: '#fff',
marginLeft: 10,
}, },
wxpay: { wxpay: {
width: scaleSize(90), width: scaleSize(70),
height: scaleSize(80), height: scaleSize(62),
marginRight: scaleSize(20), marginRight: scaleSize(20),
}, },
up: { finger: {
width: scaleSize(180), width: scaleSize(60),
height: scaleSize(200), height: scaleSize(80),
marginLeft: 100,
marginRight: 20,
}, },
footer: { footer: {
flex: 0.2, flex: 0.2,
width: '100%', width: '100%',
flexDirection: 'row',
backgroundColor: 'rgb(68, 197, 114)', backgroundColor: 'rgb(68, 197, 114)',
}, },
call: { call: {
...@@ -757,18 +784,22 @@ const styles = { ...@@ -757,18 +784,22 @@ const styles = {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginTop: scaleSize(20),
}, },
callGif: { callGif: {
width: scaleSize(500), width: scaleSize(300),
height: scaleSize(320), height: scaleSize(150),
marginLeft: scaleSize(-240), marginLeft: scaleSize(-100),
marginTop: scaleSize(80),
}, },
callText: { callText: {
fontSize: setSpText(150), fontSize: setSpText(70),
color: '#fff', color: '#fff',
marginTop: setSpText(80),
marginLeft: setSpText(-70),
}, },
onCall: { onCall: {
flex: 0.2, flex: 0.7,
width: '100%', width: '100%',
// backgroundColor: '#44c571', // backgroundColor: '#44c571',
backgroundColor: 'rgb(68, 197, 114)', backgroundColor: 'rgb(68, 197, 114)',
...@@ -777,9 +808,25 @@ const styles = { ...@@ -777,9 +808,25 @@ const styles = {
alignItems: 'center', alignItems: 'center',
}, },
onCallText: { onCallText: {
fontSize: setSpText(85), fontSize: setSpText(60),
color: '#fff', color: '#fff',
marginLeft: scaleSize(-100), paddingTop: scaleSize(30),
paddingLeft: scaleSize(-30),
},
footercall: {
flex: 0.7,
borderRightColor: '#fff',
borderRightWidth: 2,
},
goFoot: {
flex: 0.3,
justifyContent: 'center',
alignItems: 'center',
},
goText: {
color: '#fff',
fontSize: setSpText(40),
paddingTop: scaleSize(10),
}, },
}; };
......
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