preliminary/src/components/MainPage.vue

<template>
  <div class="page">
    <div class="progress-bar">
      <div class="title">
        <span :class="{'active':activeTab===0}">症状情况</span>
        <span :class="{'active':activeTab===1}">诊疗情况</span>
        <span :class="{'active':activeTab===2}">其他情况</span>
      </div>
      <div class="progress">
        <p :style="{width:progress}"></p>
      </div>
    </div>
    <div class="wrapper">
      <div class="scrollPart" :style="{'paddingBottom':pdbm}">
        <!--<div class="right clearfix">
          <img src="../assets/patient.png" alt="" class="fr">
          <div class="content fr">
            <p>医生您好！我想咨询新型冠状病毒。（个人信息：{{userInfo.patientName}}{{userInfo.patientSex?'，'+userInfo.patientSex:''}}{{userInfo.patientAge?'，'+userInfo.patientAge+'岁':''}}）</p>
          </div>
        </div>-->
        <div class="left clearfix">
          <img src="../images/doctor.png" alt="" class="fl">
          <div class="content fl">
            <p>欢迎来到{{userInfo.hospitalName}}！候诊期间请先填写自己实际症状，信息会马上传送到您预约的医生，便于您实现快速就诊。</p>
          </div>
        </div>
        <!--<div class="left clearfix" @click="selectToggle(2,disData.symptom.result,true)">
          <img src="../assets/doctor.png" alt="" class="fl">
          <div class="content fl">
            <p>您哪里不舒服？</p>
          </div>
        </div>-->
        <UsualSymptom v-if="showUsual" @selectUsual="selectUsual"></UsualSymptom>
        <div class="right clearfix" v-if="selectedSymptom.name">
          <img src="../images/patient.png" alt="" class="fr">
          <div class="content fr">
            <p>{{selectedSymptom.description||selectedSymptom.name}}</p>
          </div>
        </div>
        <div v-for="(item,idx) in allquestionLis" :key="'0'+item.id" v-if="activeTab>-1">
          <Dialog :idx="idx" v-if="item.show" :item="item" @selectToggle="selectToggle"/>
        </div>
        <div v-for="(item,idx) in diagQasList" :key="'1'+item.id" v-if="activeTab>0">
          <Dialog :idx="idx" v-if="item.show" :item="item" @selectToggle="selectToggle"/>
        </div>
        <div v-for="(item,idx) in otherQasList" :key="'2'+item.id" v-if="activeTab>1">
          <Dialog :idx="idx" v-if="item.show" :item="item" @selectToggle="selectToggle"/>
        </div>
      </div>
    </div>
    <MultSelect @updataResult="updataResultSingle" :num="num" :symptomResult="symptomResult" v-if="type==3"></MultSelect>
    <Select @updataResult="updataResultSingle" :num="num" :symptomResult="symptomResult" v-if="type == 2||type==8"></Select>
    <Radio @updataResultSingle="updataResultSingle" :num="num" :symptomResult="symptomResult" v-if="type == 1"></Radio>
    <!--普通单列拨盘-->
    <Picker v-if="type==10" @confirm="updataResultSingle" :num="num" :defaultIndex = "defaultIndex"></Picker>
    <!--时间拨盘，拨盘内容写死-->
    <Picker v-if="type == 9" :symptomResult="symptomResult" :columns="getTimeColumns()" :defaultVal="pickDVal" @confirm="updataResultSingle" :num="num" :defaultIndex = "defaultIndex"></Picker>
    <PushSymptom v-if="type == 99" @updataResult="updataResultSingle" :num="num"></PushSymptom>
    <!-- 上传图片 -->
    <UploadImg v-if="type==4"
               :num="num"
               :item="symptomResult"
               :moduleType="symptomResult.type"
               @updataResult="updataResultSingle"
               :imgList="imgs"/>
    <!-- 输入框 -->
    <Input v-if="type==7"
           :num="num"
           :item="symptomResult"
           :key="symptomResult.id"
           @updata="updataResultSingle"/>
    <!-- 文本域 -->
    <ComTextArea v-if="type==6 || type == 5"
                 :num="num"
                 :item="symptomResult"
                 width="92%"
                 @updata="updataResultSingle"/>
    <div class="submit" v-if="showPreview">
      <a href="javascript:void(0)" @click="previewRes">提交并预览</a>
    </div>
    <!--<div v-if="wrong" class="tip">{{waring}}</div>-->
    <TipWarning v-if="wrong" :text="waring" @close="closeTip"/>
  </div>
</template>
<script>
import BScroll from 'better-scroll';
import Radio from '../common/Radio';
import Select from '../common/Select';
import Dialog from '../common/Dialog';
import Picker from '../common/Picker';
import Label from '../common/Label.vue';
import ComTextArea from '../common/ComTextArea.vue';
import Input from '../common/Input.vue';
import PickTime from '../common/PickTime.vue';
import UploadImg from '../common/UploadImg.vue';
import PushSymptom from '../common/PushSymptom.vue';
import ConfirmBox from '../common/ConfirmBox'
import UsualSymptom from '../common/UsualSymptom';
import MultSelect from '../common/MultSelect.vue';
import TipWarning from '../common/TipWarning.vue';
import api from "../utils/api.js";
import {mapState} from 'vuex';
import {moduleCP} from '@utils/tools'

export default {
  name:'MainPage',
  data(){
    return {
      num:0,//题目计数
      pickDVal:'1天',    //时间控件默认值
      showUsual:false,    //常用症状显示
      activeTab:0,      //当前模块
      scroll:null,
      type :-1,       //当前显示的控件类型
      showPreview:false,//显示预览按钮
      selectedSymptom:{},
      symptomResult:'',//症状选择
      connectResult:[],//关联问题的id
      contentResult:{},//选中的结果val医生端显示，valp患者端显示
      allquestionLis:[],//症状详情所有的问题
      diagQasList:[], //诊疗详情所有问题
      otherQasList:[],//其他情况所有问题
      moduleKeys:[1,51,3,52],
      listMap:{
        0:'allquestionLis',
        1:'diagQasList',
        2:'otherQasList'
      },
      moduleMap:{
        0:'symptom',
        1:'diagnose',
        2:'others'
      },
      defaultIndex: 0, //温度默认值
      order:0,
      userInfo: {}, //用户信息
      pdbm:'8.5rem',
      waring:'',        //错误提示语
      wrong:false,      //是否显示错误toast
      showConfirm: false,
      time:1000,
    }
  },
  created() {
    //const userInfo= JSON.parse(localStorage.getItem("userInfo"))
    const userInfo = this.$store.state.pathInfo;
    this.userInfo = userInfo;
    this.updata()
  },
  mounted(){
    this.$nextTick(()=>{
      let bs = new BScroll('.wrapper', {
        probeType: 3,
        click:true
      })
      this.scroll = bs
    })
    // this.tmpSymptom = JSON.parse(JSON.stringify(data))
    //this.symptomResult = data.symptom.result;
  },
  computed:{
    ...mapState({
      imgs: state => state.diagnose.imgSrc,
    }),
    progress(){
      if(!this.num){
        return '0.1px';
      }
      const moduleName = this.listMap[this.activeTab];
      const precent = this.num/(this[moduleName].length+1);
      return precent*100+"%";
    }
  },
  methods:{
    previewRes(){
      this.$router.push({
        path:'/preview'
      })
    },
    updata(){
      this.allquestionLis = [];
      this.pdbm = '8.5rem'
      this.showUsual=true;
      this.num = 0;
    },
    selectToggle(type,result,flg,idx,order){
      return
      if(flg){
        this.num = 1
      }
      this.symptomResult = result
      this.type = type
      this.order = order
      this.scrollDown()
    },
    getTimeColumns(){
      let num = [];
      for(let i = 1; i <=60; i++) {
        num.push(i)
      }
      let unit = ['分钟', '小时', '天', '周', '月','年'];
      return [
        {
          values:num,
          className:'column1',
          defaultIndex: 0
        },
        {
          values:unit,
          className:'column2',
          defaultIndex: 2
        },
      ]
    },
    updataResultSingle(result,contentResult,num){
      this.num = num;
      this.type = -1;
      let moduleName = this.listMap[this.activeTab];
      let tmpArr = JSON.parse(JSON.stringify(this[moduleName]));
      tmpArr[num-1].content = contentResult.valp;
      //选没有可上传报告，则上传控件不显示
      const noUpload = this.symptomResult.id===999999&&contentResult.valp.indexOf("没有")!==-1;
      if(noUpload){
        tmpArr.splice(num,1);
      }

      this[moduleName] = tmpArr;
      //上传的图片及是否有可上传***答案不显示在预览所以不记录到state.diagnose.text中
      if(this.symptomResult.id!==999999&&this.symptomResult.controlType!=4){
        this.$store.commit('setText', { type: this.moduleKeys[this.activeTab], text: contentResult.val,textP: contentResult.valp,idx:contentResult.idx,flag:contentResult.flag });
      }
      console.log(this.$store.state);   //最后一题答完
      if(+num===this[moduleName].length||(noUpload&&+num===this[moduleName].length+1)){
        if(this.activeTab>1){         //模块配置待修改
          this.showPreview=true;
          return;
        }
        const state = this.$store.state;
        this.activeTab++;   //进入下一个阶段问题
        this.num = 0;
        moduleName = this.listMap[this.activeTab];
        const mDataName = this.moduleMap[this.activeTab];
        this[moduleName] = JSON.parse(JSON.stringify(state[mDataName].datas));
        let tmpArrDetail1 = JSON.parse(JSON.stringify(this[moduleName][0]));
        this[moduleName][0] = tmpArrDetail1;
        const tmpNowItem = this[moduleName][this.num];
        let timer = setTimeout(() => {
          this.type = tmpNowItem.controlType;
          tmpNowItem.show = true;
          console.log(tmpNowItem)
          this.symptomResult = tmpNowItem;
        });
        this.$nextTick(()=>{
          this.scroll.refresh()
          this.scroll.scrollTo(0, this.scroll.maxScrollY,500)
        })
        return;
      }
      let tmpArrDetailResult = JSON.parse(JSON.stringify(this[moduleName][num]));
      let tmpArrDetail = JSON.parse(JSON.stringify(tmpArr[num]));
      let timer = setTimeout(() => {
        this.type = tmpArrDetail.controlType;
        tmpArrDetail.show = true;
        tmpArr[num] = tmpArrDetail;
        this.symptomResult = tmpArrDetailResult;
        clearTimeout(timer)
      }, this.time);

      this.$nextTick(()=>{
        this.scroll.refresh()
        this.scroll.scrollTo(0, this.scroll.maxScrollY,500)
      })
    },
    closeTip(){
      this.wrong=false;
    },
    selectUsual(sym){
      this.getSymptomQas(sym.questionId);     //获取症状下的关联问题
      sym.idx=1;    //标记主诉
      this.$store.commit('setChoose', { choose: [sym], type: moduleCP['symp'] });
      this.selectedSymptom = sym;   //设置搜索选中症状
      this.showUsual=false; //关闭症状选择进入下一个问题
    },
    getSymptomQas(id){
      const param = {
        age:this.userInfo.patientAge,
        id:id,
        sexType:this.userInfo.sexType
      };
      api.getById(param).then((res) => {
        const result = res.data;
        if(result.code==='0'){
          const data = result.data;
          if(!data){
            return ;
          }
          let qaLis = data.questionMapping;
          if(qaLis.length===0){
            this.wrong = true;
            this.waring ='该症状数据未维护';
            return ;
          }
          //qaLis.length=2;     //开发测试代码，要删除
          qaLis[0].show=true;   //第一题自动显示
          this.type = qaLis[0].controlType;
          this.symptomResult = qaLis[0];
          this.$store.commit('setSymptomDatas',qaLis);
          this.allquestionLis = this.$store.state.symptom.origin;
        }else{

        }
      });
    },
    scrollDown(){
      this.scroll.scrollTo(0, this.scroll.maxScrollY)
    },
  },
  components:{
    Radio,
    Select,
    Dialog,
    Picker,
    Label,
    ComTextArea,
    Input,
    PickTime,
    UploadImg,
    PushSymptom,
    ConfirmBox,
    UsualSymptom,
    MultSelect,
    TipWarning
  }
}
</script>
<style lang="less" scoped>
  @import "../less/base.less";
.wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  box-sizing: border-box;
  overflow: hidden;
}
.scrollPart {
  // padding-bottom: 5rem;
  // padding-top: 1.44rem;
  // box-sizing: border-box;
}
.progress-bar {
  height: .8rem;
  line-height: .8rem;
  background: #fff;
  color: #aaa;
  margin-bottom:.4rem;
  span{
    display: inline-block;
    font-size: .26rem;
    width: 30%;
    color: #aaa;
    text-align: center;
    &:not(:last-child):after{
        content: ">";
        float: right;
        color: #aaa;
     }
  }
  .active{
    font-size: .28rem;
    color: #colors[theme];
  }
  .progress{
    height:0.06rem;
    background:#F5F5F5;
    p{
      width:.1px;
      height: 100%;
      background: #colors[theme];
    }
  }
}
.right {
  padding-top: .2rem;
  margin-bottom: .12rem;
  padding-right: .24rem;
  .content {
    max-width: 5rem;
    background-color: #colors[theme];
    border-radius: .24rem 0 .24rem .24rem;
    margin-top: .3rem;
    font-size: .28rem;
    padding: .24rem;
    display: inline-block;
    p {
      color: #fff;
    }
  }
  img {
    width: 0.8rem;
    height: 0.8rem;
    margin-left: .24rem;
  }
}
.left {
  margin-bottom: .2rem;
  padding-top: .12rem;
  padding-left: .24rem;
  .content {
    max-width: 5rem;
    background-color: #colors[bgques];
    border-radius: 0 .24rem .24rem .24rem;
    margin-top: .3rem;
    font-size: .28rem;
    padding: .24rem;
    display: inline-block;
  }
  img {
    width: 0.8rem;
    height: 0.8rem;
    margin-right: .24rem;
  }
}
  .submit{
    position: fixed;
    bottom: 0;
    width: 100%;
    a{
      display: inline-block;
      width: 100%;
      height: 0.88rem;
      font-size: .28rem;
      background-color: #colors[btn];
      line-height: 0.88rem;
      margin-top: 0.8rem;
      text-align: center;
      color: #fff;
    }
  }

</style>