2021-05-24

king

2021-05-24 f267d04e0561a0a20d1f2a9f558a273558ece90d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'
 
import './index.scss'
 
class CheckCard extends Component {
  static propTpyes = {
    card: PropTypes.bool,        // 卡片信息
    onChange: PropTypes.func     // 数据切换
  }
 
  state = {
    selectKeys: null
  }
 
  UNSAFE_componentWillMount() {
    const { card } = this.props
 
    if (card.multiple === 'true') {
      this.setState({
        selectKeys: card.initval ? card.initval.split(',') : []
      })
    } else {
      this.setState({
        selectKeys: card.initval
      })
    }
  }
 
  changeCard = (item) => {
    const { multiple } = this.props.card
    const { selectKeys } = this.state
 
    if (multiple === 'true') {
      let keys = []
      if (selectKeys.includes(item.$value)) {
        keys = selectKeys.filter(key => key !== item.$value)
      } else {
        keys = [...selectKeys, item.$value]
      }
 
      this.setState({
        selectKeys: keys
      }, () => {
        this.props.onChange && this.props.onChange(keys.join(','))
      })
    } else if (multiple !== 'true' && selectKeys !== item.$value) {
      this.setState({
        selectKeys: item.$value
      }, () => {
        this.props.onChange && this.props.onChange(item.$value)
      })
    }
  }
 
  getCards = () => {
    const { display, width, options, fields, ratio, multiple } = this.props.card
    const { selectKeys } = this.state
 
    let paddingTop = '100%'
    if (ratio === '4:3') {
      paddingTop = '75%'
    } else if (ratio === '3:2') {
      paddingTop = '66.7%'
    } else if (ratio === '16:9') {
      paddingTop = '56.25%'
    }
 
    if (!options || options.length === 0) {
      return null
    } else if (display !== 'picture') {
      if (!fields || fields.length === 0) {
        return null
      }
      return options.map(item => {
        let _active = false
        if (multiple === 'true' && selectKeys.includes(item.$value)) {
          _active = true
        } else if (multiple !== 'true' && selectKeys === item.$value) {
          _active = true
        }
 
        return <Col span={width} key={item.key}>
          <div className={'card-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)}>
            {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>
        </Col>
      })
    } else {
      return options.map(item => {
        let _active = false
        if (multiple === 'true' && selectKeys.includes(item.$value)) {
          _active = true
        } else if (multiple !== 'true' && selectKeys === item.$value) {
          _active = true
        }
 
        return <Col span={width} key={item.key}>
          <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
          </div>
        </Col>
      })
    }
  }
 
  render() {
    return (
      <div className="check-card-form-box">
        <Row gutter={12}>{this.getCards()}</Row>
      </div>
    )
  }
}
 
export default CheckCard