Skip to content

B
bh_face_counter
Commit b3885328 by chenxu
Options

点单模块;收银台点击10下隐藏logo

parent da722d12
Showing with 208 additions and 129 deletions
src/assets/Order/car.png
src/assets/Order/car.png

3.17 KB | W: | H:

src/assets/Order/car.png

3.12 KB | W: | H:

src/assets/Order/car.png
src/assets/Order/car.png
src/assets/Order/car.png
src/assets/Order/car.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Car.js
......@@ -42,7 +42,7 @@ class Car extends React.Component {
<View style={{flex: 1, flexDirection: 'column'}}>
<View
style={{
backgroundColor: '#f3f4f5',
backgroundColor: '#ccc',
paddingTop: 15,
paddingBottom: 15,
}}>
......@@ -52,11 +52,11 @@ class Car extends React.Component {
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.goodsName}>
<Text style={styles.ThText}>商品名称</Text>
<View style={styles.goodsImg}>
<Text style={styles.ThText}>商品图片</Text>
</View>
<View style={styles.goodsPrice}>
<Text style={styles.ThText}>单价</Text>
<View style={styles.goodsName}>
<Text style={styles.ThText}>商品详情</Text>
</View>
<View style={styles.goodsNum}>
<Text style={styles.ThText}>数量</Text>
......@@ -71,38 +71,46 @@ class Car extends React.Component {
);
};
renderCell = (item, index) => (
<View style={index % 2 === 0 ? styles.oddItems : styles.evenItem}>
<View style={styles.goodsName}>
<Text style={styles.ItemText}>{item.name}</Text>
</View>
<View style={styles.goodsPrice}>
<Text style={styles.ItemText}>￥{item.prePrice}</Text>
</View>
<View style={styles.goodsNum}>
<Touch style={styles.goodsSub} onPress={() => this.sub(item)}>
<Image
style={styles.img}
source={require('../assets/Order/subtract.png')}
/>
</Touch>
<View style={styles.goodsNums}>
<Text style={styles.ItemText}>{item.num}</Text>
renderCell = item => {
let img = {
uri: `https://barcod.oss-cn-shenzhen.aliyuncs.com/images/${
item.barcode
}.jpg?x-oss-process=style/zmgo_thumb_watermark`,
};
return (
<View style={styles.oddItems}>
<View style={styles.goodsImg}>
<Image style={styles.goodsImage} source={img} />
</View>
<View style={styles.goodsImgName}>
<Text style={styles.ItemNumText}>{item.name}</Text>
<Text style={styles.ItemPrice}>单价:￥{item.prePrice}</Text>
</View>
<View style={styles.goodsNum}>
<Touch style={styles.goodsSub} onPress={() => this.sub(item)}>
<Image
style={styles.img}
source={require('../assets/Order/subtract.png')}
/>
</Touch>
<View style={styles.goodsNums}>
<Text style={styles.ItemText}>{item.num}</Text>
</View>
<Touch style={styles.goodsAdd} onPress={() => this.add(item)}>
<Image
style={styles.img}
source={require('../assets/Order/add.png')}
/>
</Touch>
</View>
<View style={styles.goodsTotal}>
<Text style={styles.ItemText}>
￥{(item.prePrice * item.num).toFixed(2)}
</Text>
</View>
<Touch style={styles.goodsAdd} onPress={() => this.add(item)}>
<Image
style={styles.img}
source={require('../assets/Order/add.png')}
/>
</Touch>
</View>
<View style={styles.goodsTotal}>
<Text style={styles.ItemText}>
￥{(item.prePrice * item.num).toFixed(2)}
</Text>
</View>
</View>
);
);
};
empty = () => (
<View style={styles.empty}>
......@@ -139,9 +147,9 @@ class Car extends React.Component {
style={[
styles.body,
{
left: filterValue.interpolate({
top: filterValue.interpolate({
inputRange: [0, 1],
outputRange: [-width, 1],
outputRange: [-height * 0.92, 1],
}),
},
]}>
......@@ -152,13 +160,13 @@ class Car extends React.Component {
keyExtractor={this.keyExtractor}
horizontal={false}
data={goodsMap}
renderItem={({item, index}) => this.renderCell(item, index)}
renderItem={({item}) => this.renderCell(item)}
ListEmptyComponent={() => this.empty()}
/>
<View style={styles.footer}>
<Touch style={styles.back} onPress={() => goBack()}>
<View>
<Icon name={'md-arrow-back'} size={30} color={'#fff'} />
<Icon name={'md-arrow-up'} size={30} color={'#fff'} />
<Text style={{color: '#fff'}}>隐藏</Text>
</View>
</Touch>
......@@ -176,9 +184,6 @@ class Car extends React.Component {
</Touch>
</View>
</View>
<Touch style={styles.right} onPress={() => goBack()}>
<Text />
</Touch>
</Animated.View>
);
}
......@@ -190,29 +195,37 @@ const styles = {
},
body: {
width,
height: height * 0.93,
height: height * 0.91,
position: 'absolute',
zIndex: 9,
flexDirection: 'row',
},
right: {
width: width * 0.3,
height: height * 0.93,
backgroundColor: 'rgba(0,0,0,0.1)',
},
carList: {
width: width * 0.7,
width: width,
height: height * 0.89,
backgroundColor: '#fff',
// backgroundColor: '#fff',
backgroundColor: '#f3f4f5',
paddingBottom: 50,
},
goodsImg: {
width: width * 0.2,
alignItems: 'center',
justifyContent: 'center',
},
goodsImage: {
width: 110,
height: 110,
},
goodsName: {
width: width * 0.3,
width: width * 0.35,
position: 'relative',
},
goodsPrice: {
width: width * 0.1,
goodsImgName: {
width: width * 0.35,
position: 'relative',
},
goodsNum: {
width: width * 0.15,
width: width * 0.2,
flexDirection: 'row',
justifyContent: 'center',
},
......@@ -247,43 +260,53 @@ const styles = {
textAlign: 'center',
fontSize: setSpText(30),
},
ItemNumText: {
fontSize: setSpText(30),
position: 'absolute',
bottom: 20,
left: 30,
},
ItemPrice: {
fontSize: setSpText(25),
color: '#ccc',
position: 'absolute',
top: 20,
left: 30,
},
oddItems: {
paddingTop: 20,
paddingBottom: 20,
height: 120,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
evenItem: {
paddingTop: 20,
paddingBottom: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f3f4f5',
width: width * 0.95,
marginLeft: width * 0.025,
borderRadius: 20,
marginBottom: 20,
elevation: 10,
},
footer: {
width: width * 0.7,
width: width,
height: height * 0.06,
flexDirection: 'row',
backgroundColor: '#fff',
borderTopWidth: 1,
borderTopColor: '#f3f4f5',
justifyContent: 'center',
},
back: {
flex: 4,
flex: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ccc',
},
aggregate: {
flex: 4,
flex: 5,
justifyContent: 'center',
alignItems: 'center',
},
delete: {
flex: 4,
flex: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
......
src/components/Settles.js
......@@ -467,7 +467,7 @@ const styles = {
settle: {
width,
height,
backgroundColor: 'rgba(0,0,0,0.3)',
backgroundColor: 'rgba(0,0,0,0.6)',
position: 'absolute',
zIndex: 9,
alignItems: 'center',
......
src/components/searchGoods.js
......@@ -9,7 +9,6 @@ import {
} from 'react-native';
import {setSpText} from '../utils/screen';
import {connect} from 'react-redux';
import {imgUrl} from '../utils/config';
import Touch from './Touch';
// import GoodsList from './GoodsList';
......@@ -72,13 +71,15 @@ class SearchGoods extends React.Component {
<View style={styles.goodsBox}>
{goodsArr.length > 0 &&
goodsArr.map((v, key) => {
let img = {
uri: `https://barcod.oss-cn-shenzhen.aliyuncs.com/images/${
v.barcode
}.jpg?x-oss-process=style/zmgo_thumb_watermark`,
};
return (
<View style={styles.goodsItem} key={key}>
<View style={styles.goodsImg}>
<Image
style={styles.img}
source={{uri: `${imgUrl}${v.image}`}}
/>
<Image style={styles.img} source={img} />
</View>
<Text style={styles.goodsName}>{v.name}</Text>
<Text style={styles.goodsPrice}>￥{v.prePrice}</Text>
......@@ -188,10 +189,12 @@ const styles = {
searchList: {
width: width,
height: height * 0.93,
paddingBottom: height * 0.07,
borderTopColor: '#ccc',
},
goodsBox: {
width: width,
height: height * 0.93,
flexDirection: 'row',
flexWrap: 'wrap',
backgroundColor: '#f3f4f5',
......@@ -204,6 +207,7 @@ const styles = {
alignItems: 'center',
backgroundColor: '#fff',
borderRadius: 20,
elevation: 10,
},
goodsImg: {
width: width * 0.85 * 0.3333 * 0.95,
......
src/pages/OrderPage.js
......@@ -6,7 +6,6 @@ import {setSpText} from '../utils/screen';
import SearchGoods from '../components/searchGoods';
import Car from '../components/Car';
import Settles from '../components/Settles';
import {imgUrl} from '../utils/config';
const {width, height} = Dimensions.get('screen');
@connect(({searchGoods}) => ({searchGoods}))
......@@ -23,7 +22,6 @@ class OrderPage extends Component {
pageX: 0,
pageY: 0,
};
ref = '';
componentDidMount() {
this.getGoodsList();
// window.scan = this.submitBarcode;
......@@ -75,6 +73,7 @@ class OrderPage extends Component {
name: v.name,
prePrice: v.prePrice,
barcode: v.barcode,
image: v.image,
};
}
this.setState({
......@@ -173,13 +172,15 @@ class OrderPage extends Component {
<View style={styles.goodsBox}>
{goodsArr.length > 0 &&
goodsArr.map((v, key) => {
let img = {
uri: `https://barcod.oss-cn-shenzhen.aliyuncs.com/images/${
v.barcode
}.jpg?x-oss-process=style/zmgo_thumb_watermark`,
};
return (
<View style={styles.goodsItem} key={key}>
<View style={styles.goodsImg}>
<Image
style={styles.img}
source={{uri: `${imgUrl}${v.image}`}}
/>
<Image style={styles.img} source={img} />
</View>
<Text style={styles.goodsName}>{v.name}</Text>
<Text style={styles.goodsPrice}>￥{v.prePrice}</Text>
......@@ -230,25 +231,32 @@ class OrderPage extends Component {
</View>
<View style={styles.settle}>
<View style={styles.car}>
<Touch
style={num > 0 ? styles.carImgs : styles.carImg}
onPress={this.goodsCar}>
<Touch style={styles.carImg} onPress={this.goodsCar}>
<View>
<View style={[num > 0 ? styles.carNum : styles.display]}>
<Text style={{color: '#fff'}}>{num}</Text>
</View>
<Image
style={styles.img}
source={require('../assets/Order/car.png')}
source={
num > 0
? require('../assets/Order/carMore.png')
: require('../assets/Order/carNo.png')
}
/>
</View>
</Touch>
</View>
<View style={styles.total}>
{num > 0 ? (
<Text style={{marginLeft: 30, fontSize: setSpText(50)}}>
<Text
style={{
marginLeft: 30,
fontSize: setSpText(50),
color: '#fff',
}}>
总计:
<Text style={{fontSize: setSpText(40), color: '#e21918'}}>
<Text style={{fontSize: setSpText(40)}}>
￥{parseInt(total)}
<Text style={{fontSize: setSpText(25)}}>
.
......@@ -258,29 +266,41 @@ class OrderPage extends Component {
</Text>
</Text>
) : (
<Text style={{marginLeft: 30, fontSize: setSpText(50)}}>
暂无商品
<Text
style={{
marginLeft: 30,
fontSize: setSpText(50),
color: '#fff',
}}>
￥0
</Text>
)}
</View>
<View style={num > 0 ? styles.onSubmit : styles.noSubmit}>
<Text
style={{color: '#fff', fontSize: setSpText(50)}}
onPress={() => num > 0 && this.clearLister()}>
结算
</Text>
</View>
{num > 0 ? (
<View style={styles.onSubmit}>
<Text
style={{color: '#fff', fontSize: setSpText(50)}}
onPress={() => num > 0 && this.clearLister()}>
结算
</Text>
</View>
) : (
<View style={styles.noSubmit}>
<Text style={{color: '#fff', fontSize: setSpText(50)}}>
无商品
</Text>
</View>
)}
</View>
</View>
);
}
}
const styles = {
body: {
width,
height,
backgroundColor: '#fff',
borderTopColor: '#ccc',
},
hidden: {
display: 'none',
......@@ -294,36 +314,48 @@ const styles = {
position: 'absolute',
},
// searchBox: {
// width: width,
// height: height * 0.07,
// },
search: {
width,
height: height * 0.07,
width: width * 0.9,
height: height * 0.06,
marginLeft: width * 0.05,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: height * 0.07 * 0.85,
backgroundColor: '#fff',
marginTop: height * 0.01,
},
searchInput: {
width: width * 0.9,
height: height * 0.07 * 0.85,
borderWidth: 1,
borderColor: '#ccc',
height: height * 0.06 * 0.85,
borderRadius: height * 0.07 * 0.85,
flexDirection: 'row',
alignItems: 'center',
},
input: {
width: '100%',
height: '100%',
fontSize: setSpText(50),
},
searchIcon: {
width: width * 0.08,
height: width * 0.08,
marginLeft: 20,
},
searchText: {
width: width * 0.63,
height: height * 0.07 * 0.85,
},
searchBtn: {
width: width * 0.15,
height: height * 0.07 * 0.7,
......@@ -334,12 +366,12 @@ const styles = {
textAlign: 'center',
lineHeight: height * 0.07 * 0.7,
},
info: {
width,
height: height * 0.86,
borderTopWidth: 1,
borderTopColor: '#ccc',
height: height * 0.93,
},
classify: {
width: width,
height: height * 0.06,
......@@ -353,7 +385,8 @@ const styles = {
width: width,
flexDirection: 'row',
flexWrap: 'wrap',
backgroundColor: '#f3f4f5',
// backgroundColor: '#f3f4f5',
paddingBottom: height * 0.07,
},
goodsItem: {
width: width * 0.3,
......@@ -363,6 +396,9 @@ const styles = {
alignItems: 'center',
backgroundColor: '#fff',
borderRadius: 20,
// borderColor: '#000',
// borderWidth: 1,
elevation: 10,
},
goodsImg: {
width: width * 0.85 * 0.3333 * 0.95,
......@@ -417,15 +453,22 @@ const styles = {
right: 0,
},
settle: {
width,
width: width * 0.9,
height: height * 0.07,
borderRadius: height * 0.07,
overflow: 'hidden',
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#F3F4F5',
backgroundColor: '#000',
position: 'absolute',
bottom: 20,
left: width * 0.05,
elevation: 10,
},
car: {
width: width * 0.15,
height: height * 0.06,
marginLeft: width * 0.02,
position: 'relative',
},
display: {
......@@ -448,33 +491,24 @@ const styles = {
width: height * 0.06,
height: height * 0.06,
marginLeft: 20,
backgroundColor: '#ccc',
},
carImgs: {
width: height * 0.06,
height: height * 0.06,
marginLeft: 20,
backgroundColor: '#fc4000',
},
total: {
width: width * 0.6,
width: width * 0.5,
height: height * 0.07,
justifyContent: 'center',
backgroundColor: '#F3F4F5',
backgroundColor: '#000',
},
onSubmit: {
width: width * 0.23,
height: height * 0.06,
borderRadius: height * 0.07,
height: height * 0.07,
backgroundColor: '#fc4000',
justifyContent: 'center',
alignItems: 'center',
},
noSubmit: {
width: width * 0.23,
height: height * 0.06,
borderRadius: height * 0.07,
backgroundColor: '#ccc',
height: height * 0.07,
backgroundColor: '#000',
justifyContent: 'center',
alignItems: 'center',
},
......
src/pages/VerticalPage.js
......@@ -47,6 +47,8 @@ class VerticalPage extends Component {
faceType: 'wxpay',
hintVisible: false,
setting: false,
num: 0, //点击10次隐藏logo
logoVisible: true,
};
async componentWillMount() {
......@@ -460,6 +462,20 @@ class VerticalPage extends Component {
</View>
);
hideLogo = async () => {
let {num, logoVisible} = this.state;
num++;
await this.setState({
num,
});
if (num === 10) {
this.setState({
num: 0,
logoVisible: !logoVisible,
});
}
};
render() {
let {
admin,
......@@ -471,7 +487,7 @@ class VerticalPage extends Component {
imgArr,
adType,
} = this.props;
let {contact, hintVisible} = this.state;
let {contact, hintVisible, logoVisible} = this.state;
pageSize =
goods && goods.bags.length > 0
? goods && goods.bags.length > 3
......@@ -517,11 +533,13 @@ class VerticalPage extends Component {
closeHint={this.closeHint}
/>
<View style={styles.header}>
<View style={styles.left}>
<Image source={logo} />
<Image style={styles.counterText} source={counterText} />
<Image source={img24h} />
</View>
<Touch onPress={() => this.hideLogo()}>
<View style={styles.left}>
<Image source={logoVisible && logo} />
<Image style={styles.counterText} source={counterText} />
<Image source={img24h} />
</View>
</Touch>
<Touch onPress={() => this.onCall()} style={{marginLeft: 50}}>
<View style={styles.right}>
<Image style={styles.phone} source={phone} />
......@@ -751,7 +769,7 @@ class VerticalPage extends Component {
<QRCode
logoSize={width > 801 ? 50 : scaleSize(60)}
// logoBackgroundColor="#fc4000"
logo={require('../assets/logo2.png')}
logo={logoVisible && require('../assets/logo2.png')}
size={width > 801 ? 200 : scaleSize(250)}
value={`${qrHost || login}/#/counter-order-${admin.socket}`}
/>
......
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