Dingdong_app/components/GoodsCard.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Avatar,
    Icon,
} from "@ui-kitten/components";
import { useModel } from "flooks";
export default function GoodsCard(props) {
    const { add, remove } = useModel("wordsModel");
    const { info } = props;
    const { id, img, name, introduction, totalSales, discountAmount, amount } =
        info || {};
    return (
        <Card
            style={[!props.appearance && styles.card, props.style]}
            appearance={props.appearance || "goodsCard"}
            disabled={!props.canEdit}
            onPress={props.onPress}
        >
            {!!id ? (
                <Layout style={styles.layout}>
                    <Avatar
                        style={styles.avatar}
                        shape='rounded'
                        source={{
                            uri: img,
                        }}
                    />

                    <Layout style={styles.main}>
                        <Text
                            category='s1'
                            ellipsizeMode='tail'
                            numberOfLines={1}
                        >
                            {name || ""}
                        </Text>
                        <Text
                            category='c1'
                            status='info'
                            ellipsizeMode='tail'
                            numberOfLines={1}
                        >
                            {introduction || ""}
                        </Text>
                        <Text category='c1' status='info'>
                            月售 {totalSales || 0}
                        </Text>
                        <Layout style={styles.flex1} />
                        <Text category='h6' status='danger'>
                            ¥{discountAmount}{" "}
                            <Text
                                category='h1'
                                status='info'
                                style={{ textDecorationLine: "line-through" }}
                            >
                                ¥{amount}
                            </Text>
                        </Text>
                    </Layout>

                    {!props.appearance && !props.isAdd && (
                        <Layout style={styles.butContent}>
                            <Button
                                status='primary'
                                size='tiny'
                                onPress={props.addEvent}
                            >
                                {add}
                            </Button>
                        </Layout>
                    )}

                    {!props.appearance && props.isAdd && (
                        <Layout style={styles.butContent}>
                            <Button
                                status='danger'
                                onPress={props.removeEvent}
                                size='tiny'
                            >
                                {remove}
                            </Button>
                        </Layout>
                    )}

                    {props.appearance == "classification" &&
                        props.type != "goodsList" && (
                            <Button
                                style={styles.miniButton}
                                status='danger'
                                accessoryLeft={StarIcon}
                            />
                        )}
                </Layout>
            ) : (
                <Layout style={styles.layout} />
            )}
        </Card>
    );
}
const StarIcon = (props) => <Icon {...props} name='minus-outline' />;

const styles = StyleSheet.create({
    card: { marginTop: 10 },
    layout: {
        flexDirection: "row",
        height: 80,
    },
    avatar: {
        width: 80,
        height: 80,
        marginRight: 10,
    },
    main: {
        flex: 1,
    },
    flex1: {
        flex: 1,
    },
    butContent: {
        marginLeft: 6,
    },
    fontColor: {
        color: "#B5B5B5",
    },
    miniButton: {
        minWidth: 18,
        minHeight: 18,
        width: 18,
        height: 18,
        position: "absolute",
        right: 10,
        bottom: 5,
    },
});