Merge branch 'fix0218' into 'v2-220218'

src/pages/commodity/products/components/circleCheckbox/index.less

+.circleCheckbox {
+ display: flex;
+}
+.circleCheckboxUl {
+  list-style: none;
+  display: flex;
+  .circleCheckboxUlLi {
+    // height: 32px;
+    line-height: 32px;
+    background: #F5F6F7;
+    text-align: center;
+    border-radius: 4px;
+    margin: 0 8px;
+    padding: 0px 16px;
+    cursor: pointer;
+    span {
+      font-weight: 400;
+      font-size: 12px;
+      color: #5C626A;
+      text-align: center;
+    }
+  }
+  .active {
+    background: rgba(0,169,143,0.04);
+    border: 1px solid #00A98F;
+    span {
+      color: #00A98F;
+    }
+
+  }
+}

src/pages/commodity/products/components/circleCheckbox/index.tsx

+import React, { useState, useEffect, ReactNode } from 'react';
+import cx from 'classnames'
+import styles from './index.less'
+
+interface PriceInputProps {
+  value?: number[];
+  onChange?: (value: number[]) => void;
+  options: any;
+  expandOperation?: ReactNode
+}
+
+/**
+ * 新增商品 方形多选表单
+ * @returns
+ */
+
+const CircleCheckbox: React.FC<PriceInputProps> = ({ value = [], options = [], onChange, expandOperation = null }) => {
+  const [currentValue, setCurrentValue] = useState<number[]>([...value])
+
+  useEffect(() => {
+    onChange?.([...currentValue])
+  }, [currentValue])
+
+  const clickItem = (id) => {
+    const _value = [...currentValue]
+    if(_value.includes(id)) {
+      var index = _value.indexOf(id)
+    	if (index > -1) {
+    		_value.splice(index, 1)
+      }
+      setCurrentValue([..._value])
+    } else {
+      _value.push(id)
+      setCurrentValue([..._value])
+    }
+  }
+
+  return (options.length && <div className={styles.circleCheckbox}>
+      <ul className={styles.circleCheckboxUl}>
+        {
+          options.map((item: any, index: string) => ( <li
+            key={item.id}
+            className={currentValue.includes(item.id) ? cx(styles.active, styles.circleCheckboxUlLi) : styles.circleCheckboxUlLi}
+            onClick={()=>clickItem(item.id)}
+          >
+            <span>
+              {item.value}
+            </span>
+          </li>
+          ))
+        }
+        {
+          expandOperation
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default CircleCheckbox