From 8d66ff34fae5b048a6b7923cc75d34f13a08be9d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 02 八月 2022 11:42:43 +0800
Subject: [PATCH] Merge branch 'develop'

---
 src/templates/modalconfig/checkCard/index.jsx |  100 +++++++++++++++++++++++++++++++++-----------------
 1 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/templates/modalconfig/checkCard/index.jsx b/src/templates/modalconfig/checkCard/index.jsx
index 952f4db..1766dd0 100644
--- a/src/templates/modalconfig/checkCard/index.jsx
+++ b/src/templates/modalconfig/checkCard/index.jsx
@@ -10,61 +10,93 @@
     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 _ratio = picratio || ratio
-    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%'
+    let _options = []
+    let _fields = fields || []
+
+    if (options) {
+      _options = options.filter(op => !op.Hide)
     }
 
-    let style = {}
-    
-    if (borderColor) {
-      style.borderColor = borderColor
+    let cls = ''
+    if (_options.length * width <= 24 && this.state.appType !== 'mob') {
+      cls = 'no-margin-bottom'
     }
-
-    if (display !== 'picture') {
-      let _style = backgroundColor ? {backgroundColor} : null
- 
-      if (!options || options.length === 0) {
+    if (display === 'picture') {
+      let _ratio = picratio || ratio
+      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.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>
       })

--
Gitblit v1.8.0