ll

src/App.vue

@@ -1,7 +1,9 @@
 <template>
-    <div id="app">
+    <div id="app" onresize="document.activeElement.scrollIntoView(true);">
         <router-view/>
         <portal-target name="notification-outlet"></portal-target>
+        <portal-target name="notification-detail"></portal-target>
+        <portal-target name="notification-search"></portal-target>
     </div>
 </template>
 <script>

src/common/ComTextArea.vue

@@ -36,6 +36,7 @@ export default {
       this.$emit('changeAreaVal',this.txt)
     },
     blur(){
+      document.activeElement.scrollIntoViewIfNeeded(true);
       const newData = Object.assign({},this.item,{value:this.txt,valueP:this.txt});
       this.$emit("updata",newData);
     }

src/common/Input.vue

@@ -26,6 +26,7 @@
         }
       },
       blur(){
+        document.activeElement.scrollIntoViewIfNeeded(true);
         this.borColor = false;
         const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
         this.$emit("updata",newData);

src/common/MultiLineInput.vue

@@ -77,6 +77,7 @@ export default {
       // this.$emit('changeMultipVal',e.currentTarget.value,num)
     },
     blur(){
+      document.activeElement.scrollIntoViewIfNeeded(true);
       // 如果该项未选中，则不存值
       const select = this.part.select;
       // if(!select){return}

src/common/OptionInp.vue

@@ -39,12 +39,13 @@ import { getExpStr,scrollToV,isIos} from '@utils/tools';
         }
       },
       handleBlur(){
-        // 如果该项未选中，则不存值
-      // const select = this.item.select;
-      // if(!select){return}
-      const newData = Object.assign({},this.part,{value:this.txt});
-      this.$emit("updata",newData);
-      this.$emit('handleInp',this.txt);
+        document.activeElement.scrollIntoViewIfNeeded(true);
+          // 如果该项未选中，则不存值
+        // const select = this.item.select;
+        // if(!select){return}
+        const newData = Object.assign({},this.part,{value:this.txt});
+        this.$emit("updata",newData);
+        this.$emit('handleInp',this.txt);
       },
       preClick(e){
         e.stopPropagation();

src/common/Toast.vue

@@ -50,6 +50,7 @@
       padding: .5rem;
       box-sizing: border-box;
       border-radius: .20rem;
+      z-index: 1000;
       .text{
         color:#000;
         text-align: center;
@@ -79,7 +80,7 @@
     }
     .mask{
       .mask;
-      z-index: 99;
+      z-index: 999;
     }
   }
 </style>

src/components/AddContent.vue

@@ -140,6 +140,7 @@ export default {
 }
 .symp-wrap {
   font-size: 0.3rem;
+  overflow: hidden;
   .content {
     padding-right: .3rem;
   }

src/components/Detail.vue

@@ -185,7 +185,7 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
 <style lang="less" scoped>
   .detail-wrap{
     // padding: .3rem .5rem 1.2rem .6rem;
-    padding: .3rem .5rem 2rem .6rem;
+    padding: .3rem .5rem 1rem .6rem;
     font-size: .3rem;
     .quest{
       color:#000;

src/components/DetailBox.vue

@@ -1,32 +1,39 @@
 <template>
-  <div class="detailBox-wrap" ref="detailBox">
-    <div class="head">
-      <span class="icon" @click="close">
-        <img src="../images/small-close.png">
-      </span>
-      <span class="name">{{(privateData.description ||privateData.name)+'详情'}}</span>
-      <span @click="handleClear" :class="{'check':checkF}">清空</span>
-      <i>{{tips}}</i>
+  <portal to="notification-detail">
+    <div class="detailBoxMask"></div>
+    <div class="detailBox-wrap viewPrew">
+      <div class="content detailBoxMain" ref="detailBox">
+        <div class="tmpDom"></div>
+        <div class="main">
+          <Detail :datas="privateData" 
+                  ref="detail"
+                  :type="moduleType" 
+                  :ppId="ppId"
+                  @check="changeCheck($event)"/>
+        </div>
+        <!-- <div class="foot" @click="complete">完成</div> -->
+      </div>
+      <div class="head">
+        <span class="icon" @click="close">
+          <img src="../images/small-close.png">
+        </span>
+        <span class="name">{{(privateData.description ||privateData.name)+'详情'}}</span>
+        <span @click="handleClear" :class="{'check':checkF}">清空</span>
+        <i>{{tips}}</i>
+      </div>
     </div>
-    <div class="main">
-      <Detail :datas="privateData" 
-              ref="detail"
-              :type="moduleType" 
-              :ppId="ppId"
-              @check="changeCheck($event)"/>
-    </div>
-    <!-- <div class="foot" @click="complete">完成</div> -->
     <div :class="['foot',{'noCheck':!checkF}]" @click="complete">完成</div>
     <Toast :message="clearTxt" 
           :show="showToast"
           @comfirn="comfirnDel" 
           @cancel="cancelDel"/>
-  </div>
+  </portal>
 </template>
 <script type="text/javascript">
   import Detail from './Detail.vue';
   import Toast from '../common/Toast.vue';
-  import {fixedKeyboard} from '@utils/tools.js';
+  import {fixedKeyboard,setScroll} from '@utils/tools.js';
+  import BScroll from 'better-scroll';
   import $ from 'jquery';
   export default {
     name:'DetailBox', //点开详情的盒子
@@ -45,21 +52,25 @@
       this.privateData = this.data;
     },
     mounted(){
-      const box = this.$refs.detailBox;
-      const height = document.documentElement.clientHeight;
-      box.style.height = height - 45 + 'px'; 
-      $('body').css({'height':height+'px','overflow-y':'hidden'})
-      // 校验是否有已填项，有--弹窗；无--return
-      let hasCheck = this.$refs.detail.check();
-      if(hasCheck){
-        this.checkF = true;
-      }
-      fixedKeyboard();//给Window绑定事件
+      this.$nextTick(()=>{
+        // const box = this.$refs.detailBox;
+        // const height = document.documentElement.clientHeight;
+        // box.style.height = height - 45 + 'px'; 
+        // $('body').css({'height':height+'px','overflow-y':'hidden'})
+        // 校验是否有已填项，有--弹窗；无--return
+        let hasCheck = this.$refs.detail.check();
+        if(hasCheck){
+          this.checkF = true;
+        }
+        let scroll = setScroll(BScroll,true,'.viewPrew')
+        this.scroll = scroll
+        // fixedKeyboard();//给Window绑定事件
+      })
     },
     beforeDestroy(){//给Window解绑事件
-      $(window).off("resize");
-      $(window).off("click");
-      $('body').css({'height':'100%','overflow-y':'auto'})
+      // $(window).off("resize");
+      // $(window).off("click");
+      // $('body').css({'height':'100%','overflow-y':'auto'})
     },
     methods:{
       close(){
@@ -101,12 +112,20 @@
 </script>
 <style lang="less" scoped>
 @import '../less/base.less';
+  .detailBoxMask {
+    .mask;
+    z-index: 110;
+  }
+  .tmpDom {
+    height: 1rem;
+  }
   .detailBox-wrap{
     width: 100%;
     // overflow-y: auto;
     position: fixed;
     // bottom: 0; //iPhone6plus键盘收起会跳转
     top:45px;
+    bottom: 0;
     left: 0;
     z-index: 666;
     background: #fff;
@@ -114,6 +133,8 @@
     font-size: .3rem;
     // animation: wave .4s ease-in;
     animation: wave .4s linear;
+    height: 100%;
+    overflow: hidden;
     .head{
       // height: .88rem;
       height: 1rem; //增加了提示
@@ -124,6 +145,11 @@
       padding: 0 .4rem 0 .32rem;
       font-size: .28rem;
       color: #7C828E;
+      position: fixed;
+      width: 100%;
+      background-color: #fff;
+      top: 45px;
+      box-sizing: border-box;
       i{
         position: absolute;
         top:0.64rem;
@@ -152,27 +178,29 @@
     .main{
       height: 100%;
       width:100%;
-      overflow-y: auto;
-    }
-    .foot{
-      .footer;
-      animation-delay:.6s;
-      animation: foo .4s linear;
-      /* width:100%;
-      height: .88rem;
-      line-height: .88rem;
-      text-align: center;
-      color:#fff;
-      font-size: .32rem;
-      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF); */
-    }
-    .check{
-      color: #1A1A1A;
-    }
-    .noCheck{
-      background: #CACCFF !important;
+      // overflow-y: auto;
+      // padding-top: 1rem;
+      padding-bottom: 1rem;
     }
   }
+  .foot{
+    .footer;
+    animation-delay:.6s;
+    animation: foo .4s linear;
+    /* width:100%;
+    height: .88rem;
+    line-height: .88rem;
+    text-align: center;
+    color:#fff;
+    font-size: .32rem;
+    background: linear-gradient(-270deg, #4F4FFF,#4F8BFF); */
+  }
+  .check{
+    color: #1A1A1A;
+  }
+  .noCheck{
+    background: #CACCFF !important;
+  }
   @keyframes wave {
     0%   {top:100% ;}
     25% {top: 75%;}

src/components/DiagTreat.vue

@@ -193,8 +193,8 @@
     .dbfooter;
   }
   .detail{
-    .mask;
-    z-index: 66;
+    // .mask;
+    // z-index: 66;
   }
   
 .footer{

src/components/Others.vue

@@ -197,8 +197,8 @@
     .dbfooter;
   }
   .detail{
-    .mask;
-    z-index: 66;
+    // .mask;
+    // z-index: 66;
   }
   .questionImg {
     width: 96%;

src/components/Preview.vue

@@ -1,82 +1,25 @@
 <template>
-  <div class="preview previewper">
-    <div class="content">
-      <div class="personMsg">
-        <p class="baseMsg">{{pathInfo.patientName}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientSex}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientAge}}岁</p>
-        <table>
-          <tr>
-            <td colspan="2">挂号科室：{{pathInfo.selfDeptName}}</td>
-          </tr>
-          <tr>
-            <td>门诊号：{{pathInfo.recordId}}</td>
-            <td>预约医生：{{pathInfo.doctorName}}</td>
-          </tr>
-          <tr>
-            <td colspan="2">就诊时间：{{pathInfo.systemTime}}</td>
-          </tr>
-        </table>
-        <div class="line"></div>
-        <p>采集时间：{{pathInfo.systemTime}}</p>
-      </div>
-      <div class="personMsg personMsg2">
-        <ul class="previewParts">
-          <!-- <li v-if="symptom.choose.length>0"> -->
-          <li>
-            <h4><i :style="{'background': '#FF9A9A'}"></i> 主诉：</h4>
-            <p>
-              <span v-for="(item,idx) in symptom.choose" :key="item.name+idx">{{item.name+(idx == symptom.choose.length-1?'':'、')}}</span>
-            </p>
-          </li>
-          <!-- <li v-if="diagnose.text.length>0||symptom.choose.length>0"> -->
-          <li>
-            <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
-            <p>
-              <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.textP+(idx == symptom.choose.length-1?'。':';')}}</span>
-            </p>
-            <p>
-              <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.textP+(idx == diagnose.text.length-1?'。':';')}}</span>
-            </p>
-          </li>
-          <li v-if="showLis[moduleCP['other']]==1">
-            <h4><i></i> 其他史：</h4>
-            <p>
-              <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.textP+(idx == others.text.length-1?'。':';')}}</span>
-            </p>
-          </li>
-          <li v-if="showLis[moduleCP['suplement']]==1">
-            <h4><i></i> 补充内容：</h4>
-            <p>{{addContent.txt}}</p>
-          </li>
-          <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'" class="imgLis">
-            <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
-            <div v-for="(value,key,idx) in diagnose.imgSrc" class="imgView">
-              <img :src="value" alt="">
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="doctorData" @click="handleClick(true)">医生端数据展示</div>
-    </div>
-    <div class="foot">
-      <span
-        class="back"
-        @click="back"
-      >{{'返回'+ preName}}</span>
-      <span
-        class="next"
-        @click="saveAllImage"
-      >提 交</span>
-    </div>
-    <Submit
-      v-if="submit"
-      :showType="showType"
-      @showSubmit="showSubmit"
-    ></Submit>
-    <Loading v-if="loadingShow"></Loading>
-    <div class="personMsgDoc" v-if="showDoc">
-      <div class="personMsgDocModal" @click.prevent="handleClick(false)"></div>
-      <div class="personMsgDocDetail">
-        <img class="close" src="../images/small-close.png" alt="" @click="handleClick(false)">
+  <div class="wrapper">
+    <div class="preview previewper">
+      <div class="content">
+        <div class="tmpDiv"></div>
+        <div class="personMsg personMsg1">
+          <p class="baseMsg">{{pathInfo.patientName}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientSex}}&nbsp;&nbsp;&nbsp;&nbsp;{{pathInfo.patientAge}}岁</p>
+          <table>
+            <tr>
+              <td colspan="2">挂号科室：{{pathInfo.selfDeptName}}</td>
+            </tr>
+            <tr>
+              <td>门诊号：{{pathInfo.recordId}}</td>
+              <td>预约医生：{{pathInfo.doctorName}}</td>
+            </tr>
+            <tr>
+              <td colspan="2">就诊时间：{{pathInfo.systemTime}}</td>
+            </tr>
+          </table>
+          <div class="line"></div>
+          <p>采集时间：{{pathInfo.systemTime}}</p>
+        </div>
         <div class="personMsg personMsg2">
           <ul class="previewParts">
             <!-- <li v-if="symptom.choose.length>0"> -->
@@ -90,21 +33,21 @@
             <li>
               <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
               <p>
-                <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.text+(idx == symptom.choose.length-1?'。':';')}}</span>
+                <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.textP+(idx == symptom.choose.length-1?'。':';')}}</span>
               </p>
               <p>
-                <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.text+(idx == diagnose.text.length-1?'。':';')}}</span>
+                <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.textP+(idx == diagnose.text.length-1?'。':';')}}</span>
               </p>
             </li>
             <li v-if="showLis[moduleCP['other']]==1">
               <h4><i></i> 其他史：</h4>
               <p>
-                <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.text+(idx == others.text.length-1?'。':';')}}</span>
+                <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.textP+(idx == others.text.length-1?'。':';')}}</span>
               </p>
             </li>
             <li v-if="showLis[moduleCP['suplement']]==1">
               <h4><i></i> 补充内容：</h4>
-              <p>{{addContent.txtDoc}}</p>
+              <p>{{addContent.txt}}</p>
             </li>
             <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'" class="imgLis">
               <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
@@ -114,8 +57,68 @@
             </li>
           </ul>
         </div>
+        <div class="doctorData" @click="handleClick(true)">医生端数据展示</div>
       </div>
     </div>
+    <div class="foot">
+        <span
+          class="back"
+          @click="back"
+        >{{'返回'+ preName}}</span>
+        <span
+          class="next"
+          @click="saveAllImage"
+        >提 交</span>
+      </div>
+      <Submit
+        v-if="submit"
+        :showType="showType"
+        @showSubmit="showSubmit"
+      ></Submit>
+      <Loading v-if="loadingShow"></Loading>
+      <div class="personMsgDoc" v-if="showDoc">
+        <div class="personMsgDocModal" @click="handleClick(false)"></div>
+        <div class="personMsgDocDetail">
+          <img class="close" src="../images/small-close.png" alt="" @click="handleClick(false)">
+          <div class="personMsg personMsg2">
+            <ul class="previewParts">
+              <!-- <li v-if="symptom.choose.length>0"> -->
+              <li>
+                <h4><i :style="{'background': '#FF9A9A'}"></i> 主诉：</h4>
+                <p>
+                  <span v-for="(item,idx) in symptom.choose" :key="item.name+idx">{{item.name+(idx == symptom.choose.length-1?'':'、')}}</span>
+                </p>
+              </li>
+              <!-- <li v-if="diagnose.text.length>0||symptom.choose.length>0"> -->
+              <li>
+                <h4><i :style="{'background': '#3D69D9'}"></i> 现病史：</h4>
+                <p>
+                  <span v-for="(item,idx) in symptom.text" :key="item.text+idx">{{item.text+(idx == symptom.choose.length-1?'。':';')}}</span>
+                </p>
+                <p>
+                  <span v-for="(item,idx) in diagnose.text" :key="item.text+idx">{{item.text+(idx == diagnose.text.length-1?'。':';')}}</span>
+                </p>
+              </li>
+              <li v-if="showLis[moduleCP['other']]==1">
+                <h4><i></i> 其他史：</h4>
+                <p>
+                  <span v-for="(item,idx) in others.text" :key="item.text+idx">{{item.text+(idx == others.text.length-1?'。':';')}}</span>
+                </p>
+              </li>
+              <li v-if="showLis[moduleCP['suplement']]==1">
+                <h4><i></i> 补充内容：</h4>
+                <p>{{addContent.txtDoc}}</p>
+              </li>
+              <li v-if="JSON.stringify(diagnose.imgSrc) !='{}'" class="imgLis">
+                <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
+                <div v-for="(value,key,idx) in diagnose.imgSrc" class="imgView">
+                  <img :src="value" alt="">
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
   </div>
 </template>
 <script>
@@ -149,11 +152,14 @@ export default {
     }
   },
   mounted() {
-    let scroll = setScroll(BScroll,true,'.previewper')
-    this.scroll = scroll
+    this.$nextTick(()=>{
+      let scroll = setScroll(BScroll,true,'.previewper')
+      this.scroll = scroll
+    })
   },
   methods: {
     handleClick(flg){
+      console.log(flg)
       this.showDoc = flg
       this.scroll = setScroll(BScroll,!flg,'.previewper')
     },
@@ -312,6 +318,7 @@ export default {
 @import "../less/base.less";
 .foot {
   .dbfooter;
+  z-index: 998;
 }
 .doctorData {
   float: right;
@@ -327,11 +334,15 @@ export default {
   top: 0;
   left: 0;
   box-sizing: border-box;
-  padding: 0.3rem 0.4rem 1rem .4rem;
-  overflow: auto;
+  padding: 0 0.4rem 1rem .4rem;
+  overflow: hidden;
   -webkit-overflow-scrolling:touch;
   .btscroll;  
 }
+.tmpDiv {
+  height: .3rem;
+}
+
 .imgView {
   width: 1.86rem;
   height: 1.9rem;
@@ -341,6 +352,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
+  border-radius: 0.08rem;
   img {
     position: absolute;
     left: 50%;
@@ -418,6 +430,7 @@ export default {
     height: 1px;
   }
 }
+
 .personMsg2 {
   padding-right: 0;
 }

src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <portal to="notification-outlet"> -->
+    <portal to="notification-search">
       <div class="searchWrap">
         <div class="searchTop">
           <div class="iptWrap">
@@ -40,7 +40,7 @@
           </ul>
         </div>
       </div>
-    <!-- </portal> -->
+    </portal>
 </template>
 <script>
 import api from '@utils/api.js';

src/components/Symptom.vue

@@ -384,7 +384,7 @@ export default {
   background:#CACCFF;
 }
 .detail{
-  .mask;
-  z-index: 66;
+  // .mask;
+  // z-index: 103;
 }
 </style>

src/less/base.less

@@ -20,6 +20,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
+  z-index: 1000;
 }
 .dbfooter{
   width:100%;

src/less/index.less

@@ -63,8 +63,10 @@ a {
 html,body{
   width: 100%;
   // height: auto !important;
-  height: auto;
-  overflow-y: auto;
+  // height: auto;
+  // overflow-y: auto;
+  height: 100%;
+  position: absoult;
 }
 html{
   margin: 0;

src/main.js

@@ -17,4 +17,5 @@ new Vue({
     App
   },
   template:'<App/>'
-});
+});
+

src/utils/tools.js

@@ -199,7 +199,11 @@ function fixedKeyboard() {
         setTimeout(() => {
           activeElement.scrollIntoView(true);
           let top = $('.main').scrollTop();
+          let tops = $('.detailBoxMain').css("transform").replace(/[^0-9\-,]/g,'').split(',')[5];
+          console.log(tops,4444)
           $('.main').scrollTop(top-30); //预留题目位置
+          $('.detailBoxMain').css({"transform":'translate(0px, -'+tops+'"30") scale(1) translateZ("0px")'}); // translate(0px, -47px) scale(1) translateZ(0px);
+
         }, 400);
       }
     }  
@@ -208,22 +212,22 @@ function fixedKeyboard() {
 
 // 移动到可视区--选项中的输入框，因阻止了冒泡
 function scrollToV(e){
-  setTimeout(function() {
-    // e.target.scrollIntoView(false);
-    e.target.scrollIntoView(true); //true--元素顶部与可视区顶部对齐；false--元素底部与可视区底部对齐
-    let mainH = $('.main').height();
-    let top = $('.main').scrollTop();
-    $('.main').scrollTop(top-30); //预留题目位置
-    /*let HH = mainH-clientY;
-    if(clientY < 210 || (mainH-clientY)>88){
-      e.target.scrollIntoView(false); //底部对齐
-    }else if(HH < 200){
-      e.target.scrollIntoView(true);//顶部对齐
-    }
-    else{
-      e.target.scrollIntoView(); 
-    }*/
-  }, 400)
+  // setTimeout(function() {
+  //   // e.target.scrollIntoView(false);
+  //   e.target.scrollIntoView(true); //true--元素顶部与可视区顶部对齐；false--元素底部与可视区底部对齐
+  //   let mainH = $('.main').height();
+  //   let top = $('.main').scrollTop();
+  //   $('.main').scrollTop(top-30); //预留题目位置
+  //   /*let HH = mainH-clientY;
+  //   if(clientY < 210 || (mainH-clientY)>88){
+  //     e.target.scrollIntoView(false); //底部对齐
+  //   }else if(HH < 200){
+  //     e.target.scrollIntoView(true);//顶部对齐
+  //   }
+  //   else{
+  //     e.target.scrollIntoView(); 
+  //   }*/
+  // }, 400)
 }
 
 function trimDots(str){