edited
This commit is contained in:
86
app/components/MyOrders/foodsRow.js
Executable file
86
app/components/MyOrders/foodsRow.js
Executable file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import Text from "react-native-text";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import Size from "../../config/size";
|
||||
const size = new Size();
|
||||
import theme from "../../config/colors";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
import { width, height } from "../../config/screen";
|
||||
|
||||
const dataLanguage = (data, value, lang) => {
|
||||
if (lang == "english") {
|
||||
switch (value) {
|
||||
case "name":
|
||||
return data.nameEn;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (value) {
|
||||
case "name":
|
||||
return data.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const FoodsRow = props => {
|
||||
return (
|
||||
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10 }}>
|
||||
<View style={{ flexDirection: "row", marginBottom: 10 }}>
|
||||
<View style={{ width: "60%" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 15
|
||||
}}
|
||||
>
|
||||
{dataLanguage(props.items.cuisine, "name", props.lang)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop: 3,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
{dataLanguage(props.items.cuisine.restaurant, "name", props.lang)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop: 3,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
Quantity: {props.items.count}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
width: "40%",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 15
|
||||
}}
|
||||
>
|
||||
HKD ${(props.items.price*props.items.count).toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default FoodsRow;
|
||||
83
app/components/MyOrders/foodsRowForOrderDetails.js
Executable file
83
app/components/MyOrders/foodsRowForOrderDetails.js
Executable file
@@ -0,0 +1,83 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import Text from "react-native-text";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import Size from "../../config/size";
|
||||
const size = new Size();
|
||||
import theme from "../../config/colors";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
import { width, height } from "../../config/screen";
|
||||
|
||||
const dataLanguage = (data, value, lang) => {
|
||||
if (lang == "english") {
|
||||
switch (value) {
|
||||
case "name":
|
||||
return data.nameEn;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (value) {
|
||||
case "name":
|
||||
return data.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const FoodsRowForOrderDetails = props => {
|
||||
return (
|
||||
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10 }}>
|
||||
<View style={{ flexDirection: "row", marginBottom: 10 }}>
|
||||
<View style={{ width: "60%" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize:15
|
||||
}}
|
||||
>
|
||||
{dataLanguage(props.items.menu.cuisine, "name", props.lang)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop:3,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13,
|
||||
}}>
|
||||
|
||||
{dataLanguage(props.items.menu.cuisine.restaurant, "name", props.lang)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop:3,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13,
|
||||
}}>Quantity: {props.items.qty}</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
width: "40%",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize:15
|
||||
}}
|
||||
>
|
||||
HKD ${(props.items.price*props.items.qty).toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default FoodsRowForOrderDetails;
|
||||
63
app/components/MyOrders/orderFlatList.js
Executable file
63
app/components/MyOrders/orderFlatList.js
Executable file
@@ -0,0 +1,63 @@
|
||||
import React, { Component } from "react";
|
||||
import Text from "react-native-text";
|
||||
import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
|
||||
import Size from "../../config/size";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import { width, height } from "../../config/screen";
|
||||
import OrderListItems from "./orderListItems";
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class OrderFlatList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.store.passOrder);
|
||||
return (
|
||||
<FlatList
|
||||
data={this.props.data}
|
||||
renderItem={({ item }) => (
|
||||
<OrderListItems
|
||||
items={item}
|
||||
navigation={this.props.navigation}
|
||||
screenWidth={width}
|
||||
whichOrder = {this.props.whichOrder}
|
||||
/>
|
||||
)}
|
||||
//refreshing={this.store.loading}
|
||||
// onRefresh = {()=>{console.log('reload'); this.store.getMenuItem(this);}}
|
||||
// ListFooterComponent={this._renderFooter.bind(this)}
|
||||
// onEndReached= {this._onEndReached.bind(this)}
|
||||
// onEndReachedThreshold={10}//执行上啦的时候10%执行
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5FCFF"
|
||||
},
|
||||
title: {
|
||||
fontSize: 15,
|
||||
color: "blue"
|
||||
},
|
||||
footer: {
|
||||
flexDirection: "row",
|
||||
height: 24,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 10
|
||||
},
|
||||
content: {
|
||||
fontSize: 15,
|
||||
color: "black"
|
||||
}
|
||||
});
|
||||
276
app/components/MyOrders/orderListItems.js
Executable file
276
app/components/MyOrders/orderListItems.js
Executable file
@@ -0,0 +1,276 @@
|
||||
//plugin
|
||||
import React, { Component } from "react";
|
||||
import Text from "react-native-text";
|
||||
import { View, FlatList, TouchableOpacity, StyleSheet,Linking } from "react-native";
|
||||
import Icon from "react-native-vector-icons/dist/Ionicons";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import FastImage from "react-native-fast-image";
|
||||
import { width, height } from "../../config/screen";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
// function
|
||||
import Size from "../../config/size";
|
||||
import theme from "../../config/colors";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
|
||||
var size = new Size();
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class OrderListItems extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
}
|
||||
|
||||
foodName() {
|
||||
var name = "";
|
||||
if (this.props.items.items.length == 1) {
|
||||
name = this.props.items.items[0].menu.cuisine.name;
|
||||
} else {
|
||||
this.props.items.items.forEach(element => {
|
||||
name += element.menu.cuisine.name + ", ";
|
||||
});
|
||||
}
|
||||
return name;
|
||||
}
|
||||
|
||||
linkToEmail(){
|
||||
Linking.openURL('mailto:support@hangryfood.co?subject=&body=')
|
||||
}
|
||||
|
||||
food(items) {
|
||||
return (
|
||||
<View style = {{marginBottom:6}}>
|
||||
<View style = {{flexDirection:'row'}}>
|
||||
|
||||
<View style = {{width:'40%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
|
||||
Food name
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'60%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
|
||||
{this.userStore.dataLanguage(
|
||||
items.menu.cuisine,
|
||||
"name"
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style = {{flexDirection:'row'}}>
|
||||
|
||||
<View style = {{width:'40%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
|
||||
Restauant
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'60%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
|
||||
{this.userStore.dataLanguage(
|
||||
items.menu.cuisine.restaurant,
|
||||
"name"
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style = {{flexDirection:'row',paddingLeft:20}}>
|
||||
|
||||
<View style = {{width:'33%',flexDirection:'row'}}>
|
||||
<Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
|
||||
Qty.
|
||||
</Text>
|
||||
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
|
||||
{items.qty}
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'33%',flexDirection:'row'}}>
|
||||
<Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
|
||||
Price
|
||||
</Text>
|
||||
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
|
||||
{"$"+items.price}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style = {{width:'33%',flexDirection:'row'}}>
|
||||
<Text style ={{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
|
||||
Subtatal
|
||||
</Text>
|
||||
<Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
|
||||
{ "$"+items.price*items.qty}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
discountHandle(){
|
||||
if(this.props.items.discount >0){
|
||||
return(
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
|
||||
{"- "+this.props.items.discount}
|
||||
</Text>
|
||||
)
|
||||
}else{
|
||||
return(
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
|
||||
N/A
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
}
|
||||
clickAction() {
|
||||
if(this.props.whichOrder){
|
||||
this.store.goOrderDetail(this.props.items,this)
|
||||
}
|
||||
|
||||
//this.props.navigation.navigate("OrderDetails", { data: this.props.items });
|
||||
}
|
||||
|
||||
go(data,time){
|
||||
this.props.navigation.navigate("OrderDetails", { data: data, time: time });
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("show up " + this.props.items.status);
|
||||
if (this.props.items.status != "E") {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
width: width - 1
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => this.clickAction()}
|
||||
style={{
|
||||
flexDirection: "row"
|
||||
}}
|
||||
>
|
||||
<View style={{ width: "65%" }}>
|
||||
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
|
||||
Order details
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.textView,
|
||||
{ fontSize: 10, fontWeight: "bold", color: theme.mainColor }
|
||||
]}
|
||||
>
|
||||
{"Order No: " + this.props.items.id}
|
||||
</Text>
|
||||
{this.props.items.items.map((items, key) => {
|
||||
return <View>{this.food(items)}</View>;
|
||||
})}
|
||||
<View style = {{flexDirection:'row'}}>
|
||||
<View style = {{width:'40%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
|
||||
Pick up Point
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'60%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
|
||||
{this.userStore.dataLanguage(
|
||||
this.props.items.pickUpLocation,
|
||||
"name"
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style = {{flexDirection:'row'}}>
|
||||
<View style = {{width:'40%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
|
||||
Discount
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'60%'}}>
|
||||
{this.discountHandle()}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style = {{flexDirection:'row'}}>
|
||||
<View style = {{width:'30%'}}>
|
||||
<Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontSize:16}]}>
|
||||
Total
|
||||
</Text>
|
||||
</View>
|
||||
<View style = {{width:'50%'}}>
|
||||
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
|
||||
HKD$ {this.props.items.payAmount}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: "35%",
|
||||
flex: 1,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
|
||||
Status
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<Text style={{ fontFamily: Fonts.century,fontSize:16,color:theme.coolGrey,marginLeft:20}}>
|
||||
{size.status(this.props.items.status)}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
onPress = {()=>this.linkToEmail()}
|
||||
style={{
|
||||
backgroundColor: theme.mainColor,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginLeft:20,
|
||||
width: scale(80),
|
||||
height: verticalScale(20),
|
||||
borderRadius: 4,
|
||||
marginBottom: 5
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "bold" }}>
|
||||
contact us
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View
|
||||
style={{
|
||||
width: "70%",
|
||||
backgroundColor: "gray",
|
||||
height: 1,
|
||||
marginTop: 10
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
textView: {
|
||||
marginLeft: 20,
|
||||
fontFamily: Fonts.century,
|
||||
marginBottom: 5
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user