右侧推送组件提取

src/components/PushItems/RecommendInspect/index.jsx

@@ -23,58 +23,47 @@ class RecommendInspect extends Component {
       return <span>
           <input
             id={item.id + item.name}
-            onChange={changeFlag(item)}
+            onChange={() =>changeFlag(item)}
             type="checkbox"
             checked={item.checked}
           />
           <label for={item.id + item.name}>{item.name}</label>
       </span>
     }
-    listHide() {
-      console.log('5555')
-      const { list } = this.props
+
+    render() {
+      const { title,list, changeFlag, border } = this.props
+      const { showAll } = this.state
+      const listAll = list.map(item => {
+          return this.renderItem(item)
+      });
       let firstLineNum = 0;   //第一行字数
       let secondLineNum = 0;      //第二行字数
-     return list.map((item, index) => {
-        console.log('44444444',firstLineNum,index)
-        // firstLineNum = firstLineNum + item.name.length + 2;
-        // if (firstLineNum > 26) {
-        //   secondLineNum = secondLineNum + item.name.length + 2; 
-        //   if(secondLineNum > 20) {
-        //     return;
-        //   } else {
-        //     return this.renderItem(item)
-        //   }
-        // } else {
+      const listHide = list.map((item, index) => {
+        firstLineNum = firstLineNum + item.name.length + 2;
+        if (firstLineNum > 26) {
+          secondLineNum = secondLineNum + item.name.length + 2; 
+          if(secondLineNum > 20) {
+            return;
+          } else {
+            return this.renderItem(item)
+          }
+        } else {
 
-        //   return this.renderItem(item)
-        // }
+          return this.renderItem(item)
+        }
       });
 
-    }
-
-    render() {
-      const { title,list, changeFlag } = this.props
-      const { showAll } = this.state
-      // console.log('1111',list)
-      // const listAll = list.map(item => {
-      //   console.log('22222',item)
-      //    return <span> item</span>
-      //    {/* this.renderItem(item) */}
-      // });
-      
-
       return   (
-          <ul>
-            <li className={style["firstLi"]}>
+            <li className={style["inspectItem"]} style={border ? {"borderBottom": "1px solid #DFDFDF"} : ''}>
               <div className={style["title"]}>{title}：</div>
               <div className={style["content"]}>
                 {list.length === 0
                   ?<span >无</span>
                   : showAll
-                  ? this.listHide()
-                  : this.listHide()}
-                {/* {secondLineNum > 21 ? (
+                  ? listAll
+                  : listHide}
+                {secondLineNum > 21 ? (
                   <span
                     style={{ display: "inline-block" }}
                     className={style["show"]}
@@ -85,10 +74,9 @@ class RecommendInspect extends Component {
                   </span>
                 ) : (
                   ""
-                )} */}
+                )}
               </div>
             </li>
-          </ul>
         )
     }
 }

src/components/PushItems/RecommendInspect/index.less

@@ -0,0 +1,56 @@
+@import "~@less/variables.less";
+
+    
+        
+        .inspectItem{
+          padding: 10px 0px 4px 0px;
+          overflow: hidden;
+          .title{
+            float: left;
+            height: 26px;
+            line-height: 26px;
+            padding: 0px 0px 0px 0px ;
+          }
+          .content{
+            float: left;
+            width: 349px;
+            line-height: 26px;
+            padding: 0px 0px 0px 0px;
+            span{
+              font-size: 14px;
+              line-height: 14px;
+              display: inline-block;
+              margin: 6px;
+              cursor: pointer;
+              input[type='checkbox']{
+                float: left;
+                width: 14px;
+                height: 14px;
+                margin-right: 2px;
+                background-color: #fff;
+                -webkit-appearance:none;
+                border: 1px solid #c9c9c9;
+                border-radius: 2px;
+                outline: none;
+                cursor: pointer;
+              }
+              input[type=checkbox]:checked{
+                background: url("../../../common/images/checked.png")no-repeat center;
+                background-size: 12px 12px;
+              }
+              label {
+                cursor: pointer;
+              }
+            }
+          }
+        }
+        .show {
+            float: right;
+            color:  #58ACD7;;
+            font-size: 14px;
+            cursor: pointer;
+            img {
+              width: 12px;
+              height: 12px;
+            }
+          }

src/components/PushItems/TipsMsg/index.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import style from './index.less';
+
+class TipsMsg extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        const { tips, showTips, tipsDiscalimer, tipsImg, tmpFlg} = this.props
+        return <div className={style["tips"]}>
+        <h1>
+          <img src={tipsImg} />
+          提示信息
+        </h1>
+        <div className={style["content"]}>
+          {tips && tips.details ? (
+            <div>
+              <div className={style["title"]}>
+                {tips.name}
+                <span
+                  className={style["tips-details"]}
+                  onClick={() => showTips()}
+                  style={{display:tmpFlg?'none':'inline-block'}}
+                >
+                  详情
+                </span>
+              </div>
+              {tips.details &&
+                tips.details.map((item, index) => {
+                  return (
+                      <div>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: item.title
+                          }}
+                        />
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: item.content
+                          }}
+                        />
+                        {item.isReason === 1 && (
+                          <div className={style["warn"]}>
+                            {tipsDiscalimer.data.data &&tipsDiscalimer.data.data.find(item => item.title == '诊断免责信息')&&tipsDiscalimer.data.data.find(item => item.title == '诊断免责信息').description}
+                          </div>
+                        )}
+                      </div>
+                  );
+                })}
+            </div>
+          ) : (
+            "无"
+          )}
+        </div>
+    </div>
+    }
+}
+
+export default TipsMsg;
+

src/components/PushItems/TipsMsg/index.less

@@ -0,0 +1,118 @@
+@import "~@less/variables.less";
+.tips{
+    border:1px solid #EAEDF1;
+    .tips-title,h1{
+      font-size: 14px;
+      color: #000;
+      padding: 8px 15px;
+      background: #EAF7FA;
+      font-weight: bold;
+      img {
+        float:left;
+        margin-top: 0px;
+        margin-right: 5px;
+      }
+    }
+    .tips-title{
+      .tips-name{
+        width: 255px;
+        display: inline-block;
+      }
+      h2{
+        display: inline-block;
+      }
+      .tips-btn{
+        display: inline-block;
+        float: right;
+      }
+      .redTips{
+        display: inline-block;
+        font-size: 12px;
+        -webkit-transform:scale(0.9);
+        color: red;
+        font-weight: normal;
+        white-space: nowrap;
+      }
+      .tipsDetails {
+        .btnCom;
+        display: inline-block;
+        font-weight: normal;
+        width: 42px;
+        height: 20px;
+        border: 1px solid #262626;
+        font-size: 12px;
+        // color: #3B9ED0;
+        color: #262626;
+        line-height: 18px;
+        margin: 0 0 -2px 10px;
+      }
+    }
+    .chronic{
+      background: rgba(242,150,91,0.1);
+    }
+    .content{
+      font-size: 14px;
+      padding:6px 15px;
+      .title {
+        font-size: 14px;
+        line-height: 18px;
+        margin-bottom:10px;
+        a{
+          .btnCom;
+          display: inline-block;
+          font-size: 14px;
+          color: #3B9ED0;
+          width: 42px;
+          border: 1px solid #3B9ED0;
+          margin-left: 10px;
+          text-decoration: none;
+        }
+        .tips-details {
+          .btnCom;
+          display: inline-block;
+          width: 42px;
+          height: 20px;
+          border: 1px solid #3B9ED0;
+          font-size: 14px;
+          color: #3B9ED0;
+          line-height: 18px;
+          margin: 0 10px -2px;
+        }
+      }
+      .warn{
+        padding: 10px 0px 0px 0px;
+        font-size: 10px;
+        color: #979797;
+        text-align: center;
+      }
+      .list{
+        border-bottom: 1px solid #EAEDF1;
+        padding-bottom: 10px;
+        position: relative;
+        .infoPic{
+          vertical-align: middle;
+          margin: 0 5px;
+        }
+        >p{
+          margin-top: 10px;
+        }
+        .listName{
+          color:#3B9ED0;
+        }
+        .listResult{
+          float: right;
+          color: #000012;
+          i{
+            color: #F98F24;
+          }
+          img{
+            vertical-align: middle;
+          }
+        }
+      }
+      
+      .list:last-child{
+        border-bottom:none;
+      }
+    }
+  }

src/components/PushItems/index.jsx

@@ -17,6 +17,7 @@ import {windowEventHandler,getCurrentDate,getWindowInnerHeight} from '@utils/too
 import {ConfirmModal} from '@commonComp';
 import ChronicInfo from '@containers/ChronicInfo';//慢病推送模块
 import RecommendInspect from './RecommendInspect';
+import TipsMsg from './TipsMsg'
 
 class PushItems extends Component {
   constructor(props) {
@@ -117,7 +118,7 @@ class PushItems extends Component {
     this.props.changeCheck(item);
   }
 
-  showTips(tips) {
+  showTips() {
     const { getTipsDetails, showTipsDetailsModal } = this.props;
     getTipsDetails && getTipsDetails();
     showTipsDetailsModal && showTipsDetailsModal()
@@ -151,117 +152,12 @@ class PushItems extends Component {
       tmpFlg,
     } = this.props.pushMessage;
     const { tipsDiscalimer,chronicPushItems,wholeIndexs} = this.props;
-    const { moreAssay, moreCheck ,show} = this.state;
     const {
-      showMore,
-      closeMore,
       billing,
       changeCheck,
       changeAssay,
       showTips
     } = this;
-    let assayNum = 0;
-    let assayNum2 = 0; 
-    let assayHide = assay.map((item, index) => {
-      assayNum = assayNum + item.name.length + 2;
-      if (assayNum > 26) {
-        assayNum2 = assayNum2 + item.name.length + 2; 
-        if(assayNum2 > 20) {
-          return;
-        } else {
-          return (
-            <span>
-              <input
-                id={item.id + item.name}
-                onChange={() => changeAssay(item)}
-                type="checkbox"
-                checked={item.checked}
-              />
-              <label for={item.id + item.name}>{item.name}</label>
-            </span>
-          );
-        }
-      } else {
-        return (
-          <span>
-            <input
-              id={item.id + item.name}
-              onChange={() => changeAssay(item)}
-              type="checkbox"
-              checked={item.checked}
-            />
-            <label for={item.id + item.name}>{item.name}</label>
-          </span>
-        );
-      }
-    });
-
-    const assays = assay.map(item => {
-      return (
-        <span>
-          <input
-            id={item.id + item.name}
-            onChange={() => changeAssay(item)}
-            type="checkbox"
-            checked={item.checked}
-          />
-          <label for={item.id + item.name}>{item.name}</label>
-        </span>
-      );
-    });
-
-    let checkNum = 0;
-    let checkNum2 = 0;
-    let checkHide = check.map((item, index) => {
-      checkNum = checkNum + item.name.length + 2;
-      if (checkNum > 26) {
-        checkNum2 = checkNum2 + item.name.length + 2; 
-        if(checkNum2 > 20) {
-          return;
-        }else {
-          return (
-            <span>
-              <input
-                id={item.id + item.name}
-                onChange={() => changeCheck(item)}
-                type="checkbox"
-                checked={item.checked}
-              />
-              <label for={item.id + item.name}>{item.name}</label>
-            </span>
-          );
-        }
-
-
-        
-      } else {
-        return (
-          <span>
-            <input
-              id={item.id + item.name}
-              onChange={() => changeCheck(item)}
-              type="checkbox"
-              checked={item.checked}
-            />
-            <label for={item.id + item.name}>{item.name}</label>
-          </span>
-        );
-      }
-    });
-
-    const checks = check.map(item => {
-      return (
-        <span>
-          <input
-            id={item.id + item.name}
-            onChange={() => changeCheck(item)}
-            type="checkbox"
-            checked={item.checked}
-          />
-          <label for={item.id + item.name}>{item.name}</label>
-        </span>
-      );
-    });
 
     const vigilants = vigilant.map((item, index) => {
       return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item} type='disSelect'/></div>;
@@ -325,205 +221,35 @@ class PushItems extends Component {
                     开单
                 </div>
               </h1>
-              <div>
+              <div  className={style["contentBox"]}>
                 {assay.length === 0 && check.length === 0 ? (
                   <span>无</span>
-                ) : (
-                  <ul>
-                    <li className={style["firstLi"]}>
-                      <div className={style["title"]}>化验：</div>
-                      <div className={style["content"]}>
-                        {assay.length === 0
-                          ?<span >无</span>
-                          : moreAssay
-                          ? assays
-                          : assayHide}
-                        {assayNum2 > 21 ? (
-                          <span
-                            style={
-                              moreAssay
-                                ? { display: "none" }
-                                : { display: "inline-block" }
-                            }
-                            className={style["show"]}
-                            onClick={() => showMore("moreAssay")}
-                          >
-                            更多
-                            <img src={showImg} />
-                          </span>
-                        ) : (
-                          ""
-                        )}
-                        <span
-                          style={
-                            moreAssay
-                              ? { display: "inline-block" }
-                              : { display: "none" }
-                          }
-                          className={style["close"]}
-                          onClick={() => closeMore("moreAssay")}
-                        >
-                          收起
-                          <img src={hideImg} />
-                        </span>
-                      </div>
-                    </li>
-                    <li className={style["lastLi"]}>
-                      <div className={style["title"]}>检查：</div>
-                      <div className={style["content"]}>
-                        {check.length === 0
-                          ? "无"
-                          : moreCheck
-                          ? checks
-                          : checkHide}
-                        {checkNum2 > 21 ? (
-                          <span
-                            style={
-                              moreCheck
-                                ? { display: "none" }
-                                : { display: "inline-block" }
-                            }
-                            className={style["show"]}
-                            onClick={() => showMore("moreCheck")}
-                          >
-                            更多
-                            <img src={showImg} />
-                          </span>
-                        ) : (
-                          ""
-                        )}
-                        <span
-                          style={
-                            moreCheck
-                              ? { display: "inline-block" }
-                              : { display: "none" }
-                          }
-                          className={style["close"]}
-                          onClick={() => closeMore("moreCheck")}
-                        >
-                          收起
-                          <img src={hideImg} />
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
-                )}
-              </div>
-            </div>
-            
-
-
-            <div className={style["recommend"]}>
-              <h1>
-                <img src={recommendImg} />
-                推荐检验检查
-                <div className={style["billing"]} 
-                     style={assay.length === 0 && check.length === 0 ? {color: 'gray', border: '1px solid gray', cursor:'auto'} : ''} 
-                     onClick={assay.length === 0 && check.length === 0 ? '' : billing}>
-                    开单
-                </div>
-              </h1>
-              <div>
-                {assay.length === 0 && check.length === 0 ? (
-                  <span>无</span>
-                ) : (
-                  <ul>
-                    <RecommendInspect
+                ) : (<ul>
+                     <RecommendInspect
                       title = '化验'
                       list = {assay}
                       changeFlag = {changeAssay}
+                      border = "true"
                     >
                     </RecommendInspect>
-                    <li className={style["lastLi"]}>
-                      <div className={style["title"]}>检查：</div>
-                      <div className={style["content"]}>
-                        {check.length === 0
-                          ? "无"
-                          : moreCheck
-                          ? checks
-                          : checkHide}
-                        {checkNum2 > 21 ? (
-                          <span
-                            style={
-                              moreCheck
-                                ? { display: "none" }
-                                : { display: "inline-block" }
-                            }
-                            className={style["show"]}
-                            onClick={() => showMore("moreCheck")}
-                          >
-                            更多
-                            <img src={showImg} />
-                          </span>
-                        ) : (
-                          ""
-                        )}
-                        <span
-                          style={
-                            moreCheck
-                              ? { display: "inline-block" }
-                              : { display: "none" }
-                          }
-                          className={style["close"]}
-                          onClick={() => closeMore("moreCheck")}
-                        >
-                          收起
-                          <img src={hideImg} />
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
-                )}
+                    <RecommendInspect
+                      title = '检查'
+                      list = {check}
+                      changeFlag = {changeCheck}
+                    >
+                    </RecommendInspect>
+                  </ul>)}
               </div>
             </div>
             {/*{chronicPushItems&&chronicPushItems.length>0?<ChronicInfo data={chronicPushItems}></ChronicInfo>:''}*/}
             {<ChronicInfo></ChronicInfo>}
-            <div className={style["tips"]}>
-              <h1>
-                <img src={tipsImg} />
-                提示信息
-              </h1>
-              <div className={style["content"]}>
-                {tips && tips.details ? (
-                  <div>
-                    <div className={style["title"]}>
-                      {tips.name}
-                      <span
-                        className={style["tips-details"]}
-                        onClick={() => showTips(tips)}
-                        style={{display:tmpFlg?'none':'inline-block'}}
-                      >
-                        详情
-                      </span>
-                    </div>
-                    {tips.details &&
-                      tips.details.map((item, index) => {
-                        return (
-                            <div>
-                              <div
-                                dangerouslySetInnerHTML={{
-                                  __html: item.title
-                                }}
-                              />
-                              <div
-                                dangerouslySetInnerHTML={{
-                                  __html: item.content
-                                }}
-                              />
-                              {item.isReason === 1 && (
-                                <div className={style["warn"]}>
-                                  {tipsDiscalimer.data.data &&tipsDiscalimer.data.data.find(item => item.title == '诊断免责信息')&&tipsDiscalimer.data.data.find(item => item.title == '诊断免责信息').description}
-                                </div>
-                              )}
-                            </div>
-                        );
-                      })}
-                  </div>
-                ) : (
-                  "无"
-                )}
-              </div>
-            </div>
+            <TipsMsg
+             tmpFlg = {tmpFlg}
+             tipsImg = {tipsImg}
+              tips = {tips}
+              showTips = {showTips}
+              tipsDiscalimer = {tipsDiscalimer}
+            ></TipsMsg>
           </div>
         </div>
         {tipsDiscalimer.data && <div className={style['disTips']} dangerouslySetInnerHTML={{__html: tipsDiscalimer.data.data &&tipsDiscalimer.data.data.find(item => item.title == '推送免责信息')&&tipsDiscalimer.data.data.find(item => item.title == '推送免责信息').description}}></div>}

src/components/PushItems/index.less

@@ -122,59 +122,9 @@
         font-size: 12px;
       }
     }
-    div{
+    .contentBox {
       font-size: 14px;
       padding:6px 0px 6px 15px;
-      ul{
-        .firstLi{
-          border-bottom: 1px solid #DFDFDF;
-        }
-        .lastLi{
-          padding-bottom: 0px;
-        }
-        li{
-          padding: 10px 0px 4px 0px;
-          overflow: hidden;
-          .title{
-            float: left;
-            height: 26px;
-            line-height: 26px;
-            padding: 0px 0px 0px 0px;
-          }
-          .content{
-            float: left;
-            width: 349px;
-            line-height: 26px;
-            padding: 0px 0px 0px 0px;
-            span{
-              font-size: 14px;
-              line-height: 14px;
-              display: inline-block;
-              margin: 6px;
-              cursor: pointer;
-              input[type='checkbox']{
-                float: left;
-                width: 14px;
-                height: 14px;
-                margin-right: 2px;
-                background-color: #fff;
-                -webkit-appearance:none;
-                border: 1px solid #c9c9c9;
-                border-radius: 2px;
-                outline: none;
-                cursor: pointer;
-              }
-              input[type=checkbox]:checked{
-                background: url("../../common/images/checked.png")no-repeat center;
-                background-size: 12px 12px;
-              }
-              label {
-                cursor: pointer;
-              }
-            }
-          }
-        }
-      }
     }
   }
   .tips{