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, getWordsStr } = useModel("wordsModel");
    const { info, changeInfo } = props;
    const {
        id,
        img,
        name,
        introduction,
        totalSales,
        discountAmount,
        amount,
        takeOff,
        status,
    } = info || {};

    const { takeOffInfo, ChangeTakeOff } = useModel("goodsModel", true);

    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,
                        }}
                    ></Avatar>
                    {status == "PENDING" && (
                        <Text style={styles.status} category='h1'>
                            待审核
                        </Text>
                    )}
                    {status == "DENY" && (
                        <Text
                            style={styles.status}
                            category='h1'
                            status='danger'
                        >
                            审核未通过
                        </Text>
                    )}
                    <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.type == "goodsList" && (
                        <Layout style={styles.butContent}>
                            <Button
                                status='primary'
                                size='small'
                                appearance='outline'
                                onPress={() => {
                                    if (!takeOff) {
                                        takeOffInfo(() => {
                                            ChangeTakeOff(info).then(res => {
                                                changeInfo(res);
                                            });
                                        });
                                    } else {
                                        ChangeTakeOff(info).then(res => {
                                            changeInfo(res);
                                        });
                                    }
                                }}
                            >
                                {getWordsStr(takeOff ? "takeUp" : "takeOff")}
                            </Button>
                        </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'
                                onPress={props.removeEvent}
                                accessoryLeft={StarIcon}
                            />
                        )} */}
                </Layout>
            ) : (
                <Layout style={styles.layout} />
            )}
        </Card>
    );
}
const StarIcon = props => <Icon {...props} name='minus' />;

const styles = StyleSheet.create({
    card: { marginTop: 10 },
    layout: {
        flexDirection: "row",
        height: 80,
        backgroundColor: "transparent",
    },
    avatar: {
        width: 80,
        height: 80,
        marginRight: 10,
    },
    main: {
        flex: 1,
        backgroundColor: "transparent",
    },
    flex1: {
        flex: 1,
    },
    butContent: {
        marginLeft: 6,
    },
    fontColor: {
        color: "#B5B5B5",
    },
    miniButton: {
        minWidth: 22,
        minHeight: 22,
        width: 22,
        height: 22,
        position: "absolute",
        right: 10,
        bottom: 5,
        maxWidth: 22,
        minHeight: 22,
    },
    status: {
        position: "absolute",
        left: 0,
        width: 80,
        paddingVertical: 4,
        backgroundColor: "#F0F0F0",
        bottom: 0,
        textAlign: "center",
    },
});