Danovin
/
RNDanovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added orders

Browse Source
master
Reza_ashrafi 3 years ago
parent 76584c35eb
commit c882324bd0
18 changed files with 727 additions and 563 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

10
android/app/build.gradle
Unescape View File

@ -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
Unescape View File

@ -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" "$@"

175
navigation.js
Unescape View File

@ -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);

125
src/screens/Home/components/Blogs.js
Unescape View File

@ -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,
},
],
};

110
src/screens/Home/components/MyBooks.js
Unescape View File

@ -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,
},
],
};

113
src/screens/Home/components/MyVideos.js
Unescape View File

@ -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,
},
],
};

113
src/screens/Home/components/shop.js
Unescape View File

@ -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,
},
],
};

15
src/screens/Home/index.js
Unescape View File

@ -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
} }
}); });

BIN
src/screens/OrderDetails/assets/b1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

70
src/screens/OrderDetails/components/Book.js
Unescape View File

@ -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>
);
}

312
src/screens/OrderDetails/index.js
Unescape View File

@ -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',
},
};

BIN
src/screens/OrdersFollowUp/assets/b1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/screens/OrdersFollowUp/assets/b2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
src/screens/OrdersFollowUp/assets/b3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/screens/OrdersFollowUp/assets/leftArrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 B

BIN
src/screens/OrdersFollowUp/assets/plus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 B

175
src/screens/OrdersFollowUp/components/Order.js
Unescape View File

@ -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;

67
src/screens/OrdersFollowUp/index.js
Unescape View File

@ -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',
},
],
};

Write Preview
Loading…
Cancel
Save