Skip to content

B
bh_face_counter
Commit a29dd89c by chenxu
Options

点单系统

parent 0075aaf1
Showing with 569 additions and 124 deletions
debug.log 0 → 100644
[1207/092449.724:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
src/components/Car.js 0 → 100644
import React from 'react';
import {
View,
Text,
Dimensions,
FlatList,
Image,
Animated,
Easing,
} from 'react-native';
import Touch from './Touch';
import Icon from 'react-native-vector-icons/Ionicons';
import {setSpText} from '../utils/screen';
const {width, height} = Dimensions.get('screen');
class Car extends React.Component {
state = {
filterValue: new Animated.Value(0),
};
componentWillReceiveProps(nextProps) {
this.show(nextProps.carVisible);
}
show = carVisible => {
let {filterValue} = this.state;
Animated.timing(filterValue, {
toValue: carVisible ? 1 : 0,
duration: 800,
easing: Easing.inOut(Easing.exp),
}).start();
};
// 生成不重复的key
keyExtractor = (item: any, index: number) => {
return String(index);
};
renderHeader = () => {
return (
<View style={{flex: 1, flexDirection: 'column'}}>
<View
style={{
backgroundColor: '#f3f4f5',
paddingTop: 15,
paddingBottom: 15,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.goodsName}>
<Text style={styles.ThText}>商品名称</Text>
</View>
<View style={styles.goodsPrice}>
<Text style={styles.ThText}>单价</Text>
</View>
<View style={styles.goodsNum}>
<Text style={styles.ThText}>数量</Text>
</View>
<View style={styles.goodsTotal}>
<Text style={styles.ThText}>金额</Text>
</View>
</View>
</View>
<View />
</View>
);
};
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>
</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}>
<View style={styles.emptyImg}>
<Image style={styles.img} source={require('../assets/Order/car.png')} />
<Text
style={{
textAlign: 'center',
color: '#ccc',
fontSize: setSpText(40),
marginTop: 30,
}}>
购物车空空如也~
</Text>
</View>
</View>
);
add = v => {
let {goodsAdd} = this.props;
goodsAdd(v);
};
sub = v => {
let {goodsSub} = this.props;
goodsSub(v);
};
render() {
let {goodsMap, goBack, num, total, emptyCar} = this.props;
let {filterValue} = this.state;
return (
<Animated.View
style={[
styles.body,
{
left: filterValue.interpolate({
inputRange: [0, 1],
outputRange: [-width, 1],
}),
},
]}>
<View>
<FlatList
style={styles.carList}
ListHeaderComponent={this.renderHeader}
keyExtractor={this.keyExtractor}
horizontal={false}
data={goodsMap}
renderItem={({item, index}) => this.renderCell(item, index)}
ListEmptyComponent={() => this.empty()}
/>
<View style={styles.footer}>
<Touch style={styles.back} onPress={() => goBack()}>
<View>
<Icon name={'md-arrow-back'} size={30} color={'#fff'} />
<Text style={{color: '#fff'}}>隐藏</Text>
</View>
</Touch>
<View style={styles.aggregate}>
<Text>共计 {num} 件</Text>
</View>
<View style={styles.aggregate}>
<Text>总金额:￥{total.toFixed(2)}</Text>
</View>
<Touch style={styles.delete} onPress={() => emptyCar()}>
<View>
<Icon name={'md-trash'} size={30} color={'#fff'} />
<Text style={{color: '#fff'}}>清空</Text>
</View>
</Touch>
</View>
</View>
<Touch style={styles.right} onPress={() => goBack()}>
<Text />
</Touch>
</Animated.View>
);
}
}
const styles = {
display: {
display: 'none',
},
body: {
width,
height: height * 0.93,
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,
height: height * 0.89,
backgroundColor: '#fff',
},
goodsName: {
width: width * 0.3,
},
goodsPrice: {
width: width * 0.1,
},
goodsNum: {
width: width * 0.15,
flexDirection: 'row',
justifyContent: 'center',
},
goodsSub: {
width: 30,
height: 30,
borderRadius: 30,
backgroundColor: '#FC4000',
overflow: 'hidden',
},
goodsAdd: {
width: 30,
height: 30,
borderRadius: 30,
backgroundColor: '#FC4000',
},
img: {
width: '100%',
height: '100%',
},
goodsNums: {
width: width * 0.15 - 60,
},
goodsTotal: {
width: width * 0.15,
},
ThText: {
textAlign: 'center',
fontSize: setSpText(40),
},
ItemText: {
textAlign: 'center',
fontSize: setSpText(30),
},
oddItems: {
paddingTop: 20,
paddingBottom: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
evenItem: {
paddingTop: 20,
paddingBottom: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f3f4f5',
},
footer: {
width: width * 0.7,
height: height * 0.06,
flexDirection: 'row',
backgroundColor: '#fff',
borderTopWidth: 1,
borderTopColor: '#f3f4f5',
},
back: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ccc',
},
aggregate: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
},
delete: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
empty: {
height: height * 0.5,
alignItems: 'center',
justifyContent: 'center',
},
emptyImg: {
width: width * 0.3,
height: width * 0.3,
},
};
export default Car;
src/components/GoodsList.js deleted 100644 → 0
import React from 'react';
import {Dimensions, Image, Text, View} from 'react-native';
import {imgUrl} from '../utils/config';
// import Touch from './Touch';
import {setSpText} from '../utils/screen';
const {width, height} = Dimensions.get('window');
export default class GoodsList extends React.Component {
state = {
num: 0,
};
render() {
let {goodsArr} = this.props;
let {num} = this.state;
return (
<View style={styles.goodsBox}>
{goodsArr.length > 0 &&
goodsArr.map(v => {
return (
<View style={styles.goodsItem}>
<View style={styles.goodsImg}>
<Image
style={styles.img}
source={{uri: `${imgUrl}${v.image}`}}
/>
</View>
<Text style={styles.goodsName}>{v.name}</Text>
<Text style={styles.goodsPrice}>￥{v.prePrice}</Text>
<View style={styles.goodsNum}>
<View style={num > 0 ? styles.goodsSub : styles.display}>
<Image
style={styles.img}
source={require('../assets/Order/subtract.png')}
/>
</View>
<Text style={num > 0 ? styles.goodsNums : styles.display}>
{num}
</Text>
<View style={styles.goodsAdd}>
<Image
style={styles.img}
source={require('../assets/Order/add.png')}
/>
</View>
</View>
</View>
);
})}
</View>
);
}
}
const styles = {
goodsBox: {
width: width * 0.85,
flexDirection: 'row',
flexWrap: 'wrap',
},
goodsItem: {
width: width * 0.85 * 0.3333,
height: height * 0.8 * 0.31,
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: '#ccc',
borderRightWidth: 1,
borderRightColor: '#ccc',
},
goodsImg: {
width: width * 0.85 * 0.3333 * 0.95,
height: width * 0.85 * 0.3333 * 0.8,
marginTop: 10,
},
goodsName: {
width: width * 0.85 * 0.3333 * 0.95,
height: 40,
lineHeight: 50,
fontSize: setSpText(30),
},
goodsPrice: {
width: width * 0.85 * 0.3333 * 0.9,
height: 25,
textAlign: 'right',
paddingRight: 20,
marginTop: 5,
marginBottom: 5,
color: '#e21918',
fontSize: setSpText(20),
},
goodsNum: {
width: width * 0.85 * 0.3333 * 0.9,
height: 50,
flexDirection: 'row',
justifyContent: 'space-between',
},
goodsSub: {
width: 50,
height: 50,
borderRadius: 50,
backgroundColor: '#fc4000',
},
img: {
width: '100%',
height: '100%',
},
goodsNums: {
width: 50,
height: 50,
textAlign: 'center',
fontSize: 40,
},
goodsAdd: {
width: 50,
height: 50,
borderRadius: 50,
backgroundColor: '#fc4000',
},
display: {
display: 'none',
},
};
src/components/searchGoods.js 0 → 100644
import React from 'react';
import {
View,
Dimensions,
Image,
Text,
TextInput,
ScrollView,
} 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';
const {width, height} = Dimensions.get('screen');
@connect(({searchGoods}) => ({searchGoods}))
class SearchGoods extends React.Component {
state = {
goodsArr: [],
// value:'',
};
search = async text => {
let {data} = await this.props.dispatch({
type: 'searchGoods/getStoreGoods',
keyword: text,
page: 0,
size: 10,
});
this.setState({
goodsArr: data.data,
});
};
render() {
let {
searchVisible,
cancelSearch,
goodsNumber,
goodsAdd,
goodsSub,
} = this.props;
let {goodsArr} = this.state;
return (
<View style={searchVisible ? styles.body : styles.display}>
<View style={styles.search}>
<View>
<View style={styles.searchInput}>
<View style={styles.searchIcon}>
<Image
style={styles.img}
source={require('../assets/Order/search.png')}
/>
</View>
<View style={styles.searchText}>
<TextInput
style={styles.input}
onChange={({nativeEvent: {text}}) => this.search(text)}
/>
</View>
<Text
style={styles.searchBtn}
onPress={() => {
cancelSearch(), this.setState({goodsArr: []});
}}>
取消
</Text>
</View>
</View>
</View>
<ScrollView style={styles.searchList}>
<View style={styles.goodsBox}>
{goodsArr.length > 0 &&
goodsArr.map((v, key) => {
return (
<View style={styles.goodsItem} key={key}>
<View style={styles.goodsImg}>
<Image
style={styles.img}
source={{uri: `${imgUrl}${v.image}`}}
/>
</View>
<Text style={styles.goodsName}>{v.name}</Text>
<Text style={styles.goodsPrice}>￥{v.prePrice}</Text>
<View style={styles.goodsNum}>
<Touch
style={
goodsNumber[v.barcode] &&
goodsNumber[v.barcode].num > 0
? styles.goodsSub
: styles.display
}
onPress={() => {
goodsSub(v);
}}>
<Image
style={styles.img}
source={require('../assets/Order/subtract.png')}
/>
</Touch>
<Text
style={
goodsNumber[v.barcode] &&
goodsNumber[v.barcode].num > 0
? styles.goodsNums
: styles.display
}>
{goodsNumber[v.barcode]
? goodsNumber[v.barcode].num
: ''}
</Text>
<Touch
style={styles.goodsAdd}
onPress={() => {
goodsAdd(v);
}}>
<Image
style={styles.img}
source={require('../assets/Order/add.png')}
/>
</Touch>
</View>
</View>
);
})}
</View>
</ScrollView>
</View>
);
}
}
const styles = {
body: {
width,
height,
position: 'absolute',
zIndex: 8,
backgroundColor: '#fff',
},
display: {
display: 'none',
},
search: {
width,
height: height * 0.07,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
searchInput: {
width: width * 0.9,
height: height * 0.07 * 0.85,
borderWidth: 1,
borderColor: '#ccc',
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,
borderRadius: height * 0.07 * 0.7,
fontSize: setSpText(50),
color: '#fff',
backgroundColor: '#fc4000',
textAlign: 'center',
lineHeight: height * 0.07 * 0.7,
},
img: {
width: '100%',
height: '100%',
},
searchList: {
width: width,
height: height * 0.93,
borderTopColor: '#ccc',
},
goodsBox: {
width: width,
flexDirection: 'row',
flexWrap: 'wrap',
backgroundColor: '#f3f4f5',
},
goodsItem: {
width: width * 0.3,
height: height * 0.8 * 0.3,
marginTop: 20,
marginLeft: width * 0.025,
alignItems: 'center',
backgroundColor: '#fff',
borderRadius: 20,
},
goodsImg: {
width: width * 0.85 * 0.3333 * 0.95,
height: width * 0.85 * 0.3333 * 0.8,
marginTop: 10,
},
goodsName: {
width: width * 0.85 * 0.3333 * 0.95,
height: 40,
lineHeight: 50,
fontSize: setSpText(30),
},
goodsPrice: {
width: width * 0.85 * 0.3333 * 0.9,
height: 25,
paddingRight: 20,
marginTop: 5,
marginBottom: 5,
color: '#e21918',
fontSize: setSpText(20),
},
goodsNum: {
width: width * 0.85 * 0.3333 * 0.9,
height: 40,
position: 'relative',
},
goodsSub: {
width: 40,
height: 40,
borderRadius: 40,
backgroundColor: '#fc4000',
},
goodsNums: {
width: width * 0.85 * 0.3333 * 0.9 - 100,
height: 40,
textAlign: 'center',
fontSize: 40,
position: 'absolute',
left: 50,
},
goodsAdd: {
width: 40,
height: 40,
borderRadius: 40,
backgroundColor: '#fc4000',
position: 'absolute',
right: 0,
},
};
export default SearchGoods;
src/models/searchGoods.js
......@@ -2,7 +2,15 @@ import * as api from '../services/searchGoods';
export default {
namespace: 'searchGoods',
state: {},
state: {
goodsNum: {},
},
reducers: {
goodsNum(state, {goodsNumber}) {
state.goodsNum = goodsNumber;
return {...state};
},
},
effects: {
*getStoreGoods(action, {call}) {
return yield call(api.getStoreGoods, action);
......
src/services/searchGoods.js
......@@ -2,6 +2,5 @@ import axios from 'axios';
import qs from 'qs';
export function getStoreGoods(action) {
console.warn(action);
return axios.get(`/store/goods/takeout?${qs.stringify(action)}`);
}
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