From b5e70973340bf912b733acd737f55f90653dece8 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 03 七月 2021 09:48:25 +0800 Subject: [PATCH] 2021-07-03 --- src/templates/modalconfig/checkCard/index.jsx | 46 ++++++++++++++++++++++++++++++++++------------ 1 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/templates/modalconfig/checkCard/index.jsx b/src/templates/modalconfig/checkCard/index.jsx index ea21875..3575d22 100644 --- a/src/templates/modalconfig/checkCard/index.jsx +++ b/src/templates/modalconfig/checkCard/index.jsx @@ -6,33 +6,49 @@ class CheckCard extends Component { static propTpyes = { - multiple: PropTypes.bool, // 鏄惁鍙閫� - ratio: PropTypes.string, // 鍥剧墖姣斾緥 - width: PropTypes.number, // 瀹藉害 - display: PropTypes.string, // 鏄剧ず涓猴細text锛堟枃鏈級銆乸icture锛堝浘鐗囷級 - 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, picratio, backgroundColor, borderColor } = this.props.config + let _ratio = picratio || ratio let paddingTop = '100%' - if (ratio === '4:3') { + if (_ratio === '4:3') { paddingTop = '75%' - } else if (ratio === '3:2') { + } else if (_ratio === '3:2') { paddingTop = '66.7%' - } else if (ratio === '16:9') { + } 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) { + 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> + </Col> + } return options.map(item => { return <Col span={width} key={item.key}> - <div className="card-cell"> + <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> })} @@ -40,9 +56,15 @@ </Col> }) } else { + if (!options || options.length === 0) { + return <Col span={width}> + <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> }) -- Gitblit v1.8.0