reza added orders

master
Reza_ashrafi 3 years ago
parent 76584c35eb
commit c882324bd0
  1. 10
      android/app/build.gradle
  2. 5
      android/gradlew
  3. 175
      navigation.js
  4. 125
      src/screens/Home/components/Blogs.js
  5. 110
      src/screens/Home/components/MyBooks.js
  6. 113
      src/screens/Home/components/MyVideos.js
  7. 113
      src/screens/Home/components/shop.js
  8. 15
      src/screens/Home/index.js
  9. BIN
      src/screens/OrderDetails/assets/b1.png
  10. 70
      src/screens/OrderDetails/components/Book.js
  11. 312
      src/screens/OrderDetails/index.js
  12. BIN
      src/screens/OrdersFollowUp/assets/b1.png
  13. BIN
      src/screens/OrdersFollowUp/assets/b2.png
  14. BIN
      src/screens/OrdersFollowUp/assets/b3.png
  15. BIN
      src/screens/OrdersFollowUp/assets/leftArrow.png
  16. BIN
      src/screens/OrdersFollowUp/assets/plus.png
  17. 175
      src/screens/OrdersFollowUp/components/Order.js
  18. 67
      src/screens/OrdersFollowUp/index.js

@ -128,17 +128,17 @@ def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitect
android { android {
ndkVersion rootProject.ext.ndkVersion ndkVersion rootProject.ext.ndkVersion
compileSdkVersion rootProject.ext.compileSdkVersion compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig { defaultConfig {
applicationId "com.rndanovin" applicationId "com.rndanovin"
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion 21
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1 versionCode 1
versionName "1.0" versionName "1.0"
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line missingDimensionStrategy 'react-native-camera', 'general'
multiDexEnabled true
} }
splits { splits {
abi { abi {
@ -192,6 +192,8 @@ android {
} }
dependencies { dependencies {
implementation 'androidx.multidex:multidex:2.0.1'
implementation fileTree(dir: "libs", include: ["*.jar"]) implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion //noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules implementation "com.facebook.react:react-native:+" // From node_modules

5
android/gradlew vendored

@ -1,5 +1,4 @@
#!/usr/bin/env sh #!/usr/bin/env sh
# #
# Copyright 2015 the original author or authors. # Copyright 2015 the original author or authors.
# #
@ -93,14 +92,12 @@ if [ -n "$JAVA_HOME" ] ; then
fi fi
if [ ! -x "$JAVACMD" ] ; then if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the Please set the JAVA_HOME variable in your environment to match the
location of your Java installation." location of your Java installation."
fi fi
else else
JAVACMD="java" JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the Please set the JAVA_HOME variable in your environment to match the
location of your Java installation." location of your Java installation."
fi fi
@ -182,4 +179,4 @@ APP_ARGS=`save "$@"`
# Collect all arguments for the java command, following the shell quoting and substitution rules # Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
exec "$JAVACMD" "$@" exec "$JAVACMD" "$@"

@ -1,105 +1,124 @@
import * as React from 'react'; import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {createNativeStackNavigator} from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Splash from './src/screens/Splash'; import Splash from './src/screens/Splash';
import Home from './src/screens/Home'; import Home from './src/screens/Home';
import Login from './src/screens/Login'; import Login from './src/screens/Login';
import Otp from "./src/screens/Otp"; import Otp from './src/screens/Otp';
import Product from './src/screens/Product'; import Product from './src/screens/Product';
import Products from './src/screens/Products'; import Products from './src/screens/Products';
import ShoppingCart from './src/screens/ShoppingCart'; import ShoppingCart from './src/screens/ShoppingCart';
import QR from './src/screens/QR/index'; import QR from './src/screens/QR/index';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import i18n from "./src/services/i18n"; import i18n from './src/services/i18n';
import {useTranslation} from "react-i18next"; import {useTranslation} from 'react-i18next';
import Profile from "./src/screens/Profile"; import Profile from './src/screens/Profile';
import Videos from "./src/screens/Videos"; import Videos from './src/screens/Videos';
import Exams from "./src/screens/Exams"; import Exams from './src/screens/Exams';
import OrderDetails from './src/screens/OrderDetails';
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
profile: state.profile, profile: state.profile,
config: state.config, config: state.config,
}; };
}; };
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
function BottomTab(props) { function BottomTab(props) {
const {t} = useTranslation('translation', {keyPrefix: 'main'});
const {t} = useTranslation('translation', {keyPrefix: 'main'}); return (
<Tab.Navigator initialRouteName={'Home'}>
return ( <Tab.Screen
<Tab.Navigator initialRouteName={'Home'}> name={'Profile'}
<Tab.Screen name={'Profile'} component={Profile} options={{ component={Profile}
title: t('profile') options={{
}} /> title: t('profile'),
<Tab.Screen name={'Exams'} component={Exams} options={{ }}
title: t('exams') />
}} /> <Tab.Screen
<Tab.Screen name={'Videos'} component={Videos} options={{ name={'Exams'}
title: t('videos') component={Exams}
}} /> options={{
<Tab.Screen name={'Product'} component={Product} options={{ title: t('exams'),
title: t('books') }}
}} /> />
<Tab.Screen name={'Home'} component={Home} options={{ <Tab.Screen
title: t('home') name={'Videos'}
}} /> component={Videos}
</Tab.Navigator> options={{
) title: t('videos'),
}}
/>
<Tab.Screen
name={'OrderDetails'}
component={OrderDetails}
options={{
title: t('books'),
}}
/>
<Tab.Screen
name={'Home'}
component={Home}
options={{
title: t('home'),
}}
/>
</Tab.Navigator>
);
} }
function Navigator(props) { function Navigator(props) {
React.useEffect(() => {
i18n.changeLanguage(props.config.lan);
}, [props.config]);
React.useEffect(() => { return (
i18n.changeLanguage(props.config.lan) <NavigationContainer>
}, [props.config]) <Stack.Navigator>
<Stack.Screen
return ( options={{headerShown: false}}
<NavigationContainer> name="Splash"
<Stack.Navigator> component={Splash}
<Stack.Screen />
options={{headerShown: false}} <Stack.Screen
name="Splash" name="Login"
component={Splash} component={Login}
/> options={{headerShown: false}}
<Stack.Screen />
name="Login" <Stack.Screen
component={Login} name="Otp"
options={{headerShown: false}} component={Otp}
/> options={{headerShown: false}}
<Stack.Screen />
name="Otp" <Stack.Screen
component={Otp} name="Home"
options={{headerShown: false}} component={BottomTab}
/> options={{headerShown: false}}
<Stack.Screen name="Home" component={BottomTab} options={{headerShown: false}}/> />
<Stack.Screen <Stack.Screen
name="Product" name="Product"
component={Product} component={Product}
options={{headerShown: false}} options={{headerShown: false}}
/> />
<Stack.Screen <Stack.Screen
name="Products" name="Products"
component={Products} component={Products}
options={{headerShown: false}} options={{headerShown: false}}
/> />
<Stack.Screen <Stack.Screen name="QR" component={QR} options={{headerShown: true}} />
name="QR" <Stack.Screen
component={QR} name="سبد خرید"
options={{headerShown: true}} component={ShoppingCart}
/> options={{headerShown: true}}
<Stack.Screen />
name="سبد خرید" </Stack.Navigator>
component={ShoppingCart} </NavigationContainer>
options={{headerShown: true}} );
/>
</Stack.Navigator>
</NavigationContainer>
);
} }
export default connect(mapStateToProps)(Navigator); export default connect(mapStateToProps)(Navigator);

@ -1,125 +0,0 @@
import React from 'react';
import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
import food from '../assets/food.png';
import arrowIcon from '../assets/arrow.png';
import userImage from '../assets/user.png';
import message from '../assets/message.png';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Shop({blogs}) {
return (
<View
style={[
tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
{
direction: 'rtl',
},
]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color: '#196EC0'},
]}>
فروشگاه
</Text>
<Image source={arrowIcon} style={[{width: 30, height: 30}]} />
</View>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
<View
style={[
tw.style('flex flex-col flex-wrap'),
{height: (height / 4) * 1.52},
]}>
{blogs.map((blog, index) => (
<View style={[tw.style('items-start m-1 relative')]} key={index}>
<Image
style={[
{
width: width / 1.5,
height: height / 5,
},
tw.style('rounded-md'),
]}
source={blog.imageUrl}
/>
<View
style={[
tw.style(
'flex flex-col rounded-md bg-white absolute bottom-0 shadow-md p-2',
),
{width: '90%', left: '5%', transform: [{translateY: 32}]},
]}>
<Text
style={[
tw.style('text-blue-500 mb-4 text-left font-semibold w-full'),
{fontSize: width / 27, color: '#196EC0'},
]}>
{blog.name}
</Text>
<View style={[tw.style('flex flex-row justify-between')]}>
<View style={[tw.style('flex flex-row items-center')]}>
<Image source={userImage} style={[tw.style('rounded-full'), {width : 25, height : 25}]} />
<Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'اکبر یوسفی'}</Text>
</View>
<View style={[tw.style('flex flex-row items-center')]}>
<Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'زمان مطالعه 30 دقیقه'}</Text>
<Image source={message} style={[tw.style(''), {width : 25, height : 25}]} />
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
);
}
Shop.defaultProps = {
blogs: [
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 3,
progress: 70,
},
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 4,
progress: 60,
},
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 12,
progress: 90,
},
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 3,
progress: 70,
},
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 4,
progress: 60,
},
{
name: 'آیا مواد غذای پر فیبر مفید هستند؟',
imageUrl: food,
grade: 12,
progress: 90,
},
],
};

@ -1,110 +0,0 @@
import React from 'react';
import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import olum2Image from '../assets/olum2.png';
import olum1Image from '../assets/olum1.png';
import zist11Image from '../assets/zist11.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function MyBooks({myBooks}) {
return (
<View
style={[
tw.style(
'flex flex-col shadow-sm rounded-md py-4 px-2 border items-start',
),
{
backgroundColor: '#E9F0FF',
borderColor: '#D2E0FD',
direction: 'rtl',
},
]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color : '#196EC0'},
]}>
کتاب من
</Text>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
{myBooks.map((book, index) => (
<View style={[tw.style('flex flex-col mr-4 items-start')]} key={index}>
<Image
style={
[{width: width / 3, height: height / 4}, tw.style('rounded-md')]
}
source={book.imageUrl}
/>
<Text
style={[
{marginVertical: 10, color: '#05335F', fontSize: width / 27},
tw.style('font-semibold'),
]}>
{book.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30}}>
{book.grade}
</Text>
<View
style={[
tw.style('rounded-md mt-4'),
{height: 6, width: '100%', backgroundColor: '#D3E9FF'},
]}>
<View
style={[
tw.style('h-full rounded-md'),
{width: book.progress + '%', backgroundColor : "#2B8DEB"},
]}></View>
</View>
</View>
))}
</ScrollView>
</View>
);
}
MyBooks.defaultProps = {
myBooks: [
{
name: 'علوم تجربی',
imageUrl: zist11Image,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: zist11Image,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: zist11Image,
grade: 12,
progress: 90,
},
{
name: 'علوم تجربی',
imageUrl: zist11Image,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: zist11Image,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: zist11Image,
grade: 12,
progress: 90,
},
],
};

@ -1,113 +0,0 @@
import React from 'react';
import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import arrowIcon from '../assets/arrow.png';
import olum2Image from '../assets/olum2.png';
import olum1Image from '../assets/olum1.png';
import shoe from '../assets/shoe.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function MyBooks({myBooks}) {
return (
<View
style={[
tw.style(
'flex flex-col rounded-md pt-7 px-2 items-start',
),
{
direction: 'rtl',
},
]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 20, color: '#196EC0'},
]}>
دورههای ویدئویی شما
</Text>
<Image source={arrowIcon} style={[{width : 30, height : 30}]} />
</View>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
{myBooks.map((book, index) => (
<View style={[tw.style('flex flex-col mr-2 items-start')]} key={index}>
<Image
style={
[{width: width / 1.7, height: height / 6}, tw.style('rounded-md')]
}
source={book.imageUrl}
/>
<Text
style={[
{marginVertical: 10, color: '#05335F', fontSize: width / 27},
tw.style('font-semibold'),
]}>
{book.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30}}>
{book.grade}
</Text>
<View
style={[
tw.style('rounded-md mt-4'),
{height: 6, width: '100%', backgroundColor: '#D3E9FF'},
]}>
<View
style={[
tw.style('h-full rounded-md'),
{width: book.progress + '%', backgroundColor : "#2B8DEB"},
]}></View>
</View>
</View>
))}
</ScrollView>
</View>
);
}
MyBooks.defaultProps = {
myBooks: [
{
name: 'علوم تجربی',
imageUrl: shoe,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: shoe,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: shoe,
grade: 12,
progress: 90,
},
{
name: 'علوم تجربی',
imageUrl: shoe,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: shoe,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: shoe,
grade: 12,
progress: 90,
},
],
};

@ -1,113 +0,0 @@
import React from 'react';
import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
import zist11Image from '../assets/zist11.png';
import arrowIcon from '../assets/arrow.png';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Shop({books}) {
return (
<View
style={[
tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
{
direction: 'rtl',
},
]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color: '#196EC0'},
]}>
فروشگاه
</Text>
<Image source={arrowIcon} style={[{width : 30, height : 30}]} />
</View>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
<View
style={[
tw.style('flex flex-col flex-wrap'),
{height: (height / 4) * 1.22},
]}>
{books.map((book, index) => (
<View
style={[
tw.style('items-start m-0.5'),
{
height:
Number(index) === 0
? (height / 4) * 1.2
: (height / 4) * 0.6 - 2,
},
]}
key={index}>
<Image
style={[
{
width:
Number(index) === 0
? (width / 3) * 1.2
: (width / 3) * 0.7,
height:
Number(index) === 0
? (height / 4) * 1.2
: (height / 4) * 0.6 - 2,
},
tw.style('rounded-md'),
]}
source={book.imageUrl}
/>
</View>
))}
</View>
</ScrollView>
</View>
);
}
Shop.defaultProps = {
books: [
{
name: 'علوم تجربی',
imageUrl: zist11Image,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: zist11Image,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: zist11Image,
grade: 12,
progress: 90,
},
{
name: 'علوم تجربی',
imageUrl: zist11Image,
grade: 3,
progress: 70,
},
{
name: 'زیست شناسی',
imageUrl: zist11Image,
grade: 4,
progress: 60,
},
{
name: 'علوم اجتماعی',
imageUrl: zist11Image,
grade: 12,
progress: 90,
},
],
};

@ -1,18 +1,15 @@
import React from "react"; import React from "react";
import { View, StyleSheet, Dimensions, ScrollView } from "react-native"; import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
import MyBooks from './components/MyBooks'; import tw from 'tailwind-react-native-classnames';
import Shop from './components/Shop';
import MyVideos from './components/MyVideos';
import Blogs from './components/Blogs';
// Within your render function // Within your render function
function Home(props) { function Home(props) {
return ( return (
<ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}> <ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}>
<MyBooks /> <View style={tw.style('w-full h-screen flex flex-col items-center justify-center')}>
<Shop />
<MyVideos /> </View>
<Blogs />
</ScrollView> </ScrollView>
); );
} }
@ -27,7 +24,7 @@ const styles = StyleSheet.create({
backgroundColor: "white", backgroundColor: "white",
flexDirection: "column", flexDirection: "column",
paddingVertical : 5, paddingVertical : 5,
paddingHorizontal : 10 paddingHorizontal : 5
} }
}); });

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

@ -0,0 +1,70 @@
import React from 'react';
import {View, Text, Dimensions, Image} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import _ from 'lodash';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Book({book}) {
return (
<View
style={[
tw.style('w-full flex flex-row-reverse justify-between py-3'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<View style={tw.style('flex flex-row-reverse items-center flex-1')}>
<Image
source={book}
style={[
tw.style('rounded-md'),
{width: width / 5.5, height: height / 8},
]}
/>
<View style={tw.style('flex flex-col items-end mr-2')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 30, color: '#05335F'},
]}>
علوم اجتماعی
</Text>
<Text
style={[
tw.style('font-medium mt-2'),
{fontSize: width / 36, color: '#707070'},
]}>
پایه دوم
</Text>
<Text
style={[
tw.style('font-medium mt-2'),
{fontSize: width / 36, color: '#707070'},
]}>
نسخه دیجیتال
</Text>
</View>
</View>
<View style={tw.style('flex flex-row-reverse items-center')}>
<Text
style={[
tw.style('font-medium py-1 px-2'),
{
color: '#132F52',
fontSize: width / 34,
backgroundColor: '#F1F1F1',
},
]}>
1
</Text>
<Text
style={[
tw.style('font-medium mr-3'),
{color: '#132F52', fontSize: width / 34},
]}>
126.000 تومان
</Text>
</View>
</View>
);
}

@ -0,0 +1,312 @@
import React from 'react';
import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
import Book from './components/Book';
import {connect} from 'react-redux';
import tw from 'tailwind-react-native-classnames';
import b1Image from './assets/b1.png';
import _ from 'lodash';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const colors = {
1: '#FFF700',
4: '#FF0000',
3: '#4CFF00',
2: '#196EC0',
};
const status = {
1: 'در حال پردازش',
4: 'درخواست رد شد',
3: 'تکمیل شد',
2: 'ارسال شده',
};
function OrderDetails({order}) {
return (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
<View
style={[
tw.style(
'flex flex-row-reverse w-full justify-between items-center p-3',
),
{backgroundColor: '#EEF7FF'},
]}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#20297B'},
]}>
{_.join(['شماره سفارش:', order.number], ' ')}
</Text>
<View style={tw.style('flex flex-row-reverse items-center')}>
<Text
style={[
tw.style('font-light'),
{color: '#20297B', fontSize: width / 32},
]}>
{status[order.status]}
</Text>
<View
style={[
tw.style('h-4 w-4 rounded-full mr-2'),
{backgroundColor: colors[order.status]},
]}></View>
</View>
</View>
<View
style={[
tw.style('w-full flex flex-row-reverse py-4'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
آدرس تحویل:
</Text>
<Text
style={[
tw.style('flex-1 font-light text-right mr-2'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{order.address}
</Text>
</View>
<View
style={[
tw.style('w-full flex flex-row-reverse justify-between py-4'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
مشخصات تحویل گیرنده:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.name}
</Text>
</View>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
شماره موبایل:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{order.cellphone}
</Text>
</View>
</View>
<View
style={[
tw.style('w-full rounded-md flex flex-col p-4 items-end mt-2'),
{backgroundColor: '#EEF6FF'},
]}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
{_.join(['کد تحویل', order.receiveCode], ' ')}
</Text>
<Text
style={[
tw.style('font-light text-right mt-2'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
</Text>
</View>
<View style={tw.style('w-full flex flex-column items-end')}>
{order.items.map((item, index) => (
<Book book={item} key={index} />
))}
</View>
<View
style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
مبلغ سبد خرید:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{_.join([order.shoppingCardPrice, 'تومان'], ' ')}
</Text>
</View>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
تخفیف:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{_.join([order.discountPrice, 'تومان'], ' ')}
</Text>
</View>
</View>
<View
style={[
tw.style('w-full flex flex-row-reverse justify-between py-4'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
هزینه ارسال کالا:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{_.join([order.sendPrice, 'تومان'], ' ')}
</Text>
</View>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
جمع هزینه پرداختی:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{_.join([order.totalPrice, 'تومان'], ' ')}
</Text>
</View>
</View>
<View
style={[
tw.style('w-full flex flex-row-reverse justify-between py-4'),
{borderBottomWidth: 1, borderColor: '#86A0B933'},
]}>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
نحوه پرداخت:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.payMethod}
</Text>
</View>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
شماره تراکنش:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 17, color: '#05335F'},
]}>
{order.transactionNumber}
</Text>
</View>
</View>
<View
style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
<View style={tw.style('flex flex-row-reverse')}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#05335F'},
]}>
تاریخ تحویل:
</Text>
<Text
style={[
tw.style('font-light text-right mr-1'),
{fontSize: width / 32, lineHeight: 15, color: '#05335F'},
]}>
{order.date}
</Text>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
alignItems: 'flex-end',
},
container: {
width: width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});
export default OrderDetails;
OrderDetails.defaultProps = {
order: {
number: '535353523653',
receiveCode: '300031',
status: 2,
items: [b1Image, b1Image],
date: '1400/1/11',
cost: '1.240.000',
address:
'تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی',
name: 'هومن عابدی',
cellphone: '09121234568',
shoppingCardPrice: '981.000',
discountPrice: '12.000',
sendPrice: '18.000',
totalPrice: '18.000',
payMethod: 'حضوری',
transactionNumber: ' BS3194DNB98312',
},
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

@ -0,0 +1,175 @@
import React from 'react';
import {
View,
Text,
Dimensions,
StyleSheet,
Image,
Pressable,
} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import leftArrowIcon from '../assets/leftArrow.png';
import plusIcon from '../assets/plus.png';
import _ from 'lodash';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const colors = {
1: '#FFF700',
4: '#FF0000',
3: '#4CFF00',
2: '#196EC0',
};
const status = {
1: 'در حال پردازش',
4: 'درخواست رد شد',
3: 'تکمیل شد',
2: 'ارسال شده',
};
function Order({order}) {
return (
<View
style={[
tw.style('w-full flex flex-col rounded-md overflow-hidden my-3'),
{borderWidth: 1, borderColor: '#EEF7FF'},
]}>
<View
style={[
tw.style(
'flex flex-row-reverse w-full justify-between items-center p-3',
),
{backgroundColor: '#EEF7FF'},
]}>
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 32, color: '#20297B'},
]}>
{_.join(['شماره سفارش:', order.number], ' ')}
</Text>
<View style={tw.style('flex flex-row-reverse items-center')}>
<Text
style={[
tw.style('font-light'),
{color: '#20297B', fontSize: width / 32},
]}>
{status[order.status]}
</Text>
<View
style={[
tw.style('h-4 w-4 rounded-full mr-2'),
{backgroundColor: colors[order.status]},
]}></View>
</View>
</View>
<View
style={tw.style('w-full flex flex-row-reverse justify-between p-3')}>
<View style={tw.style('flex flex-col')}>
<View style={tw.style('flex flex-row-reverse mb-2')}>
{order.items.length < 2
? order?.items?.map(item => (
<Image
source={item}
style={[
tw.style('rounded-md ml-1.5'),
{width: width / 5.8, height: height / 8},
]}
/>
))
: order.items
?.slice(0, 1)
?.map(item => (
<Image
source={item}
style={[
tw.style('rounded-md ml-1.5'),
{width: width / 5.8, height: height / 8},
]}
/>
))}
{order.items.length >= 2 && (
<View
style={[
tw.style(
'flex flex-row-reverse items-center justify-center relative rounded-md overflow-hidden',
),
{
width: width / 5.8,
height: height / 8,
backgroundColor: '#EBEBEB',
},
]}>
{/* <Image
source={order.items[2]}
style={[tw.style('absolute left-0 top-0 h-full w-full z-10')]}
/> */}
<Image source={plusIcon} style={[tw.style('w-4 h-6 z-30')]} />
</View>
)}
</View>
<View style={[tw.style('bg-red-400')]}>
<Text
style={[
tw.style('p-2 rounded-md text-center'),
{
fontSize: width / 32,
backgroundColor: '#F0FFF1',
color: '#05335F',
},
]}>
{_.join(['کد تحویل:', order.receiveCode], ' ')}
</Text>
</View>
</View>
<View style={tw.style('flex flex-col items-center mr-4')}>
<Text
style={[
tw.style('my-3'),
{fontSize: width / 25, color: '#132F52'},
]}>
{_.join(['جمع فاکتور:', order.cost], ' ')}
</Text>
<Pressable
style={[
tw.style('rounded-md flex flex-row-reverse justify-center px-5 py-3'),
{borderWidth: 1, borderColor: '#1999C0'},
]}>
<Text style={{fontSize: width / 28, color: '#1999C0'}}>
جزئیات سفارش
</Text>
<Image
source={leftArrowIcon}
style={{width: 18, height: 18, marginRight: 10}}
/>
</Pressable>
<Text
style={[
tw.style('my-5'),
{fontSize: width / 30, color: '#132F52'},
]}>
{_.join(['تاریخ سفارش:', order.date], ' ')}
</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
alignItems: 'flex-end',
},
container: {
width: width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});
export default Order;

@ -1,13 +1,66 @@
import React from 'react' import React from 'react';
import { View, Text } from 'react-native'; import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
import Order from './components/Order';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import b1Image from './assets/b1.png';
import b2Image from './assets/b2.png';
import b3Image from './assets/b3.png';
function OrdersFollowUp({}) { const width = Dimensions.get('window').width;
function OrdersFollowUp({orders}) {
return ( return (
<View> <ScrollView
<Text></Text> contentContainerStyle={styles.contentContainerStyle}
</View> style={styles.container}>
) {
orders.map((order, index) => <Order order={order} key={index} />)
}
</ScrollView>
);
} }
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
alignItems: 'flex-end',
},
container: {
width: width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});
export default OrdersFollowUp; export default OrdersFollowUp;
OrdersFollowUp.defaultProps = {
orders: [
{
number: '535353523653',
receiveCode: '300031',
status: 2,
items: [b1Image, b2Image, b3Image, b3Image],
date: '1400/1/12',
cost: '1.240.000',
},
{
number: '535353523653',
receiveCode: '300031',
status: 3,
items: [b1Image, b2Image, b3Image],
date: '1400/1/12',
cost: '1.240.000',
},
{
number: '535353523653',
receiveCode: '300031',
status: 4,
items: [b1Image, b2Image, b3Image],
date: '1400/1/12',
cost: '1.240.000',
},
],
};

Loading…
Cancel
Save