---
title: 卡片类型
order: 2
---

```jsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button, Tooltip, Row, Col, Divider } from 'antd';
import { YwDrawerSelector } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const filterItems = [
  {
    title: '商品信息',
    name: 'input',
    component: 'Input',
    type: 'string',
    props: {
      inset: true,
    },
    componentProps: {
      placeholder: '请输入商品名称',
    },
  },
  {
    title: '招商对接人',
    name: 'select',
    component: 'Select',
    type: 'string',
    props: {
      inset: true,
    },
    enum: [
      { value: 1, label: 1 },
      { value: 2, label: 2 },
    ],
  },
  {
    title: '寄样标签',
    name: 'tag',
    component: 'Select',
    type: 'string',
    props: {
      inset: true,
    },
    enum: [
      { value: 1, label: 1 },
      { value: 2, label: 2 },
    ],
  },
];
const onSubmit = (keys, data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 1500);
  });
};
const onClose = () => {};

const buttons = [
  {
    type: 'filter',
    children: <Divider type="vertical" />,
  },
  {
    type: 'filter',
    btnText: '过滤条件',
    name: 'isChecked',
    visible: true,
    defaultValue: false,
    // onChange
  },
  {
    type: 'batch',
    btnText: '批量移除',
    onClick: (keys, _, reload) => {
      setTimeout(reload({ unSelectKeys: keys }), 1000);
    },
  },
];
const getTableData = async (props) => {
  console.log('form参数', props);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: [
          {
            id: 1,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛',
            event: '事项',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 1,
            itemImg:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: 1,
          },
          {
            id: 2,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            itemImg:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: 2,
          },
          {
            id: 3,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            itemImg:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: 3,
          },
          {
            id: 4,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            itemImg:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: 4,
          },
          {
            id: 5,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            itemImg:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            itemNo: 5,
          },
        ],
        totalNumber: 100,
        pageSize: 10,
      });
    }, 1500);
  });
};
const renderItemMain = (record) => (
  <>
    <Row>
      <Col span="18">Apple Mac mini 新款八核M1芯片 8G 512G SSD 台…</Col>
    </Row>
    <Row gutter="6">
      <Col span="4">直播价：1999</Col>
      <Col span="1">
        <Divider type="vertical" />
      </Col>
      <Col span="8">类目：酒水饮料/白酒/茅台</Col>
    </Row>
  </>
);
const renderItemFooter = (record) => (
  <>
    <span>坑位费：5万</span>
    <span>线上佣金：30%</span>
  </>
);
const renderItemShop = (record) => {
  return (
    <Row>
      <Col span="12">店铺信息</Col>
    </Row>
  );
};
const formatValues = (record) => {
  return {
    itemTags: [{ color: '#108ee9', value: '有样品', visible: true }],
    // imgUrl:"https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg",
    renderItemImg: (record) => (
      <img
        src="https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg"
        alt=""
      />
    ),
    renderItemMain,
    renderItemShop,
    renderItemFooter,
    tags: [{ value: '零售', visible: true }, { value: '正价' }],
  };
};

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button
        onClick={() => {
          setVisible(true);
        }}
      >
        点击
      </Button>
      <YwDrawerSelector
        title="选择商品"
        filterItems={filterItems}
        getTableData={getTableData}
        rowSelection={{
          hideSelectAll: false,
        }}
        listType="card"
        formatValues={formatValues}
        rowKey="itemNo"
        pagination={{}}
        confirmText="下一步"
        onSubmit={onSubmit}
        buttons={buttons}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        formatPreviewItemValue={(item) => {
          return {
            imgUrl:
              'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
            id: 1,
            itemNo: 1,
            tooltip: {
              title: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
              placement: 'topLeft',
            },
          };
        }}
      />
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```