Skip to content

B
bh_face_counter
Commit b447f4dc by 黄日华
Options

收银程序横屏兼容

parent 13c49085
Showing with 161 additions and 59 deletions
src/components/Layout.js
......@@ -3,13 +3,14 @@ import {Image, PanResponder, View, Text, Dimensions} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {connect} from 'react-redux';
import moment from 'moment';
import {width} from '../utils/screen';
import {colors} from '../utils/common';
import Modal from './Modal';
import Toast from './Toast';
import Touch from './Touch';
import {counterInterval} from '../utils/authInterval';
import {payTitle} from '../utils/config';
import Speech from '../utils/Speech';
import HintPhone from './Modal/HintPhone';
const weekdays = {
0: '周日',
......@@ -21,12 +22,16 @@ const weekdays = {
6: '周六',
};
@connect(({app}) => ({app}))
const {width, height} = Dimensions.get('window');
@connect(({app, agora}) => ({app, agora}))
class Layout extends React.Component {
state = {
hintVisible: false,
talkCall: 2, // 0请求通话，1通话中，2，已挂断通话，待机状态
count: window.defaultCount,
contact: '',
maskVisible: true,
maskVisible: false,
visibleActive: false,
dateInfo: `${moment().format('YYYY-M-D HH:mm')} ${
weekdays[Number(moment().day())]
......@@ -129,10 +134,46 @@ class Layout extends React.Component {
}
};
onCall = async () => {
const {talkCall} = this.state;
if (talkCall === 2) {
this.setState({
talkCall: 0,
});
Speech.speak('正在接通中请稍候');
this.talkCall();
}
this.setState({
hintVisible: true,
});
clearTimeout(this.callModalTimeout);
this.callModalTimeout = setTimeout(() => {
this.closeHint();
}, 60000);
};
talkCall = () => {
this.props.dispatch({
type: 'agora/talkCall',
});
};
closeHint = () => {
this.setState({
hintVisible: false,
talkCall: 2,
});
};
render() {
const {width, height} = Dimensions.get('window');
const {children} = this.props;
let {contact, maskVisible, dateInfo, visibleActive} = this.state;
let {
contact,
maskVisible,
dateInfo,
visibleActive,
hintVisible,
} = this.state;
contact = contact || '未授权';
return (
<View
......@@ -185,6 +226,7 @@ class Layout extends React.Component {
source={require('../assets/zmgo_title.png')}
/>
)}
<Touch onPress={() => this.onCall()} style={styles.navRight}>
<View style={styles.navRight}>
<Image
source={require('../assets/phone_icon.png')}
......@@ -198,13 +240,14 @@ class Layout extends React.Component {
<Text
style={{
color: '#F5AB61',
fontSize: 32,
fontSize: 28,
fontWeight: 'bold',
marginRight: 20,
}}>
{contact}
呼叫客服
</Text>
</View>
</Touch>
</View>
{maskVisible ? (
<View style={styles.navMask}>
......@@ -245,9 +288,21 @@ class Layout extends React.Component {
) : (
<View style={{display: 'none'}} />
)}
<View style={{flexDirection: 'row', flex: 1, zIndex: 9}}>
<View style={{flex: 1, margin: 10}}>{children}</View>
<View style={{flexDirection: 'row', flex: 1, zIndex: 9, padding: 0}}>
<View
style={{
flex: 1,
margin: 0,
padding: 10,
}}>
{children}
</View>
</View>
<HintPhone
visible={hintVisible}
contact={contact}
closeHint={this.closeHint}
/>
</View>
);
}
......
src/components/Modal/HintPhone.js 0 → 100644
import React from 'react';
import {Image, Modal, Text, View} from 'react-native';
import Touch from '../Touch';
import call from '../../assets/Vertical/call.png';
import {scaleSize, width} from '../../utils/screen';
class HintPhone extends React.Component {
render() {
let {visible, contact, closeHint} = this.props;
return (
<Modal visible={visible} transparent>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Touch
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, .5)',
position: 'absolute',
top: 0,
left: 0,
}}
onPress={closeHint}>
<View />
</Touch>
<View style={styles.HintPhone}>
<View style={{backgroundColor: '#ccc', padding: 0}}>
<Image
style={{
width: width > 801 ? width * 0.2 : width * 0.4,
height: width > 801 ? width * 0.17 : width * 0.34,
}}
resizeMode="contain"
source={call}
/>
</View>
<Text
style={{
fontSize: scaleSize(width > 801 ? width * 0.02 : width * 0.04),
}}>
正在呼叫客服
</Text>
<View style={{display: 'flex', marginTop: 10}}>
<Text
style={{
fontSize: scaleSize(
width > 801 ? width * 0.015 : width * 0.03,
),
color: '#FC4000',
}}>
客服长时间未接通，可拨打电话: {contact}
</Text>
</View>
<Touch onPress={closeHint}>
<View
style={{
width: scaleSize(width > 801 ? width * 0.12 : width * 0.24),
height: scaleSize(width > 801 ? width * 0.05 : width * 0.1),
borderRadius: 100,
backgroundColor: '#fc4000',
marginTop: 20,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: '#ffffff',
fontSize: scaleSize(
width > 801 ? width * 0.016 : width * 0.032,
),
}}>
关闭弹窗
</Text>
</View>
</Touch>
</View>
</View>
</Modal>
);
}
}
const styles = {
HintPhone: {
width: width > 801 ? width * 0.5 : width * 0.8,
height: width > 801 ? width * 0.35 : width * 0.55,
backgroundColor: '#ffffff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
opacity: 40,
},
};
export default HintPhone;
src/pages/AuthPage.js
......@@ -38,7 +38,7 @@ class AuthPage extends Component {
<HomeLayout>
<View style={styles.qrcode}>
<QRCode
size={isLandscape ? scaleSize(420) : scaleSize(700)}
size={isLandscape ? scaleSize(320) : scaleSize(700)}
logo={require('../assets/logo.png')}
backgroundColor="white"
value={`${config.qrHost}/#/store-auth-${socket}`}
......
src/pages/VerticalPage.js
......@@ -14,7 +14,6 @@ import counterText from '../assets/Vertical/counterText.png';
import img24h from '../assets/Vertical/24h.png';
import phone from '../assets/Vertical/phone.png';
import guide from '../assets/Vertical/guide.jpg';
import call from '../assets/Vertical/call.png';
import {login} from '../utils/config';
import {colors} from '../utils/common';
import WxFacepay from '../utils/WxFacepay';
......@@ -25,6 +24,7 @@ import {
scaleHeight,
// height,
} from '../utils/screen';
import HintPhone from '../components/Modal/HintPhone';
import Speech from '../utils/Speech';
import delay from '../utils/delay';
import Printer from '../utils/Printer';
......@@ -390,7 +390,6 @@ class VerticalPage extends Component {
};
talkCall = () => {
console.warn('talkCall：' + this.state.talkCall);
this.props.dispatch({
type: 'agora/talkCall',
});
......@@ -1279,53 +1278,6 @@ class VerticalPage extends Component {
}
}
class HintPhone extends React.Component {
render() {
let {visible, contact, closeHint} = this.props;
return (
<Modal visible={visible} transparent>
<View>
<Touch
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, .5)',
}}
onPress={closeHint}>
<View />
</Touch>
<View style={styles.HintPhone}>
<Image style={{width: '60%', height: '60%'}} source={call} />
<Text style={{fontSize: scaleSize(30)}}>正在呼叫客服</Text>
<View style={{display: 'flex', marginTop: 10}}>
<Text style={{fontSize: scaleSize(25), color: '#FC4000'}}>
如无法接通客服，可拨打电话: {contact}
</Text>
</View>
<Touch onPress={closeHint}>
<View
style={{
width: scaleSize(300),
height: scaleSize(100),
borderRadius: 100,
backgroundColor: '#fc4000',
marginTop: 20,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{color: '#ffffff', fontSize: scaleSize(36)}}>
关闭弹窗
</Text>
</View>
</Touch>
</View>
</View>
</Modal>
);
}
}
const styles = {
HintPhone: {
width: width > 801 ? '50%' : '80%',
......
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