preliminary/src/components/PathInfo.vue

<template>
  <div class="path-wrap">
    <div class="content">
      <div class="topContent">
        <h2>{{pathInfo.sonHospitalName||pathInfo.hospitalName}}</h2>
        <p class="hospitalName">智能预问诊</p>
      </div>
      <div class="minContent">
        <p class="msg"><i class="person"></i>挂号信息</p>
        <p class="perLine">
          <span class="msgTitle">姓名</span>
          <i>：</i>
          <span>{{pathInfo.patientName}}</span>
        </p>
        <p class="perLine">
          <span class="msgTitle">性别</span>
          <i>：</i>
          <span>{{pathInfo.patientSex}}</span>
        </p>
        <p class="perMsg perLine">
          <span class="msgTitle">年龄</span>
          <i>：</i>
          <span class="perDetail">{{pathInfo.patientAge}}岁</span>
        </p>
        <p class="emptyLine"></p>
        <p class="perLine" v-if="pathInfo.doctorName">
          <span class="msgTitle">{{pathInfo.doctorName?'预约医生':''}}</span>
          <i v-if="pathInfo.doctorName">：</i>
          <span>{{pathInfo.doctorName}}</span>
        </p>
        <p class="perLine" v-if="pathInfo.hospitalDeptName">
          <span class="msgTitle">{{pathInfo.hospitalDeptName?'科室':''}}</span>
          <i v-if="pathInfo.hospitalDeptName">：</i>
          <span>{{pathInfo.hospitalDeptName}}</span>
        </p>
        <p class="perLine" v-if="pathInfo.recordId">
          <span class="msgTitle">{{pathInfo.recordId?'排队号':''}}</span>
          <i v-if="pathInfo.recordId">：</i>
          <span>{{pathInfo.recordId}}</span>
        </p>
        <p class="perLine" v-if="time">
          <span class="msgTitle">{{time?'预约时间':''}}</span>
          <i v-if="time">：</i>
          <span>{{time}}</span>
        </p>
      </div>
      <p class="explain">注：请核对您的挂号信息，如有错误请到窗口询问</p>
      <div class="btmContent" @click="getStart">确认并继续</div>
      
      <p class="jishu">朗通医疗提供技术支持</p>
      <!-- <div class="con">
        <p class="already" v-if="type !== 1">{{text[type]}}</p>
      </div> -->
    </div>

    <Toast
      :message="message"
      :show="showToast"
      @comfirn="comfirnDel"
      @cancel="cancelDel"
    />
    <Submit
      v-if="submit"
      :fail="tipMsg"
      showType="fail"
    ></Submit>
    <StartPage v-if="showStart" :showStart="showStart"/>
  </div>
</template>
<script type="text/javascript">
  import api from '@utils/api.js'
  import Submit from '../common/Submit';
  import Toast from '../common/Toast.vue';
  import {setScroll,dateParser,setTitle,moduleConfig,getUrlArgObject } from '@utils/tools.js'
  import StartPage from "../common/HomePage";
  import BScroll from 'better-scroll';
  import {mapState} from 'vuex';

  export default {
    name:'PathInfo',
    data(){
      return {
        pathInfo:{},
        // child:[],
        type:null, //1-未做过；3-只做过问诊；4-只做过体质辨识；6-都做过
        text:{
          "3":'您已完成过一次预问诊，是否再次录入',
          // "4":'您已完成过一次儿童体质辨识，是否再次录入',
          // "6":'您已完成过一次预问诊和儿童体质辨识，是否再次录入',
          "6":'您已完成过一次预问诊，是否再次录入',
        },
        isReady:false,
        // hideChild:true,  //隐藏儿童
        submit:false,
        scroll:null,
        tipMsg:'',
        time:'',
        params:{},
        showToast:false,
        message:'您已完成一次预问诊，是否重新录入？',
        showStart:false,
        allMoudles:{}
      }
    },
    computed:{
      ...mapState({
        config: state => state.sysConfig,
        tmpAllMoudles: state => state.allMoudles,
      }),
    },
    created(){
      const showDoctor = getUrlArgObject("showDoctor");
      this.$store.commit("setShowDoctor",showDoctor);
      this.getPathInfo();
      this.$store.commit('initAllData');//初始化store数据
    },
    mounted(){
      let tmpModule = moduleConfig(this.config,this.tmpAllMoudles);
      this.allMoudles = tmpModule;
      this.$store.commit('setActiveModule', tmpModule);
      this.$nextTick(()=>{
        let scroll = setScroll(BScroll,true,'.path-wrap')
        this.scroll = scroll
      })
    },
    methods:{
      comfirnDel() {
        this.goNext()
      },
      cancelDel() {
        this.showToast = false
      },
      getPathInfo(){
        let query = this.$route.query
        let hasQuery = JSON.stringify(query) == '{}'
        let tmpTime = dateParser(!hasQuery&&query.recordTime) || (localStorage.getItem('loginParam')&&dateParser(JSON.parse(localStorage.getItem('loginParam')).time))
        this.time = tmpTime
        const params = {
          'hospitalCode':!hasQuery&&query.hospitalCode||'',
          'hospitalDeptCode':!hasQuery&&query.hospitalDeptCode||'',
          'doctorCode':!hasQuery&&query.doctorCode||'',
          'patientCode':!hasQuery&&query.patientCode||'',
          'recordId':!hasQuery&&query.recordId||'',
          'recordTime':!hasQuery&&query.recordTime||'',
          "sonHospitalCode": !hasQuery&&query.sonHospitalCode||''
        }
        if(!hasQuery&&query.scan){//扫码进入的
          localStorage.removeItem('loginParam')
          localStorage.removeItem('loginData')
          localStorage.setItem('scan',true)//保存扫码标记
          localStorage.setItem('infoParam',JSON.stringify(params))//保存扫码信息，登录进入需删除该参数
          this.getSysConfig();
        }else{//登陆进入的
          localStorage.removeItem('infoParam')
          localStorage.removeItem('scan')
          this.getSysConfig(1);
          if(localStorage.getItem("startPage") == 1){
            this.showStart = true;
            document.title = '智能预问诊';
          }
        }
        api.getPathInfo(params).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.pathInfo = result.data;
            this.$store.commit('savePathInfo',result.data);
            this.getAll(); //获取模板
            this.getUsualSymptom();   //获取科室常用症状
          }
        })
      },
      getSysConfig(flg){
        let query = this.$route.query
        let hasQuery = JSON.stringify(query) == '{}';
        const param = {
          'hospitalCode':!hasQuery&&query.hospitalCode||'',
        }
        api.getSysConfig(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            const datas = result.data;
            this.$store.commit('saveSysConfig',datas)
            if(flg){return}
            for(let i = 0;i < datas.length;i++){
                if(datas[i].code == 'homepage_show' && localStorage.getItem("startPage") === null){
                    if(+datas[i].value==1){
                        localStorage.setItem('startPage',1)
                        //显示启动页
                        this.showStart = true;
                        document.title = '智能预问诊';
                    }else{
                        document.title = '挂号详情';
                        localStorage.setItem('startPage',0)
                    }
                }
            }
          }
        })
      },
      getUsualSymptom(){
        const param = {
          "age": this.pathInfo.patientAge,
          "deptName": this.pathInfo.selfDeptName,
          "sexType": this.pathInfo.sexType
        };
        api.getSymptom(param).then((res) => {
          const result = res.data;
          if (result.code == 0) {
            this.$store.commit("setUsualSymptom",result.data);
          }else{
            this.defaultWaring('常用症状获取失败，请稍后重试！')
          }
        })
      },
      recordCheck(){
        const param = {
          'doctorId':this.pathInfo.doctorId,
          'hospitalDeptId':this.pathInfo.hospitalDeptId,
          'hospitalId':this.pathInfo.hospitalId,
          'inquiryCode':this.pathInfo.recordId,
          'patientId':this.pathInfo.patientId
        };
        api.recordCheck(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            let type = result.data.type;
            if(type == 3||type == 6){//有预问诊信息
              this.showToast = true
            }else{
              this.goNext();
            }
          }
        })
      },
      goNext(){
        if(this.isReady){
          this.$router.push({path:'/tab'})
        }else{
          this.defaultWaring('请先维护症状模块')
        }
      },
      getAll(){
        const param = {
          'age':this.pathInfo.patientAge,
          'relationId':this.pathInfo.selfDeptId,
          'mouduleType':1, //根据科室划分
          'sexType':this.pathInfo.patientSex=='男'?1:(this.pathInfo.patientSex=='女'?2:3),
        }
        api.getAll(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            const datas = result.data;
            this.$store.commit('saveAll',datas)
            let access = datas.filter(item=>item.type == 1).length>0
            this.isReady=access
          }else{
            this.defaultWaring(result.msg)
          }
        })
      },
      getStart(){
        const pathInfo = this.pathInfo;
        if(JSON.stringify(pathInfo)=='{}'){
          this.defaultWaring('网络异常请稍后重试');
          return
        }
        this.recordCheck(); //校验是否填过
      },
      defaultWaring(msg){
        this.submit = true
        this.tipMsg = msg
        let timer = setTimeout(() => {
          this.submit = false
          clearTimeout(timer)
        }, 2000);
      },
    },
    components:{
      Submit,
      Toast,
      StartPage
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .path-wrap{
    font-size: .28rem;
    position: absolute;
    width: 100%;
    height: 100%;
    .content {
      padding-bottom: .16rem;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .topContent {
      // background-color: #6678FF;
      height: 3.8rem;
      padding-top: .3rem;
      box-sizing: border-box;
      background:url(../images/topContent.png) no-repeat;
      background-size: cover;
      .hospitalName {
        color: #FFFFFF;
        font-size: .32rem;
        text-align: center;
      }
      h2 {
        text-align: center;
        font-size: .46rem;
        padding: .3rem 0 .18rem 0;
        color: #fff;
      }
      .explain {
        font-size: .24rem;
        color: #fff;
        line-height: .4rem;
      }
    }
    .explain {
      font-size: .24rem;
      color: #AAAAAA;
      padding:0 .4rem;
      line-height: .4rem;
      position: relative;
      bottom: 1.1rem;
    }
    .minContent {
      padding: .3rem .6rem .3rem .6rem;
      box-sizing: border-box;
      border-radius: 5px;
      width: 90%;
      box-shadow:0px 12px 24px 0px rgba(198,187,224,0.15);
      position: relative;
      top: -1.3rem;
      background-color: #fff;
      margin: 0 auto;
      height: 6.4rem;
      .msg {
        font-size: .32rem;
        padding-bottom: .18rem;
        border-bottom: 1px solid #E6E6E6;
        margin-bottom: .4rem;
        .person {
          display: inline-block;
          width: .38rem;
          height: .4rem;
          background: url(../images/person.png) no-repeat;
          background-size: cover;
          margin-right: .3rem;
          position: relative;
          top: .06rem;
        }
      }
      .perLine {
        font-size: .3rem;
        padding-bottom: .2rem;
      }
      .msgTitle {
        display: inline-block;
        width: 1.3rem;
        color: #777777;
      }
      i {
        color: #777777;
        position: relative;
        bottom: 1px;
      }
      .perMsg {
        .perDetail {
          margin-right: .24rem;
        }
      }

    }
    .btmContent {
      width: 6.9rem;
      height: .88rem;
      line-height: .88rem;
      text-align: center;
      background-color: #colors[btn];
      font-size: #font[title];
      color: #fff;
      margin: 0 auto;
      border-radius: .44rem;
      position: absolute;
      bottom: 1.2rem;
      transform: translateX(-50%);
      left: 50%;
    }
    .emptyLine {
      height: 0.22rem;
    }
  }
  .jishu {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    text-align: center;
    color: #AAA;
    transform: translateX(-50%);
  }
</style>