安卓手机详情输入框问题；图片居中及一些细节修改

package.json

@@ -14,12 +14,13 @@
     "babel-polyfill": "^6.26.0",
     "better-scroll": "^1.13.2",
     "fastclick": "^1.0.6",
+    "jquery": "^3.4.1",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1",
     "vue-photo-preview": "^1.1.3",
+    "vue-router": "^3.0.1",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

src/common/Input.vue

@@ -4,10 +4,12 @@
           :class="{'change':borColor}" 
           v-model="val" 
           @input="changeVal" 
+          ref="inp"
           @blur="blur">
   </div>
 </template>
 <script type="text/javascript">
+import {scrollToV} from '@utils/tools.js'
   export default {
     name:'Input',
     data(){

src/common/OptionInp.vue

@@ -5,7 +5,9 @@
     <div class="inp" @click="preClick">
       <input :type="msg.type=='number'?'tel':'text'" 
               :placeholder="msg.placeholder"
+              :disabled="select!=1"
               v-model="txt"
+              @click="handleCli"
               @blur="handleBlur"
               @input="changeVal">
     </div>
@@ -13,18 +15,23 @@
   </div>
 </template>
 <script type="text/javascript">
-import { getExpStr } from '@utils/tools';
+import { getExpStr,scrollToV} from '@utils/tools';
   export default {
     name:'OptionInp',
     data(){
       return{
         msg:{},
-        txt:this.item.value || ''
+        txt:this.item.value || '',
+        select:0
       }
     },
     props:['item'],
     mounted(){
       this.msg = getExpStr(this.item.name);
+      this.select = this.item.select;
+    },
+    beforeUpdate(){
+      console.log("beforeUpdate",this.select)
     },
     methods:{
       changeVal(e){
@@ -34,20 +41,24 @@ import { getExpStr } from '@utils/tools';
       },
       handleBlur(){
         // 如果该项未选中，则不存值
-      const select = this.item.select;
-      if(!select){return}
+      // 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();
+      },
+      handleCli(e){
+        scrollToV(e)
       }
     },
     watch:{
       item:{//清空时更新
         handler(newVal,oldVal){
           this.txt = newVal.value;
+          this.select = newVal.select;
         },
         deep:true
       }

src/common/UploadImg.vue

@@ -53,6 +53,13 @@ export default {
   },
   methods: {
     handleUpload() {
+      // navigator.getUserMedia({video: true,audio:true}, function onSuccess(stream) {
+      /*navigator.getUserMedia({video: true}, function onSuccess(stream) {
+        const inp = this.$refs.inp;
+        inp.click();
+      }, function onError(error) {
+        alert("请开启权限设置")
+      })*/
       const inp = this.$refs.inp;
       inp.click();
     },
@@ -211,8 +218,13 @@ export default {
       height: 100%;
       overflow: hidden;
       border-radius: 0.08rem;
+      position: relative;
       .img {
         width: 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
       }
     }
   }

src/components/AddContent.vue

@@ -147,17 +147,6 @@ export default {
   
 .result{
   margin-bottom: .3rem;
-  .title{
-    color: #4F50FF;
-    padding-left: .1rem;
-    border-left: .08rem solid #4F50FF;
-    margin-bottom: .19rem;
-    font-weight: 700;
-  }
-  p{
-    color: #666;
-    line-height: .44rem;
-  }
 }
 .thanks {
   font-size: .28rem /* 28/100 */;

src/components/Detail.vue

@@ -57,6 +57,17 @@ import {patt} from '@utils/tools.js'
             mapping.splice(i,1,data)
           }
         }
+        // 实时更新清空样式
+        if(data.value){
+          this.$emit('check',true)
+        }else{
+          let flag = this.check();
+          if(flag){
+            this.$emit('check',true)
+          }else{
+            this.$emit('check',false)
+          }
+        }
       },
       saveData(){//存值
         this.finished = true;
@@ -99,6 +110,28 @@ import {patt} from '@utils/tools.js'
         let msg = this.checkDatas.name;
         this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
         this.$store.commit('setText',{text:msg,pId:this.checkDatas.id,type:this.type,flag:true});
+      },
+      check(){// 校验是否有已填项
+        const datas = this.checkDatas.questionMapping;
+        let checkArr = [];
+        for(let i in datas){
+          if(datas[i].value){
+            checkArr.push(datas[i]);
+          }
+          let detaiList = datas[i].questionDetailList;
+          if(detaiList.length>0){
+            for(let k in detaiList){
+              if(detaiList[k].select == 1){
+                checkArr.push(detaiList[k]);
+              }
+            }
+          }
+        }
+
+        if(checkArr.length>0){
+          return true;
+        }
+        return false;
       }
     },
   }

src/components/DetailBox.vue

@@ -4,15 +4,16 @@
       <span class="icon" @click="close">
         <img src="../images/small-close.png">
       </span>
-      <span class="name">{{privateData.name+'详情'}}</span>
-      <span @click="handleClear">清空</span>
+      <span class="name">{{(privateData.description ||privateData.name)+'详情'}}</span>
+      <span @click="handleClear" :class="{'check':checkF}">清空</span>
       <i>{{tips}}</i>
     </div>
     <div class="main">
       <Detail :datas="privateData" 
               ref="detail"
               :type="moduleType" 
-              :ppId="ppId"/>
+              :ppId="ppId"
+              @check="changeCheck($event)"/>
     </div>
     <div class="foot" @click="complete">完成</div>
     <Toast :message="clearTxt" 
@@ -24,6 +25,8 @@
 <script type="text/javascript">
   import Detail from './Detail.vue';
   import Toast from '../common/Toast.vue';
+  import {fixedKeyboard} from '@utils/tools.js';
+  import $ from 'jquery';
   export default {
     name:'DetailBox', //点开详情的盒子
     data(){
@@ -33,7 +36,8 @@
         compFlag:false,
         clearTxt:"是否清空当前已选内容？",
         showToast:false,
-        tips:"（请完成病情预问诊可让医生提前了解病情）"
+        tips:"（请完成病情预问诊可让医生提前了解病情）",
+        checkF:false //详情页有无已选项标识
       }
     },
     created(){
@@ -43,6 +47,16 @@
       const box = this.$refs.detailBox;
       const height = document.documentElement.clientHeight;
       box.style.height = height - 45 + 'px'; 
+      // 校验是否有已填项，有--弹窗；无--return
+      let hasCheck = this.$refs.detail.check();
+      if(hasCheck){
+        this.checkF = true;
+      }
+      fixedKeyboard();//给Window绑定事件
+    },
+    beforeDestroy(){//给Window解绑事件
+      $(window).off("resize");
+      $(window).off("click");
     },
     methods:{
       close(){
@@ -52,8 +66,14 @@
         this.$refs.detail.saveData();
         this.$emit("pComplete");
       },
+      changeCheck(flag){
+        this.checkF = flag;
+      },
       handleClear(){//清空
-        this.showToast = true;
+        // 校验是否有已填项，有--弹窗；无--return
+        if(this.checkF){
+          this.showToast = true;
+        }  
       },
       cancelDel(){
         this.showToast = false;
@@ -139,6 +159,9 @@
       font-size: .32rem;
       background: linear-gradient(-270deg, #4F4FFF,#4F8BFF); */
     }
+    .check{
+      color: #1A1A1A;
+    }
   }
   @keyframes wave {
     0%   {top:100% ;}

src/components/DiagTreat.vue

@@ -166,17 +166,7 @@
       } */
     }
     .result{
-      .title{
-        color: #4F50FF;
-        padding-left: .1rem;
-        border-left: .08rem solid #4F50FF;
-        margin-bottom: .19rem;
-        font-weight: 700;
-      }
-      p{
-        color: #666;
-        line-height: .44rem;
-      }
+      .result;
     }
   }
   .foot{

src/components/Others.vue

@@ -174,17 +174,7 @@
       .label;
     }
     .result{
-      .title{
-        color: #4F50FF;
-        padding-left: .1rem;
-        border-left: .08rem solid #4F50FF;
-        margin-bottom: .19rem;
-        font-weight: 700;
-      }
-      p{
-        color: #666;
-        line-height: .44rem;
-      }
+      .result;
     }
   }
   .foot{

src/components/PathInfo.vue

@@ -84,8 +84,9 @@
         type:null, //1-未做过；3-只做过问诊；4-只做过体质辨识；6-都做过
         text:{
           "3":'您已完成过一次预问诊，是否再次录入',
-          "4":'您已完成过一次儿童体质辨识，是否再次录入',
-          "6":'您已完成过一次预问诊和儿童体质辨识，是否再次录入',
+          // "4":'您已完成过一次儿童体质辨识，是否再次录入',
+          // "6":'您已完成过一次预问诊和儿童体质辨识，是否再次录入',
+          "6":'您已完成过一次预问诊，是否再次录入',
         },
         isReady:false,
         hideChild:true  //隐藏儿童
@@ -252,7 +253,7 @@
         // height: 2.52rem;
         height: 2.3rem;
         // padding: .66rem 0 0 .6rem;
-        padding: .5rem 0 0 .6rem;
+        padding-top: .5rem;
         p{
           color:#fff;
         }
@@ -281,7 +282,7 @@
           color: #fff;
           font-size: .32rem;
           // margin-top: .20rem;
-          margin: .20rem 0 0 -.05rem;
+          margin: .40rem 0 0 -.05rem;
           background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
           background: -webkit-linear-gradient(right, #4F8BFF, #4F4FFF);
           box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);

src/components/Symptom.vue

@@ -354,17 +354,7 @@ export default {
   .label;
 }
 .result{
-  .title{
-    color: #4F50FF;
-    padding-left: .1rem;
-    border-left: .08rem solid #4F50FF;
-    margin-bottom: .19rem;
-    font-weight: 700;
-  }
-  p{
-    color: #666;
-    line-height: .44rem;
-  }
+  .result;
 }
 .footer{
   .footer;

src/less/base.less

@@ -79,4 +79,19 @@
   .over{
     font-size: .24rem !important;
   }
+}
+
+.result{
+  padding-right: .3rem;
+  .title{
+    color: #4F50FF;
+    padding-left: .1rem;
+    border-left: .08rem solid #4F50FF;
+    margin-bottom: .19rem;
+    font-weight: 700;
+  }
+  p{
+    color: #666;
+    line-height: .44rem;
+  }
 }

src/utils/tools.js

@@ -1,5 +1,6 @@
 
 const qs = require('qs');
+const $ = require('jquery');
 const imageUrlPrefix = 'http://192.168.2.241:82' //后台图片地址
 // const imageUrlPrefix = 'http://192.168.2.236:82' //后台图片地址
 
@@ -158,6 +159,57 @@ const moduleConfig = (config,modules) => {
 // 替换输入框占位符
 const patt = /\$\{[^\]]+\}/g;
 
+// 监听键盘是否弹起
+function fixedKeyboard() {
+  var win_h = $(window).height();
+  $(window).on("resize",function(){
+    if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
+      //ios 什么都不用做
+    } else {
+       //安卓触发window.resize
+      if($(window).height() < win_h){
+        $('.detailBox-wrap').css('position','static') ;//详情页
+        $('.main').height((win_h)/100+'rem');
+      }else{
+        $('.detailBox-wrap').css('position','fixed');
+        // $('.main').css('height','100%;') ;
+        $('.main').height("100%") ;
+      }
+    }
+  })
+  $(window).on("click",function(){
+    const { activeElement } = document;console.log(999,activeElement)
+    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
+      alert('5555')
+      setTimeout(() => {
+        activeElement.scrollIntoView(true);
+        let top = $('.main').scrollTop();
+        $('.main').scrollTop(top-30); //预留题目位置
+      }, 400);
+    }
+  })
+}
+
+// 移动到可视区--选项中的输入框，因阻止了冒泡
+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)
+}
+
 module.exports =  {
   imageUrlPrefix,
   getUrlArgObject,
@@ -167,7 +219,9 @@ module.exports =  {
   moduleConfig,
   patt,
   moduleCP,
-  getExpStr
+  getExpStr,
+  fixedKeyboard,
+  scrollToV
 }