Skip to content

B
bh_face_counter
Commit e83451ae by 修福龙
Options

适配马里奥设备

parent e8ffded3
Showing with 237 additions and 123 deletions
src/components/PhoneModal.js
......@@ -6,6 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common';
import Touch from './Touch';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
const mStyles = {
...ModalStyles,
......@@ -70,8 +71,19 @@ class PhoneModal extends Component {
};
render() {
const {onCall, ...props} = this.props;
const {onCall, faceType, ...props} = this.props;
const {value} = this.state;
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.keyTouchOnSure = {
...styles.keyTouchOnSure,
backgroundColor: '#1b7dc7',
};
styles.keyTouchSure = {
...styles.keyTouchSure,
backgroundColor: '#87CEFA',
};
}
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modalBackgroundStyle}>
......@@ -101,7 +113,12 @@ class PhoneModal extends Component {
</View>
</View>
<View style={styles.container}>
<Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
<Text
style={{
color: 'red',
fontSize: width > 471 ? 45 : 32,
marginBottom: width > 471 ? 10 : 8,
}}>
请输入接收验证码的手机号
</Text>
<View
......@@ -115,7 +132,8 @@ class PhoneModal extends Component {
fontSize: 35,
width: '80%',
textAlign: 'center',
padding: 30,
padding: width > 471 ? 30 : 20,
color: '#000',
}}
placeholder="安全输入不留痕迹"
placeholderTextColor="lightgray"
......@@ -204,9 +222,9 @@ const styles = {
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 30,
marginRight: 30,
marginTop: 10,
marginLeft: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
marginTop: width > 471 ? 10 : 5,
},
left: {
flexDirection: 'row',
......@@ -215,18 +233,18 @@ const styles = {
right: {
flexDirection: 'row-reverse',
alignItems: 'center',
marginTop: 15,
marginTop: width > 471 ? 15 : 12,
},
img: {
width: 80,
height: 80,
marginRight: 10,
width: width > 471 ? 80 : 60,
height: width > 471 ? 80 : 60,
marginRight: width > 471 ? 10 : 5,
resizeMode: 'contain',
},
phone: {
width: 40,
height: 40,
marginRight: 10,
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 8,
resizeMode: 'contain',
},
image: {
......@@ -236,13 +254,13 @@ const styles = {
alignItems: 'center',
},
logo: {
width: 150,
height: 150,
width: width > 471 ? 150 : 120,
height: width > 471 ? 150 : 120,
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: 30,
fontSize: width > 471 ? 30 : 25,
},
container: {
flex: 0.2,
......@@ -355,7 +373,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnitClose: {
fontSize: 50,
fontSize: width > 471 ? 50 : 40,
color: '#FFFFFF',
},
};
......
src/components/VerifyCodeModal.js
......@@ -6,6 +6,7 @@ import ModalStyles from './Modal/styles';
import {colors, font} from '../utils/common';
import Touch from './Touch';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
const mStyles = {
...ModalStyles,
......@@ -79,8 +80,19 @@ class VerifyCodeModal extends Component {
};
render() {
const {onCall, ...props} = this.props;
const {onCall, faceType, ...props} = this.props;
const {value} = this.state;
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.keyTouchOnSure = {
...styles.keyTouchOnSure,
backgroundColor: '#1b7dc7',
};
styles.keyTouchSure = {
...styles.keyTouchSure,
backgroundColor: '#87CEFA',
};
}
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modalBackgroundStyle}>
......@@ -198,9 +210,9 @@ const styles = {
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 30,
marginRight: 30,
marginTop: 10,
marginLeft: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
marginTop: width > 471 ? 10 : 8,
},
left: {
flexDirection: 'row',
......@@ -209,18 +221,18 @@ const styles = {
right: {
flexDirection: 'row-reverse',
alignItems: 'center',
marginTop: 15,
marginTop: width > 471 ? 15 : 12,
},
img: {
width: 80,
height: 80,
marginRight: 10,
width: width > 471 ? 80 : 60,
height: width > 471 ? 80 : 60,
marginRight: width > 471 ? 10 : 5,
resizeMode: 'contain',
},
phone: {
width: 40,
height: 40,
marginRight: 10,
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 8,
resizeMode: 'contain',
},
image: {
......@@ -230,13 +242,13 @@ const styles = {
alignItems: 'center',
},
logo: {
width: 150,
height: 150,
width: width > 471 ? 150 : 120,
height: width > 471 ? 150 : 120,
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: 30,
fontSize: width > 471 ? 30 : 25,
},
container: {
flex: 0.3,
......@@ -247,8 +259,8 @@ const styles = {
},
tips: {
color: 'red',
fontSize: 45,
marginBottom: 10,
fontSize: width > 471 ? 45 : 32,
marginBottom: width > 471 ? 10 : 8,
textAlign: 'center',
},
codeView: {
......@@ -256,7 +268,7 @@ const styles = {
justifyContent: 'space-around',
alignItems: 'center',
flex: 0.5,
marginTop: 30,
marginTop: width > 471 ? 30 : 24,
},
code: {
height: '100%',
......@@ -370,7 +382,7 @@ const styles = {
marginHorizontal: 5,
},
keyUnitClose: {
fontSize: 50,
fontSize: width > 471 ? 50 : 40,
color: '#FFFFFF',
},
};
......
src/pages/CounterMixins.js
......@@ -140,7 +140,6 @@ const CounterMixins = ComposeComponent => {
}
window.socket.on('cmdOperate', this.command.bind(this));
window.socket.on('adsOperate', ({adsData}) => {
console.warn(adsData);
this.setState({
autoplayTime: Number(adsData.time),
imgArr: adsData[adsData.type],
......
src/pages/FacePage.js
......@@ -33,7 +33,7 @@ class FacePage extends Component {
tip: '',
tipsModal: false,
faceType: 'wxpay',
sleep: false,
sleep: true,
};
async componentWillMount() {
......@@ -393,8 +393,7 @@ class FacePage extends Component {
clearTimeout(this.wakeUpTimeout);
this.wakeUpTimeout = setTimeout(() => {
this.setState({sleep: true});
}, 60 * 60 * 1000);
// }, 18888);
}, 18888);
};
render() {
......@@ -411,9 +410,10 @@ class FacePage extends Component {
tip,
tipsModal,
sleep,
faceType,
} = this.state;
let {dispatch} = this.props;
if (this.state.faceType === 'alipay') {
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.btnCome = {...styles.btnCome, backgroundColor: '#1b7dc7'};
styles.footer = {...styles.footer, backgroundColor: '#1b7dc7'};
......@@ -431,6 +431,7 @@ class FacePage extends Component {
// onRequestClose={this.handleClose}
onCall={this.onCall}
onSubmit={this.onSubmit}
faceType={faceType}
/>
<VerifyCodeModal
visible={verifyCodeModal}
......@@ -440,6 +441,7 @@ class FacePage extends Component {
// onRequestClose={this.handleCodeClose}
onCall={this.onCall}
onSubmit={this.onCodeSubmit}
faceType={faceType}
/>
<OrderDetailsModal
visible={orderDetailsModal}
......@@ -455,6 +457,7 @@ class FacePage extends Component {
talkCall={talkCall}
customerPhone={customerPhone}
current={current}
faceType={faceType}
/>
<View style={styles.header}>
<View style={styles.title}>
......@@ -509,7 +512,7 @@ class FacePage extends Component {
<View style={styles.click}>
<Image
source={
this.state.faceType === 'wxpay'
faceType === 'wxpay'
? require('../assets/wxpay.png')
: require('../assets/Vertical/alipay01.png')
}
......@@ -525,7 +528,11 @@ class FacePage extends Component {
{talkCall === 1 ? (
<View style={styles.onCall}>
<Image
source={require('../assets/call.gif')}
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.onCallText}>正在语音通话中</Text>
......@@ -534,7 +541,7 @@ class FacePage extends Component {
<View style={styles.onCall}>
<Image
source={
this.state.faceType === 'wxpay'
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
......@@ -547,7 +554,7 @@ class FacePage extends Component {
<View style={styles.call}>
<Image
source={
this.state.faceType === 'wxpay'
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
......@@ -701,7 +708,7 @@ const styles = {
// flex: 0.2,
marginTop: '30%',
width: '100%',
height: 200,
height: width > 471 ? 200 : 160,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
......@@ -713,24 +720,24 @@ const styles = {
backgroundColor: '#FC4000',
width: '70%',
// height: '18%',
height: 200,
height: width > 471 ? 200 : 160,
justifyContent: 'center',
alignItems: 'center',
marginRight: 5,
},
tipText: {
fontSize: 40,
fontSize: width > 471 ? 40 : 32,
color: '#fff',
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
paddingTop: width > 471 ? 40 : 32,
paddingBottom: width > 471 ? 40 : 32,
paddingLeft: 5,
paddingRight: 5,
},
callTouch: {
width: '30%',
// height: '18%',
height: 200,
height: width > 471 ? 200 : 160,
marginLeft: 5,
backgroundColor: '#FC4000',
},
......@@ -744,17 +751,17 @@ const styles = {
// marginLeft: 5,
},
callTipsText: {
fontSize: 40,
fontSize: width > 471 ? 40 : 32,
color: '#fff',
textAlign: 'center',
paddingTop: 70,
paddingTop: width > 471 ? 70 : 56,
// paddingBottom: 40,
paddingLeft: 10,
paddingRight: 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
},
callTipsImg: {
width: 80,
height: 60,
width: width > 471 ? 80 : 64,
height: width > 471 ? 60 : 48,
},
};
......
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