Skip to content

B
bh_face_counter
Commit b447f4dc by 黄日华
Options

收银程序横屏兼容

parent 13c49085
Showing with 261 additions and 137 deletions
src/assets/payment_code.gif
src/assets/payment_code.gif

3.51 MB | W: | H:

src/assets/payment_code.gif

2.19 MB | W: | H:

src/assets/payment_code.gif
src/assets/payment_code.gif
src/assets/payment_code.gif
src/assets/payment_code.gif
  • 2-up
  • Swipe
  • Onion skin
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,26 +226,28 @@ class Layout extends React.Component {
source={require('../assets/zmgo_title.png')}
/>
)}
<View style={styles.navRight}>
<Image
source={require('../assets/phone_icon.png')}
style={{
width: 36,
height: 36,
marginRight: 5,
resizeMode: 'contain',
}}
/>
<Text
style={{
color: '#F5AB61',
fontSize: 32,
fontWeight: 'bold',
marginRight: 20,
}}>
{contact}
</Text>
</View>
<Touch onPress={() => this.onCall()} style={styles.navRight}>
<View style={styles.navRight}>
<Image
source={require('../assets/phone_icon.png')}
style={{
width: 36,
height: 36,
marginRight: 5,
resizeMode: 'contain',
}}
/>
<Text
style={{
color: '#F5AB61',
fontSize: 28,
fontWeight: 'bold',
marginRight: 20,
}}>
呼叫客服
</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/HomePage.js
......@@ -11,32 +11,32 @@ import {colors, font} from '../utils/common';
import {login, payScancodeTitle} from '../utils/config';
import NP from '../utils/np';
const {width, height} = Dimensions;
const {width, height} = Dimensions.get('window');
const pageSize = width > height ? 8 : 5; // 分页大小
window.pageSize = pageSize;
class HomePage extends React.Component {
getGoodsArr = goodsArr => {
let {current} = this.props;
let {current, numRemove, numAdd, removeIndex, numChange} = this.props;
let gaTemp = goodsArr.slice((current - 1) * pageSize, current * pageSize);
return gaTemp.map((item, index) => (
<GoodsItem
key={index}
item={item}
index={index + (current - 1) * pageSize}
numRemove={this.props.numRemove}
numAdd={this.props.numAdd}
removeIndex={this.props.removeIndex}
numChange={this.props.numChange}
numRemove={numRemove}
numAdd={numAdd}
removeIndex={removeIndex}
numChange={numChange}
/>
));
};
getPagination = goodsArr => {
let {current} = this.props;
let {current, dropUp, dropDown} = this.props;
let goodsLength = Math.ceil(parseFloat(goodsArr.length / pageSize));
return (
<View style={styles.pagination}>
<Touch onPress={() => this.props.dropUp()} feddback={false}>
<Touch onPress={() => dropUp()} feddback={false}>
<Icon
name="ios-arrow-dropup"
color={current > 1 ? '#EA460F' : '#DEDEDE'}
......@@ -46,9 +46,7 @@ class HomePage extends React.Component {
<Text style={{fontSize: font.textS, marginVertical: 10}}>
{current}/{goodsLength}
</Text>
<Touch
onPress={() => this.props.dropDown(goodsLength)}
feddback={false}>
<Touch onPress={() => dropDown(goodsLength)} feddback={false}>
<Icon
name="ios-arrow-dropdown"
color={current < goodsLength ? '#EA460F' : '#DEDEDE'}
......@@ -60,9 +58,17 @@ class HomePage extends React.Component {
};
render() {
const {width, height} = Dimensions.get('window');
const isLandscape = width > height;
let {admin, goods, goodsArr, qrHost} = this.props;
let {
admin,
goods,
goodsArr,
qrHost,
handleBarcode,
handleCodeless,
clearList,
pushBag,
} = this.props;
let total = 0; // 总数量
let totalPrice = 0; // 总价
let totalCount = 0; // 总优惠
......@@ -96,7 +102,7 @@ class HomePage extends React.Component {
}}>
<View style={{flex: 1}}>
<View style={landscapeStyles.clTop}>
<View style={{screenWidth: 38}} />
<View style={{width: 38}} />
<View style={{flex: 1, flexDirection: 'row'}}>
<Text
style={{
......@@ -112,7 +118,7 @@ class HomePage extends React.Component {
flex: 0.25,
textAlign: 'right',
}}>
单价:
单价
</Text>
<Text
style={{
......@@ -131,17 +137,13 @@ class HomePage extends React.Component {
金额
</Text>
</View>
<View
style={{screenWidth: 50, backgroundColor: '#cccccc'}}
/>
<View style={{width: 50}} />
</View>
<View style={landscapeStyles.cltScroll}>
{this.getGoodsArr(goodsArr)}
</View>
</View>
<View style={{screenWidth: 70}}>
{this.getPagination(goodsArr)}
</View>
<View style={{width: 70}}>{this.getPagination(goodsArr)}</View>
</View>
<View
style={{
......@@ -157,7 +159,7 @@ class HomePage extends React.Component {
return (
<Touch
key={k}
onPress={() => this.props.pushBag(k)}
onPress={() => pushBag(k)}
style={[
landscapeStyles.bagButton,
{marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
......@@ -181,7 +183,6 @@ class HomePage extends React.Component {
}}>
<View
style={{
borderLeftscreenWidth: 1,
borderLeftColor: '#cccccc',
flex: 1,
flexDirection: 'row',
......@@ -214,11 +215,11 @@ class HomePage extends React.Component {
</View>
</View>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View style={landscapeStyles.contRight}>
<View
style={{
display: 'flex',
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 3,
......@@ -226,9 +227,10 @@ class HomePage extends React.Component {
}}>
<View
style={{
display: 'flex',
flex: 1,
backgroundColor: '#00be34',
paddingTop: 15,
paddingBottom: 20,
paddingVertical: 15,
justifyContent: 'center',
alignItems: 'center',
}}>
......@@ -241,24 +243,33 @@ class HomePage extends React.Component {
}}>
{payScancodeTitle}
</Text>
<View style={{padding: 15, backgroundColor: 'white'}}>
<QRCode
logoSize={40}
// logoBackgroundColor="#fc4000"
logo={require('../assets/logo.png')}
size={100}
value={`${qrHost || login}/#/counter-order-${
admin.socket
}`}
/>
<View
style={{
flex: 1,
marginTop: 10,
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{padding: 10, backgroundColor: '#fff'}}>
<QRCode
logoSize={height * 0.07}
logo={require('../assets/logo.png')}
size={height * 0.2}
value={`${qrHost || login}/#/counter-order-${
admin.socket
}`}
/>
</View>
</View>
</View>
<View
style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#FC4000',
marginTop: 10,
alignItems: 'center',
paddingTop: 15,
}}>
<Text
style={{
......@@ -269,11 +280,18 @@ class HomePage extends React.Component {
}}>
微信、支付宝付款码付款
</Text>
<Image
style={{flex: 1}}
resizeMode={'contain'}
source={require('../assets/payment_code.gif')}
/>
<View
style={{
width: '100%',
backgroundColor: '#ccc',
marginTop: 10,
}}>
<Image
style={{width: '100%', height: height * 0.25}}
resizeMode="stretch"
source={require('../assets/payment_code.gif')}
/>
</View>
</View>
</View>
<View
......@@ -287,23 +305,31 @@ class HomePage extends React.Component {
paddingHorizontal: 15,
}}>
<Touch
onPress={() => this.props.handleBarcode()}
onPress={() => handleBarcode()}
style={[landscapeStyles.button, {marginRight: 10}]}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
</Touch>
<Touch
// onPress={this.props.handleCodeless()}
onPress={() => handleCodeless()}
style={landscapeStyles.button}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入价格</Text>
</Touch>
<Touch
onPress={this.props.clearList}
style={(landscapeStyles.button)}>
<Icon name="ios-trash" color={'#FFFFFF'} size={36} />
{/*<Text style={{color: '#ffffff', fontSize: 18}}>重新开始</Text>*/}
onPress={() => clearList()}
style={{
width: 50,
height: 46,
backgroundColor: '#FC4000',
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
}}>
<Image
style={{width: 25, height: 25, resizeMode: 'contain'}}
source={require('../assets/car_clear.png')}
/>
</Touch>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
</View>
</Layout>
......@@ -386,7 +412,7 @@ class HomePage extends React.Component {
return (
<Touch
key={k}
onPress={() => this.props.pushBag(k)}
onPress={() => pushBag(k)}
style={[
styles.bagButton,
{marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
......@@ -514,11 +540,11 @@ class HomePage extends React.Component {
paddingHorizontal: 15,
}}>
<Touch
onPress={() => this.props.handleBarcode()}
onPress={() => handleBarcode()}
style={[styles.button, {marginRight: 15}]}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
</Touch>
<Touch onPress={this.props.clearList} style={styles.button}>
<Touch onPress={() => clearList()} style={styles.button}>
<Text style={{color: '#ffffff', fontSize: 18}}>重新开始</Text>
</Touch>
</View>
......@@ -563,16 +589,12 @@ const landscapeStyles = {
paddingTop: 5,
},
cont: {
height: '105%',
backgroundColor: '#333',
flex: 1,
flexDirection: 'row',
position: 'relative',
},
contLeft: {
flex: 7,
overflow: 'hidden',
backgroundColor: '#2E2E2E',
position: 'relative',
// backgroundColor: '#2E2E2E',
marginRight: 10,
},
pagination: {
......@@ -586,7 +608,7 @@ const landscapeStyles = {
contRight: {
flex: 3,
borderRadius: 3,
backgroundColor: '#2E2E2E',
// backgroundColor: '#2E2E2E',
},
amount: {
flex: 1,
......
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