Skip to content

I
InvestCustomer
Commit e3c01803 by Giang Tran
Options

connect api packet

parent fd46778e
Showing with 363 additions and 260 deletions
ios/Invest/Base.lproj/LaunchScreen.xib
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
......@@ -12,20 +13,20 @@
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="textColor" systemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Invest" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Invest" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="textColor" systemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
......@@ -39,4 +40,9 @@
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
<resources>
<systemColor name="darkTextColor">
<color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
src/Screens/Account/PacrtCQG/ContainerTop.js
......@@ -6,12 +6,15 @@ import R from '../../../assets/R';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
const ContainerTop = (props) => {
const {fee} = props;
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.wrap}>
<View style={styles.item}>
{fee.data
? fee.data.map((e) => (
<View key={e.id + 'a'} style={styles.item}>
<View style={{flex: 1}}>
<Text>Mở tài khoản giao dịch CQG</Text>
<Text>{e.name}</Text>
</View>
<View
style={{
......@@ -19,32 +22,25 @@ const ContainerTop = (props) => {
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={[styles.txtMoney, {color: '#18B918'}]}>Miễn phí</Text>
{e.price_package.price == 0 ? (
<Text style={[styles.txtMoney, {color: '#18B918'}]}>
Miễn phí
</Text>
) : (
<Text style={styles.txtMoney}>
{toPriceVnd(e.price_package.price)}
</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}
value={true}
disabled={true}
onValueChange={setSelection}
boxType={'square'}
/>
</View>
))
: null}
</View>
);
};
......
src/Screens/Account/PacrtCQG/FeePro.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Image,
TouchableOpacity,
Alert,
} 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 FeePro = (props) => {
const {title, data} = props.data;
const [listItem, setListItem] = useState([]);
useEffect(() => {
const newList = data.map((e) => {
return {...e, selected: false, disable: false};
});
setListItem(newList);
}, [props.data]);
const onSelected = (selected) => {
if (selected.id == 10) {
const newList = listItem.map((e) => {
if (e.type_data != 'MD') return e;
if (e.selected == false) {
const newList = listItem.filter(
(e) => e.id != 10 && e.type_data == 'MD',
);
props.onChooseAllMD(newList);
if (e.id == 10) return {...e, selected: true, disable: false};
return {...e, selected: true, disable: !e.disable};
} else {
props.onRemoveAllMD();
if (e.id == 10) return {...e, selected: false, disable: false};
return {...e, selected: false, disable: !e.disable};
}
});
setListItem(newList);
} else if (selected.id == 11) {
const newList = listItem.map((e) => {
if (e.type_data != 'TB') return e;
else {
if (e.selected == false) {
const newList = listItem.filter(
(e) => e.id != 10 && e.type_data == 'TB',
);
props.onChooseAllTB(newList);
if (e.id == 11) return {...e, selected: true, disable: false};
return {...e, selected: true, disable: !e.disable};
} else {
props.onRemoveAllTB();
if (e.id == 11) return {...e, selected: false, disable: false};
return {...e, selected: false, disable: !e.disable};
}
}
});
setListItem(newList);
} else {
const newList = listItem.map((e) => {
if (e.id != selected.id) return e;
if (e.selected == false) props.onChoosePacket(e);
else props.onRemovePacket(e);
return {...e, selected: !e.selected};
});
setListItem(newList);
}
};
return (
<View>
<Text style={styles.txtTitle}> {title}</Text>
<View style={styles.wrap}>
{listItem.map((e) => (
<View key={e.id + 'a'} style={styles.item}>
<TouchableOpacity
onPress={() => Alert.alert(e.note)}
style={{flex: 1, flexDirection: 'row'}}>
<Text>
{' '}
{e.name}+{e.type_data}
</Text>
{e.note ? (
<View style={{marginLeft: 5}}>
<Image
style={{width: 20, height: 20}}
source={R.images.iconNote}
/>
</View>
) : null}
</TouchableOpacity>
<View
style={{
width: 120,
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>
{toPriceVnd(e.price_package.price)}
</Text>
</View>
<CheckBox
disabled={e.disable}
value={e.selected}
onValueChange={() => onSelected(e)}
boxType={'square'}
/>
</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,
},
txtGroup: {
fontSize: getFontXD(42),
color: R.colors.main,
fontStyle: 'italic',
},
});
export default FeePro;
src/Screens/Account/PacrtCQG/Footer.js
......@@ -3,7 +3,7 @@ import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native';
import {getFontXD, toPriceVnd} from '../../../Config/Functions';
import R from '../../../assets/R';
const Footer = () => {
const Footer = (props) => {
return (
<View style={{flex: 1, paddingHorizontal: 10, marginTop: 10}}>
<View style={{flexDirection: 'row', marginVertical: 5}}>
......@@ -15,7 +15,7 @@ const Footer = () => {
<Text style={styles.txtLink}>Tại đây.</Text>
</TouchableOpacity>
</View>
<Text style={styles.txtTitle}>Tạm tính:360.000</Text>
<Text style={styles.txtTitle}>Tạm tính:{toPriceVnd(props.price)}</Text>
<View
style={{
justifyContent: 'center',
......
src/Screens/Account/PacrtCQG/PacketCQG.js
import React, {useState} from 'react';
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
......@@ -7,29 +7,8 @@ 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},
],
},
];
import FeePro from './FeePro';
import {getListPacketCQG} from '../../../apis/Functions/packetCQG';
const Item = () => {
const [isSelected, setSelection] = useState(false);
......@@ -56,7 +35,84 @@ const Item = () => {
};
const PacketCQG = (props) => {
const [isSelected, setSelection] = useState(false);
const [listData, setListData] = useState([]);
const [fee, setFee] = useState({data: [], title: ''});
const [feeConnect, setFeeConnect] = useState({data: [], title: ''});
const [feeNonPro, setFeeNonPro] = useState({data: [], title: ''});
const [feePro, setFeePro] = useState({data: [], title: ''});
const [price, setPrice] = useState(0);
useEffect(() => {
onChangeMoney();
}, [listData]);
const onChangeMoney = () => {
setTimeout(() => {
console.log('Listdata update', listData);
let totalMoney = 0;
listData.map((e) => {
totalMoney += e.price_package.price;
});
setPrice(totalMoney);
}, 1000);
};
useEffect(() => {
getData();
}, []);
const onChoosePacket = (item) => {
console.log('Add', item);
if (listData.length != 0) setListData(listData.concat(item));
else setListData([].concat(item));
onChangeMoney();
};
const onChooseAllMD = (list) => {
const newList = listData.concat(list);
setListData(newList);
onChangeMoney();
};
const onChooseAllTB = (list) => {
const newList = listData.concat(list);
setListData(newList);
onChangeMoney();
};
const onRemoveAllMD = () => {
const newList = listData.filter((e) => e.type_data != 'MD');
setListData(newList);
onChangeMoney();
};
const onRemoveAllTB = () => {
const newList = listData.filter((e) => e.type_data != 'TB');
setListData(newList);
onChangeMoney();
};
const onRemovePacket = (item) => {
console.log('Truoc remove', listData);
const newList = listData.filter((e) => e.id != item.id);
setListData(newList);
console.log('List sau remove', newList);
onChangeMoney();
};
const getData = async () => {
const res = await getListPacketCQG({});
if ((res.data.code = 200 && res.data.data)) {
setListData(res.data.data.fee.data);
setFee(res.data.data.fee);
setFeeConnect(res.data.data.fee_connect);
setFeeNonPro(res.data.data.fee_pro);
setFeePro(res.data.data.fee_non_pro);
} else {
Alert.alert('Thông báo!', res.data.message);
}
};
return (
<View style={{flex: 1}}>
<HeaderBack title={'Mở tài khoản CQG'} />
......@@ -66,25 +122,30 @@ const PacketCQG = (props) => {
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>
))}
<ContainerTop fee={fee} />
<Text style={styles.txtGroup}>
Dữ liệu người dùng không chuyên nghệp
</Text>
<WrapNomarl />
<WrapNomarl
onRemovePacket={onRemovePacket}
onChoosePacket={onChoosePacket}
data={feeConnect}
/>
<WrapNomarl
onRemovePacket={onRemovePacket}
onChoosePacket={onChoosePacket}
data={feeNonPro}
/>
<FeePro
onRemovePacket={onRemovePacket}
onChoosePacket={onChoosePacket}
onChooseAllMD={onChooseAllMD}
onChooseAllTB={onChooseAllTB}
onRemoveAllMD={onRemoveAllMD}
onRemoveAllTB={onRemoveAllTB}
data={feePro}
/>
<Footer />
<Footer price={price} />
<View style={{height: 20}} />
</View>
......
src/Screens/Account/PacrtCQG/WrapNomarl.js
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import CheckBox from '@react-native-community/checkbox';
......@@ -7,202 +7,55 @@ 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>
const {title, data} = props.data;
<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>
const [listItem, setListItem] = useState([]);
<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>
useEffect(() => {
const newList = data.map((e) => {
return {...e, selected: false};
});
<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'} />
setListItem(newList);
}, [props.data]);
const onSelected = (selected) => {
const newList = listItem.map((e) => {
if (e.id != selected.id) return e;
if (e.selected == false) props.onChoosePacket(e);
else props.onRemovePacket(e);
return {...e, selected: !e.selected};
});
setListItem(newList);
};
return (
<View>
<Text style={styles.txtTitle}> {title}</Text>
<View style={styles.wrap}>
{listItem.map((e) => (
<View key={e.id + 'a'} style={styles.item}>
<View style={{flex: 1}}>
<Text>{e.name}</Text>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
}}>
<Text>TB</Text>
<View
style={{
flex: 1,
marginHorizontal: 30,
width: 120,
marginRight: 30,
alignItems: 'flex-end',
}}>
<Text style={styles.txtMoney}>{toPriceVnd(360000)}</Text>
<Text style={styles.txtMoney}>
{toPriceVnd(e.price_package.price)}
</Text>
</View>
<CheckBox
onValueChange={() => console.log('hello')}
value={e.selected}
onValueChange={() => onSelected(e)}
boxType={'square'}
/>
</View>
</View>
))}
</View>
</View>
);
......@@ -217,6 +70,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginBottom: 20,
},
checkbox: {
alignSelf: 'flex-end',
},
......@@ -251,7 +105,6 @@ const styles = StyleSheet.create({
fontSize: getFontXD(42),
color: R.colors.main,
marginTop: 10,
fontWeight: 'bold',
},
txtGroup: {
fontSize: getFontXD(42),
......
src/apis/Functions/packetCQG.js 0 → 100644
import {PostLogin, GetData, PostData} from '../helpers';
import url from '../url';
export const getListPacketCQG = async (body) =>
GetData(url.urlGetListPacketCQG, body)
.then((res) => res)
.catch((err) => err);
src/apis/url.js
......@@ -30,4 +30,6 @@ export default {
urlGetListNotification: root + 'api/v1/customers/get-list-notification',
urlWalletDeposit: root + 'api/v1/customers/request-deposit',
urlGetListPacketCQG: root + 'api/v1/customers/get-list-fee-package',
};
src/assets/images.js
......@@ -65,6 +65,7 @@ const images = {
bgmedia: require('./images/bgmedia.jpeg'),
bgLogin: require('./images/bgLogin.png'),
iconPaper: require('./images/iconPaper.png'),
iconNote: require('./images/iconNote.png'),
};
export default images;
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