Skip to content

B
bh_face_counter
Commit e83451ae by 修福龙
Options

适配马里奥设备

parent e8ffded3
Showing with 237 additions and 123 deletions
src/components/OrderDetailsModal.js
......@@ -7,6 +7,7 @@ import {font} from '../utils/common';
import Touch from './Touch';
import NP from '../utils/np';
import phone from '../assets/Vertical/phone.png';
import {width} from '../utils/screen';
let pageSize = 6; // 分页大小
......@@ -21,6 +22,57 @@ const mStyles = {
},
};
// const goodsArr = [
// {
// name: '百事可乐',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// {
// name: '百事可乐车时断时续测试市场上',
// price: 10,
// prePrice: 12,
// num: 1,
// },
// ];
class OrderDetailsModal extends Component {
state = {
conatct: '',
......@@ -114,6 +166,7 @@ class OrderDetailsModal extends Component {
onCall,
customerPhone,
current,
faceType,
...props
} = this.props;
const {contact, storeName} = this.state;
......@@ -144,6 +197,15 @@ class OrderDetailsModal extends Component {
'****' +
customerPhone.substring(customerPhone.length - 4, customerPhone.length);
}
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
styles.footer = {...styles.footer, backgroundColor: '#1b7dc7'};
styles.onCall = {...styles.onCall, backgroundColor: '#1b7dc7'};
styles.customerPhone = {
...styles.customerPhone,
backgroundColor: '#1E90FF',
};
}
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modal}>
......@@ -158,7 +220,11 @@ class OrderDetailsModal extends Component {
</View>
<View style={styles.right}>
<Touch onPress={() => onClose()}>
<Icon name="md-close" color={'#FFFFFF'} size={50} />
<Icon
name="md-close"
color={'#FFFFFF'}
size={width > 471 ? 50 : 35}
/>
</Touch>
<Text style={styles.text}>{contact}</Text>
<Image style={styles.phone} source={phone} />
......@@ -282,7 +348,11 @@ class OrderDetailsModal 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>
......@@ -290,7 +360,11 @@ class OrderDetailsModal extends Component {
) : talkCall === 0 ? (
<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>
......@@ -302,7 +376,11 @@ class OrderDetailsModal extends Component {
feedback={false}>
<View style={styles.call}>
<Image
source={require('../assets/call.gif')}
source={
faceType === 'wxpay'
? require('../assets/call.gif')
: require('../assets/call_blue.gif')
}
style={styles.callGif}
/>
<Text style={styles.callText}>呼叫客服</Text>
......@@ -330,16 +408,16 @@ const styles = {
backgroundColor: 'rgb(0,205,102)',
width: '100%',
flexDirection: 'column',
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
// borderTopRightRadius: 10,
// // borderTopLeftRadius: 10,
},
title: {
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 30,
marginRight: 30,
marginTop: 10,
marginBottom: 10,
marginLeft: width > 471 ? 30 : 15,
marginRight: width > 471 ? 30 : 15,
marginTop: width > 471 ? 10 : 5,
marginBottom: width > 471 ? 10 : 5,
},
left: {
flexDirection: 'row',
......@@ -350,15 +428,21 @@ const styles = {
alignItems: 'center',
},
img: {
width: 60,
height: 60,
marginRight: 10,
width: width > 471 ? 60 : 40,
height: width > 471 ? 60 : 40,
marginRight: width > 471 ? 10 : 8,
resizeMode: 'contain',
},
text: {
color: '#FFFFFF',
fontSize: 35,
marginRight: 30,
fontSize: width > 471 ? 35 : 28,
marginRight: width > 471 ? 30 : 24,
},
phone: {
width: width > 471 ? 40 : 30,
height: width > 471 ? 40 : 30,
marginRight: width > 471 ? 10 : 5,
resizeMode: 'contain',
},
headline: {
flexDirection: 'row',
......@@ -367,7 +451,7 @@ const styles = {
flex: 1,
},
headTitle: {
fontSize: 60,
fontSize: width > 471 ? 60 : 48,
color: '#fff',
},
customerPhone: {
......@@ -378,10 +462,15 @@ const styles = {
marginLeft: '5%',
marginRight: '5%',
marginBottom: '2%',
paddingTop: 10,
paddingBottom: 10,
paddingTop: width > 471 ? 10 : 8,
paddingBottom: width > 471 ? 10 : 8,
elevation: 3,
},
number: {
color: '#FFFFFF',
fontSize: width > 471 ? 30 : 24,
marginRight: width > 471 ? 30 : 24,
},
container: {
flex: 0.6,
width: '100%',
......@@ -400,11 +489,11 @@ const styles = {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: 10,
margin: width > 471 ? 10 : 8,
},
empty: {
flexDirection: 'row',
margin: 10,
margin: width > 471 ? 10 : 8,
},
emptyImg: {
width: 400,
......@@ -412,7 +501,7 @@ const styles = {
resizeMode: 'contain',
},
tips: {
fontSize: 30,
fontSize: width > 471 ? 30 : 20,
// color: '#8B8989',
color: 'red',
},
......@@ -428,31 +517,31 @@ const styles = {
justifyContent: 'center',
},
paginationText: {
fontSize: 40,
fontSize: width > 471 ? 40 : 32,
},
imgPagination: {
width: 50,
height: 50,
width: width > 471 ? 50 : 40,
height: width > 471 ? 50 : 40,
},
firstThStyle: {
width: '40%',
alignItems: 'flex-start',
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 10,
paddingRight: 10,
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
marginLeft: '10%',
},
ThStyle: {
width: '20%',
alignItems: 'center',
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 10,
paddingRight: 10,
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
},
ThText: {
fontSize: 30,
fontSize: width > 471 ? 30 : 20,
},
oddCell: {
flexDirection: 'row',
......@@ -466,10 +555,10 @@ const styles = {
width: '40%',
justifyContent: 'center',
alignItems: 'flex-start',
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 10,
paddingRight: 10,
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
marginLeft: '5%',
},
TdStyle: {
......@@ -477,17 +566,17 @@ const styles = {
width: '20%',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 10,
paddingRight: 10,
paddingTop: width > 471 ? 14 : 10,
paddingBottom: width > 471 ? 14 : 10,
paddingLeft: width > 471 ? 10 : 8,
paddingRight: width > 471 ? 10 : 8,
},
TdText: {
fontSize: 20,
fontSize: width > 471 ? 20 : 16,
},
amount: {
flexDirection: 'column',
height: '25%',
height: width > 471 ? '25%' : '22%',
backgroundColor: '#FFF',
marginLeft: '2%',
marginRight: '2%',
......@@ -496,15 +585,15 @@ const styles = {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: 30,
marginRight: 30,
marginTop: 15,
marginLeft: width > 471 ? 30 : 20,
marginRight: width > 471 ? 30 : 20,
marginTop: width > 471 ? 15 : 8,
},
totalText: {
fontSize: 30,
fontSize: width > 471 ? 30 : 20,
},
discount: {
fontSize: 30,
fontSize: width > 471 ? 30 : 20,
color: 'red',
},
line: {
......@@ -515,7 +604,7 @@ const styles = {
},
realPay: {
flexDirection: 'column',
height: '16%',
height: width > 471 ? '16%' : '14%',
backgroundColor: '#FFF',
marginLeft: '2%',
marginRight: '2%',
......@@ -526,17 +615,6 @@ const styles = {
// backgroundColor: '#44c571',
backgroundColor: 'rgb(68,197,113)',
},
phone: {
width: 40,
height: 40,
marginRight: 10,
resizeMode: 'contain',
},
number: {
color: '#FFFFFF',
fontSize: 30,
marginRight: 30,
},
call: {
felx: 1,
flexDirection: 'row',
......@@ -544,14 +622,14 @@ const styles = {
alignItems: 'center',
},
callGif: {
width: 350,
height: 240,
marginLeft: -120,
width: width > 471 ? 350 : 240,
height: width > 471 ? 240 : 150,
marginLeft: width > 471 ? -120 : -96,
},
callText: {
fontSize: 70,
fontSize: width > 471 ? 70 : 56,
color: '#fff',
marginLeft: -50,
marginLeft: width > 471 ? -50 : -40,
},
onCall: {
flex: 0.2,
......@@ -563,9 +641,9 @@ const styles = {
alignItems: 'center',
},
onCallText: {
fontSize: 70,
fontSize: width > 471 ? 70 : 40,
color: '#fff',
marginLeft: -70,
marginLeft: width > 471 ? -70 : -56,
},
};
......
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