Skip to content

I
InvestCustomer
Commit eabd3961 by Nguyễn Thị Thúy
Options

product detail UI

parent 65a00329
Showing with 634 additions and 4 deletions
src/Screens/Tradding/ProductDetail/ProductDetail.js 0 → 100644
import React from 'react';
import ProductDetailView from './ProductDetailView';
const ProductDetail = (props) => {
return <ProductDetailView />;
};
export default ProductDetail;
src/Screens/Tradding/ProductDetail/ProductDetailView.js 0 → 100644
import React from 'react';
import {
View,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import ContractDescription from './Tab/ContractDescription/ContractDescription';
import QualityStandard from './Tab/QualityStandard/QualityStandard';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {getFontXD} from '../../../Config/Functions';
const Tab = createMaterialTopTabNavigator();
import I18n from '../../../helper/i18/i18n';
const ProductDetailView = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack isWhite={true} children={'Đậu tương mini'} />
<Tab.Navigator
initialRouteName="ContractDescription"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="ContractDescription"
component={ContractDescription}
options={{tabBarLabel: I18n.t('ContractDescription')}}
/>
<Tab.Screen
name="QualityStandard"
component={QualityStandard}
options={{tabBarLabel: I18n.t('QualityStandard')}}
/>
</Tab.Navigator>
</View>
);
};
export default ProductDetailView;
src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ContractDescription.js 0 → 100644
import React, {useState} from 'react';
import {
View,
ScrollView,
StyleSheet,
} from 'react-native';
import R from '../../../../../assets/R';
import GeneralInfo from './ItemView/GeneralInfo';
import TimeTransaction from './ItemView/TimeTransaction';
import PriceInfo from './ItemView/PriceInfo';
import {HEIGHTXD} from '../../../../../Config/Functions';
const ContractDescription = (props) => {
return (
<ScrollView
style={styles.container}
showsVerticalScrollIndicator={false}>
<View style={{marginBottom: HEIGHTXD(100)}}>
<GeneralInfo/>
<TimeTransaction/>
<PriceInfo/>
</View>
</ScrollView>
);
};
export default ContractDescription;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.colorBackground,
paddingTop: HEIGHTXD(30),
},
});
src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/GeneralInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('CommodityTransactions')}
content={'Đậu tương minu CBOT'}
/>
<TextField
title={I18n.t('CommodityCode')}
content={'XD'}
/>
<TextField
title={I18n.t('Escrow')}
content={'Theo quy định của MXV'}
/>
<TextField
title={I18n.t('PositionLimit')}
content={'Theo quy định của MXV'}
/>
<TextField
title={I18n.t('PaymentMethod')}
content={'Giao nhân vật chất'}
/>
<TextField
title={I18n.t('QualityStandard')}
content={'Đậu tương loại 1, loại 2, loại 2'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/PriceInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('PriceInfo')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('ListedUnit')}
content={'cent/giá'}
/>
<TextField
title={I18n.t('PriceStep')}
content={'1.000 cent/giạ'}
/>
<TextField
title={I18n.t('ContactSize')}
content={'1000 giạ/lót'}
/>
<TextField
title={I18n.t('PriceRange')}
content={'Giới hạn ban đầu: $0.70/giạ'}
/>
<TextField
title={I18n.t('FirstNotifyDate')}
content={'Ngày làm việc cuối cùng của tháng liền trước tháng đáo hạn '}
/>
<TextField
title={I18n.t('EndlessTransactionDate')}
content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Tradding/ProductDetail/Tab/ContractDescription/ItemView/TimeTransaction.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('TimeTransaction')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('Time')}
content={'Thứ 2 - Thứ 6'}
/>
<TextField
title={I18n.t('TransactionSession')}
content={'Phiên 1 07:00 - 19:45 \nPhiên 2: 20:30 - 01:45 (ngày hôm sau)'}
/>
<TextField
title={I18n.t('MaturityMonth')}
content={'Tháng 3, 5, 7, 9'}
/>
<TextField
title={I18n.t('RegisteredDeliveryDate')}
content={'Ngày làm việc thứ 5 trước ngày thông báo đầu tiên'}
/>
<TextField
title={I18n.t('FirstNotifyDate')}
content={'Ngày làm việc cuối cùng của tháng liên trước tháng đáo hạn'}
/>
<TextField
title={I18n.t('EndlessTransactionDate')}
content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
marginVertical: HEIGHTXD(30)
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Tradding/ProductDetail/Tab/QualityStandard/ItemView/GeneralInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet,
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded);
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, {
borderBottomWidth: expanded === true ? 0.3 : 0,
paddingHorizontal: WIDTHXD(30),
}]}
>
<Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(50)}}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(50)}}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<Text style={styles.content}>{`Theo quy định của sản phẩm Đậu tương CBOT giao dịch trên Sở Giao dịch Hàng hóa CBOT. \nĐậu tương được giao dịch là đậu tương loại 1, đậu tương loại 2, đậu tương loại 3 đáp ứng những tiêu chuẩn được mô tả ở bảng dưới:`}</Text>
: null
}
</View>
);
};
export default GeneralInfo;
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
paddingVertical: HEIGHTXD(30),
paddingHorizontal: HEIGHTXD(30)
},
});
src/Screens/Tradding/ProductDetail/Tab/QualityStandard/QualityStandard.js 0 → 100644
import React, {useState} from 'react';
import {
ScrollView, StyleSheet,
View,
} from 'react-native';
import {HEIGHTXD} from '../../../../../Config/Functions';
import GeneralInfo from './ItemView/GeneralInfo';
import R from '../../../../../assets/R';
const QualityStandard = (props) => {
return (
<ScrollView
style={styles.container}
showsVerticalScrollIndicator={false}>
<View style={{marginBottom: HEIGHTXD(100)}}>
<GeneralInfo/>
</View>
</ScrollView>
)
}
export default QualityStandard
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.colorBackground,
paddingTop: HEIGHTXD(30),
},
});
src/components/Header/HeaderBack.js
...@@ -22,7 +22,7 @@ import SnackBar from '../SnackBar'; ...@@ -22,7 +22,7 @@ import SnackBar from '../SnackBar';
import AppText from '../AppText'; import AppText from '../AppText';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const {title, isWhite} = props; const {title, isWhite, children} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<ImageBackground <ImageBackground
...@@ -37,7 +37,7 @@ const HeaderHome = (props) => { ...@@ -37,7 +37,7 @@ const HeaderHome = (props) => {
onPress={() => navigate.goBack()}> onPress={() => navigate.goBack()}>
<Image source={R.images.iconBack} style={styles.imgIcon} /> <Image source={R.images.iconBack} style={styles.imgIcon} />
</TouchableOpacity> </TouchableOpacity>
<AppText i18nKey={title} style={styles.txtTitle}></AppText> <AppText i18nKey={title} style={styles.txtTitle} children={children}></AppText>
<View style={{width: 35, height: 30}} /> <View style={{width: 35, height: 30}} />
</View> </View>
</ImageBackground> </ImageBackground>
......
src/components/Header/HeaderHome.js
...@@ -31,8 +31,9 @@ import { ...@@ -31,8 +31,9 @@ import {
PROFILE, PROFILE,
AccountVerification, AccountVerification,
WALLETWITHDRAW, WALLETWITHDRAW,
PACKETCQG, PACKETCQG, PRODUCTDETAIL,
} from '../../routers/ScreenNames'; } from '../../routers/ScreenNames';
import ProductDetail from '../../Screens/Tradding/ProductDetail/ProductDetail';
const renderWallet = (status, current_money, current_cqg_money, contract) => { const renderWallet = (status, current_money, current_cqg_money, contract) => {
const navigate = useNavigation(); const navigate = useNavigation();
...@@ -113,7 +114,7 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => { ...@@ -113,7 +114,7 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity <TouchableOpacity
disabled={status == 2 ? true : false} disabled={status == 2 ? true : false}
onPress={() => navigate.navigate(AccountVerification)}> onPress={() => navigate.navigate(PRODUCTDETAIL)}>
<ImageBackground <ImageBackground
imageStyle={{borderRadius: 10}} imageStyle={{borderRadius: 10}}
style={{ style={{
......
src/components/TextField.js 0 → 100644
import React from 'react'
import {
View,
Text,
StyleSheet
} from 'react-native'
import R from '../assets/R';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
const TextField = (props) => {
return (
<View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.content}>{props.content}</Text>
</View>
)
}
export default TextField
const styles = StyleSheet.create({
row: {
paddingHorizontal: HEIGHTXD(30),
flexDirection: 'row',
},
title: {
flex: 2.7,
fontSize: getFontXD(36),
color: R.colors.color777
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
},
})
src/helper/i18/locales/en.js
...@@ -189,4 +189,23 @@ export default { ...@@ -189,4 +189,23 @@ export default {
OwnerAccount2: 'Owner account', OwnerAccount2: 'Owner account',
NothingChange: 'Nothing change', NothingChange: 'Nothing change',
Tradding: 'Tradding', Tradding: 'Tradding',
ContractDescription: 'Contract description',
QualityStandard: 'Quality Standard',
CommodityTransactions: 'Commodity transactions',
CommodityCode: 'Commodity code',
Escrow: 'Escrow',
PositionLimit: 'Position limit',
PaymentMethod: 'Payment method',
TimeTransaction: 'Time transaction',
Time: 'Time',
TransactionSession: 'Transaction session',
MaturityMonth: 'Maturity month',
RegisteredDeliveryDate: 'Registered delivery date',
PriceInfo: 'Price Information',
ListedUnit: 'Listed unit',
PriceStep: 'Price step',
ContactSize: 'Contact size',
PriceRange: 'Price range',
FirstNotifyDate: 'First notify date',
EndlessTransactionDate: 'Endless transaction date',
}; };
src/helper/i18/locales/vn.js
...@@ -194,4 +194,23 @@ export default { ...@@ -194,4 +194,23 @@ export default {
OwnerAccount2: 'Chủ tài khoản', OwnerAccount2: 'Chủ tài khoản',
NothingChange: 'Không có gì thay đổi', NothingChange: 'Không có gì thay đổi',
Tradding: 'Giao dịch', Tradding: 'Giao dịch',
ContractDescription: 'Đặc tả hợp đồng',
QualityStandard: 'TIêu chuẩn chất lượng',
CommodityTransactions: 'Hàng hóa giao dịch',
CommodityCode: 'Mã hàng hóa',
Escrow: 'Ký quỹ',
PositionLimit: 'Giới hạn vị thế',
PaymentMethod: 'Phương thức thanh toán',
TimeTransaction: 'Thời gian giao dịch',
Time: 'Thời gian',
TransactionSession: 'Phiên giao dịch',
MaturityMonth: 'Tháng đáo hạn',
RegisteredDeliveryDate: 'Ngày đăng ký giao nhận',
PriceInfo: 'Thông tin giá',
ListedUnit: 'Đơn vị niêm yết',
PriceStep: 'Bước giá',
ContactSize: 'Độ lớn hợp đồng',
PriceRange: 'Biên độ giá',
FirstNotifyDate: 'Ngày thông báo đầu tiên',
EndlessTransactionDate: 'Ngày giao dịch cuối cùng',
}; };
src/routers/ScreenNames.js
...@@ -65,3 +65,4 @@ export const LEGALCUSTOMER = 'LEGALCUSTOMER'; ...@@ -65,3 +65,4 @@ export const LEGALCUSTOMER = 'LEGALCUSTOMER';
export const LEGALPARTNER = 'LEGALPARTNER'; export const LEGALPARTNER = 'LEGALPARTNER';
export const HISTORYDETAIL = 'HISTORYDETAIL'; export const HISTORYDETAIL = 'HISTORYDETAIL';
export const PRODUCTDETAIL = 'PRODUCTDETAIL';
src/routers/StackNavigation.js
...@@ -45,6 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer'; ...@@ -45,6 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer';
import Partner from '../Screens/LegalDocument/Partner'; import Partner from '../Screens/LegalDocument/Partner';
import SnackBar from '../components/SnackBar'; import SnackBar from '../components/SnackBar';
import DetailHistory from '../Screens/Action/History/DetailHistory'; import DetailHistory from '../Screens/Action/History/DetailHistory';
import ProductDetail from '../Screens/Tradding/ProductDetail/ProductDetail';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
...@@ -117,6 +118,7 @@ function MyStack(props) { ...@@ -117,6 +118,7 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} /> <Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} />
<Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} /> <Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} />
<Stack.Screen name={ScreenName.PRODUCTDETAIL} component={ProductDetail} />
<Stack.Screen <Stack.Screen
name={ScreenName.FORGOTPASSWORD} name={ScreenName.FORGOTPASSWORD}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment