Skip to content

I
InvestCustomer
Commit c88e19fa by Giang Tran
Options

setup slide

parent 8c97e4c4
Showing with 202 additions and 93 deletions
src/Screens/Home/Home.js
......@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
import {View, Alert} from 'react-native';
import {connect} from 'react-redux';
import {getTransaction} from '../../apis/Functions/users';
import {getImagesHome} from '../../apis/Functions/General';
import I18n from '../../helper/i18/i18n';
import HomeView from './HomeView';
......@@ -10,7 +11,7 @@ import {AccountVerification, PACKETCQG} from '../../routers/ScreenNames';
const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [listImage, setListImage] = useState([]);
useEffect(() => {
getData();
}, []);
......@@ -21,9 +22,16 @@ const Home = (props) => {
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
const res1 = await getImagesHome({});
if (res1.data.code == 200 && res1.data.data) {
setListImage(res1.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
};
return <HomeView data={data} />;
return <HomeView data={data} listImage={listImage} />;
};
const mapStateToProps = (state) => {
......
src/Screens/Home/HomeView.js
......@@ -11,6 +11,7 @@ import Footer from './Footer';
import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
import AppText from '../../components/AppText';
import SwiperComponent from './SwiperComponent';
const HomeView = (props) => {
const {total_deposit, total_withdraw} = props.data;
......@@ -21,41 +22,10 @@ const HomeView = (props) => {
style={{width: '100%', height: '100%'}}>
<ScrollView showsVerticalScrollIndicator={false}>
<HeaderHome />
<View style={styles.containerMenu}>
<View style={styles.row}>
<View style={styles.row}>
<View style={styles.itemMenu}>
<AppText i18nKey={'Deposit'} style={styles.txtTitle} />
<Text style={styles.txtMoney}>
{' '}
{total_deposit == 0 ? 0 : toPriceVnd(total_deposit)} Đ{' '}
</Text>
</View>
<View
style={{width: 0.5, backgroundColor: R.colors.borderGray}}
/>
<View style={styles.itemMenu}>
<AppText i18nKey={'Withdraw'} style={styles.txtTitle} />
<Text style={styles.txtMoney}>
{' '}
{total_withdraw == 0 ? 0 : toPriceVnd(total_withdraw)} Đ{' '}
</Text>
</View>
</View>
</View>
<View style={{height: 0.5, backgroundColor: R.colors.borderGray}} />
<View style={styles.row}>
<View style={styles.itemMenu}>
<AppText i18nKey={'Rose'} style={styles.txtTitle} />
<Text style={styles.txtMoney1}>0 Đ </Text>
</View>
<View style={{width: 0.5, backgroundColor: R.colors.borderGray}} />
<View style={styles.itemMenu}>
<AppText i18nKey={'Profit'} style={styles.txtTitle} />
<Text style={styles.txtMoney1}>0 Đ</Text>
</View>
</View>
</View>
{props.listImage.length > 0 ? (
<SwiperComponent listImage={props.listImage} />
) : null}
<Footer />
</ScrollView>
</ImageBackground>
......
src/Screens/Home/SwiperComponent.js 0 → 100644
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, Image, View} from 'react-native';
import Swiper from 'react-native-swiper';
import R from '../../assets/R';
import {HEIGHTXD} from '../../Config/Functions';
const styles = StyleSheet.create({
container: {
width: '100%',
height: HEIGHTXD(440),
marginTop: 25,
marginBottom: 10,
borderTopWidth: 0.5,
borderBottomWidth: 0.5,
borderBottomColor: R.colors.borderGray,
borderTopColor: R.colors.borderGray,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 2.84,
elevation: 2,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
});
const SwiperComponent = (props) => {
return (
<View style={styles.container}>
<Swiper style={styles.wrapper} loop={true} autoplay={true}>
<View>
<Image
style={{height: HEIGHTXD(440), width: '100%'}}
source={{uri: props.listImage[0].url}}
resizeMode={'cover'}
/>
</View>
<View>
<Image
style={{height: HEIGHTXD(440), width: '100%'}}
source={{uri: props.listImage[1].url}}
resizeMode={'cover'}
/>
</View>
<View>
<Image
style={{height: HEIGHTXD(440), width: '100%'}}
source={{uri: props.listImage[2].url}}
resizeMode={'cover'}
/>
</View>
</Swiper>
</View>
);
};
export default SwiperComponent;
src/apis/Functions/General.js 0 → 100644
import {PostLogin, GetData, PostData} from '../helpers';
import url from '../url';
export const getImagesHome = async (body) =>
GetData(url.urlGetImagesHome, body)
.then((res) => res)
.catch((err) => err);
src/apis/url.js
......@@ -6,6 +6,7 @@ export default {
urlGetOTP: root + 'api/auth/customer-get-otp',
urlVerifyOTP: root + 'api/auth/customer-verify-otp',
urlForgotPassword: root + 'api/auth/customer-forgot-password',
urlGetImagesHome: root + 'api/v1/slides/home',
urlVerifyAccount: root + 'api/v1/customers/verify-account',
urlGetListNew: root + '/api/v1/news/posts',
......
src/assets/images.js
......@@ -14,7 +14,7 @@ const images = {
moneyteam: require('./images/moneyteam.png'),
bgHeader: require('./images/bgheader5.png'),
iconMenu: require('./images/iconmenu.png'),
bgHome: require('./images/bgHome5.png'),
bgHome: require('./images/bgHome01.png'),
iconUser: require('./images/iconUser1.png'),
iconUserAccuracy: require('./images/iconUserAccuracy.png'),
......
src/components/Header/HeaderHome.js
......@@ -21,7 +21,7 @@ import SnackBar from '../SnackBar';
import {useNavigation} from '@react-navigation/native';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import Icon from 'react-native-vector-icons/AntDesign';
import {
WITHDRAW,
DEPOSIT,
......@@ -139,24 +139,58 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
);
};
const renderLabel = (status) => {
if (status == 1)
return (
<AppText i18nKey={'NotVerified'} style={{color: '#E3434F'}}></AppText>
);
if (status == 2)
return <AppText i18nKey={'Verified'} style={{color: '#FFB721'}}></AppText>;
if (status == 3)
return (
<AppText
i18nKey={'WaitVerification'}
style={{color: '#17B217'}}></AppText>
);
const renderActions = (onClickDetail) => {
return (
<View>
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => navigate.navigate(CHOOSEMETHOD)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconRecharge} />
<AppText i18nKey={'Deposit'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(WALLETWITHDRAW)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
<AppText i18nKey={'Withdraw'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(TRANSFER)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconTransfer} />
<AppText i18nKey={'Transfer'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(HISTORY)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconHistory} />
<AppText i18nKey={'History'} style={styles.txt} />
</TouchableOpacity>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 30, height: 20}}>
<TouchableOpacity
onPress={() => onClickDetail()}
style={styles.containerBtn}>
<Icon name={'up'} size={18} color={R.colors.color777} />
</TouchableOpacity>
</View>
</View>
</View>
);
};
const HeaderHome = (props) => {
const navigate = useNavigation();
const [detail, setDetail] = useState(false);
const onClickDetail = () => {
setDetail(!detail);
};
const copyToClipboard = () => {
Alert.alert(I18n.t('Notification'), I18n.t('CopyLink'));
Clipboard.setString(props.user.sponsor_url);
......@@ -178,7 +212,7 @@ const HeaderHome = (props) => {
<TouchableOpacity onPress={() => navigate.navigate(PROFILE)}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={styles.txtName}>{props.user.fullname}</Text>
{props.user.status == 3 ? (
{props.user.status != 1 || props.user.status != 2 ? (
<Image
source={R.images.iconCheck}
style={{width: 20, height: 20, marginLeft: 20}}
......@@ -196,44 +230,39 @@ const HeaderHome = (props) => {
/>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.wrapWallet}>
{renderWallet(
props.user.status,
props.user.current_money,
props.user.current_cqg_money,
props.user.contract_code,
)}
</View>
<View style={styles.containerMenu}>
<TouchableOpacity
onPress={() => navigate.navigate(CHOOSEMETHOD)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconRecharge} />
<AppText i18nKey={'Deposit'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(WALLETWITHDRAW)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
<AppText i18nKey={'Withdraw'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(TRANSFER)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconTransfer} />
<AppText i18nKey={'Transfer'} style={styles.txt} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigate.navigate(HISTORY)}
style={styles.wraper}>
<Image style={styles.imgIcon} source={R.images.iconHistory} />
<AppText i18nKey={'History'} style={styles.txt} />
</TouchableOpacity>
{props.user.status == 2 ? (
<AppText
i18nKey={'Verified'}
style={{color: '#FFB721'}}></AppText>
) : null}
</View>
</View>
{props.user.status != 1 || props.user.status != 2 ? (
<View>
<View style={styles.wrapWallet}>
{renderWallet(
props.user.status,
props.user.current_money,
props.user.current_cqg_money,
props.user.contract_code,
)}
</View>
{detail ? (
renderActions(onClickDetail)
) : (
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 30, height: 20}}>
<TouchableOpacity
onPress={onClickDetail}
style={styles.containerBtn}>
<Icon name={'down'} size={18} color={R.colors.color777} />
</TouchableOpacity>
</View>
</View>
)}
</View>
) : null}
</View>
</View>
</View>
......@@ -253,9 +282,29 @@ const styles = StyleSheet.create({
wrapWallet: {
height: 70,
width: '100%',
borderTopWidth: 1,
borderTopColor: '#EDEDF1',
borderBottomWidth: 1,
borderBottomColor: '#EDEDF1',
},
containerBtn: {
position: 'absolute',
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.white,
borderRadius: 20,
top: 5,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
width: '100%',
......@@ -281,7 +330,10 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
padding: 10,
paddingHorizontal: 10,
paddingTop: 10,
borderTopWidth: 1,
borderTopColor: '#EDEDF1',
},
wraper: {
justifyContent: 'center',
......@@ -342,8 +394,6 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: '#EDEDF1',
flexDirection: 'row',
paddingHorizontal: 20,
......@@ -358,7 +408,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 5,
},
containerWallet: {
justifyContent: 'center',
......
yarn.lock
......@@ -6709,6 +6709,13 @@ react-native-simple-radio-button@^2.7.4:
resolved "https://registry.yarnpkg.com/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.4.tgz#86e2dbe8af9e6bf60eee088f60466f7a975e7758"
integrity sha512-QOZNmJUn0ViBGU+at7wAG/uGzd5PfXi0kMHr9lfTCLXknW/f9f2fOVjxjdHvOCdf/zA/eMJBjGjtusSDzQf1+w==
react-native-swiper@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.6.0.tgz#59fdbdf95addee49630312f27077622c27776819"
integrity sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==
dependencies:
prop-types "^15.5.10"
react-native-tab-view@^2.15.2:
version "2.15.2"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.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