2021-06-22

king

2021-06-22 29432c9167e3fcdf83f35d0bb9dbe9acb7c7ffbf

 src/templates/modalconfig/checkCard/index.jsx

@@ -6,19 +6,14 @@

class CheckCard extends Component {
  static propTpyes = {
    multiple: PropTypes.bool,    // 是否可多选
    ratio: PropTypes.string,     // 图片比例
    width: PropTypes.number,     // 宽度
    display: PropTypes.string,   // 显示为：text（文本）、picture（图片）
    fields: PropTypes.array,     // 字段集
    options: PropTypes.array,    // 数据列表
    config: PropTypes.object,    // 表单配置信息
    onChange: PropTypes.func,    // 数据切换
  }

  state = {}

  getCards = () => {
    const { display, width, options, fields, ratio } = this.props
    const { display, width, options, fields, ratio, backgroundColor, borderColor } = this.props.config

    let paddingTop = '100%'
    if (ratio === '4:3') {
@@ -29,10 +24,19 @@
      paddingTop = '56.25%'
    }

    let style = {}
    
    if (borderColor) {
      style.borderColor = borderColor
    }

    if (display !== 'picture') {
      if (backgroundColor) {
        style.backgroundColor = backgroundColor
      }
      if (!options || options.length === 0) {
        return <Col span={width}>
          <div className="card-cell">
          <div className="card-cell" style={style}>
            {fields ? fields.map(col => {
              return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{col.field}</span>
            }) : null}
@@ -42,7 +46,7 @@
      }
      return options.map(item => {
        return <Col span={width} key={item.key}>
          <div className="card-cell">
          <div className="card-cell" style={style}>
            {fields.map(col => {
              return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
@@ -52,13 +56,13 @@
    } else {
      if (!options || options.length === 0) {
        return <Col span={width}>
          <div className="card-pic-cell" style={{paddingTop, background: '#91d5ff'}}>
          <div className="card-pic-cell" style={{...style, paddingTop, background: '#91d5ff'}}>
          </div>
        </Col>
      }
      return options.map(item => {
        return <Col span={width} key={item.key}>
          <div className="card-pic-cell" style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
          <div className="card-pic-cell" style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
          </div>
        </Col>
      })