reza added cart

master
Reza_ashrafi 3 years ago
parent b9f4596117
commit 58dfd889ec
  1. 33
      src/components/Header.js
  2. 28
      src/components/Pressable.js
  3. BIN
      src/screens/Product/assets/arrowMore.png
  4. BIN
      src/screens/Product/assets/poster.png
  5. BIN
      src/screens/Product/assets/user.png
  6. 192
      src/screens/Product/components/Book.js
  7. 61
      src/screens/Product/components/Comments.js
  8. 35
      src/screens/Product/components/Description.js
  9. 31
      src/screens/Product/components/LinkBox.js
  10. 61
      src/screens/Product/components/Rates.js
  11. 207
      src/screens/Product/components/Video.js
  12. 252
      src/screens/Product/index.js
  13. 18
      src/screens/ShoppingCart/Code.js
  14. 94
      src/screens/ShoppingCart/Table.js
  15. BIN
      src/screens/ShoppingCart/assets/+.png
  16. BIN
      src/screens/ShoppingCart/assets/_.png
  17. BIN
      src/screens/ShoppingCart/assets/alert.png
  18. BIN
      src/screens/ShoppingCart/assets/book.png
  19. BIN
      src/screens/ShoppingCart/assets/delete.png
  20. 36
      src/screens/ShoppingCart/components/Code.js
  21. 91
      src/screens/ShoppingCart/components/Product.js
  22. 123
      src/screens/ShoppingCart/index.js
  23. BIN
      src/screens/Support/assets/bgContact.png
  24. BIN
      src/screens/Support/assets/bgFaq.png
  25. BIN
      src/screens/Support/assets/bgQr.png
  26. BIN
      src/screens/Support/assets/call.png
  27. BIN
      src/screens/Support/assets/qr.png
  28. 35
      src/screens/Support/index.js

@ -0,0 +1,33 @@
import React from 'react';
import {View, Text, Dimensions, Image} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Header({icon, title, description, background}) {
return (
<View
style={[
tw.style('w-full flex flex-col items-center justify-end pb-3 relative'),
{height: height / 4, backgroundColor: '#196EC015'},
]}>
<Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
<Image source={icon} style={[{width : width / 5, height : height / 10}]} />
<Text
style={[
{fontSize: width / 14, color: '#196EC0'},
tw.style('font-bold'),
]}>
{title}
</Text>
<Text
style={[
{color: '#86A0B9', fontSize: width / 30},
tw.style('font-semibold mb-2'),
]}>
{description}
</Text>
</View>
);
}

@ -0,0 +1,28 @@
import React from 'react';
import {Pressable, Text, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const fullWidth = Dimensions.get('window').width;
export default function Pressable1({
title,
backgroundColor,
color,
border,
width,
}) {
return (
<Pressable
style={[
tw.style('rounded-md py-3 flex flex-row justify-center mb-3'),
{
backgroundColor: backgroundColor,
borderWidth: border.width,
borderColor: border.color,
width : width,
},
]}>
<Text style={{fontSize: fullWidth / 27, color: color}}>{title}</Text>
</Pressable>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

@ -0,0 +1,192 @@
import {t} from 'i18next';
import React from 'react';
import {
View,
Text,
Image,
Dimensions,
ScrollView,
Pressable,
} from 'react-native';
import CustomPressable from '../../../components/Pressable';
import Description from './Description';
import LinkBox from './LinkBox';
import Comments from './Comments';
import Rates from './Rates';
import tw from 'tailwind-react-native-classnames';
import arrowMoreIcon from '../assets/arrowMore.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Book({product}) {
return (
<ScrollView style={[tw.style('flex flex-col flex-1')]}>
<View style={tw.style('flex flex-row-reverse')}>
<View
style={[
tw.style('rounded-md'),
{height: height / 5, width: width / 3.5},
]}>
<Image
source={{uri: product.imageUrl}}
style={[tw.style('rounded-md h-full w-full')]}
/>
</View>
<View
style={[
tw.style('flex flex-col flex-1 justify-between items-end'),
{
paddingRight: 10,
},
]}>
<View style={tw.style('flex flex-col items-end')}>
<Text
style={{
color: '#05335F',
fontSize: width / 17,
marginBottom: 5,
}}>
{product.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30}}>
{product.grade}
</Text>
</View>
<Text
style={[
tw.style('text-right w-full'),
{color: '#323232', fontSize: width / 32},
]}>
{product.text}
</Text>
</View>
</View>
<View
style={tw.style(
'flex flex-row-reverse items-center justify-around py-6',
)}>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{473 + '\n' + 'صفحه'}
</Text>
</View>
<View
style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{'فیزیکی- دیجیتالی - ویدئو' + '\n' + 'در دسترس'}
</Text>
</View>
<View
style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{4.8 + '\n' + 'امتیاز'}
</Text>
</View>
</View>
<View style={'flex flex-col mt-3'}>
<Text
style={[
tw.style('w-full text-right font-medium'),
{color: '#196EC0', fontSize: width / 26},
]}>
نسخه محصول را انتخاب کنید
</Text>
<View style={tw.style('flex justify-between')}></View>
</View>
<View
style={tw.style(
'flex flex-row-reverse justify-between flex-wrap py-3',
)}>
<CustomPressable
title={'نسخه فیزیکی'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'49%'}
/>
<CustomPressable
title={'نسخه دیجیتال'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'49%'}
/>
<CustomPressable
title={'خرید با قیمت 245.000 تومان'}
backgroundColor="#196EC0"
color={'white'}
border={{color: '#196EC0', width: 0}}
width={'65%'}
/>
<CustomPressable
title={'مشاهده نمونه'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'33%'}
/>
<Pressable
style={[
tw.style(
'w-full rounded-md flex flex-row justify-center items-center py-3.5',
),
{backgroundColor: '#196EC01a'},
]}>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
<Text
style={[tw.style(''), {color: '#275077', fontSize: width / 27}]}>
مشاهده دوره ویدئویی این محصول
</Text>
</Pressable>
</View>
<Description description={product.description} />
<LinkBox title="مشخصات محصول" path="" />
<LinkBox title="نقد بررسی و توضیحات تکمیلی محصول" path="" />
<LinkBox title="پرسش و پاسخ" path="" />
<View
style={tw.style(
'flex flex-row-reverse justify-between items-center my-4',
)}>
<Text
style={[
{fontSize: width / 25, color: '#275077'},
tw.style('semibold'),
]}>
امتیازات و نظرات
</Text>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
</View>
<Rates rates={product.rates} />
<Comments comments={product.comments} />
</ScrollView>
);
}

@ -0,0 +1,61 @@
import React from 'react';
import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
export default function Commnets({comments}) {
return (
<ScrollView horizontal={true} style={{direction: 'rtl', marginTop: 20}}>
{comments.map((comment, index) => (
<Comment comment={comment} key={index} />
))}
</ScrollView>
);
}
const Comment = ({comment}) => {
return (
<View
style={[
tw.style('flex flex-col rounded-md p-4 ml-2'),
{width: width / 1.3, borderWidth: 1, borderColor: '#7070701a'},
]}>
<View style={[tw.style('flex flex-row justify-between items-center')]}>
<View style={tw.style('flex flex-row items-center')}>
<Image
source={comment.imageUrl}
style={[tw.style('rounded-full'), {width: 35, height: 35}]}
/>
<Text
style={[
{fontSize: width / 25, color: '#132F52'},
tw.style('font-bold'),
]}>
{comment.name}
</Text>
</View>
<View style={tw.style('flex flex-row items-center')}>
<Text style={{fontSize: width / 38, color: '#196EC0'}}>18:20</Text>
<View
style={{
backgroundColor: '#196EC055',
height: 12,
width: 2,
marginHorizontal: 4,
}}></View>
<Text style={{fontSize: width / 38, color: '#196EC0'}}>
1400/08/19
</Text>
</View>
</View>
<Text
style={[
{fontSize: width / 32, lineHeight: 20, color: '#132F52'},
tw.style('text-left mt-2'),
]}>
{comment.message}
</Text>
</View>
);
};

@ -0,0 +1,35 @@
import React from 'react';
import {View, Text, Dimensions, Image} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import arrowMoreIcon from '../assets/arrowMore.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Description({description}) {
return (
<View style={[tw.style('w-full flex flex-col pt-6 mt-2 mb-3'), {borderTopWidth : 1, borderColor : '#86A0B944'}]}>
<View
style={tw.style('flex flex-row-reverse justify-between items-center mb-2')}>
<Text
style={[
{fontSize: width / 25, color: '#275077'},
tw.style('semibold'),
]}>
توضیحات
</Text>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
</View>
<Text
style={[
tw.style('w-full text-right mt-2'),
{fontSize: width / 30, color: '#323232bb', lineHeight: 20},
]}>
{description}
</Text>
</View>
);
}

@ -0,0 +1,31 @@
import React from 'react';
import {View, Text, Dimensions, Image} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import arrowMoreIcon from '../assets/arrowMore.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Description({title, path}) {
return (
<View
style={[
tw.style('flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-4'),
{
backgroundColor: '#50A9FF33'
}
]}>
<Text
style={[
{fontSize: width / 30, color: '#275077'},
tw.style('semibold'),
]}>
{title}
</Text>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
</View>
);
}

@ -0,0 +1,61 @@
import React from 'react';
import {View, Text, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
export default function Rates({rates}) {
return (
<View style={tw.style('flex flex-row-reverse')}>
<View
style={[
tw.style('flex flex-col items-center justify-center'),
{width: '25%'},
]}>
<Text
style={[
tw.style('font-bold'),
{fontSize: width / 10, color: '#05335F'},
]}>
{rates.mid}
</Text>
<Text style={{fontSize: width / 30, color: '#707070'}}>
{'از' + ' ' + rates.allRates + ' ' + 'نفر'}
</Text>
</View>
<View style={[tw.style('flex flex-col flex-1'), {width: '60%'}]}>
{rates.fields.map((field, index) => (
<Progress key={index} data={field} />
))}
</View>
</View>
);
}
const Progress = ({data}) => {
return (
<View style={[tw.style('flex flex-1 flex-row items-center py-0.5')]}>
<Text style={{fontSize: width / 30, color: '#05335F'}}>{data.name}</Text>
<View
style={[
tw.style('rounded-md ml-2 flex-1'),
{height: 6, backgroundColor: '#D3E9FF'},
]}>
<View
style={[
tw.style('h-full rounded-md my-auto'),
{width: data.value + '%', backgroundColor: '#2B8DEB'},
]}></View>
</View>
<Text
style={{
fontSize: width / 30,
width: width / 7.5,
textAlign: 'center',
color: '#05335F',
}}>
{data.value + '%'}
</Text>
</View>
);
};

@ -0,0 +1,207 @@
import {t} from 'i18next';
import React from 'react';
import {
View,
Text,
Image,
Dimensions,
ScrollView,
Pressable,
} from 'react-native';
import CustomPressable from '../../../components/Pressable';
import Description from './Description';
import LinkBox from './LinkBox';
import Comments from './Comments';
import Rates from './Rates';
import tw from 'tailwind-react-native-classnames';
import arrowMoreIcon from '../assets/arrowMore.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Video({product}) {
return (
<ScrollView style={[tw.style('flex flex-col flex-1')]}>
<View style={tw.style('flex flex-column')}>
<View
style={[
tw.style(
'w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden',
),
{height: height / 3.8},
]}>
{/* <View
style={[
tw.style('rounded-full bg-black bg-opacity-20 z-50'),
{width: 50, height: 50},
]}></View> */}
<Image
source={product.poster}
style={tw.style('w-full rounded-md h-full absolute left-0 top-0')}
/>
<Image
source={{uri: product.imageUrl}}
style={[
tw.style('rounded-md h-full rounded-md ml-2'),
{width: width / 5, height: height / 7},
]}
/>
</View>
<View
style={[
tw.style('flex flex-col flex-1 justify-between items-end'),
{
paddingRight: 10,
},
]}>
<View style={tw.style('flex flex-col items-end')}>
<Text
style={{
marginTop : 5,
color: '#05335F',
fontSize: width / 17,
marginBottom: 5,
}}>
{product.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30, marginBottom: 10}}>
{product.grade}
</Text>
</View>
<Text
style={[
tw.style('text-right w-full'),
{color: '#323232', fontSize: width / 32},
]}>
{product.text}
</Text>
</View>
</View>
<View
style={tw.style(
'flex flex-row-reverse items-center justify-around py-6',
)}>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{473 + '\n' + 'صفحه'}
</Text>
</View>
<View
style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{'فیزیکی- دیجیتالی - ویدئو' + '\n' + 'در دسترس'}
</Text>
</View>
<View
style={{backgroundColor: '#196EC055', height: 20, width: 2}}></View>
<View>
<Text
style={{
color: '#196EC0',
textAlign: 'center',
fontSize: width / 27,
}}>
{' '}
{4.8 + '\n' + 'امتیاز'}
</Text>
</View>
</View>
<View style={'flex flex-col mt-3'}>
<Text
style={[
tw.style('w-full text-right font-medium'),
{color: '#196EC0', fontSize: width / 26},
]}>
نسخه محصول را انتخاب کنید
</Text>
<View style={tw.style('flex justify-between')}></View>
</View>
<View
style={tw.style(
'flex flex-row-reverse justify-between flex-wrap py-3',
)}>
<CustomPressable
title={'نسخه فیزیکی'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'49%'}
/>
<CustomPressable
title={'نسخه دیجیتال'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'49%'}
/>
<CustomPressable
title={'خرید با قیمت 245.000 تومان'}
backgroundColor="#196EC0"
color={'white'}
border={{color: '#196EC0', width: 0}}
width={'65%'}
/>
<CustomPressable
title={'مشاهده نمونه'}
backgroundColor="transparent"
color={'#196EC0'}
border={{color: '#196EC0', width: 1}}
width={'33%'}
/>
<Pressable
style={[
tw.style(
'w-full rounded-md flex flex-row justify-center items-center py-3.5',
),
{backgroundColor: '#196EC01a'},
]}>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
<Text
style={[tw.style(''), {color: '#275077', fontSize: width / 27}]}>
مشاهده دوره ویدئویی این محصول
</Text>
</Pressable>
</View>
<Description description={product.description} />
<LinkBox title="مشخصات محصول" path="" />
<LinkBox title="نقد بررسی و توضیحات تکمیلی محصول" path="" />
<LinkBox title="پرسش و پاسخ" path="" />
<View
style={tw.style(
'flex flex-row-reverse justify-between items-center my-4',
)}>
<Text
style={[
{fontSize: width / 25, color: '#275077'},
tw.style('semibold'),
]}>
امتیازات و نظرات
</Text>
<Image
source={arrowMoreIcon}
style={{width: 12, height: 16, marginRight: 10}}
/>
</View>
<Rates rates={product.rates} />
<Comments comments={product.comments} />
</ScrollView>
);
}

@ -1,218 +1,76 @@
import React from 'react';
import {
View,
Image,
Text,
StyleSheet,
Pressable,
Dimensions,
ScrollView,
SafeAreaView,
} from 'react-native';
import Colors from '../../constants/Colors';
import {View, StyleSheet, Dimensions, ScrollView} from 'react-native';
import Book from './components/Book';
import Video from './components/Video';
import {connect} from 'react-redux';
import userImage from './assets/user.png';
import poster from './assets/poster.png';
function Product({
item = {
product = {
type: 'ویدئوها',
name: 'ریاضی',
price: '145.000 تومان',
imageUrl: 'https://dnvn.ir/api/v1/file/2105',
poster : poster,
grade: 'پایه هفتم ابتدایی',
text: 'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ',
description:
'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن ',
rates: {
mid: 4.5,
allRates: 2456,
fields: [
{name: 'field1', value: 49},
{name: 'field2', value: 31},
{name: 'field3', value: 9},
{name: 'field4', value: 5},
{name: 'field5', value: 4},
],
},
comments: [
{
name: 'سورنا عابدی',
imageUrl: userImage,
vote: 4,
date: new Date(),
message:
'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ',
},
{
name: 'سورنا عابدی',
imageUrl: userImage,
vote: 4,
date: new Date(),
message:
'خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ',
},
],
},
}) {
return (
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Image source={{uri: item.imageUrl}} style={styles.productImage} />
<Text style={styles.productName}>{item.name}</Text>
<Text style={styles.productGrade}>{item.grade}</Text>
<View style={styles.flexRow}>
<Pressable style={[styles.addToCart, styles.paperVersion]}>
<Text style={styles.paperVersionText}>خرید نسخه چاپی</Text>
</Pressable>
<Pressable style={[styles.addToCart, styles.digitalVersion]}>
<Text style={styles.digitalVersionText}>خرید نسخه دیجیتال</Text>
</Pressable>
</View>
<View style={styles.flexRow}>
<Pressable style={[styles.addToCart, styles.example]}>
<Text style={styles.exampleText}>مطالعه نمونه کتاب</Text>
</Pressable>
</View>
<View style={styles.flexColumn}>
<Text style={styles.summaryTitle}>خلاصه ای از کتاب </Text>
<Text style={styles.summaryText}>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان
جامعه و{' '}
</Text>
</View>
<BookOptions
backgroundColor="#BAFFDD66"
title="این کتاب شامل چه محتویاتی است ؟"
items={[
'پک هدیه شامل یک عدد جلد سخت ',
'عینک واقعیت مجازی',
'کارت گرافیک مناسب جهت اجرای موارد',
]}
/>
<BookOptions
backgroundColor="#1F6FB566"
title="نکته های که باید در هنگام خرید به آن توجه داشته باشید"
items={[
'پک هدیه شامل یک عدد جلد سخت ',
'عینک واقعیت مجازی',
'کارت گرافیک مناسب جهت اجرای موارد',
]}
/>
<View style={styles.flexColumn}>
<Text style={styles.summaryTitle}>نظرات خریداران</Text>
<ScrollView horizontal="true">
<View style={styles.flexRow}>
<Comment />
<Comment />
<Comment />
</View>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
{product.type === 'ویدئوها' ? (
<Video product={product} />
) : (
<Book product={product} />
)}
</ScrollView>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const BookOptions = props => {
return (
<View
style={[
styles.flexColumn,
styles.bookOptions,
{backgroundColor: props.backgroundColor},
]}>
<Text style={styles.bookOptionsTitle}>{props.title}</Text>
{props.items.map((item, i) => (
<Text style={styles.bookOptionsItems} key={i}>
{'+' + ' ' + item}
</Text>
))}
</View>
);
};
const Comment = props => {
return <View style={styles.comment}></View>;
};
const fullWidth = Dimensions.get('window').width;
var styles = StyleSheet.create({
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
},
container: {
flex: 1,
padding: 10,
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 10,
},
productImage: {
width: 250,
height: 350,
borderRadius: 10,
},
productName: {
marginTop: 8,
fontSize: 26,
fontWeight: '600',
color: Colors.green,
},
productGrade: {
marginTop: 10,
fontSize: 12,
fontWeight: '600',
color: 'black',
},
addToCart: {
flex: 1,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
paddingVertical: 12,
},
digitalVersion: {
backgroundColor: '#e9e9e9',
borderTopRightRadius: 10,
borderBottomRightRadius: 10,
},
paperVersion: {
backgroundColor: Colors.green1,
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
paperVersionText: {
color: 'white',
},
example: {
borderWidth: 1,
borderColor: Colors.red,
borderRadius: 10
},
exampleText: {
color: Colors.red,
textAlign: 'right',
},
summaryText: {
fontSize: 14,
textAlign: 'right',
marginBottom: 20,
},
summaryTitle: {
fontSize: 18,
marginBottom: 5,
marginTop: 10,
fontWeight: '600',
textAlign: 'right',
},
bookOptions: {
marginTop: 10,
marginBottom: 15,
borderRadius: 8,
paddingVertical: 20,
paddingHorizontal: 10,
alignItems: 'flex-end',
},
bookOptionsTitle: {
fontSize: 16,
marginBottom: 10,
},
bookOptionsItems: {
marginBottom: 5,
fontSize: 13,
},
comment: {
width: 200,
height: 100,
backgroundColor: '#FFFAC9',
borderRadius: 10,
marginLeft: 20,
},
flexRow: {
marginTop: 10,
width: fullWidth,
flex: 1,
display: 'flex',
flexDirection: 'row',
paddingHorizontal : 10
},
flexColumn: {
marginTop: 10,
width: fullWidth,
flex: 1,
display: 'flex',
flexDirection: 'column',
},
});
export default Product;

@ -1,18 +0,0 @@
import React from 'react'
import { View, Text, Pressable, TextInput } from 'react-native'
import tw from 'tailwind-react-native-classnames';
export default function Code({}) {
return (
<View style={tw.style('flex w-full flex-col items-end mt-5')}>
<Text style={tw.style('font-bold text-lg text-blue-500 mt-1')}>کد تخفیف</Text>
<Text style={tw.style('font-xs text-gray-500')}>اگر کد تخفیفی دارید آن را در کادر زیر وارد کنید.</Text>
<View style={tw.style('flex w-full flex-row-reverse border border-blue-300 p-1 rounded-md mt-3')}>
<TextInput style={tw.style('border-0 flex-1 text-right pr-2')} />
<Pressable style={tw.style('bg-blue-500 rounded-md py-2 px-4')}>
<Text style={tw.style('text-white text-sm')}>ثبت کد</Text>
</Pressable>
</View>
</View>
)
}

@ -1,94 +0,0 @@
import React from 'react';
import {View, Text, Pressable, Image} from 'react-native';
import tw from 'tailwind-react-native-classnames';
export default function Table({array}) {
return (
<View style={tw.style('flex flex-row-reverse w-full justify-between mt-4')}>
<View style={tw.style('flex flex-col pl-2')}>
<Text
style={[
tw.style('flex text-right flex-3'),
{
borderBottomWidth: 2,
borderColor: '#777',
},
]}>
محصولات
</Text>
<View style={tw.style('flex flex-col')}>
{array.map((item, i) => (
<View style={tw.style('py-3 flex flex-row-reverse')}>
<Image
source={{uri: 'https://dnvn.ir/api/v1/file/2016'}}
style={[{width: 50, height: 80}, tw.style('rounded')]}
/>
<View style={[tw.style('flex flex-col pr-2')]}>
<Text
style={tw.style(
'text-md font-bold text-right text-gray-500',
)}>
ریاضی هشتم
</Text>
<Text
style={tw.style(
'text-md text-green-500 text-right mt-1 font-normal',
)}>
پایه چهارم
</Text>
<Text
style={tw.style(
'text-xs text-blue-500 text-right mt-1 font-normal',
)}>
همراه با کد فعال سازی محتوای الکترونیک
</Text>
</View>
</View>
))}
</View>
</View>
<View style={tw.style('flex flex-col')}>
<Text
style={[
tw.style('w-full text-right'),
{
borderBottomWidth: 2,
borderColor: '#777',
},
]}>
قیمت
</Text>
<View style={tw.style('flex flex-col')}>
{array.map((item, i) => (
<View
style={[tw.style('py-3 flex flex-col w-full'), {height: 105}]}>
<Text style={tw.style('text-right text-md')}>265.000</Text>
<Text
style={[
tw.style('text-right font-normal text-gray-500'),
{fontSize: 8},
]}>
100.000 هزار تومان
</Text>
<View
style={tw.style(
'flex flex-row-reverse py-2 justify-around border border-gray-400 rounded-md mt-2 w-20',
)}>
<Pressable>
<Text>+</Text>
</Pressable>
<Pressable>
<Text>1</Text>
</Pressable>
<Pressable>
<Text>-</Text>
</Pressable>
</View>
</View>
))}
</View>
</View>
</View>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 684 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 B

@ -0,0 +1,36 @@
import React from 'react';
import {View, Text, Pressable, TextInput, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
export default function Code({}) {
return (
<View
style={tw.style('flex w-full flex-col items-end mt-5 overflow-hidden')}>
<View
style={tw.style(
'flex w-full flex-row-reverse border border-blue-300 rounded-md mt-3',
)}>
<TextInput
style={[
tw.style('border-0 flex-1 text-right pr-4 font-medium'),
{fontSize: width / 27},
]}
placeholder={'کد تخفیف دارید ؟'}
placeholderTextColor="#707070"
/>
<Pressable
style={[
tw.style('py-4 px-5'),
{
backgroundColor: '#196EC0',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
},
]}>
<Text style={[tw.style('text-white'), {fontSize: width / 25}]}>ثبت کد</Text>
</Pressable>
</View>
</View>
);
}

@ -0,0 +1,91 @@
import React from 'react';
import {View, Text, Image, Dimensions, Pressable} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import bookImage from '../assets/book.png';
import deleteIcon from '../assets/delete.png';
import plusIcon from '../assets/+.png';
import minus from '../assets/_.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Product({product}) {
return (
<View
style={[
tw.style('flex flex-row justify-between py-5'),
{borderBottomWidth: 1, borderColor: '#7070701a', direction: 'rtl'},
]}>
<View style={tw.style('flex flex-row')}>
<Image
source={bookImage}
style={[
tw.style('rounded-md'),
{width: width / 4, height: height / 6},
]}
/>
<View style={tw.style('flex flex-col items-start pl-2')}>
<Text
style={{fontsize: width / 20, color: '#05335F', marginBottom: 5}}>
علوم اجتماعی
</Text>
<Text
style={{fontSize: width / 30, color: '#707070', marginBottom: 5}}>
پایه دوم
</Text>
<Text style={{fontSize: width / 30, color: '#707070'}}>
نسخه فیزیکی
</Text>
</View>
</View>
<View style={tw.style('flex flex-col justify-between items-end')}>
<Image source={deleteIcon} style={{width: 17, height: 17}} />
<View style={tw.style('flex flex-col items-center')}>
<View style={tw.style('flex flex-row items-center mb-3')}>
<Pressable
style={[
tw.style(
'rounded-sm py-1 px-2.5 flex flex-row justify-center items-center border',
),
{
borderColor: '#196EC0',
},
]}>
<Text style={{fontSize: width / 20, color: '#196EC0'}}>+</Text>
</Pressable>
<Text
style={[
tw.style('mx-2.5 font-semibold'),
{
fontSize: width / 20,
color: '#196EC0',
},
]}>
1
</Text>
<Pressable
style={[
tw.style(
'rounded-sm py-1 px-2.5 flex flex-row justify-center items-center border',
),
{
borderColor: '#DBDBDB',
},
]}>
<Text
style={{
fontSize: width / 18,
color: '#DBDBDB',
}}>
-
</Text>
</Pressable>
</View>
<Text style={[tw.style('font-bold', {fontSize: width / 20})]}>
145.000
</Text>
</View>
</View>
</View>
);
}

@ -2,83 +2,114 @@ import React, {useState} from 'react';
import {
View,
Text,
Image,
ScrollView,
SafeAreaView,
Pressable,
Dimensions,
Platform
StyleSheet,
Pressable,
Image
} from 'react-native';
import Product from './components/Product';
import Code from './components/Code';
import CustomPressable from '../../components/Pressable';
import tw from 'tailwind-react-native-classnames';
import Table from './Table';
import Code from './Code';
import alertIcon from './assets/alert.png';
import {connect} from 'react-redux';
const PriceStatus = ({name, value}) => {
const width = Dimensions.get('window').width;
const PriceStatus = ({name, value, type}) => {
return (
<View style={tw.style('w-full flex flex-row-reverse justify-between py-2')}>
<Text style={tw.style('text-md text-gray-700 font-medium')}>{name}</Text>
<Text style={tw.style('text-xs text-gray-500 font-normal')}>{value}</Text>
<Text
style={[
tw.style('font-light'),
{fontSize: width / 27, color: '#132F52'},
]}>
{name}
</Text>
<Text
style={[
tw.style('font-normal'),
{
color: type === 'error' ? '#F1420D' : '#246E8A',
fontSize: width / 27,
},
]}>
{value}
</Text>
</View>
);
};
const iosHeight = Dimensions.get('window').height - 170;
const ios = Platform.OS === 'ios';
function ShoppingCart({}) {
const [array, setArray] = useState([40, 60]);
return (
<SafeAreaView>
<ScrollView>
<View
style={[
tw.style('flex flex-col px-3 w-full relative'),
{minHeight: ios ? iosHeight : 0},
]}>
<Table array={array} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
{[0, 1].map((product, index) => (
<Product key={index} product={product} />
))}
<Code />
<View
style={tw.style(
'flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6',
)}>
<PriceStatus name="مبلغ سبد خرید" value="265000 تومان" />
<PriceStatus name="میزان تخفیف" value="0 تومان" />
<PriceStatus name="مالیات بر ارزش افزوده" value="0 تومان" />
<PriceStatus name="مبلغ سبد خرید" value="265000 تومان" type="normal" />
<PriceStatus name="میزان تخفیف" value="0 تومان" type="error" />
<PriceStatus
name="مالیات بر ارزش افزوده"
value="0 تومان"
type="error"
/>
</View>
<View
style={tw.style(
'flex flex-row-reverse justify-center items-center w-full py-2',
)}>
<Text
style={tw.style(
'text-md font-semibold text-gray-900 leading-5 ml-3',
'flex flex-row-reverse justify-between items-center w-full py-3',
)}>
جمع کل {'\n'} سبد خرید
<Text style={[tw.style('font-medium'), {fontSize: width / 25}]}>
جمع کل سبد خرید
</Text>
<View style={tw.style('flex flex-row-reverse items-center')}>
<Text style={tw.style('text-3xl font-bold text-gray-900')}>
235.000
</Text>
<Text style={tw.style('text-sm font-normal text-gray-700')}>
تومان
<Text
style={[
tw.style('font-medium'),
{fontSize: width / 27, color: '#246E8A'},
]}>
235.000 تومان
</Text>
</View>
</View>
</View>
</ScrollView>
<View style={tw.style('flex px-3 w-full')}>
<Pressable
style={[
tw.style(
'flex flex-row w-full justify-center bg-green-500 rounded-md py-2',
),
tw.style('w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3 my-5'),
{backgroundColor: '#196EC01a'},
]}>
<Text style={tw.style('text-white')}>ادامه</Text>
<Text style={[tw.style(''), {color: '#275077', fontSize: width / 30}]}>
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</Text>
<Image source={alertIcon} style={{width: 18, height: 18, marginLeft : 5}} />
</Pressable>
</View>
</SafeAreaView>
<CustomPressable
title={'ادامه فرایند خرید'}
backgroundColor="#196EC0"
color={'white'}
border={{color: '#196EC0', width: 0}}
width={'100%'}
/>
</ScrollView>
);
}
export default ShoppingCart;
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
},
container: {
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

@ -1,9 +1,12 @@
import React, {useState} from 'react';
import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import Header from '../../components/Header';
import Select from '../../components/Select';
import CustomTextInput from '../../components/CustomTextInput';
import FormButton from '../../components/FormButton';
import bgContact from './assets/bgContact.png';
import callIcon from './assets/call.png';
const width = Dimensions.get('window').width;
@ -23,34 +26,12 @@ function Support(props) {
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[tw.style('bg-white flex flex-col p-1'), {width: width}]}>
<Text style={tw.style('text-right mt-2 text-gray-500 text-sm')}>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از
انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</Text>
<View style={tw.style('w-full mt-10')}>
<Select onChange={onChange} name="department" />
</View>
<View style={tw.style('w-full mt-1')}>
<CustomTextInput
label={'موضوع'}
onChange={onChange}
name="title"
value={formData.title}
<Header
background={bgContact}
title={'تماس با ما'}
description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
icon={callIcon}
/>
</View>
<View style={tw.style('w-full mt-1')}>
<CustomTextInput
label={'متن'}
onChange={onChange}
name="message"
value={formData.message}
multiline={true}
numberOfLines={6}
/>
</View>
<View style={tw.style('w-full mt-4')}>
<FormButton text={'ارسال'} color={'#6cbe44'} />
</View>
</ScrollView>
);
}

Loading…
Cancel
Save