Skip to content

B
bh_face_counter
Commit 65e84309 by htc
Options

横屏适配

parent 0b3f139a
Showing with 440 additions and 27 deletions
src/components/HomeLayout.js
import React, {Component} from 'react'; 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 {appName} from '../utils/config';
import {setSpText, scaleSize} from '../utils/screen'; import {setSpText, scaleSize} from '../utils/screen';
...@@ -24,7 +24,38 @@ class HomeLayout extends Component { ...@@ -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: { title: {
top: 0, top: 0,
paddingLeft: scaleSize(50), paddingLeft: scaleSize(50),
...@@ -54,4 +85,10 @@ const styles = { ...@@ -54,4 +85,10 @@ const styles = {
}, },
}; };
const {width, height} = Dimensions.get('window');
const isLandscape = width > height;
const styles = isLandscape ? LandscapeStyles : portraitStyles;
export default HomeLayout; export default HomeLayout;
src/components/Layout.js
import React from 'react'; 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 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';
...@@ -9,6 +9,7 @@ import Modal from './Modal'; ...@@ -9,6 +9,7 @@ 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';
const weekdays = { const weekdays = {
0: '周日', 0: '周日',
...@@ -129,6 +130,7 @@ class Layout extends React.Component { ...@@ -129,6 +130,7 @@ class Layout extends React.Component {
}; };
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} = this.state;
contact = contact || '未授权'; contact = contact || '未授权';
...@@ -138,10 +140,21 @@ class Layout extends React.Component { ...@@ -138,10 +140,21 @@ class Layout extends React.Component {
style={{flex: 1, backgroundColor: '#333'}}> style={{flex: 1, backgroundColor: '#333'}}>
<View style={styles.navBar}> <View style={styles.navBar}>
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}> <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
{width > height ? (
<Image
source={require('../assets/logo.png')}
style={{
width: 70,
height: 70,
marginLeft: 15,
}}
/>
) : (
<Image <Image
source={require('../assets/zmgo_icon.png')} source={require('../assets/zmgo_icon.png')}
style={styles.navLogo} style={styles.navLogo}
/> />
)}
<View <View
style={{ style={{
justifyContent: 'flex-end', justifyContent: 'flex-end',
...@@ -162,10 +175,16 @@ class Layout extends React.Component { ...@@ -162,10 +175,16 @@ class Layout extends React.Component {
</View> </View>
</View> </View>
</View> </View>
{width > height ? (
<Text style={{color: 'white', fontSize: 40, fontWeight: '700'}}>
{payTitle}
</Text>
) : (
<Image <Image
style={{width: 325, height: 36, resizeMode: 'contain'}} style={{width: 325, height: 36, resizeMode: 'contain'}}
source={require('../assets/zmgo_title.png')} source={require('../assets/zmgo_title.png')}
/> />
)}
<View style={styles.navRight}> <View style={styles.navRight}>
<Image <Image
source={require('../assets/phone_icon.png')} source={require('../assets/phone_icon.png')}
......
src/pages/AuthPage.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {View} from 'react-native'; import {View, Dimensions} from 'react-native';
import QRCode from 'react-native-qrcode-svg'; import QRCode from 'react-native-qrcode-svg';
import io from 'socket.io-client'; import io from 'socket.io-client';
import axios from 'axios'; import axios from 'axios';
...@@ -9,9 +9,13 @@ import HomeLayout from '../components/HomeLayout'; ...@@ -9,9 +9,13 @@ import HomeLayout from '../components/HomeLayout';
import {setSpText, scaleSize} from '../utils/screen'; import {setSpText, scaleSize} from '../utils/screen';
class AuthPage extends Component { class AuthPage extends Component {
state = {}; state = {
isLandscape: false,
};
async componentDidMount() { async componentDidMount() {
const {width, height} = Dimensions.get('window');
this.setState({isLandscape: width > height});
this.socket = io(axios.defaults.baseURL); this.socket = io(axios.defaults.baseURL);
this.socket.on('storeAuth', this.handleLogin); this.socket.on('storeAuth', this.handleLogin);
this.socket.on('connect', () => { this.socket.on('connect', () => {
...@@ -29,12 +33,12 @@ class AuthPage extends Component { ...@@ -29,12 +33,12 @@ class AuthPage extends Component {
}; };
render() { render() {
const {socket} = this.state; const {socket, isLandscape} = this.state;
return ( return (
<HomeLayout> <HomeLayout>
<View style={styles.qrcode}> <View style={styles.qrcode}>
<QRCode <QRCode
size={scaleSize(700)} size={isLandscape ? scaleSize(420) : 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/HomePage.js
import React from 'react'; 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 Icon from 'react-native-vector-icons/Ionicons';
import QRCode from 'react-native-qrcode-svg'; import QRCode from 'react-native-qrcode-svg';
import CounterMixins from './CounterMixins'; import CounterMixins from './CounterMixins';
import Layout from '../components/Layout'; import Layout from '../components/Layout';
import Touch from '../components/Touch'; import Touch from '../components/Touch';
import {width} from '../utils/screen'; import {width as screenWidth} from '../utils/screen';
import GoodsItem from '../components/GoodsItem'; import GoodsItem from '../components/GoodsItem';
import {colors, font} from '../utils/common'; import {colors, font} from '../utils/common';
import {login} from '../utils/config'; import {login, payScancodeTitle} from '../utils/config';
import NP from '../utils/np'; import NP from '../utils/np';
const pageSize = 8; // 分页大小 const {width, height} = Dimensions;
const pageSize = width > height ? 8 : 5; // 分页大小
window.pageSize = pageSize; window.pageSize = pageSize;
class HomePage extends React.Component { class HomePage extends React.Component {
getGoodsArr = goodsArr => { getGoodsArr = goodsArr => {
let {current} = this.props; let {current} = this.props;
...@@ -38,7 +38,7 @@ class HomePage extends React.Component { ...@@ -38,7 +38,7 @@ class HomePage extends React.Component {
<View style={styles.pagination}> <View style={styles.pagination}>
<Touch onPress={() => this.props.dropUp()} feddback={false}> <Touch onPress={() => this.props.dropUp()} feddback={false}>
<Icon <Icon
name="ios-arrow-dropup-outline" name="ios-arrow-dropup"
color={current > 1 ? '#EA460F' : '#DEDEDE'} color={current > 1 ? '#EA460F' : '#DEDEDE'}
size={36} size={36}
/> />
...@@ -60,6 +60,8 @@ class HomePage extends React.Component { ...@@ -60,6 +60,8 @@ class HomePage extends React.Component {
}; };
render() { render() {
const {width, height} = Dimensions.get('window');
const isLandscape = width > height;
let {admin, goods, goodsArr, qrHost} = this.props; let {admin, goods, goodsArr, qrHost} = this.props;
let total = 0; // 总数量 let total = 0; // 总数量
let totalPrice = 0; // 总价 let totalPrice = 0; // 总价
...@@ -78,6 +80,236 @@ class HomePage extends React.Component { ...@@ -78,6 +80,236 @@ class HomePage extends React.Component {
this.totalNum = total; this.totalNum = total;
this.totalPrice = totalPrice; this.totalPrice = totalPrice;
this.totalCount = totalCount; this.totalCount = totalCount;
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>
</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>
</View>
<View style={landscapeStyles.infoView}>
<Text style={landscapeStyles.infoText}>金额：</Text>
<Text style={landscapeStyles.infoText}>
{NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View>
</View>
</View>
<View style={{height: 50, backgroundColor: '#333'}} />
</View>
<View style={landscapeStyles.contRight}>
<View
style={{
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 3,
flex: 1,
}}>
<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={{
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>
</Layout>
);
} else {
// 竖屏
return ( return (
<Layout> <Layout>
<View style={styles.cont}> <View style={styles.cont}>
...@@ -93,10 +325,14 @@ class HomePage extends React.Component { ...@@ -93,10 +325,14 @@ class HomePage extends React.Component {
}}> }}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.clTop}> <View style={styles.clTop}>
<View style={{width: 38}} /> <View style={{screenWidth: 38}} />
<View style={{flex: 1, flexDirection: 'row'}}> <View style={{flex: 1, flexDirection: 'row'}}>
<Text <Text
style={{...styles.cltText, flex: 0.4, textAlign: 'left'}}> style={{
...styles.cltText,
flex: 0.4,
textAlign: 'left',
}}>
商品名称 商品名称
</Text> </Text>
<Text <Text
...@@ -124,13 +360,17 @@ class HomePage extends React.Component { ...@@ -124,13 +360,17 @@ class HomePage extends React.Component {
金额 金额
</Text> </Text>
</View> </View>
<View style={{width: 50, backgroundColor: '#cccccc'}} /> <View
style={{screenWidth: 50, backgroundColor: '#cccccc'}}
/>
</View> </View>
<View style={styles.cltScroll}> <View style={styles.cltScroll}>
{this.getGoodsArr(goodsArr)} {this.getGoodsArr(goodsArr)}
</View> </View>
</View> </View>
<View style={{width: 70}}>{this.getPagination(goodsArr)}</View> <View style={{screenWidth: 70}}>
{this.getPagination(goodsArr)}
</View>
</View> </View>
<View <View
style={{ style={{
...@@ -170,7 +410,7 @@ class HomePage extends React.Component { ...@@ -170,7 +410,7 @@ class HomePage extends React.Component {
}}> }}>
<View <View
style={{ style={{
borderLeftWidth: 1, borderLeftscreenWidth: 1,
borderLeftColor: '#cccccc', borderLeftColor: '#cccccc',
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
...@@ -222,7 +462,11 @@ class HomePage extends React.Component { ...@@ -222,7 +462,11 @@ class HomePage extends React.Component {
alignItems: 'center', alignItems: 'center',
}}> }}>
<Image <Image
style={{height: 22, resizeMode: 'contain', marginBottom: 12}} style={{
height: 22,
resizeMode: 'contain',
marginBottom: 12,
}}
source={require('../assets/payment_scan.png')} source={require('../assets/payment_scan.png')}
/> />
<View style={{padding: 15, backgroundColor: 'white'}}> <View style={{padding: 15, backgroundColor: 'white'}}>
...@@ -231,7 +475,9 @@ class HomePage extends React.Component { ...@@ -231,7 +475,9 @@ class HomePage extends React.Component {
logoBackgroundColor="#fc4000" logoBackgroundColor="#fc4000"
logo={require('../assets/logo.png')} logo={require('../assets/logo.png')}
size={200} size={200}
value={`${qrHost || login}/#/counter-order-${admin.socket}`} value={`${qrHost || login}/#/counter-order-${
admin.socket
}`}
/> />
</View> </View>
</View> </View>
...@@ -282,16 +528,123 @@ class HomePage extends React.Component { ...@@ -282,16 +528,123 @@ class HomePage extends React.Component {
</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 = { const styles = {
crImg: { crImg: {
width: width * 0.25 * 0.9, screenWidth: screenWidth * 0.25 * 0.9,
height: width * 0.25 * 0.8, height: screenWidth * 0.25 * 0.8,
}, },
cltLine: { cltLine: {
height: 10, height: 10,
borderTopWidth: 2, borderTopscreenWidth: 2,
borderTopColor: '#cccccc', borderTopColor: '#cccccc',
}, },
cltScroll: { cltScroll: {
...@@ -305,13 +658,13 @@ const styles = { ...@@ -305,13 +658,13 @@ const styles = {
color: colors.text, color: colors.text,
}, },
cltFirst: { cltFirst: {
width: width * 0.03, screenWidth: screenWidth * 0.03,
}, },
clTop: { clTop: {
height: 76, height: 76,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 20, borderBottomscreenWidth: 20,
borderBottomColor: '#DDDDDD', borderBottomColor: '#DDDDDD',
paddingLeft: 20, paddingLeft: 20,
paddingTop: 5, paddingTop: 5,
...@@ -374,9 +727,9 @@ const styles = { ...@@ -374,9 +727,9 @@ const styles = {
clearBtn: { clearBtn: {
alignSelf: 'center', alignSelf: 'center',
marginTop: 20, marginTop: 20,
width: 150, screenWidth: 150,
height: 40, height: 40,
borderWidth: 1, borderscreenWidth: 1,
borderColor: colors.bg, borderColor: colors.bg,
justifyContent: 'center', justifyContent: 'center',
alignItems: '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