Dingdong_app/components/GoodsCard.js

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

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,
  },
  status: {
    position: "absolute",
    left: 0,
    width: 80,
    paddingVertical: 4,
    backgroundColor: "#F0F0F0",
    bottom: 0,
    textAlign: "center",
  },
});

export default function GoodsCard(props) {
  const { add, remove, getWordsStr } = useModel("wordsModel");
  const {
    info,
    changeInfo,
    type,
    removeEvent,
    addEvent,
    isAdd,
    appearance,
    style,
    canEdit,
    onPress,
  } = props;
  const {
    id,
    img,
    name,
    introduction,
    totalSales,
    discountAmount,
    amount,
    takeOff,
    status,
  } = info || {};

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

  return (
    <Card
      style={[!appearance && styles.card, style]}
      appearance={appearance || "goodsCard"}
      disabled={!canEdit}
      onPress={onPress}
    >
      {id ? (
        <View style={styles.layout}>
          <Avatar
            style={styles.avatar}
            shape="rounded"
            source={{
              uri: img,
            }}
          />
          {status === "PENDING" && (
            <Text style={styles.status} category="h1">
              待审核
            </Text>
          )}
          {status === "DENY" && (
            <Text style={styles.status} category="h1" status="danger">
              审核未通过
            </Text>
          )}
          <View 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>
            <View style={styles.flex1} />
            <Text category="h6" status="danger">
              ¥{discountAmount}{" "}
              <Text
                category="h1"
                status="info"
                style={{ textDecorationLine: "line-through" }}
              >
                ¥{amount}
              </Text>
            </Text>
          </View>
          {appearance && type === "goodsList" && (
            <View 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>
            </View>
          )}
          {!appearance && !isAdd && (
            <View style={styles.butContent}>
              <Button status="primary" size="tiny" onPress={addEvent}>
                {add}
              </Button>
            </View>
          )}
          {appearance && isAdd && (
            <View style={styles.butContent}>
              <Button status="danger" onPress={removeEvent} size="tiny">
                {remove}
              </Button>
            </View>
          )}
          {/* {props.appearance == "classification" &&
                        props.type != "goodsList" && (
                            <Button
                                style={styles.miniButton}
                                status='danger'
                                onPress={props.removeEvent}
                                accessoryLeft={StarIcon}
                            />
                        )} */}
        </View>
      ) : (
        <View style={styles.layout} />
      )}
    </Card>
  );
}