preliminary/src/components/DetailBox.vue

<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>
    </div>
    <div class="main">
      <Detail :datas="privateData" 
              ref="detail"
              :type="moduleType" 
              :ppId="ppId"
              @check="changeCheck($event)"/>
    </div>
    <div class="foot" @click="complete">完成</div>
    <Toast :message="clearTxt" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/>
  </div>
</template>
<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(){
      return{
        msg:"胸痛详情",
        privateData:{},
        compFlag:false,
        clearTxt:"是否清空当前已选内容？",
        showToast:false,
        tips:"（请完成病情预问诊可让医生提前了解病情）",
        checkF:false //详情页有无已选项标识
      }
    },
    created(){
      this.privateData = this.data;
    },
    mounted(){
      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(){
        this.$emit("close");
      },
      complete(){
        this.$refs.detail.saveData();
        this.$emit("pComplete");
      },
      changeCheck(flag){
        this.checkF = flag;
      },
      handleClear(){//清空
        // 校验是否有已填项，有--弹窗；无--return
        if(this.checkF){
          this.showToast = true;
        }  
      },
      cancelDel(){
        this.showToast = false;
      },
      comfirnDel(){
        this.$refs.detail.clearData();
        this.showToast = false;
        // 让detail组件更新
        // this.privateData = JSON.parse(JSON.stringify(this.data));
        this.$emit('reload',this.data.id);
      }
    },
    props:['data','moduleType','ppId'],
    components:{
      Detail,
      Toast
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .detailBox-wrap{
    width: 100%;
    // overflow-y: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 666;
    background: #fff;
    border-radius: .08rem .08rem 0 0;
    font-size: .3rem;
    // animation: wave .4s ease-in;
    animation: wave .4s linear;
    .head{
      // height: .88rem;
      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;
      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%;
      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;
    }
  }
  @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>