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">{{data.name+'详情'}}</span>
      <span>清空</span>
    </div>
    <div class="main">
      <Detail :datas="data.questionMapping" :id="data.id"/>
    </div>
    <div class="foot" @click="complete">完成</div>
  </div>
</template>
<script type="text/javascript">
  import Detail from './Detail.vue';
  export default {
    name:'DetailBox', //点开详情的盒子
    data(){
      return{
        msg:"胸痛详情"
      }
    },
    mounted(){
      const box = this.$refs.detailBox;
      const height = document.documentElement.clientHeight;
      box.style.height = height - 100 + 'px';
    },
    methods:{
      close(){
        this.$emit("close","胸痛");
      },
      complete(){//拼接value
        const id = this.data.id;
        const datas = this.$store.state.datas;
        const current = datas[id];
        const detail = current.questionMapping;
        let text = "";
        for(let i in detail){
          if(detail[i].value){
            text += detail[i].value+'，';
          }
        }
        let msg = current.name+ '，' + text;
        this.$emit("pComplete",msg.substring(0,msg.length-1));
      }
    },
    props:['data'],
    components:{
      Detail
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .detailBox-wrap{
    width: 100%;
    // height: 100%;
    // height: calc(~"100%-1.15rem");
    overflow-y: auto;
    position: fixed;
    // top: 1.15rem;
    bottom: 0;
    left: 0;
    z-index: 666;
    background: #fff;
    border-radius: .08rem .08rem 0 0;
    font-size: .3rem;
    // padding-bottom: .88rem;
    .head{
      height: .88rem;
      line-height: .88rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E6E7EF;
      padding: 0 .4rem 0 .32rem;
      font-size: .28rem;
      color: #7C828E;
      .icon{
        display: inline-block;
        height: 100%;
        padding: 0 .1rem;
        img{
          width:.34rem;
          vertical-align: middle;
        }
      }
      .name{
        font-size: .32rem;
        color: #1A1A1A;
      }
    }
    .main{

    }
    .foot{
      // .footer;
      width:100%;
      height: .88rem;
      line-height: .88rem;
      text-align: center;
      color:#fff;
      font-size: .32rem;
      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
    }
  }
</style>