preliminary/src/common/UsualSymptom.vue

<template>
  <div class="usual-symptom">
    <p class="title-bar">
      <!--<a href="javascript:void(0)">--><img @click="back" src="../images/back.png" alt="返回"/><!--</a>-->
      <span>您哪里不舒服？</span>
    </p>
    <ul class="radio-item clearfix">
      <li
        v-for="(item,idx) in symptoms"
        :class="[{'liSelect':item.select,'big':item.explains}]"
        :key="idx"
        @click="selectResult(item,idx)"
      >
        {{item.description||item.name}}
        <img src="../images/icon_que.png" alt="解释说明" @click.stop="showExplain(item)" v-if="item.explains"/>
      </li>
    </ul>

    <div class="searchWrap" @click="search(true)">
        <img class="searchImg" src="../images/search.png" alt="">
        <span class="placeholder">找不到？也可点击搜索症状</span>
    </div>
    <Search
      v-if="this.$store.state.searchShow"
      @search="search"
      @showDetil="showDetil"
    ></Search>

    <Tiptoast :show="showExp" :data="message" @close="closeTip"/>
    <!-- <ConfirmBox :show="showConfirm" @confirmDialog="confirmDialog" @cancelDialog = "cancelDialog"></ConfirmBox> -->
  </div>
</template>
<script>
  import Radio from './Radio';
  import Search from '../components/Search.vue';
  // import ConfirmBox from '../common/ConfirmBox'
  import Tiptoast from '../common/Tiptoast.vue';
  export default {
    name:'UsualSymptom',
    props:[],
    data(){
      const data = this.$store.state.usualSymptom;
      return {
        symptoms:this.formatData(data),
        portaled:false,   //是否将radio渲染到最外层
        showConfirm:false,
        len:10,     //显示常用症状个数
        showExp:false,
        message:{
          title:'',
          text:''
        },
      }
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      showExplain(it){
        if(it.explains){
            this.message.title = it.description || it.name;
            this.message.text = it.explains;
        }else{
            this.message.title = "";
            this.message.text = "暂无资料";
        }
        this.showExp = true
      },
      closeTip(){
        this.showExp = false;
        this.message.title = '';
        this.message.text = '';
      },
      formatData(data){
        data.length=data.length>10?10:data.length;
        return data.map((i)=>{
          return Object.assign({},i,{
            name:i.name,
            value:i.questionId,
            special:'',
            connectId:[]
          })
        });
      },
      selectResult(item,idx){
        this.$emit('selectUsual',item,idx);
        this.$store.commit('setSearchShow', false);
        this.$store.commit('setText', { type: 1, text: '患者出现'+item.name,textP: '患者出现'+(item.description||item.name),flag:true,arrFlag:true, pId: item.questionId,idx:1 });

        let obj = {
              "labelName": item.tagName||item.name,//标签名称
              "operationNum": 1,//次数
              "operationType": 1,//1常见2搜索
            }
        this.$store.commit('addBuriedSome', obj);
      },
      confirmDialog(){

      },
      cancelDialog(){

      },
      search(flag){
        this.$store.commit('setSearchShow', flag);
      },
      showDetil(item,flg) {//搜索点开的详情
        this.$emit('selectUsual',item,flg);
        this.$store.commit('setSearchShow', false);
      },
    },
    components:{
      Radio,
      // ConfirmBox,
      Search,
      Tiptoast
    }
  }
</script>
<style lang="less" scoped>
  @import "../less/base.less";
  .usual-symptom{
    position: fixed;
    bottom: 0;
    background: #fff;
    padding: .4rem .1rem;
    box-shadow: 0px 0px 10px -3px rgba(104, 124, 189, 0.08);
  }
  .title-bar{
    font-size: .28rem;
    margin:0 0 .5rem .2rem;
    img{
      width: .16rem;
      margin-right:.4rem;
    }
  }
  .radio-item{
    li {
      padding: 0.14rem 0.2rem;
      border:1px #DFE0E4 solid;
      border-radius: 0.36rem;
      font-size: 0.26rem;
      margin: 0.15rem 0.12rem 0.15rem 0.15rem;
      float: left;
      color: #666;
      position: relative;
      &.big{
         margin: 0.15rem .65rem .15rem .15rem;
       }
      img{
        width: .35rem;
        position: absolute;
        right: -0.55rem;
      }
    }
    .liSelect {
      color: #fff;
      background-color: #colors[btn];
      border-color:  #colors[btn];
    }
  }
  .searchWrap {
    margin:1.2rem .2rem 0 .2rem;
    height: .68rem;
    line-height: .25rem;
    box-sizing: border-box;
    position: relative;
    background: #F5F5F5;
    border-radius: .32rem;
    padding-left:.7rem;
    color: #AAAAAA;
    .placeholder{
      font-size: .24rem;
    }
    .searchImg {
      width: 0.44rem;
      height: 0.44rem;
      position: absolute;
      left: .2rem;
      top: .1rem;
    }
  }
</style>