Skip to content

I
InvestCustomer
Commit d6f6d10a by Giang Tran
Options

update screen Packetcqg

parent 50649bf4
Showing with 1432 additions and 25 deletions
ios/Podfile.lock
......@@ -388,6 +388,8 @@ PODS:
- ReactCommon/callinvoker (= 0.62.2)
- RNCAsyncStorage (1.12.1):
- React-Core
- RNCCheckbox (0.5.7):
- React-Core
- RNCClipboard (1.7.0):
- React-Core
- RNCMaskedView (0.1.10):
......@@ -477,6 +479,7 @@ DEPENDENCIES:
- ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
- "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- RNFirebase (from `../node_modules/react-native-firebase/ios`)
......@@ -577,6 +580,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon"
RNCAsyncStorage:
:path: "../node_modules/@react-native-community/async-storage"
RNCCheckbox:
:path: "../node_modules/@react-native-community/checkbox"
RNCClipboard:
:path: "../node_modules/@react-native-clipboard/clipboard"
RNCMaskedView:
......@@ -653,6 +658,7 @@ SPEC CHECKSUMS:
React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
RNCCheckbox: d1749e6a92178ce5dbc31e63becd1f34f0c76bbd
RNCClipboard: 245417a78ab585e0d4d83926c28907e7b2bc24bd
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
RNFirebase: 37daa9a346d070f9f6ee1f3b4aaf4c8e3b1d5d1c
......
src/Screens/Account/Contract.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
const Contract = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack title={'Hợp đồng'} />
<Text>Contract screen</Text>
</View>
);
};
export default Contract;
src/Screens/Account/PacrtCQG/ContainerTop.js 0 → 100644
import React, {useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
import R from '../../../assets/R';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
const ContainerTop = (props) => {
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.wrap}>
<View style={styles.item}>
<View style={{flex: 1}}>
<Text>Mở tài khoản giao dịch CQG</Text>
</View>
<View
style={{
width: 120,
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={[styles.txtMoney, {color: '#18B918'}]}>Miễn phí</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
<View style={styles.item}>
<View style={{flex: 1}}>
<Text>Duy trì treader</Text>
</View>
<View
style={{
width: 120,
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingTop: 10,
},
checkboxContainer: {
flexDirection: 'row',
marginBottom: 20,
},
checkbox: {
alignSelf: 'flex-end',
},
txtNote: {
fontStyle: 'italic',
},
wrap: {
marginVertical: 10,
backgroundColor: R.colors.white,
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginVertical: 10,
},
txtMoney: {
fontSize: getFontXD(42),
color: '#FFB721',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.main,
marginTop: 10,
fontWeight: 'bold',
},
txtGroup: {
fontSize: getFontXD(42),
color: R.colors.main,
fontStyle: 'italic',
},
});
export default ContainerTop;
src/Screens/Account/PacrtCQG/Footer.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
import R from '../../../assets/R';
const Footer = () => {
return (
<View style={{flex: 1, paddingHorizontal: 10, marginTop: 10}}>
<View style={{flexDirection: 'row', marginVertical: 5}}>
<Text style={styles.txtTitle}>Bạn có thể mở tài khoản thử </Text>
<TouchableOpacity
onPress={() =>
Linking.openURL('https://reactnative.dev/docs/linking')
}>
<Text style={styles.txtLink}>Tại đây.</Text>
</TouchableOpacity>
</View>
<Text style={styles.txtTitle}>Tạm tính:360.000</Text>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
}}>
<View style={styles.btnSend}>
<Text style={styles.txtSend}>Mở tài khoản</Text>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
txtSend: {
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
btnSend: {
width: 140,
height: 40,
backgroundColor: R.colors.main,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
},
txtLink: {
fontSize: getFontXD(42),
color: R.colors.main,
marginLeft: 10,
borderBottomWidth: 1,
borderBottomColor: R.colors.main,
},
});
export default Footer;
src/Screens/Account/PacrtCQG/PacketCQG.js 0 → 100644
import React, {useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
import R from '../../../assets/R';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
import ContainerTop from './ContainerTop';
import WrapNomarl from './WrapNomarl';
import Footer from './Footer';
const data = [
{
id: '1',
title: '',
list: [
{title: 'ICR EU3', isDetail: true, price: 3840000},
{title: 'ICR US', isDetail: true, price: 3840000},
{title: 'SGX', isDetail: true, price: 3840000},
{title: 'TOCOM', isDetail: true, price: 3840000},
],
},
{
id: '2',
title: 'Dữ liệu người dùng chuyện nghiệp',
list: [
{title: 'ICR EU3', isDetail: true, price: 3840000},
{title: 'ICR US', isDetail: true, price: 3840000},
{title: 'SGX', isDetail: true, price: 3840000},
{title: 'TOCOM', isDetail: true, price: 3840000},
],
},
];
const Item = () => {
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.item}>
<View style={{flex: 1}}>
<Text>Mở tài khoản giao dịch CQG</Text>
</View>
<View
style={{
width: 120,
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={[styles.txtMoney, {color: '#18B918'}]}>Miễn phí</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
);
};
const PacketCQG = (props) => {
const [isSelected, setSelection] = useState(false);
return (
<View style={{flex: 1}}>
<HeaderBack title={'Mở tài khoản CQG'} />
<ScrollView showsVerticalScrollIndicator={true}>
<View style={styles.container}>
<Text style={styles.txtNote}>
Lưu ý:Phí được tính theo tháng và mức giá này được áp dụng đến hết
ngày 30/12/2021.
</Text>
<ContainerTop />
<Text style={styles.txtTitle}>Phí kết nối dữ liệu</Text>
{data.map((e) => (
<View key={e.id}>
{e.title ? <Text style={styles.txtGroup}>{e.title}</Text> : null}
<View style={styles.wrap}>
{e.list.map((e) => (
<Item />
))}
</View>
</View>
))}
<Text style={styles.txtGroup}>
Dữ liệu người dùng không chuyên nghệp
</Text>
<WrapNomarl />
<Footer />
<View style={{height: 20}} />
</View>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingTop: 10,
},
checkboxContainer: {
flexDirection: 'row',
marginBottom: 20,
},
checkbox: {
alignSelf: 'flex-end',
},
txtNote: {
fontStyle: 'italic',
},
wrap: {
marginVertical: 10,
backgroundColor: R.colors.white,
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginVertical: 10,
},
txtMoney: {
fontSize: getFontXD(42),
color: '#FFB721',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.main,
marginTop: 10,
fontWeight: 'bold',
},
txtGroup: {
fontSize: getFontXD(42),
color: R.colors.main,
fontStyle: 'italic',
},
});
export default PacketCQG;
src/Screens/Account/PacrtCQG/WrapNomarl.js 0 → 100644
import React, {useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
import R from '../../../assets/R';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
const ContainerTop = (props) => {
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.wrap}>
<View style={styles.item}>
<View style={{flex: 3, paddingTop: 5}}>
<Text>Duy trì treader</Text>
</View>
<View style={{flex: 4}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text>MD</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}}>
<Text>TB</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
</View>
</View>
<View style={{height: 1, backgroundColor: '#AFA9A9'}} />
<View style={styles.item}>
<View style={{flex: 3, paddingTop: 5}}>
<Text>Duy trì treader</Text>
</View>
<View style={{flex: 4}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text>MD</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}}>
<Text>TB</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
</View>
</View>
<View style={{height: 1, backgroundColor: '#AFA9A9'}} />
<View style={styles.item}>
<View style={{flex: 3, paddingTop: 5}}>
<Text>Duy trì treader</Text>
</View>
<View style={{flex: 4}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text>MD</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(326000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={() => {
console.log('Hello');
}}
boxType={'square'}
/>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}}>
<Text>TB</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
value={isSelected}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
</View>
</View>
<View style={{height: 1, backgroundColor: '#AFA9A9'}} />
<View style={styles.item}>
<View style={{flex: 3, paddingTop: 5}}>
<Text>Duy trì treader</Text>
</View>
<View style={{flex: 4}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text>MD</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox onValueChange={setSelection} boxType={'square'} />
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}}>
<Text>TB</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
</View>
<CheckBox
onValueChange={() => console.log('hello')}
boxType={'square'}
/>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingTop: 10,
},
checkboxContainer: {
flexDirection: 'row',
marginBottom: 20,
},
checkbox: {
alignSelf: 'flex-end',
},
txtNote: {
fontStyle: 'italic',
},
wrap: {
marginVertical: 10,
backgroundColor: R.colors.white,
paddingVertical: 10,
borderRadius: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
marginVertical: 10,
},
txtMoney: {
fontSize: getFontXD(42),
color: '#FFB721',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.main,
marginTop: 10,
fontWeight: 'bold',
},
txtGroup: {
fontSize: getFontXD(42),
color: R.colors.main,
fontStyle: 'italic',
},
});
export default ContainerTop;
src/Screens/Action/Wallet/Tab/Item.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../../Config/Functions';
import R from '../../../../assets/R';
import Block from '../../../../components/Block';
import {useNavigation} from '@react-navigation/native';
import {DETAIL_REQUIRE_MONEY} from '../../../../routers/ScreenNames';
const Item = (props) => {
const {item} = props;
const navigate = useNavigation();
return (
<TouchableOpacity onPress={() => console.log('hello')}>
<View style={styles.container}>
<Block flex={1} row>
<View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
<View style={styles.wrapDate}>
<Text style={styles.txt}>T{item.month}</Text>
<Text style={styles.txtTitle}>{item.day}</Text>
</View>
<Block
style={styles.wrapRight}
padding={[5, 10]}
space={'between'}
flex={1}>
<View style={styles.rowBet}>
<Text style={styles.txtTitle}>{item.name}</Text>
<Text
style={{
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#FFB721',
}}>
{toPriceVnd(item.money)}
</Text>
</View>
<Text numberOfLines={2} style={styles.txt}>
{item.note}
</Text>
<Text style={styles.txtDate}>Ngày {item.date}</Text>
</Block>
</Block>
</View>
</TouchableOpacity>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
height: HEIGHTXD(280),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginTop: 10,
borderRadius: HEIGHTXD(30),
marginBottom: 10,
},
wrapRight: {
borderLeftColor: R.colors.borderGray,
borderLeftWidth: 0.7,
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(48),
color: R.colors.black,
fontWeight: '700',
},
txt: {
fontSize: getFontXD(36),
color: '#363636',
},
txtDate: {
fontSize: getFontXD(39),
color: '#363636',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
});
src/Screens/Action/Wallet/Tab/Success.js 0 → 100644
import React from 'react';
import {View, Text, FlatList} from 'react-native';
import HeaderBack from '../../../../components/Header/HeaderBack';
import Item from './Item';
const data = [
{
id: '1',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 10000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '2',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 2000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '3',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 3000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '4',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 4000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '5',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 9000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
];
const Success = (props) => {
return (
<View style={{flex: 1}}>
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
);
};
export default Success;
src/Screens/Action/Wallet/Tab/Watting.js 0 → 100644
import React from 'react';
import {View, Text, FlatList} from 'react-native';
import HeaderBack from '../../../../components/Header/HeaderBack';
import Item from './Item';
const data = [
{
id: '1',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 10000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '2',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 2000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '3',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 3000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '4',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 4000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
{
id: '5',
month: 2,
day: '20',
name: 'Nạp tiền',
money: 9000000,
note: 'Ghi chú nap tiền để đầu tư',
status: 1,
date: '20/02/2021',
},
];
const Watting = (props) => {
return (
<View style={{flex: 1}}>
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
);
};
export default Watting;
src/Screens/Action/Wallet/Wallet.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import Success from './Tab/Success';
import Watting from './Tab/Watting';
import {getFontXD} from '../../../Config/Functions';
import {WALLETDEPOSIT, WALLETWITHDRAW} from '../../../routers/ScreenNames';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import R from '../../../assets/R';
const Tab = createMaterialTopTabNavigator();
import {useNavigation} from '@react-navigation/native';
const Wallet = (props) => {
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'Ví tiền'} />
<View style={{flex: 1, backgroundColor: 'red'}}>
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36), fontWeight: '700'},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="Tab1"
component={Watting}
options={{tabBarLabel: 'Đang chờ'}}
/>
<Tab.Screen
name="Tab2"
component={Success}
options={{tabBarLabel: 'Thành công'}}
/>
</Tab.Navigator>
</View>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => navigate.navigate(WALLETDEPOSIT)}
style={styles.btn}>
<Text style={styles.txtTitle}>Nạp tiền</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(WALLETWITHDRAW)}
style={styles.btn}>
<Text style={styles.txtTitle}>Rút tiền</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
footer: {
height: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
},
btn: {
width: 140,
height: 40,
backgroundColor: R.colors.main,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
});
export default Wallet;
src/Screens/Action/Wallet/WalletDeposit.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import R from '../../../assets/R';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import TextDisable from '../../../components/Input/TextDisable';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
const {width} = Dimensions.get('window');
const WalletDeposit = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack title={'Nạp tiền đầu tư'} />
<View style={styles.container}>
<View style={styles.wrapTop}>
<View style={styles.itemTop}>
<Text style={styles.txtTitle}>Ví</Text>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
</View>
<View style={{width: 1, backgroundColor: '#DBDBDB'}} />
<View style={styles.itemTop}>
<Text style={styles.txtTitle}>CQG</Text>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
</View>
</View>
<View style={styles.wrapBody}>
<TextDisable value={'10010101'} title={'Số tài khoản CQG'} />
<TextField title={'Số tiền'} isNumber={true} />
<TextMulti title={'Ghi chú'} />
</View>
</View>
<View style={styles.btnSend}>
<Text style={styles.txtSend}>Nạp tiền</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
marginVertical: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
wrapTop: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#DBDBDB',
},
itemTop: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 20,
},
wrapBody: {
paddingHorizontal: 10,
paddingVertical: 20,
},
txtMoney: {
color: '#1C6AF6',
fontSize: getFontXD(52),
},
txtTitle: {
color: R.colors.black,
fontSize: getFontXD(42),
},
txtSend: {
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
btnSend: {
position: 'absolute',
bottom: 30,
right: width / 2 - 70,
width: 140,
height: 40,
backgroundColor: R.colors.main,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
});
export default WalletDeposit;
src/Screens/Action/Wallet/WalletWithdraw.js 0 → 100644
import React, {useState} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import R from '../../../assets/R';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import TextDisable from '../../../components/Input/TextDisable';
import {getFontXD, HEIGHTXD, toPriceVnd} from '../../../Config/Functions';
import PickerItem from '../../../components/Picker/PickerItem';
import RadioForm, {
RadioButton,
RadioButtonInput,
RadioButtonLabel,
} from 'react-native-simple-radio-button';
var radio_props = [
{label: 'Từ ví', value: 0},
{label: 'Từ tài khoản CQG', value: 1},
];
const {width} = Dimensions.get('window');
const dataType = [
{
value: '1',
name: 'Chứng minh nhân dân',
},
{
value: '2',
name: 'Hộ chiếu',
},
{
value: '3',
name: 'Căn cước công dân',
},
];
const WalletDeposit = (props) => {
const [account, setAccount] = useState();
const [type, setType] = useState();
return (
<View style={{flex: 1}}>
<HeaderBack title={'Nạp tiền đầu tư'} />
<View style={styles.container}>
<View style={styles.wrapTop}>
<View style={styles.itemTop}>
<Text style={styles.txtTitle}>Ví</Text>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
</View>
<View style={{width: 1, backgroundColor: '#DBDBDB'}} />
<View style={styles.itemTop}>
<Text style={styles.txtTitle}>CQG</Text>
<Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
</View>
</View>
<View style={styles.wrapBody}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
}}>
Tài khoản nguồn
</Text>
{/* <View style={styles.row}> */}
<RadioForm
radio_props={radio_props}
labelStyle={{fontSize: getFontXD(42)}}
formHorizontal={true}
style={styles.row}
initial={0}
onPress={(value) => {
setAccount({value: value});
}}
/>
{/* </View> */}
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
}}>
Chọn tài khoản hưởng thụ
</Text>
<PickerItem
width={width - 20}
data={dataType}
onValueChange={(value, items) => {
setType(items);
}}
/>
<TextField title={'Số tiền'} isNumber={true} />
<TextMulti title={'Ghi chú'} />
</View>
</View>
<View style={styles.btnSend}>
<Text style={styles.txtSend}>Rút tiền</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
marginVertical: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
wrapTop: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#DBDBDB',
},
itemTop: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 20,
},
wrapBody: {
paddingHorizontal: 10,
paddingVertical: 20,
},
txtMoney: {
color: '#1C6AF6',
fontSize: getFontXD(52),
},
txtTitle: {
color: R.colors.black,
fontSize: getFontXD(42),
},
txtSend: {
fontSize: getFontXD(42),
color: R.colors.white,
fontWeight: 'bold',
},
btnSend: {
position: 'absolute',
bottom: 30,
right: width / 2 - 70,
width: 140,
height: 40,
backgroundColor: R.colors.main,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
row: {
height: HEIGHTXD(109),
width: '100%',
justifyContent: 'space-between',
marginVertical: 5,
},
});
export default WalletDeposit;
src/Screens/Authen/Registor.js
......@@ -21,18 +21,32 @@ const Registor = (props) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [password_confirmation, setPasswordConfirm] = useState('');
const [sponsor_id, setSponsor_id] = useState('');
const registorClick = async () => {
const titles = ['email', 'mật khẩu', 'xác nhận mật khẩu'];
const index = checkFormatArray([email, password, password_confirmation]);
if (index === true) {
let res;
props.showLoading();
const res = await registorApi({
email,
password,
platform: Platform.OS,
password_confirmation,
});
if (sponsor_id) {
res = await registorApi({
email,
password,
platform: Platform.OS,
password_confirmation,
sponsor_id,
});
} else {
res = await registorApi({
email,
password,
platform: Platform.OS,
password_confirmation,
});
}
props.hideLoading();
if (res.data.code == 200 && res.data.data) {
......@@ -79,6 +93,13 @@ const Registor = (props) => {
onChangeText={(val) => setPasswordConfirm(val)}
isPassWord={true}
/>
<InputIcon
icon={R.images.iconIntroduct}
title={'Mã giới thiệu'}
placeholder={'Nhập mã giới thiệu nếu có'}
onChangeText={(val) => setSponsor_id(val)}
isPassWord={true}
/>
<View
style={{
......
src/Screens/MethodPay/AddMethod.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
FlatList,
Dimensions,
TouchableOpacity,
} from 'react-native';
import R from '../../assets/R';
import HeaderBack from '../../components/Header/HeaderBack';
import Item from './Item';
import {getFontXD, WIDTHXD} from '../../Config/Functions';
import TextField from '../../components/Input/TextField';
import PickerItem from '../../components/Picker/PickerItem';
const {width} = Dimensions.get('window');
const dataTest = [
{
value: '1',
name: 'Vietnamese',
},
{
value: '2',
name: 'English',
},
];
const AddMethodPay = (props) => {
const [language, setLanguage] = useState(dataTest[0].name);
return (
<View style={{flex: 1}}>
<HeaderBack title={'Thêm phương thức thanh toán'} />
<View style={styles.container}>
<Text style={styles.txtTitle}>Chọn ngân hàng </Text>
<PickerItem
defaultValue={language}
value={language}
data={dataTest}
onValueChange={(value, items) => {
setLanguage(items.name);
}}
/>
<TextField title={'Chi nhánh'} />
<TextField title={'Tên chủ tài khoản'} />
<TextField title={'Số tài khoản ngân hàng'} isNumber={true} />
</View>
<TouchableOpacity style={styles.btn}>
<Text style={styles.txtAdd}>Thêm</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 20,
paddingTop: 10,
},
btn: {
width: 150,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
position: 'absolute',
bottom: 30,
right: width / 2 - 150 / 2,
},
txtAdd: {
color: R.colors.white,
fontSize: getFontXD(46),
textTransform: 'uppercase',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
},
});
export default AddMethodPay;
src/Screens/MethodPay/MethodPayView.js
import React from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import R from '../../assets/R';
import HeaderBack from '../../components/Header/HeaderBack';
import Item from './Item';
import {WIDTHXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/Entypo';
import {useNavigation} from '@react-navigation/native';
import {ADDMETHODPAY} from '../../routers/ScreenNames';
const data = [
{
image: R.images.iconNganLuong,
......@@ -56,6 +59,7 @@ const data = [
];
const MethodPayView = (props) => {
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<HeaderBack title={'Cài đặt phương thức thanh toán'} />
......@@ -66,11 +70,37 @@ const MethodPayView = (props) => {
data={data}
renderItem={({item}) => <Item item={item} />}
/>
<TouchableOpacity
onPress={() => navigate.navigate(ADDMETHODPAY)}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white} />
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({});
const styles = StyleSheet.create({
containerBtn: {
backgroundColor: R.colors.main,
position: 'absolute',
bottom: 50,
right: 20,
width: WIDTHXD(144),
height: WIDTHXD(144),
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
borderRadius: 30,
},
});
export default MethodPayView;
src/assets/images.js
......@@ -20,13 +20,14 @@ const images = {
iconList: require('./images/iconList7.png'),
iconRose: require('./images/iconRose2.png'),
iconWallet: require('./images/iconWallet2.png'),
iconWallet1: require('./images/iconWallet1.png'),
moneyteam: require('./images/iconTeam1.png'),
iconPhone: require('./images/iconPhone1.png'),
iconUserCheck: require('./images/iconUserCheck.png'),
iconSetting: require('./images/iconSetting.png'),
iconMess: require('./images/iconMess.png'),
iconMethodPay: require('./images/iconMethodPay.png'),
iconMethodPay: require('./images/iconMethodPay1.png'),
iconDepositNoti: require('./images/iconDeposit.png'),
iconRecharge: require('./images/iconRecharge.png'),
......@@ -39,7 +40,7 @@ const images = {
iconImg: require('./images/iconImg.png'),
iconCamera: require('./images/iconCamera.png'),
bgAuthen: require('./images/bgAuthen1.png'),
iconContract: require('./images/iconContract.png'),
iconLock: require('./images/iconLock.png'),
iconPhone3: require('./images/iconPhone3.png'),
iconEmail: require('./images/iconEmail1.png'),
......@@ -57,6 +58,7 @@ const images = {
tradding: require('./images/tradding.png'),
noti: require('./images/noti1.png'),
iconCopy: require('./images/iconCopy.png'),
iconIntroduct: require('./images/iconIntroduct.png'),
};
export default images;
src/components/Header/Drawer.js
......@@ -13,6 +13,7 @@ import {
NOTIFICATION,
AUTHEN,
PROFILE,
CONTRACT,
} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
import {connect} from 'react-redux';
......@@ -24,6 +25,12 @@ const menus = [
icon: R.images.iconUserCheck,
screen: AccountVerification,
},
{
id: '6',
title: 'Hợp đồng',
icon: R.images.iconContract,
screen: CONTRACT,
},
{
id: '2',
......
src/components/Header/HeaderHome.js
......@@ -53,7 +53,7 @@ const HeaderHome = (props) => {
</TouchableOpacity>
<View style={styles.row1}>
<Text style={styles.txtlink}>{props.user.user_id}</Text>
<Text style={styles.txtlink}>ID:{props.user.user_id}</Text>
<TouchableOpacity onPress={copyToClipboard}>
<Image
source={R.images.iconCopy}
......@@ -61,18 +61,18 @@ const HeaderHome = (props) => {
/>
</TouchableOpacity>
</View>
<View style={styles.row}>
<Text style={styles.txtMoney}>
{' '}
{props.user.current_money == 0
? 0
: toPriceVnd(props.user.current_money)}
</Text>
<Text style={styles.txtTitle}> Đ</Text>
</View>
</View>
</View>
{/* <View style={styles.row}>
<Text style={styles.txtMoney}>
{' '}
{props.user.current_money == 0
? 0
: toPriceVnd(props.user.current_money)}
</Text>
<Text style={styles.txtTitle}> Đ</Text>
</View> */}
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => navigate.navigate(CHOOSEMETHOD)}
......
src/components/Input/TextDisable.js 0 → 100644
import React from 'react';
import {View, Text, TextInput} from 'react-native';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
const TextField = (props) => {
const {title, value} = props;
return (
<View style={{marginVertical: 5, borderRadius: 10}}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
}}>
{title ? title : ''}
</Text>
<View
style={{
height: HEIGHTXD(109),
width: '100%',
borderRadius: 7,
fontSize: getFontXD(42),
paddingHorizontal: 10,
justifyContent: 'center',
backgroundColor: '#D8D6D6',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
}}>
<Text style={{fontSize: getFontXD(42)}}>{value}</Text>
</View>
</View>
);
};
export default React.memo(TextField);
src/components/Picker/PickerItem.js
......@@ -235,7 +235,7 @@ const styles = StyleSheet.create({
borderBottomColor: R.colors.iconGray,
},
pickerStyle: {
width: WIDTHXD(960),
width: '100%',
height: HEIGHTXD(109),
flexDirection: 'row',
paddingHorizontal: WIDTHXD(30),
......
src/routers/PlussModal.js
......@@ -19,6 +19,7 @@ import {
DEPOSIT,
TRANSFER,
CHOOSEMETHOD,
WALLET,
} from '../routers/ScreenNames';
const PlussModal = (props) => {
......@@ -46,6 +47,15 @@ const PlussModal = (props) => {
<View style={styles.footer}>
<TouchableOpacity
onPress={() => {
navigate.navigate(WALLET);
toggleModal();
}}
style={styles.wraper1}>
<Image style={styles.imgIcon} source={R.images.iconWallet1} />
<Text style={styles.txt}>Ví tiền</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
navigate.navigate(CHOOSEMETHOD);
toggleModal();
}}
......@@ -129,6 +139,7 @@ const styles = StyleSheet.create({
wraper1: {
justifyContent: 'center',
alignItems: 'center',
width: 100,
},
txt: {
fontSize: getFontXD(36),
......
src/routers/ScreenNames.js
......@@ -48,3 +48,11 @@ export const CONFIRMEMAIL = 'CONFIRMEMAIL';
export const NEWFEED = 'NEWFEED';
export const DETAILNEW = 'DETAILNEW';
export const NOTIFICATION = 'NOTIFICATION';
export const ADDMETHODPAY = 'ADDMETHODPAY';
export const CONTRACT = 'CONTRACT';
export const WALLET = 'WALLET';
export const WALLETDEPOSIT = 'WALLETDEPOSIT';
export const WALLETWITHDRAW = 'WALLETWITHDRAW';
export const PACKETCQG = 'PACKETCQG';
src/routers/StackNavigation.js
......@@ -31,7 +31,12 @@ import NewPassWord from '../Screens/Authen/NewPassWord';
import ConfirmEmail from '../Screens/Authen/ConfirmEmail';
import Notification from '../Screens/Notification/Notification';
import DetailNew from '../Screens/NewFeed/DetailNew';
import AddMethodPay from '../Screens/MethodPay/AddMethod';
import Contract from '../Screens/Account/Contract';
import Wallet from '../Screens/Action/Wallet/Wallet';
import WalletDeposit from '../Screens/Action/Wallet/WalletDeposit';
import WalletWithdraw from '../Screens/Action/Wallet/WalletWithdraw';
import PacketCQG from '../Screens/Account/PacrtCQG/PacketCQG';
import * as ScreenName from './ScreenNames';
const Stack = createStackNavigator();
......@@ -43,15 +48,25 @@ function MyStack(props) {
headerStatusBarHeight: 0,
}}
headerMode={'none'}
initialRouteName={ScreenName.AUTHEN}>
initialRouteName={ScreenName.PACKETCQG}>
<Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
<Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen name={ScreenName.PACKETCQG} component={PacketCQG} />
<Stack.Screen name={ScreenName.WALLET} component={Wallet} />
<Stack.Screen name={ScreenName.WALLETDEPOSIT} component={WalletDeposit} />
<Stack.Screen
name={ScreenName.WALLETWITHDRAW}
component={WalletWithdraw}
/>
<Stack.Screen name={ScreenName.DETAILNEW} component={DetailNew} />
<Stack.Screen name={ScreenName.ADDMETHODPAY} component={AddMethodPay} />
<Stack.Screen
name={ScreenName.AccountVerification}
component={AccountVerificaiton}
/>
<Stack.Screen name={ScreenName.CONTRACT} component={Contract} />
<Stack.Screen name={ScreenName.CONFIRMOTP} component={ConfirmOTP} />
<Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
......
yarn.lock
......@@ -1045,6 +1045,11 @@
dependencies:
deep-assign "^3.0.0"
"@react-native-community/checkbox@^0.5.7":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@react-native-community/checkbox/-/checkbox-0.5.7.tgz#ac818de88736acc1a4539188f2d435cf5e845ae1"
integrity sha512-CiHBAMWy5fsFIHLd1pf8frlWrLT8DnCXUSxdlGKazHm7srQSReKH4R5absShjmYOHRo9raWEnKZO/cm7MUDHZg==
"@react-native-community/cli-debugger-ui@^4.13.1":
version "4.13.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz"
......
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