Skip to content

B
bh_face_counter
Commit b447f4dc by 黄日华
Options

收银程序横屏兼容

parent 13c49085
Showing with 179 additions and 77 deletions
src/components/Layout.js
...@@ -3,13 +3,14 @@ import {Image, PanResponder, View, Text, Dimensions} from 'react-native'; ...@@ -3,13 +3,14 @@ import {Image, PanResponder, View, Text, Dimensions} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage'; import AsyncStorage from '@react-native-community/async-storage';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import moment from 'moment'; import moment from 'moment';
import {width} from '../utils/screen';
import {colors} from '../utils/common'; import {colors} from '../utils/common';
import Modal from './Modal'; import Modal from './Modal';
import Toast from './Toast'; import Toast from './Toast';
import Touch from './Touch'; import Touch from './Touch';
import {counterInterval} from '../utils/authInterval'; import {counterInterval} from '../utils/authInterval';
import {payTitle} from '../utils/config'; import {payTitle} from '../utils/config';
import Speech from '../utils/Speech';
import HintPhone from './Modal/HintPhone';
const weekdays = { const weekdays = {
0: '周日', 0: '周日',
...@@ -21,12 +22,16 @@ const weekdays = { ...@@ -21,12 +22,16 @@ const weekdays = {
6: '周六', 6: '周六',
}; };
@connect(({app}) => ({app})) const {width, height} = Dimensions.get('window');
@connect(({app, agora}) => ({app, agora}))
class Layout extends React.Component { class Layout extends React.Component {
state = { state = {
hintVisible: false,
talkCall: 2, // 0请求通话，1通话中，2，已挂断通话，待机状态
count: window.defaultCount, count: window.defaultCount,
contact: '', contact: '',
maskVisible: true, maskVisible: false,
visibleActive: false, visibleActive: false,
dateInfo: `${moment().format('YYYY-M-D HH:mm')} ${ dateInfo: `${moment().format('YYYY-M-D HH:mm')} ${
weekdays[Number(moment().day())] weekdays[Number(moment().day())]
...@@ -129,10 +134,46 @@ class Layout extends React.Component { ...@@ -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() { render() {
const {width, height} = Dimensions.get('window');
const {children} = this.props; const {children} = this.props;
let {contact, maskVisible, dateInfo, visibleActive} = this.state; let {
contact,
maskVisible,
dateInfo,
visibleActive,
hintVisible,
} = this.state;
contact = contact || '未授权'; contact = contact || '未授权';
return ( return (
<View <View
...@@ -185,26 +226,28 @@ class Layout extends React.Component { ...@@ -185,26 +226,28 @@ class Layout extends React.Component {
source={require('../assets/zmgo_title.png')} source={require('../assets/zmgo_title.png')}
/> />
)} )}
<View style={styles.navRight}> <Touch onPress={() => this.onCall()} style={styles.navRight}>
<Image <View style={styles.navRight}>
source={require('../assets/phone_icon.png')} <Image
style={{ source={require('../assets/phone_icon.png')}
width: 36, style={{
height: 36, width: 36,
marginRight: 5, height: 36,
resizeMode: 'contain', marginRight: 5,
}} resizeMode: 'contain',
/> }}
<Text />
style={{ <Text
color: '#F5AB61', style={{
fontSize: 32, color: '#F5AB61',
fontWeight: 'bold', fontSize: 28,
marginRight: 20, fontWeight: 'bold',
}}> marginRight: 20,
{contact} }}>
</Text> 呼叫客服
</View> </Text>
</View>
</Touch>
</View> </View>
{maskVisible ? ( {maskVisible ? (
<View style={styles.navMask}> <View style={styles.navMask}>
...@@ -245,9 +288,21 @@ class Layout extends React.Component { ...@@ -245,9 +288,21 @@ class Layout extends React.Component {
) : ( ) : (
<View style={{display: 'none'}} /> <View style={{display: 'none'}} />
)} )}
<View style={{flexDirection: 'row', flex: 1, zIndex: 9}}> <View style={{flexDirection: 'row', flex: 1, zIndex: 9, padding: 0}}>
<View style={{flex: 1, margin: 10}}>{children}</View> <View
style={{
flex: 1,
margin: 0,
padding: 10,
}}>
{children}
</View>
</View> </View>
<HintPhone
visible={hintVisible}
contact={contact}
closeHint={this.closeHint}
/>
</View> </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 { ...@@ -38,7 +38,7 @@ class AuthPage extends Component {
<HomeLayout> <HomeLayout>
<View style={styles.qrcode}> <View style={styles.qrcode}>
<QRCode <QRCode
size={isLandscape ? scaleSize(420) : scaleSize(700)} size={isLandscape ? scaleSize(320) : scaleSize(700)}
logo={require('../assets/logo.png')} logo={require('../assets/logo.png')}
backgroundColor="white" backgroundColor="white"
value={`${config.qrHost}/#/store-auth-${socket}`} value={`${config.qrHost}/#/store-auth-${socket}`}
......
src/pages/VerticalPage.js
...@@ -14,7 +14,6 @@ import counterText from '../assets/Vertical/counterText.png'; ...@@ -14,7 +14,6 @@ import counterText from '../assets/Vertical/counterText.png';
import img24h from '../assets/Vertical/24h.png'; import img24h from '../assets/Vertical/24h.png';
import phone from '../assets/Vertical/phone.png'; import phone from '../assets/Vertical/phone.png';
import guide from '../assets/Vertical/guide.jpg'; import guide from '../assets/Vertical/guide.jpg';
import call from '../assets/Vertical/call.png';
import {login} from '../utils/config'; import {login} from '../utils/config';
import {colors} from '../utils/common'; import {colors} from '../utils/common';
import WxFacepay from '../utils/WxFacepay'; import WxFacepay from '../utils/WxFacepay';
...@@ -25,6 +24,7 @@ import { ...@@ -25,6 +24,7 @@ import {
scaleHeight, scaleHeight,
// height, // height,
} from '../utils/screen'; } from '../utils/screen';
import HintPhone from '../components/Modal/HintPhone';
import Speech from '../utils/Speech'; import Speech from '../utils/Speech';
import delay from '../utils/delay'; import delay from '../utils/delay';
import Printer from '../utils/Printer'; import Printer from '../utils/Printer';
...@@ -390,7 +390,6 @@ class VerticalPage extends Component { ...@@ -390,7 +390,6 @@ class VerticalPage extends Component {
}; };
talkCall = () => { talkCall = () => {
console.warn('talkCall：' + this.state.talkCall);
this.props.dispatch({ this.props.dispatch({
type: 'agora/talkCall', type: 'agora/talkCall',
}); });
...@@ -1279,53 +1278,6 @@ class VerticalPage extends Component { ...@@ -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 = { const styles = {
HintPhone: { HintPhone: {
width: width > 801 ? '50%' : '80%', 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