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