---
title: 展示型卡片数据列表
order: 2
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwCardList, YwAvatar } from '@ywfe/yw-design';
import {Row,Col} from 'antd';
import 'antd/dist/antd.css';


const getDataSource = 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,
            statusName:'处理中',
            tagA:1,
            tagB:2,
          },
          {
            id: 2,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '事项111',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
            statusName:'审批通过',
            tagA:1,
            tagB:2,
          },
        ],
        totalNumber: 100,
      });
    }, 1500);
  });
};
const renderItemMain = (record) =>
        <>
            <Row>
                <Col span = '12'>活动名称xxxxxxx</Col>
                <Col span='4' className= 'number'>10</Col>
                <Col span='4' className= 'number'>20</Col>
                <Col span='4' className= 'number'>30</Col>
            </Row>
            <Row>
                <Col span = '12'>直播主题：超越双十一，好价不怕比</Col>
                <Col span='4'>招商数量</Col>
                <Col span='4'>招商数量</Col>
                <Col span='4'>招商数量</Col>
            </Row>
            <Row>
                <Col span = '12'>直播日期：07-20 12:00</Col>
            </Row>
            <Row>
                <Col span = '24'>招商行业：食品饮料：3款，要求：奶片、可乐、月饼；个护家清：3款，要求：口罩等低价品； 珠宝手表：3款，要求：男士品牌</Col>
            </Row>
        </>
const renderItemFooter = (record)=> <><span>坑位费：5万</span><span>线上佣金：30%</span></>;

const formatValues =  (record) => {
      return {
        itemTags:[{color:'error',value:'3天19时45分',visible:true},{ color: '#FF501F', value: '近三天提报',fixed:'right' }],
        renderItemAvatar:(record)=>  <YwAvatar src='https://wework.qpic.cn/bizmail/ka62hY6qBiciaCmU6XORKRmkPiazbfOaNOC8ReCxPHRIibTH5wOOuUl2Ug/0' extraIcon='KS' size={64} userName='折柔' showName />,
        renderItemMain,
        operates:[{
            btnText:'立即报品',
            btnType:'primary',
            disabled: true,
            disabledTooltip:'不满足报品条件',
            visible: true,
            onClick:()=>{}
        },{
            btnText:'继续报品',
            btnType:'default',
            disabled: false,
            visible: false
        }]
      };
    };
const App = ()=> {
    return (
        <YwCardList rowKey='id' formatValues={formatValues} getDataSource={getDataSource} style={{background:'#efefef'}}/>
      
    );
}

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