preliminary/src/components/DetailBox.vue

<template>
  <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"
                  :data="data"
                  @check="changeCheck($event)"
                  @checkReq="changeFins($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="['foot',{'noCheck':!checkF}]" @click="complete">完成</div> -->
    <div style="position:absolute" :class="['foot',{'noCheck':!checkF || !reqFinish}]" @click="complete">完成</div>
    <Toast :message="clearTxt" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/>
  </portal>
</template>
<script type="text/javascript">
  import Detail from './Detail.vue';
  import Toast from '../common/Toast.vue';
  import {fixedKeyboard,setScroll,moduleCP} from '@utils/tools.js';
  import BScroll from 'better-scroll';
  import $ from 'jquery';
  export default {
    name:'DetailBox', //点开详情的盒子
    data(){
      const {detailInfo,detailShow} = this.$store.state;
      return{
        msg:"胸痛详情",
        data:detailInfo,
        privateData:detailInfo.detail||{},
        compFlag:false,
        clearTxt:"是否清空当前已选内容？",
        showToast:false,
        tips:"（请完成病情预问诊可让医生提前了解病情）",
        checkF:false, //详情页有无已选项标识
        show:detailShow,
        reqFinish:false
      }
    },
    mounted(){
      this.$nextTick(()=>{
        // 校验是否有已填项，有--弹窗；无--return
        let hasCheck = this.$refs.detail.check();
        let checkReq = this.$refs.detail.checkReq();
        if(hasCheck){
          this.checkF = true;
        }
        if(checkReq && hasCheck){
          this.reqFinish = true;
        }
        setTimeout(() => {
          let scroll = setScroll(BScroll,true,'.viewPrew')
          this.scroll = scroll
          scroll.on('scroll', this.onScroll)
        }, 400);
      })
    },
    methods:{
      onScroll(data) {
        this.$store.commit('setScroll', data)
        document.activeElement.scrollIntoViewIfNeeded(true);        
      },
      close(){
        // 有必填项但没值则将choose移除 8-19
        // 没点过完成,点关闭时校验是否有必填项--有直接移除
        const type = this.data.moduleType;
        const select = this.privateData.select;
        $(".foot").css({'display':'block'})
        if(type == moduleCP['symp'] && !select){//只处理主诉症状
          const list = this.privateData.questionMapping;
          if(list){
            for(let i in list){
              // if(list[i].required==1 && !list[i].value){
              if(list[i].required==1){
                this.$store.commit('delChoose', {id: this.privateData.id })
                this.$store.commit('delText', { type: moduleCP['symp'], pId: this.privateData.id })
              }
            }
          }
        }
        
        this.$store.commit('setDetail',{detail:{}})
      },
      complete(){
      //有选中内容才可以点完成#1919
        // if(this.checkF){
      //必填项都填完了才可以点完成
        if(this.reqFinish && this.checkF){
          this.$refs.detail.saveData();
          this.$store.commit('setSearchShow', false);
        }
      },
      changeCheck(flag){//是否有选中项
        this.checkF = flag;
      },
      changeFins(flag){//必填项是否都填了
        this.reqFinish = flag;
      },
      handleClear(){//清空
        // 校验是否有已填项，有--弹窗；无--return
        if(this.checkF){
          this.showToast = true;
          $(".btscroll").css({'position':'fixed'})
          $(".foot").css({'position':'fixed'})
        }  
      },
      cancelDel(){
        $(".btscroll").css({'position':'absolute'})
        this.showToast = false;
      },
      comfirnDel(){
        $(".btscroll").css({'position':'absolute'})
        this.$refs.detail.clearData();
        this.showToast = false;
        this.checkF = false;
        this.reqFinish = false;
        // 让detail组件更新
        const type = this.data.moduleType;
        if(type == moduleCP['symp']){ //症状情况单独处理
          const id = this.privateData.id;
          const read = this.$store.state.symptom.datas;
          const data = read[id];
          this.$store.commit('setDetail',{detail:data,ppId:null,moduleType:moduleCP['symp']})
        }
        
      }
    },
    components:{
      Detail,
      Toast
    },
    computed: {
      getStoreItem () {
        return this.$store.state.detailInfo
      }
    },
    watch: {
      getStoreItem:{
        handler(newVal){
          this.data = newVal;
          this.privateData = newVal.detail||{};
        },
        deep:true
      }
    },
  }
</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: absolute;
    // bottom: 0; //iPhone6plus键盘收起会跳转
    top:45px;
    bottom: 0;
    left: 0;
    z-index: 666;
    background: #fff;
    border-radius: .08rem .08rem 0 0;
    font-size: .3rem;
    animation: wave .4s linear;
    height: 100%;
    overflow: hidden;
    .head{
      height: 1rem; //增加了提示
      line-height: .88rem;
      display: flex; //有清空时
      justify-content: space-between;
      border-bottom: 1px solid #E6E7EF;
      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;
        left:0;
        font-size: .22rem;
        width:100%;
        height: .33rem;
        line-height: .33rem;
        display: inline-block;
        text-align: center;
      }
      .icon{
        display: inline-block;
        height: 100%;
        padding: 0 .1rem;
        img{
          width:.34rem;
          vertical-align: middle;
        }
      }
      .name{
        font-size: .32rem;
        color: #1A1A1A;
      }
    }
    .main{
      height: 100%;
      width:100%;
      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%;}
    50% {top: 50%;}
    75% {top: 25%;}
    100% {top: 45px;}
  } 
  @keyframes foo {
    0% {bottom:-1rem;}
    100% {bottom:0;}
  }
</style>