商品详情增加选颜色配置

src/components/GoodsList/index.js

@@ -85,6 +85,10 @@ class GoodsList extends PureComponent {
       message.warning("添加数量不能为0!");
       return;
     }
+    if (item.isOptional == "1") {
+      message.warning("请到商品详情页面选择商品颜色!");
+      return;
+    }
     this.iconFly(ele.target);
     const mainNum = parseFloat(item.orderNum || 1) * parseFloat(item.conversionRate || 1);
     dispatch({
@@ -181,6 +185,7 @@ class GoodsList extends PureComponent {
                   <span className={styles.goodsStatusTxt}>新</span>
                 </span>
                 {item.displayName}
+                {item.isOptional == "1" ? <span class={styles.goodsColorMask}>调</span> : ""}
               </p>
               {/* <p className={styles.goodsCode}>{item.code}{goodsVersion(item.version)}</p> */}
               <p className={styles.goodsCode}>

src/components/GoodsList/index.less

@@ -245,3 +245,9 @@
   text-align: right;
   padding-bottom: 140px;
 }
+
+.goodsColorMask {
+  background-color: #f85300;
+	color: #fff;
+	margin-left: 2px
+}

src/components/GoodsTable/index.js

@@ -38,6 +38,10 @@ class GoodsTable extends PureComponent {
         message.warning("添加数量不能为0!");
         return;
       }
+      if (item.isOptional == "1") {
+        message.warning("请到商品详情页面选择商品颜色!");
+        return;
+      }      
     // this.iconFly(ele.target);
     const mainNum = parseFloat(item.orderNum || 1) * parseFloat(item.conversionRate || 1);
     dispatch({
@@ -175,7 +179,10 @@ class GoodsTable extends PureComponent {
                 <span className={styles.goodsHotPrice}>{item.baseDiscountPrice ? amountPrecision(item.baseDiscountPrice) : '0.00'}</span>
               </div>
               <div className={styles.goodsHotTitlebox}>
-                <span className={styles.goodsTitle}>{item.displayName.length > 14 ? `${item.displayName.substr(0, 14)}...` : item.displayName}</span>
+                <span className={styles.goodsTitle}>
+                  {item.displayName}
+                  {item.isOptional == "1" ?  <span class={styles.goodsColorMask}>调</span> : ""}
+                </span>
               </div>
               <div className={styles.codeBox}>
                 {/* <span className={styles.code} title={`${item.code} V${item.version}.0`}>编码: {item.code}{goodsVersion(item.version, "card")}</span> */}

src/components/GoodsTable/index.less

@@ -187,4 +187,10 @@
   height: 40px;
   line-height: 40px;
   cursor: pointer;
+}
+
+.goodsColorMask {
+  background-color: #f85300;
+	color: #fff;
+	margin-left: 2px
 }

src/pages/Buyer/goods/goodsDetail/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from "react";
 import { connect } from "dva";
-import { Icon, Checkbox, Select, Input, Button, message, Breadcrumb } from "antd";
+import { Icon, Checkbox, Select, Input, Button, message, Breadcrumb, Tag, Modal } from "antd";
 import styles from "./index.less";
 import AmountFun from "@/components/AmountFun/index.js";
 import { SpecificationMethod, _isContained, _isArrEqual, amountPrecision } from '@/utils/utils';
@@ -36,7 +36,17 @@ class GoodsDetails extends PureComponent {
             SpecificationFlag: 0,
             mockdata: [],
             isCheckVal: [],
-            isCheckName: []
+            isCheckName: [],
+            optValShow: false,
+            optSearchVal: "",
+            optValSelectId: "",
+            optVal: {
+                baseGoodsOptValue: "",
+                baseGoodsOptId: "",
+                ext05: "",
+                ext04: "",
+                price: ""
+            }
         };
     }
     componentWillMount() {
@@ -160,6 +170,33 @@ class GoodsDetails extends PureComponent {
             isHover: index
         });
     }
+    // 清空颜色
+    clearColor() {
+        this.setState({
+            optVal: {}
+        });
+    }
+
+    // 显示颜色选择窗口
+    openColorDlg() {
+        this.setState({
+            optValShow: true
+        });
+    }
+
+    // selectColor(optValSelectId) {
+    //     console.log(optValSelectId.target.textContent)
+    //     this.setState({
+    //         optValSelectId: optValSelectId.target.textContent
+    //     });
+    // }
+
+    selectColor(optValSelectId) {
+        this.setState({
+            optValSelectId
+        });
+    }
+
     // 获取购买数量
     buyNumChange(num) {
         this.setState({
@@ -401,6 +438,7 @@ class GoodsDetails extends PureComponent {
             ));
             return temp;
         };
+
         return (
             <div className={styles.commodityDetailsPage}>
                 {/* {this.BreadcrumbItem()} */}
@@ -440,7 +478,7 @@ class GoodsDetails extends PureComponent {
                                         <span>{goodsDetail ? goodsDetail.promQueryResultList : ''}</span>
                                     </p>
                                 </li>
-                                { specsHtml() }
+                                {/* { specsHtml() } */}
                                 <li className={styles.titleTextList} >
                                     <span className={styles.title} >重量</span>
                                     <em className={styles.symbolEm} >：</em>
@@ -459,6 +497,21 @@ class GoodsDetails extends PureComponent {
                                         </span>
                                     </div>
                                 </li>
+                                <li className={styles.titleTextList} >
+                                    <span className={styles.title} >系列</span>
+                                    <em className={styles.symbolEm} >：</em>
+                                    <div className={styles.amountBox} >
+                                        <Tag onClick={this.clearColor.bind(this)} color={this.state.optVal.baseGoodsOptId ? "" : "red"}>无</Tag>
+                                        <Tag onClick={this.openColorDlg.bind(this)}>选颜色</Tag>
+                                    </div>
+                                </li>
+                                <li className={styles.titleTextList} >
+                                    <span className={styles.title} >颜色</span>
+                                    <em className={styles.symbolEm} >：</em>
+                                    <div className={styles.amountBox} >
+                                        {this.state.optVal.baseGoodsOptValue}
+                                    </div>
+                                </li>                                                             
                                 <li className={styles.titleTextList} >
                                     <span className={styles.title} >数量</span>
                                     <em className={styles.symbolEm} >：</em>
@@ -471,7 +524,8 @@ class GoodsDetails extends PureComponent {
                                     <em className={styles.symbolEm} >：</em>
                                     <div className={styles.textBox} >
                                         <span className={styles.contBs} >
-                                            {(goodsDetail.specification)}/{goodsDetail.basicUnitName}
+                                            {/* {(goodsDetail.specification)}/{goodsDetail.basicUnitName} */}
+                                            {goodsDetail ? (goodsDetail.specification) +"/"+(goodsDetail.basicUnitName) : ""}
                                         </span>
                                     </div>
                                 </li>
@@ -510,6 +564,48 @@ class GoodsDetails extends PureComponent {
                     </div>
                 </div>
                 </div>
+
+                <Modal title="颜色选择" visible={this.state.optValShow}
+                    onCancel={() => {
+                        this.setState({optValShow: false})
+                    }}
+                    onOk={() => {
+                        if (this.state.optValSelectId) {
+                            const colorSelc = goodsDetail ? goodsDetail.goodsAttrVals.find(item => item.attrValId == this.state.optValSelectId) : null
+                            this.setState({
+                                optVal: Object.assign({},this.state.optVal,{baseGoodsOptValue: `${colorSelc.custDocGroupName}->${colorSelc.attrValName}`}),
+                                optValShow: false
+                            })
+                        } else {
+                            message.warning("请选择颜色")
+                        }
+                    }}
+                    width="1000px" maskClosable={false}
+                >
+                    <div>
+                        <Input.Search placeholder="请输入颜色编码" 
+                            // defaultValue={this.state.optSearchVal}
+                            onBlur={(e) => {
+                                this.setState({optSearchVal: e.target.value})
+                            }}
+                            onSearch={(e) => {
+                                this.setState({optSearchVal: e})
+                            }}
+                            onPressEnter={(e) => {
+                                this.setState({optSearchVal: e.target.value})
+                            }}
+                        />
+                    </div>
+                    <div style={{height: "500px",width: "950px",overflow: "auto", marginTop: "10px"}}>
+                        {
+                            goodsDetail ? goodsDetail.goodsAttrVals.filter(item => !this.state.optSearchVal || item.attrValName.indexOf(this.state.optSearchVal) >= 0).map((item,index) => {
+                                // return <Tag  color={this.state.optValSelectId == item.attrValName ? "red" : ""} className={styles.colorItem} onClick={this.selectColor.bind(this)}>{item.attrValName}</Tag>
+                                return <Tag  color={this.state.optValSelectId == item.attrValId ? "red" : ""} className={styles.colorItem} onClick={() => {this.selectColor(item.attrValId)}}>{item.attrValName}</Tag>
+                            }) : ""
+                        }
+                    </div>
+                </Modal>
+
             </div>
         );
     }

src/pages/Buyer/goods/goodsDetail/index.less

@@ -237,5 +237,9 @@ ul,li{list-style: none;padding: 0;margin:0;}
 	}
 }
 
+.colorItem {
+	margin: 0px 30px 15px 0px;
+  }
+