pc-channel/src/pages/sample/h5/components/H5Card.jsx

import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert, Card, Modal } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import router from 'umi/router';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import Wangedit from '../../../../components/Wangedit/Wangedit'
import moment from 'moment';

const { Meta } = Card

const H5Card = props => {
  const { h5Data } = props

  const colerArr = ["#2db7f5", "#87d068", "#108ee9", "magenta", "red", "volcano", "orange", "green", "geekblue", "purple"]
  const toEdit = () => {
    router.push({
      pathname: '/sample/h5/edit',
      query: {
        id: h5Data.sampleId
      },
    });
  }

  const deleteSample = () => {
    const title = '确认将所选数据删除？可删除条件：无关联的H5需求单'
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.sample.puth5, urlData: { id: h5Data.sampleId } }).then((data) => {
          message.info('操作成功！')
          props.onChange()
        }).catch((err) => {
          console.log(err)
          message.info(err.msg || err.message)
        })
      }
    });
  }

  return (
    <>
      <Card
        hoverable
        style={{
          minWidth: '240px',
          marginRight: '0.1rem',
          height: '2.1rem',
          background: 'rgba(255, 255, 255, 1)',
          boxShadow: '0px 0px 16px 2px rgba(0, 0, 0, 0.12)',
          borderRadius: '12px',
          marginBottom: '0.1rem',
          position: 'relative',
          padding: '0.1rem'
        }}
        // style={{ width: 480,height: 450,marginTop: 50,position: "relative" }}
        cover={<img  width="100%" style={{height:'1.3rem'}} alt="example" onClick={toEdit} src={h5Data.coverImg} />}
        extra={<a onClick={deleteSample}>删除</a>}
        title={h5Data.status == 1 ? '已发布' : h5Data.status == 0 ? '未发布' : ''}
      >
        <Meta onClick={toEdit} title={h5Data.sampleName} />
        <div style={{ position: "absolute", bottom: "50px", right: "20px", margin: '20px 0' }}>
          {(h5Data.tags || []).map((x, i) => {
            return <Tag color={colerArr[i]}>{x}</Tag>
          })}
        </div>
      </Card>
    </>
  )
}

export default H5Card