Skip to content

A
AppUms_Student
Commit 5b569b78 by tungnq
Options

TODO: Đã sửa xong giao diện màn công nợ

parent 94be4c66
Showing with 122 additions and 101 deletions
src/screens/debt/item.js
import { StyleSheet, Text, View } from "react-native"; import {StyleSheet, Text, View} from 'react-native';
import React from "react"; import React from 'react';
import { useNavigation } from "@react-navigation/native"; import {useNavigation} from '@react-navigation/native';
import R from "../../assets/R"; import R from '../../assets/R';
import Button from "../../components/Button"; import Button from '../../components/Button';
const ItemList = ({ item , onPayPress}) => { const ItemList = ({item, onPayPress}) => {
const navigate = useNavigation(); const navigate = useNavigation();
const QrCodeIconButton = R.images.icQrCodeButton; const QrCodeIconButton = R.images.icQrCodeButton;
const { displayConfig } = item; const {displayConfig} = item;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.title, { color: displayConfig.titleColor }]}> <Text style={[styles.title, {color: displayConfig.titleColor}]}>
{item.title_notifi_student_code} {item.title_notifi_student_code}
</Text> </Text>
<View style={styles.container_content}> <Text
<Text style={styles.sub_title}>Số tiền: </Text> style={[
<Text style={[styles.price_text, { color: displayConfig.priceColor }]}> styles.sub_title,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Số tiền:{' '}
<Text style={[styles.price_text, {color: displayConfig.priceColor}]}>
{item.price} {item.price}
</Text> </Text>
</View> </Text>
<View style={styles.container_content}> <Text
<Text style={styles.sub_title}>Mã công nợ: </Text> style={[
<Text style={styles.code}>{item.code_debt}</Text> styles.sub_title,
</View> {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
<View style={styles.container_content}> ]}>
<Text style={styles.sub_title}>Loại công nợ: </Text> Mã công nợ: <Text style={styles.code}>{item.code_debt}</Text>
<Text style={[styles.type_of_debt, { color: displayConfig.typeDebtColor }]}> </Text>
<Text
style={[
styles.sub_title,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Loại công nợ:{' '}
<Text
style={[styles.type_of_debt, {color: displayConfig.typeDebtColor}]}>
{item.type_debt} {item.type_debt}
</Text> </Text>
</View> </Text>
<View style={styles.container_content}>
<Text style={styles.sub_title}>Ghi chú: </Text> <Text
<Text style={[{ flex: 1 }, styles.note]}>{item.message_debt}</Text> style={[
</View> styles.sub_title,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Ghi chú:{' '}
<Text style={[{flex: 1}, styles.note]}>{item.message_debt}</Text>
</Text>
<View style={styles.container_content}> <View style={styles.container_content}>
{displayConfig.showPaymentTerm && ( {displayConfig.showPaymentTerm && (
<View style={{flex:1, flexDirection:'row'}}> <Text
<Text style={styles.sub_title}>Hạn thanh toán: </Text> style={[
<Text style={[styles.time, { color: displayConfig.timeColor }]}> styles.sub_title,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Hạn thanh toán:{' '}
<Text style={[styles.time, {color: displayConfig.timeColor}]}>
{item.payment_term} {item.payment_term}
</Text> </Text>
</View> </Text>
)} )}
{displayConfig.showButton && ( {displayConfig.showButton && (
<View style={styles.container_button}> <View style={styles.container_button}>
<Button <Button
marginRight={0} marginRight={0}
title="Thanh toán" title="Thanh toán"
textStyle={styles.text_button} textStyle={styles.text_button}
icon={(props) => <QrCodeIconButton width={16} height={16} />} icon={props => <QrCodeIconButton width={16} height={16} />}
backgroundColor={R.colors.buttonColorSel} backgroundColor={R.colors.buttonColorSel}
textColor={R.colors.white} textColor={R.colors.white}
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
height={32} height={35}
borderRadius={8} borderRadius={10}
paddingHorizontal={12} paddingHorizontal={12}
marginVertical={5}
iconSpacingHorizontal={4} iconSpacingHorizontal={4}
onPress={() => onPayPress?.(item)} onPress={() => onPayPress?.(item)}
/> />
</View> </View>
)} )}
</View> </View>
</View> </View>
); );
...@@ -82,59 +105,44 @@ const styles = StyleSheet.create({ ...@@ -82,59 +105,44 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
fontSize: R.fontsize.fontsSize14, fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium, fontFamily: R.fonts.InterMedium,
fontWeight:'500', fontWeight: '500',
lineHeight: 24,
}, },
sub_title: { sub_title: {
color: R.colors.black, color: R.colors.black,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontWeight: "300", fontWeight: '300',
lineHeight: 24,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
}, },
price_text: { price_text: {
color: R.colors.blue500, color: R.colors.blue500,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
code: { code: {
color: R.colors.black, color: R.colors.black,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
type_of_debt: { type_of_debt: {
color: R.colors.black, color: R.colors.black,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
note: { note: {
color: R.colors.black, color: R.colors.black,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
time: { time: {
color: R.colors.red, color: R.colors.red,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
container_content: {
flexDirection: "row", container_button: {},
}, text_button: {
container_button:{
},
text_button:{
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "400", fontWeight: '400',
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
}); });
src/screens/debt/view.js
import React, { useState } from "react"; import React, {useState} from 'react';
import { import {
Text, Text,
SafeAreaView, SafeAreaView,
...@@ -9,69 +9,82 @@ import { ...@@ -9,69 +9,82 @@ import {
View, View,
Image, Image,
TextInput, TextInput,
} from "react-native"; } from 'react-native';
import Header from "../../components/Header/Header"; import Header from '../../components/Header/Header';
import I18n from "../../helper/i18/i18n"; import I18n from '../../helper/i18/i18n';
import R from "../../assets/R"; import R from '../../assets/R';
import ItemList from "./item"; import ItemList from './item';
const DebtView = (props) => { const DebtView = props => {
const { onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt } = const {onTabChange, dataListStatus, dataListDebtItem, activeTab} = props;
props; const IconSearch = R.images.icSearch;
const IconSearch = R.images.icSearch const renderTabViewItem = ({item}) => {
const renderTabViewItem = ({ item }) => {
const isActive = activeTab === item.key; const isActive = activeTab === item.key;
return ( return (
<TouchableOpacity <TouchableOpacity
style={[styles.tab_button, isActive && styles.tabButtonActive]} style={[styles.tab_button, isActive && styles.tabButtonActive]}
onPress={() => onTabChange(item.key)} onPress={() => onTabChange(item.key)}>
>
<Text <Text
style={[styles.tabButtonText, isActive && styles.tabButtonTextActive]} style={[
> styles.tabButtonText,
isActive && styles.tabButtonTextActive,
]}>
{item.title_status} {item.title_status}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const renderItem = ({ item }) => { const renderItem = ({item}) => {
return <ItemList item={item} onPayPress={props.onPayPress} />; return <ItemList item={item} onPayPress={props.onPayPress} />;
}; };
const filteredDebtItems = dataListDebtItem.filter( const filteredDebtItems = dataListDebtItem.filter(
(item) => item.status === activeTab item => item.status === activeTab,
); );
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header isBack title={I18n.t("Debt")} /> <Header isBack title={I18n.t('Debt')} />
<View style={styles.tab_container}> <View style={styles.tab_container}>
<FlatList <FlatList
data={dataListStatus} data={dataListStatus}
renderItem={renderTabViewItem} renderItem={renderTabViewItem}
keyExtractor={(item) => item.key} keyExtractor={item => item.key}
horizontal horizontal
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.tab_scroll_content} contentContainerStyle={styles.tab_scroll_content}
/> />
</View> </View>
<View style={{ marginHorizontal: 15, flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: R.colors.gray400, borderRadius: 50, padding: 0, maxHeight: 40, paddingHorizontal: 10, marginVertical: 5 }}> <View
<IconSearch width={20} height={20} stroke={R.colors.gray400}/> style={{
<TextInput marginHorizontal: 15,
placeholder={"Tìm kiếm"} flexDirection: 'row',
style={styles.input} alignItems: 'center',
placeholderTextColor={R.colors.gray400} borderWidth: 1,
borderColor: R.colors.gray400,
/> borderRadius: 50,
padding: 0,
height: 35,
paddingHorizontal: 10,
marginVertical: 10,
}}>
<IconSearch width={20} height={20} stroke={R.colors.gray400} />
<View style={{flex: 1}}>
<TextInput
placeholder={'Tìm kiếm'}
style={styles.input}
placeholderTextColor={R.colors.gray400}
/>
</View>
</View> </View>
<Text style={styles.sub_text}>{props.timeDebt}</Text> <Text style={styles.sub_text}>{props.timeDebt}</Text>
<FlatList <FlatList
data={filteredDebtItems} data={filteredDebtItems}
renderItem={renderItem} renderItem={renderItem}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id.toString()} keyExtractor={item => item.id.toString()}
/> />
</View> </View>
); );
...@@ -85,50 +98,50 @@ const styles = StyleSheet.create({ ...@@ -85,50 +98,50 @@ const styles = StyleSheet.create({
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
input: { input: {
height: 40, height: 35,
paddingHorizontal: 10, paddingHorizontal: 5,
paddingVertical: 0,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: "400", fontWeight: '400',
color: R.colors.gray400, color: R.colors.gray400,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
tab_container: { tab_container: {
marginHorizontal: 10, marginHorizontal: 10,
justifyContent: "center", justifyContent: 'center',
paddingVertical: 5,
}, },
tab_button: { tab_button: {
marginHorizontal: 5, marginHorizontal: 5,
borderRadius: 15, borderRadius: 15,
width:132, width: 132,
backgroundColor: R.colors.gray400, backgroundColor: R.colors.gray400,
alignItems: "center", alignItems: 'center',
justifyContent:"center" justifyContent: 'center',
}, },
tabButtonActive: { tabButtonActive: {
backgroundColor: R.colors.blue500, backgroundColor: R.colors.blue500,
}, },
tabButtonText: { tabButtonText: {
fontFamily: R.fonts.InterSemiBold, fontFamily: R.fonts.InterSemiBold,
fontWeight: "600", fontWeight: '600',
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
color: R.colors.white, color: R.colors.white,
}, },
tabButtonTextActive: { tabButtonTextActive: {
color: R.colors.white, color: R.colors.white,
fontWeight: "600", fontWeight: '600',
fontFamily: R.fonts.InterSemiBold, fontFamily: R.fonts.InterSemiBold,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
tab_scroll_content: { tab_scroll_content: {
height: 28, height: 30,
marginTop:5
}, },
sub_text: { sub_text: {
color: R.colors.black, color: R.colors.black,
marginLeft: 15, marginLeft: 15,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterMedium,
fontWeight: "300", fontWeight: '600',
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
}, },
}); });
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