Dingdong_app/components/Complaint.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Avatar,
    Icon,
    Divider,
} from "@ui-kitten/components";
import { useModel } from "flooks";

export default function Complaint(props) {
    const { getWordsStr } = useModel("wordsModel");
    const { info } = props;
    const { id, amount, fullAmount, name, endDate, startDate } = info || {};
    const code = React.useMemo(() => {
        if (amount) {
            return (amount > 0 ? "+ " : "- ") + amount.toFixed(2);
        } else {
            return "+ 0.00";
        }
    }, [amount]);
    return (
        <Card appearance='walletCard' style={{ marginBottom: 15 }}>
            <Layout>
                <Text category='c1'>投诉类型:商家少送/漏送商品</Text>
                <Text category='c1'>投诉时间：2020-05-13 12:45</Text>
            </Layout>

            <Divider style={styles.drivider} />

            <Text category='h1' status='info'>
                您的订单已经被取消收款方老司机的发链接SDK溜老司机的上路考订水房间了圣诞节弗兰克斯家电快溜缝胶看楼上的甲方看了圣诞节放凌空加施蒂
            </Text>

            <Layout style={styles.imgList}>
                <Avatar style={styles.avatar} shape='rounded'></Avatar>
                <Avatar style={styles.avatar} shape='rounded'></Avatar>
                <Avatar style={styles.avatar} shape='rounded'></Avatar>
            </Layout>
        </Card>
    );
}

const ForwardIcon = props => (
    <Icon
        {...props}
        name='arrow-ios-forward'
        fill='#B4B4B4'
        style={{ width: 15, height: 15, fontWeight: 500 }}
    />
);
const styles = StyleSheet.create({
    main: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "transparent",
    },
    left: {
        width: 80,
        flexShrink: 0,
        alignItems: "center",
    },
    center: {
        flex: 1,
        marginLeft: 14,
        backgroundColor: "transparent",
    },
    text2: {
        paddingTop: 6,
    },
    code: {
        alignSelf: "flex-start",
    },
    icon: {
        width: 20,
        position: "absolute",
        right: 0,
        top: "50%",
        marginTop: -10,
    },
    imgList: {
        flexDirection: "row",
        marginTop: 20,
    },
    avatar: {
        width: 53,
        height: 53,
        backgroundColor: "#eee",
        marginRight: 13,
    },

    drivider: {
        marginVertical: 10,
    },
});