新增弹窗，单选，多选，待完善

src/common/CheckBox.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="check-wrap" v-if="item">
+    <p class="quest">{{item.name}}</p>
+    <p v-for="(it,index) in item.questionDetailList" class="list">
+      <img src="../images/check-default.png">
+      <span>{{it.name}}</span>
+    </p>
+  </div>
+</template>
+<script type="text/javascript">
+  export default{
+    name:'CheckBox',
+    data(){
+      return{
+
+      }
+    },
+    props:['item']
+  }
+</script>
+<style lang="less" scoped>
+  .check-wrap{
+    font-size: .3rem;
+    .quest{
+      color:#000;
+      margin-bottom: .2rem;
+    }
+    .list{
+      color: #7C828E;
+      margin-bottom: .1rem;
+      padding: .12rem .1rem;
+      img{
+        width: .38rem;
+        vertical-align: middle;
+      }
+    }
+  }
+</style>

src/common/Radio.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="radio-wrap" v-if="item">
+    <p class="quest">{{item.name}}</p>
+    <p v-for="(it,index) in item.questionDetailList" class="list">
+      <img src="../images/radio-default.png">
+      <span>{{it.name}}</span>
+    </p>
+  </div>
+</template>
+<script type="text/javascript">
+  export default{
+    name:'Radio',
+    data(){
+      return{
+
+      }
+    },
+    props:['item']
+  }
+</script>
+<style lang="less" scoped>
+  .radio-wrap{
+    font-size: .3rem;
+    .quest{
+      color:#000;
+      margin-bottom: .2rem;
+    }
+    .list{
+      color: #7C828E;
+      margin-bottom: .1rem;
+      padding: .12rem .1rem;
+      img{
+        width: .38rem;
+        vertical-align: middle;
+      }
+    }
+  }
+</style>

src/common/Toast.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="toast-wrap" v-if="show">
+    <div class="content">
+      <div class="text">
+        {{message||msg}}
+      </div>
+      <div class="btn">
+        <span @click="comfirn">确定</span>
+        <span @click="cancel">取消</span>
+      </div>
+    </div>
+    <div class="mask"></div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    name:'Toast',
+    data(){
+      return {
+        msg:"是否删除该信息?"
+      }
+    },
+    props:['message','show'],
+    methods:{
+      comfirn(){
+        this.$emit("comfirn")
+      },
+      cancel(){
+        this.$emit("cancel")
+      },
+    }
+  }
+</script>
+<style lang="less" scoped>
+  @import '../less/base.less';
+  .toast-wrap{
+    .content{
+      width: 6rem;
+      height: 3.5rem;
+      background: #fff;
+      z-index: 999;
+      position: absolute;
+      top:50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      padding: .5rem;
+      box-sizing: border-box;
+      border-radius: .20rem;
+      .text{
+        color:#000;
+        text-align: center;
+        height: 1.45rem;
+        overflow-y: auto;
+      }
+      .btn{
+        margin-top: .20rem;
+        display: flex;
+        justify-content: space-between;
+        span{
+          display: inline-block;
+          width: 2rem;
+          height: .77rem;
+          line-height: .77rem;
+          text-align: center;
+          color: #fff;
+          font-size: .30rem;
+          background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
+          background: linear-gradient(right, #4F8BFF, #4F4FFF);
+          box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
+          border-radius: .22rem;
+        }
+      }
+    }
+    .mask{
+      .mask;
+      z-index: 99;
+    }
+  }
+</style>

src/components/Detail.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="detail-wrap">
+    <div v-for="(item,index) in datas">
+      <Radio v-if="item.controlType==1" :item="item" />
+      <CheckBox v-if="item.controlType==2" :item="item" />
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+import Radio from '../common/Radio.vue';
+import CheckBox from '../common/CheckBox.vue';
+  export default {
+    name:'Detail',
+    data(){
+      return{
+
+      }
+    },
+    props:['datas'],
+    components:{
+      Radio,
+      CheckBox
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .detail-wrap{
+    padding: .3rem .5rem .3rem .6rem;
+  }
+</style>

src/components/DetailBox.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="detailBox-wrap">
+    <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" />
+    </div>
+    <div class="foot">完成</div>
+  </div>
+</template>
+<script type="text/javascript">
+  import Detail from './Detail.vue';
+  export default {
+    name:'DetailBox', //点开详情的盒子
+    data(){
+      return{
+        msg:"胸痛详情"
+      }
+    },
+    methods:{
+      close(){
+        this.$emit("close","胸痛");
+      }
+    },
+    props:['data'],
+    components:{
+      Detail
+    }
+  }
+</script>
+<style lang="less" scoped>
+@import '../less/base.less';
+  .detailBox-wrap{
+    width: 100%;
+    height: 100%;
+    // height: calc(100%-2.03rem);
+    overflow-y: auto;
+    position: fixed;
+    top: 1.15rem;
+    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>

src/components/PathInfo.vue

@@ -198,8 +198,8 @@
       }
       .inner{
         height: 4.98rem;
-        box-shadow:-5px 5px 10px -4px #989da3,5px 5px 10px -4px #989da3;
-        border-radius: 0px 0px 20px 20px;
+        box-shadow:-.05rem .05rem .10rem -.04rem #989da3,.05rem .05rem .10rem -.04rem #989da3;
+        border-radius: 0 0 .20rem .20rem;
         padding: .45rem .6rem .6rem;
         box-sizing: border-box;
         position: relative;
@@ -216,8 +216,8 @@
           margin-top: .20rem;
           background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
           background: linear-gradient(right, #4F8BFF, #4F4FFF);
-          box-shadow: 0 12px 24px 0 rgba(79,129,255,0.40);
-          border-radius: 44px;
+          box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
+          border-radius: .44rem;
           position: absolute;
           bottom: .7rem;
         }

src/components/Symptom.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="symp-wrap">
+    <div class="choose" v-if="chooseSymp.length>0">
+      <h3>已选症状</h3>
+      <p class="choo-symp" v-for="(v,i) in chooseSymp">
+        <span>{{v.name}}</span>
+        <span @click="deletSymp(v,i)"><img src="../images/delete.png" alt=""></span>
+      </p>
+    </div>
+    <div class="label">
+      <h3>请问您有哪些不适？</h3>
+      <span class="symp" 
+      v-for="(it,ind) in symp" 
+      :key="it.conceptId"
+      @click="showDetil(it)">{{it.name}}</span>
+    </div>
+    <div class="result" v-if="JSON.stringify(checkText) !== '{}'">
+      <h4>症状情况</h4>
+      <p v-for="(value,key,index) in checkText">{{value}}</p>
+    </div>
+    <div class="footer" @click="toNext">下一步</div>
+    <div class="detail" v-if="show">
+      <DetailBox @close="closeDetal" :data="labelDetail"/>
+    </div>
+    <Toast :message="delText" 
+          :show="showToast"
+          @comfirn="comfirnDel" 
+          @cancel="cancelDel"/>
+  </div>
+</template>
+<script type="text/javascript">
+import api from '@utils/api.js';
+import DetailBox from './DetailBox.vue';
+import Toast from '../common/Toast.vue';
+  export default {
+    name:'Symptom',
+    data(){
+      const pathInfo = this.$store.state.pathInfo;
+      return {
+        age:pathInfo.patientAge,
+        sexType:pathInfo.patientSex=='男'?1:(pathInfo.patientSex=='女'?2:3),
+        deptName:pathInfo.selfDeptName,
+        hosCode:pathInfo.hospitalCode,
+        choose:false,
+        check:false,
+        show:false, //显示明细
+        chooseSymp:[], //已选症状
+        symp:[], //症状
+        labelDetail:{}, //明细
+        checkText:{}, //选中拼好的明细
+        current:null,
+        delText:"是否删除该信息？",
+        delIndex:null,
+        showToast:false
+      }
+    },
+    created(){
+      this.getSympList();
+    },
+    methods:{
+      getSympList(){ 
+        const param = {
+          "age":this.age,
+          "deptName":this.deptName,
+          "sexType":this.sexType
+        }
+        api.getSymptom(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            this.symp = result.data;
+          }
+        })
+      },
+      toNext(){
+        // 把1切换成完成图标，且2高亮
+      },
+      showDetil(item){
+        this.chooseSymp.push(item);
+        this.current = item.conceptId;
+        const id = item.questionId;
+        const param = {
+          "age":this.age,
+          "id":id,
+          "sexType":this.sexType
+        }
+        api.getById(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            this.labelDetail = result.data;
+            this.show = true;
+          }
+        })
+        // 推理
+        
+      },
+      getPush(symptoms){//推理
+        const param = {
+          "age":this.age,
+          "hosCode":this.hosCode,
+          "sex":this.sexType,
+          "symptom":symptoms //症状+选择的明细,string
+        }
+        api.getPush(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            this.symp = result.data.symptom;
+          }
+        })
+      },
+      closeDetal(msg){
+        const current = this.current;
+        this.getPush(msg);
+        this.checkText = Object.assign({},this.checkText,{[current]:msg});
+        this.show = false;
+        this.current = null;console.log('子组件触发关闭',this.checkText);
+      },
+      deletSymp(item,index){
+        this.delIndex = index;
+        this.current = item.conceptId;
+        if(this.chooseSymp.length==1){
+          this.delText = "是否删除该信息？删除后将重新填写预问诊流程"
+        }
+        this.showToast = true;
+      },
+      comfirnDel(){
+        this.chooseSymp.splice(this.delIndex,1);
+        delete(this.checkText[this.current]);
+        // this.getPush(''); //删除后重新调推理-入参：拼好的内容
+        this.cancelDel();
+        console.log("确认删除：",this.chooseSymp,this.checkText)
+      },
+      cancelDel(){
+        this.showToast = false;
+        this.delIndex = null;
+        this.current = null;
+      }
+    },
+    components:{
+      DetailBox,
+      Toast
+    }
+  }
+</script>
+<style lang="less" scoped>
+@import '../less/base.less';
+  .symp-wrap{
+    font-size: .3rem;
+    h3{
+      color: #000;
+      margin-bottom: .36rem;
+    }
+  }
+  .choose{
+    padding-bottom: .2rem;
+    .choo-symp{
+      display: inline-block;
+      width:1.9rem;
+      height: .74rem;
+      background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
+      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
+      border-radius: .08rem;
+      white-space: nowrap;
+      margin: 0 .3rem .3rem 0;
+      span{
+        display: inline-block;
+        vertical-align: top;
+      }
+      span:first-child{
+        width:1.34rem;
+        height: .74rem;
+        line-height: .74rem;
+        text-align: center;
+        color: #fff;
+      }
+      img{
+        width:.56rem;
+        height: .74rem;
+      }
+    }
+  }
+  .label{
+    padding-bottom: .2rem;
+    .symp{
+      display: inline-block;
+      width:1.9rem;
+      height: .74rem;
+      line-height: .74rem;
+      border: 1px solid #DFE0E4;
+      border-radius: .08rem;
+      text-align: center;
+      color: #7C828E;
+      margin: 0 0 .3rem .3rem;
+      box-sizing: border-box;
+    }
+    .symp:nth-child(3n+2){
+      margin-left: 0;
+    }
+  }
+  .result{
+    h4{
+      color: #4F50FF;
+      padding-left: .1rem;
+      border-left: .08rem solid #4F50FF;
+      margin-bottom: .19rem;
+    }
+    p{
+      color: #666;
+      line-height: .44rem;
+    }
+  }
+  .footer{
+    .footer;
+  }
+  .detail{
+    .mask;
+    z-index: 66;
+  }
+</style>

src/components/TabPage.vue

@@ -3,16 +3,20 @@
     <div class="tab" v-if="modlues&&modlues.length>0">
       <p v-for="(it,index) in modlues" :key="it.id">
         <span :class="{current:index==0}" v-if="type[it.type]==1">
-          <i>{{index + 1  }}</i>
+          <i>{{it.type}}</i>
           {{it.name}}
         </span>
       </p> 
     </div>
     <!-- 内容 -->
-    <div class="content">这里放明细</div>
+    <div class="content">
+      <Symptom />
+    </div>
+    <!-- <div class="footer">下一步</div> -->
   </div>
 </template>
 <script type="text/javascript">
+  import Symptom from './Symptom.vue';
   export default {
     name:'TabPage',
     data(){
@@ -30,7 +34,10 @@
       }
     },
     created(){
-      console.log('配置信息：',this.config,'type',this.type)
+      // console.log('配置信息：',this.config,'type',this.type)
+    },
+    components:{
+      Symptom
     }
   }
 </script>
@@ -38,12 +45,12 @@
   .tab-wrap{
     width: 100%;
     height: 100%;
+    padding-bottom: .88rem;
     .tab{
       height: .82rem;
       line-height: .82rem;
       border-bottom: 1px solid #EDEDED;
       box-sizing: border-box;
-      // padding: 0 .2rem;
       padding-top: .16rem;
       p{
         display: inline-block;
@@ -55,9 +62,6 @@
         width:1.48rem;
         height: .5rem;
         line-height: .5rem;
-        // background: #E5ECFC;
-        // border-radius: 25px;
-        // color: #0043E8;
         color: #7C828E;
         text-align: center;
         margin-left: .2rem;
@@ -71,6 +75,20 @@
     }
     .content{
       font-size: .3rem;
+      padding: .45rem .6rem;
     }
+    /* .footer{
+      width:100%;
+      height: .88rem;
+      line-height: .88rem;
+      color:#fff;
+      font-size: .32rem;
+      text-align: center;
+      // background: linear-gradient(-270deg, #4F8BFF 0%, #4F4FFF 100%);
+      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+      position: fixed;
+      bottom: 0;
+      left: 0;
+    } */
   }
 </style>

src/less/base.less

@@ -1,2 +1,23 @@
 // 公用less
-@font-size: 13.33333333vw !important;
+@font-size: 13.33333333vw !important;
+
+.mask{
+  width:100%;
+  height: 100%;
+  position: fixed;
+  top:0;
+  left: 0;
+  background:rgba(0,0,0,.5);
+}
+.footer{
+  width:100%;
+  height: .88rem;
+  line-height: .88rem;
+  text-align: center;
+  color:#fff;
+  font-size: .32rem;
+  background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}

src/utils/api.js

@@ -6,6 +6,8 @@ const urls = {
   recordCheck:'/api/prec/inquiryInfo/recordCheck',//校验是否已做过
   getAll:'/api/prec/moduleInfo/getAll',//获取模板
   getSymptom:'/api/prec/questionUsual/getQuestionUsual',//常用症状
+  getById:'/api/prec/questionInfo/getById',//常标签详情
+  push:'/api/prec/push/pushInner',//症状推送
 }
 
 export default {
@@ -24,4 +26,10 @@ export default {
   getSymptom(param){
     return axios.post(urls.getSymptom,param)
   },
+  getById(param){
+    return axios.post(urls.getById,param)
+  },
+  getPush(param){
+    return axios.post(urls.push,param)
+  },
 }

webpack.common.js

@@ -59,7 +59,7 @@ module.exports = {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env'],
-          plugins: ['@babel/plugin-transform-runtime']
+          // plugins: ['@babel/plugin-transform-runtime']
         }
       }
     }]