Merge branch 'develop'

king

2022-08-02 8d66ff34fae5b048a6b7923cc75d34f13a08be9d

 src/templates/modalconfig/checkCard/index.jsx

@@ -10,11 +10,25 @@
    onChange: PropTypes.func,    // 数据切换
  }

  state = {}
  state = {
    appType: sessionStorage.getItem('appType'),
  }

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

    let _options = []
    let _fields = fields || []

    if (options) {
      _options = options.filter(op => !op.Hide)
    }

    let cls = ''
    if (_options.length * width <= 24 && this.state.appType !== 'mob') {
      cls = 'no-margin-bottom'
    }
    if (display === 'picture') {
    let _ratio = picratio || ratio
    let paddingTop = '100%'
    if (_ratio === '4:3') {
@@ -24,47 +38,65 @@
    } else if (_ratio === '16:9') {
      paddingTop = '56.25%'
    }

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

    if (display !== 'picture') {
      let _style = backgroundColor ? {backgroundColor} : null
 
      if (!options || options.length === 0) {
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-cell" style={style}>
            <div className="bg-mask" style={_style}></div>
            {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}
            {!fields || fields.length === 0 ? <span style={{color: '#000000', fontSize: '14px', height: '21px'}}>示例</span> : null}
          <div className="card-pic-cell no-margin-bottom" style={{paddingTop, background: '#91d5ff'}}>
          </div>
        </Col>
      }
      return options.map(item => {
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className="card-cell" style={style}>
            <div className="bg-mask" style={_style}></div>
            {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>
          <div className={'card-pic-cell ' + cls} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
            <div className="content-wrap">
              <div className="content-center">
                {_fields.map(col => {
                  return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
                })}
              </div>
            </div>
          </div>
        </Col>
      })
    } else if (display === 'color') {
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-color-cell no-margin-bottom" style={{background: '#1890ff'}}>
          </div>
        </Col>
      }
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className={'card-color-cell ' + cls} style={{background: item.$value}}>
            {_fields.map(col => {
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
          </div>
        </Col>
      })
    } else {
      if (!options || options.length === 0) {
      let _style = null
      let style = null

      if (backgroundColor) {
        _style = {backgroundColor}
        style = {borderColor: 'transparent'}
      }
 
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-pic-cell" style={{...style, paddingTop, background: '#91d5ff'}}>
          <div className="card-cell no-margin-bottom" style={style}>
            <div className="bg-mask" style={_style}></div>
            <span style={{color: '#000000', fontSize: '14px', height: '21px'}}>示例</span>
          </div>
        </Col>
      }
      return options.map(item => {
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className="card-pic-cell" style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
          <div className={'card-cell ' + cls} style={style}>
            <div className="bg-mask" style={_style}></div>
            {_fields.map(col => {
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
          </div>
        </Col>
      })