Skip to content

B
bh_face_counter
Commit 65e84309 by htc
Options

横屏适配

parent 0b3f139a
Showing with 610 additions and 197 deletions
src/components/HomeLayout.js
import React, {Component} from 'react';
import {Image, Text, View} from 'react-native';
import {Dimensions, Image, Text, View} from 'react-native';
import {appName} from '../utils/config';
import {setSpText, scaleSize} from '../utils/screen';
......@@ -24,7 +24,38 @@ class HomeLayout extends Component {
);
}
}
const styles = {
const LandscapeStyles = {
title: {
top: 0,
paddingLeft: scaleSize(50),
flexDirection: 'row',
height: scaleSize(110), // 修改了这里
width: '100%',
position: 'absolute',
backgroundColor: 'white',
alignItems: 'center',
elevation: 10,
background: '#f5f5f5',
},
titleImg: {
width: scaleSize(75), // 修改了这里
height: scaleSize(75), // 修改了这里
},
titleText: {
color: '#333',
fontSize: setSpText(60),
marginLeft: 30,
},
container: {
flex: 1,
backgroundColor: '#ffffff',
justifyContent: 'center',
alignItems: 'center',
},
};
const portraitStyles = {
title: {
top: 0,
paddingLeft: scaleSize(50),
......@@ -54,4 +85,10 @@ const styles = {
},
};
const {width, height} = Dimensions.get('window');
const isLandscape = width > height;
const styles = isLandscape ? LandscapeStyles : portraitStyles;
export default HomeLayout;
src/components/Layout.js
import React from 'react';
import {Image, PanResponder, View, Text} from 'react-native';
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';
......@@ -9,6 +9,7 @@ import Modal from './Modal';
import Toast from './Toast';
import Touch from './Touch';
import {counterInterval} from '../utils/authInterval';
import {payTitle} from '../utils/config';
const weekdays = {
0: '周日',
......@@ -129,6 +130,7 @@ class Layout extends React.Component {
};
render() {
const {width, height} = Dimensions.get('window');
const {children} = this.props;
let {contact, maskVisible, dateInfo, visibleActive} = this.state;
contact = contact || '未授权';
......@@ -138,10 +140,21 @@ class Layout extends React.Component {
style={{flex: 1, backgroundColor: '#333'}}>
<View style={styles.navBar}>
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
<Image
source={require('../assets/zmgo_icon.png')}
style={styles.navLogo}
/>
{width > height ? (
<Image
source={require('../assets/logo.png')}
style={{
width: 70,
height: 70,
marginLeft: 15,
}}
/>
) : (
<Image
source={require('../assets/zmgo_icon.png')}
style={styles.navLogo}
/>
)}
<View
style={{
justifyContent: 'flex-end',
......@@ -162,10 +175,16 @@ class Layout extends React.Component {
</View>
</View>
</View>
<Image
style={{width: 325, height: 36, resizeMode: 'contain'}}
source={require('../assets/zmgo_title.png')}
/>
{width > height ? (
<Text style={{color: 'white', fontSize: 40, fontWeight: '700'}}>
{payTitle}
</Text>
) : (
<Image
style={{width: 325, height: 36, resizeMode: 'contain'}}
source={require('../assets/zmgo_title.png')}
/>
)}
<View style={styles.navRight}>
<Image
source={require('../assets/phone_icon.png')}
......
src/pages/AuthPage.js
import React, {Component} from 'react';
import {View} from 'react-native';
import {View, Dimensions} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import io from 'socket.io-client';
import axios from 'axios';
......@@ -9,9 +9,13 @@ import HomeLayout from '../components/HomeLayout';
import {setSpText, scaleSize} from '../utils/screen';
class AuthPage extends Component {
state = {};
state = {
isLandscape: false,
};
async componentDidMount() {
const {width, height} = Dimensions.get('window');
this.setState({isLandscape: width > height});
this.socket = io(axios.defaults.baseURL);
this.socket.on('storeAuth', this.handleLogin);
this.socket.on('connect', () => {
......@@ -29,12 +33,12 @@ class AuthPage extends Component {
};
render() {
const {socket} = this.state;
const {socket, isLandscape} = this.state;
return (
<HomeLayout>
<View style={styles.qrcode}>
<QRCode
size={scaleSize(700)}
size={isLandscape ? scaleSize(420) : scaleSize(700)}
logo={require('../assets/logo.png')}
backgroundColor="white"
value={`${config.qrHost}/#/store-auth-${socket}`}
......
src/pages/HomePage.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import {View, Text, Image, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import QRCode from 'react-native-qrcode-svg';
import CounterMixins from './CounterMixins';
import Layout from '../components/Layout';
import Touch from '../components/Touch';
import {width} from '../utils/screen';
import {width as screenWidth} from '../utils/screen';
import GoodsItem from '../components/GoodsItem';
import {colors, font} from '../utils/common';
import {login} from '../utils/config';
import {login, payScancodeTitle} from '../utils/config';
import NP from '../utils/np';
const pageSize = 8; // 分页大小
const {width, height} = Dimensions;
const pageSize = width > height ? 8 : 5; // 分页大小
window.pageSize = pageSize;
class HomePage extends React.Component {
getGoodsArr = goodsArr => {
let {current} = this.props;
......@@ -38,7 +38,7 @@ class HomePage extends React.Component {
<View style={styles.pagination}>
<Touch onPress={() => this.props.dropUp()} feddback={false}>
<Icon
name="ios-arrow-dropup-outline"
name="ios-arrow-dropup"
color={current > 1 ? '#EA460F' : '#DEDEDE'}
size={36}
/>
......@@ -60,6 +60,8 @@ class HomePage extends React.Component {
};
render() {
const {width, height} = Dimensions.get('window');
const isLandscape = width > height;
let {admin, goods, goodsArr, qrHost} = this.props;
let total = 0; // 总数量
let totalPrice = 0; // 总价
......@@ -78,220 +80,571 @@ class HomePage extends React.Component {
this.totalNum = total;
this.totalPrice = totalPrice;
this.totalCount = totalCount;
return (
<Layout>
<View style={styles.cont}>
<View style={styles.contLeft}>
<View
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: '#ffffff',
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
overflow: 'hidden',
}}>
<View style={{flex: 1}}>
<View style={styles.clTop}>
<View style={{width: 38}} />
<View style={{flex: 1, flexDirection: 'row'}}>
<Text
style={{...styles.cltText, flex: 0.4, textAlign: 'left'}}>
商品名称
</Text>
<Text
style={{
...styles.cltText,
flex: 0.25,
textAlign: 'right',
}}>
单价:
if (isLandscape) {
return (
<Layout>
<View style={landscapeStyles.cont}>
<View style={landscapeStyles.contLeft}>
<View
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: '#ffffff',
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
overflow: 'hidden',
}}>
<View style={{flex: 1}}>
<View style={landscapeStyles.clTop}>
<View style={{screenWidth: 38}} />
<View style={{flex: 1, flexDirection: 'row'}}>
<Text
style={{
...landscapeStyles.cltText,
flex: 0.4,
textAlign: 'left',
}}>
商品名称
</Text>
<Text
style={{
...landscapeStyles.cltText,
flex: 0.25,
textAlign: 'right',
}}>
单价:
</Text>
<Text
style={{
...landscapeStyles.cltText,
flex: 0.2,
textAlign: 'right',
}}>
数量
</Text>
<Text
style={{
...landscapeStyles.cltText,
flex: 0.15,
textAlign: 'right',
}}>
金额
</Text>
</View>
<View
style={{screenWidth: 50, backgroundColor: '#cccccc'}}
/>
</View>
<View style={landscapeStyles.cltScroll}>
{this.getGoodsArr(goodsArr)}
</View>
</View>
<View style={{screenWidth: 70}}>
{this.getPagination(goodsArr)}
</View>
</View>
<View
style={{
height: 60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderBottomLeftRadius: 3,
borderBottomRightRadius: 3,
}}>
{goods.bags.map((v, k) => {
return (
<Touch
key={k}
onPress={() => this.props.pushBag(k)}
style={[
landscapeStyles.bagButton,
{marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
]}>
<Text style={{color: '#ffffff', fontSize: 18}}>
点击购买{v.name} ￥{v.price}
</Text>
</Touch>
);
})}
</View>
<View
style={{
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
borderLeftscreenWidth: 1,
borderLeftColor: '#cccccc',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<View style={landscapeStyles.infoView}>
<Text style={landscapeStyles.infoText}>合计：</Text>
<Text style={landscapeStyles.infoText}>
{NP.round(
Number(totalPrice) + Number(totalCount),
2,
).toFixed(2)}
</Text>
<Text
style={{
...styles.cltText,
flex: 0.2,
textAlign: 'right',
}}>
数量
</View>
<View style={landscapeStyles.infoView}>
<Text style={landscapeStyles.infoText}>数量：</Text>
<Text style={landscapeStyles.infoText}>{total}</Text>
</View>
<View style={landscapeStyles.infoView}>
<Text style={landscapeStyles.infoText}>优惠：</Text>
<Text style={landscapeStyles.infoText}>
-{NP.round(totalCount, 2).toFixed(2)}
</Text>
<Text
style={{
...styles.cltText,
flex: 0.15,
textAlign: 'right',
}}>
金额
</View>
<View style={landscapeStyles.infoView}>
<Text style={landscapeStyles.infoText}>金额：</Text>
<Text style={landscapeStyles.infoText}>
{NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View>
<View style={{width: 50, backgroundColor: '#cccccc'}} />
</View>
<View style={styles.cltScroll}>
{this.getGoodsArr(goodsArr)}
</View>
</View>
<View style={{width: 70}}>{this.getPagination(goodsArr)}</View>
</View>
<View
style={{
height: 60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderBottomLeftRadius: 3,
borderBottomRightRadius: 3,
}}>
{goods.bags.map((v, k) => {
return (
<Touch
key={k}
onPress={() => this.props.pushBag(k)}
style={[
styles.bagButton,
{marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
]}>
<Text style={{color: '#ffffff', fontSize: 18}}>
点击购买{v.name} ￥{v.price}
</Text>
</Touch>
);
})}
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View
style={{
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={landscapeStyles.contRight}>
<View
style={{
borderLeftWidth: 1,
borderLeftColor: '#cccccc',
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 3,
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<View style={styles.infoView}>
<Text style={styles.infoText}>合计：</Text>
<Text style={styles.infoText}>
{NP.round(
Number(totalPrice) + Number(totalCount),
2,
).toFixed(2)}
</Text>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>数量：</Text>
<Text style={styles.infoText}>{total}</Text>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>优惠：</Text>
<Text style={styles.infoText}>
-{NP.round(totalCount, 2).toFixed(2)}
<View
style={{
backgroundColor: '#00be34',
paddingTop: 15,
paddingBottom: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'white',
fontSize: 26,
fontWeight: '700',
marginBottom: 5,
}}>
{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>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>金额：</Text>
<Text style={styles.infoText}>
{NP.round(totalPrice, 2).toFixed(2)}
<View
style={{
flex: 1,
backgroundColor: '#FC4000',
marginTop: 10,
alignItems: 'center',
}}>
<Text
style={{
color: 'white',
fontSize: 26,
fontWeight: '700',
margin: 5,
}}>
微信、支付宝付款码付款
</Text>
<Image
style={{flex: 1}}
resizeMode={'contain'}
source={require('../assets/payment_code.gif')}
/>
</View>
</View>
<View
style={{
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 15,
}}>
<Touch
onPress={() => this.props.handleBarcode()}
style={[landscapeStyles.button, {marginRight: 10}]}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
</Touch>
<Touch
// onPress={this.props.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>*/}
</Touch>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View style={styles.contRight}>
<View
style={{
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 3,
flex: 1,
}}>
</Layout>
);
} else {
// 竖屏
return (
<Layout>
<View style={styles.cont}>
<View style={styles.contLeft}>
<View
style={{
backgroundColor: '#00be34',
paddingTop: 15,
paddingBottom: 20,
flex: 1,
flexDirection: 'row',
backgroundColor: '#ffffff',
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
overflow: 'hidden',
}}>
<View style={{flex: 1}}>
<View style={styles.clTop}>
<View style={{screenWidth: 38}} />
<View style={{flex: 1, flexDirection: 'row'}}>
<Text
style={{
...styles.cltText,
flex: 0.4,
textAlign: 'left',
}}>
商品名称
</Text>
<Text
style={{
...styles.cltText,
flex: 0.25,
textAlign: 'right',
}}>
单价:
</Text>
<Text
style={{
...styles.cltText,
flex: 0.2,
textAlign: 'right',
}}>
数量
</Text>
<Text
style={{
...styles.cltText,
flex: 0.15,
textAlign: 'right',
}}>
金额
</Text>
</View>
<View
style={{screenWidth: 50, backgroundColor: '#cccccc'}}
/>
</View>
<View style={styles.cltScroll}>
{this.getGoodsArr(goodsArr)}
</View>
</View>
<View style={{screenWidth: 70}}>
{this.getPagination(goodsArr)}
</View>
</View>
<View
style={{
height: 60,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderBottomLeftRadius: 3,
borderBottomRightRadius: 3,
}}>
<Image
style={{height: 22, resizeMode: 'contain', marginBottom: 12}}
source={require('../assets/payment_scan.png')}
/>
<View style={{padding: 15, backgroundColor: 'white'}}>
<QRCode
logoSize={40}
logoBackgroundColor="#fc4000"
logo={require('../assets/logo.png')}
size={200}
value={`${qrHost || login}/#/counter-order-${admin.socket}`}
/>
</View>
{goods.bags.map((v, k) => {
return (
<Touch
key={k}
onPress={() => this.props.pushBag(k)}
style={[
styles.bagButton,
{marginLeft: k === 0 ? 0 : 20, paddingHorizontal: 20},
]}>
<Text style={{color: '#ffffff', fontSize: 18}}>
点击购买{v.name} ￥{v.price}
</Text>
</Touch>
);
})}
</View>
<View
style={{
flex: 1,
backgroundColor: '#FC4000',
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
<View
style={{
height: 22,
resizeMode: 'contain',
marginBottom: 12,
marginTop: 10,
}}
source={require('../assets/payment_code_text.png')}
/>
<Image
style={{flex: 1}}
source={require('../assets/payment_code.gif')}
/>
borderLeftscreenWidth: 1,
borderLeftColor: '#cccccc',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<View style={styles.infoView}>
<Text style={styles.infoText}>合计：</Text>
<Text style={styles.infoText}>
{NP.round(
Number(totalPrice) + Number(totalCount),
2,
).toFixed(2)}
</Text>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>数量：</Text>
<Text style={styles.infoText}>{total}</Text>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>优惠：</Text>
<Text style={styles.infoText}>
-{NP.round(totalCount, 2).toFixed(2)}
</Text>
</View>
<View style={styles.infoView}>
<Text style={styles.infoText}>金额：</Text>
<Text style={styles.infoText}>
{NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View>
</View>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View
style={{
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 15,
}}>
<Touch
onPress={() => this.props.handleBarcode()}
style={[styles.button, {marginRight: 15}]}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
</Touch>
<Touch onPress={this.props.clearList} style={styles.button}>
<Text style={{color: '#ffffff', fontSize: 18}}>重新开始</Text>
</Touch>
<View style={styles.contRight}>
<View
style={{
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 3,
flex: 1,
}}>
<View
style={{
backgroundColor: '#00be34',
paddingTop: 15,
paddingBottom: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
height: 22,
resizeMode: 'contain',
marginBottom: 12,
}}
source={require('../assets/payment_scan.png')}
/>
<View style={{padding: 15, backgroundColor: 'white'}}>
<QRCode
logoSize={40}
logoBackgroundColor="#fc4000"
logo={require('../assets/logo.png')}
size={200}
value={`${qrHost || login}/#/counter-order-${
admin.socket
}`}
/>
</View>
</View>
<View
style={{
flex: 1,
backgroundColor: '#FC4000',
marginTop: 10,
alignItems: 'center',
}}>
<Image
style={{
height: 22,
resizeMode: 'contain',
marginBottom: 12,
marginTop: 10,
}}
source={require('../assets/payment_code_text.png')}
/>
<Image
style={{flex: 1}}
source={require('../assets/payment_code.gif')}
/>
</View>
</View>
<View
style={{
height: 70,
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 3,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 15,
}}>
<Touch
onPress={() => this.props.handleBarcode()}
style={[styles.button, {marginRight: 15}]}>
<Text style={{color: '#ffffff', fontSize: 18}}>输入条码</Text>
</Touch>
<Touch onPress={this.props.clearList} style={styles.button}>
<Text style={{color: '#ffffff', fontSize: 18}}>重新开始</Text>
</Touch>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
</View>
</Layout>
);
</Layout>
);
}
}
}
const landscapeStyles = {
crImg: {
screenWidth: screenWidth * 0.25 * 0.9,
height: screenWidth * 0.25 * 0.8,
},
cltLine: {
height: 10,
borderTopscreenWidth: 2,
borderTopColor: '#cccccc',
},
cltScroll: {
flex: 1,
overflow: 'hidden',
paddingLeft: 20,
},
cltText: {
textAlign: 'center',
fontSize: 22,
color: colors.text,
},
cltFirst: {
screenWidth: screenWidth * 0.03,
},
clTop: {
height: 76,
flexDirection: 'row',
alignItems: 'center',
borderBottomscreenWidth: 20,
borderBottomColor: '#DDDDDD',
paddingLeft: 20,
paddingTop: 5,
},
cont: {
height: '105%',
backgroundColor: '#333',
flexDirection: 'row',
position: 'relative',
},
contLeft: {
flex: 7,
overflow: 'hidden',
backgroundColor: '#2E2E2E',
position: 'relative',
marginRight: 10,
},
pagination: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
paddingLeft: 5,
paddingRight: 5,
},
contRight: {
flex: 3,
borderRadius: 3,
backgroundColor: '#2E2E2E',
},
amount: {
flex: 1,
fontSize: 16,
color: '#ff8900',
textAlign: 'right',
},
amountLabel: {
fontSize: 16,
},
btnRow: {
flexDirection: 'row',
marginTop: 15,
},
bagButton: {
height: 44,
marginLeft: 30,
marginTop: 10,
marginBottom: 15,
backgroundColor: '#00c670',
justifyContent: 'center',
alignItems: 'center',
},
button: {
flex: 1,
height: 46,
backgroundColor: '#106C9F',
justifyContent: 'center',
alignItems: 'center',
},
clearBtn: {
alignSelf: 'center',
marginTop: 20,
screenWidth: 150,
height: 40,
borderscreenWidth: 1,
borderColor: colors.bg,
justifyContent: 'center',
alignItems: 'center',
},
infoView: {
flexDirection: 'row',
marginHorizontal: 30,
},
infoText: {
fontSize: 22,
color: '#000000',
},
};
const styles = {
crImg: {
width: width * 0.25 * 0.9,
height: width * 0.25 * 0.8,
screenWidth: screenWidth * 0.25 * 0.9,
height: screenWidth * 0.25 * 0.8,
},
cltLine: {
height: 10,
borderTopWidth: 2,
borderTopscreenWidth: 2,
borderTopColor: '#cccccc',
},
cltScroll: {
......@@ -305,13 +658,13 @@ const styles = {
color: colors.text,
},
cltFirst: {
width: width * 0.03,
screenWidth: screenWidth * 0.03,
},
clTop: {
height: 76,
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 20,
borderBottomscreenWidth: 20,
borderBottomColor: '#DDDDDD',
paddingLeft: 20,
paddingTop: 5,
......@@ -374,9 +727,9 @@ const styles = {
clearBtn: {
alignSelf: 'center',
marginTop: 20,
width: 150,
screenWidth: 150,
height: 40,
borderWidth: 1,
borderscreenWidth: 1,
borderColor: colors.bg,
justifyContent: 'center',
alignItems: 'center',
......
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