preliminary/src/components/Login.vue

<template>
  <div class="login">
    <div class="top">
      <div class="img">
        <img src="../images/logo.png" alt />
      </div>
      <h4>欢迎使用智能预问诊</h4>
    </div>
    <div class="main">
      <div class="iptWrap choose" v-if="hospitalShow">
        <p @click="handleShow(1)">
          {{hospitalName}}
          <img src="../images/down.png" />
        </p>
        <div class="slideType" v-if="showH">
          <ul>
            <li v-for="(item,idx) in hospitalList" :key="idx"  @click="handleCode(item,idx)" :style="{'border':(idx == (hospitalList.length-1))?'0 none':''}">{{item.hospitalName}}</li>
          </ul>
        </div>
      </div>
      <div class="iptWrap choose iptWrapS">
        <p @click="handleShow(2)">
          {{name}}
          <img src="../images/down.png" />
        </p>
        <div class="slideType" v-if="show">
          <ul>
            <!-- <li @click="handleType('手机号',103)">手机号</li> -->
            <li @click="handleType('身份证号',101)">身份证号</li>
            <li @click="handleType('病历号',102)">病历号</li>
            <li @click="handleType('市民卡号',104)" style="border:0 none">市民卡号</li>
          </ul>
        </div>
      </div>
      <div class="iptWrap number numberIpt">
        <input
          @focus="focus"
          @blur="blur"
          :maxlength="type==103?11:type==101?18:type==102?20:type==104?9:30"
          v-model="value"
          @input="changeVal"
          class="input"
          type="text"
          :placeholder="'请输入'+name"
        />
      </div>
      <div class="iptWrap number">
        <input
          @blur="blur"
          @focus="focus"
          :maxlength="30"
          v-model="patName"
          @input="changeName"
          class="input"
          type="text"
          placeholder="请输入姓名"
        />
      </div>
      <div :class="['btn',canClick?'btnClick':'btnDis']" @click.stop.prevent="handleDepart">进入预问诊</div>
    </div>
    <!-- <div class="tip">注：建议您可先输入病情情况，方便医生提前了解情况</div> -->
    <Submit v-if="submit" :showType="showType" :fail="failMsg" @showSubmit="showSubmit"></Submit>
    <Loading v-if="this.$store.state.loadingShow"></Loading>
    <Tiptoast
        :show="showTip"
				@close="close"
				:data="message"/>
  </div>
</template>
<script>
import { phoneTest, identify, jgpattern,name } from "@utils/tools.js";
import Submit from "../common/Submit";
import Tiptoast from "../common/Tiptoast";
import api from "@utils/api.js";
import Loading from '../common/Loading';
import $ from "jquery";
// let iscanscrollpage = false
export default {
  name: "Login",
  data() {
    return {
      loadingShow: this.$store.state.loadingShow,
      showTip: false,
      showType: "fail",
      failMsg: "",
      submit: false,
      show: false,
      showH:false,
      type: "102",
      name: "病历号",
      patName:'',
      value: "",
      message:{
        title: "",
        text: ""
      },
      code:'',
      allow:false,
      canClick:false,
      hospitalName:'',
      hospitalNum:'',
      hospitalList:[],
      hospitalShow:false,
      son:false,//有无子医院
      clique:1
    };
  },
  created(){
    let query = this.$route.query;
    let type = query.patientInfoType,name = query.patientName,value = query.patientInfo,code=query.hospitalCode,sonHospitalCode=query.sonHospitalCode,sonHospitalName=query.sonHospitalName,clique=(query.clique!=2?1:query.clique);
    this.code = code||'';
    if(value&&name&&type&&code){
      this.type = type
      this.name = type == 101?'身份证号':type == 102?'病历号':type == 104?'市民卡号':''
      this.value = value
      this.patName = name
      if(sonHospitalCode&&sonHospitalName){
        this.hospitalNum=sonHospitalCode
        this.hospitalName=sonHospitalName
        this.son = true
      }else{
        this.son = false
      }
    }
    this.clique = clique
    this.getSysConfig(code)
  },
  watch:{
    value:{
      handler: function(val, oldVal) {
        if(val&&this.patName){
          this.canClick = true
        }else{
          this.canClick = false
        }
      },
      deep: true
    },
    patName:{
      handler: function(val, oldVal) {
        if(val&&this.value){
          this.canClick = true
        }else{
          this.canClick = false
        }
      },
      deep: true
    }
  },
  beforeRouteLeave(to, from, next){
    const { value,patName,allow } = this;
    if(!value||!patName){
      return
    }
    next();
  },
  
  methods: {
    getHospitalList(code){
      api.getHospitalDatas({'hospitalCode':code}).then(res => {
        let result = res.data;
        if (result.code == 0) {
          let tmpMain = result.data.superiorsInfo;
          let tmpLis = result.data.juniorHospital;
          if(this.clique == 1){
            tmpLis.unshift(tmpMain)
          }
          this.hospitalList = tmpLis
          if(!this.son){
            this.hospitalName = tmpLis[0].hospitalName  //默认第一个
            this.hospitalNum = tmpLis[0].hospitalCode   
          }
        }else{
          // this.defaultWaring(res.data.msg);
        }
      })
    },
    getSysConfig(code){
      api.getSysConfig({'hospitalCode':code}).then((res)=>{
        const result = res.data;
        if(result.code==0){
          const datas = result.data;
          this.child = datas.filter((item)=>{return item.code == "constitution_show"})
          this.$store.commit('saveSysConfig',datas)
          for(let i = 0;i < datas.length;i++){
            if(datas[i].code == 'junior_show'){
              this.hospitalShow = +datas[i].value==1?true:false
              if(datas[i].value==1){
                this.hospitalShow = true
                this.getHospitalList(code)
              }else{
                this.hospitalShow = false
              }
            }
          }
        }else{
          this.defaultWaring(res.data.msg);
        }
      })
    },
    close() {
      this.showTip = false;
    },
    handleType(name, type) {
      let tmpType = this.type;
      if (tmpType != type) {
        this.name = name;
        this.type = type;
        this.value = "";
      }
      this.show = false;
    },
    handleCode(item,idx) {
      this.hospitalName = item.hospitalName
      this.hospitalNum = item.hospitalCode
      this.showH = false;
    },
    handleShow(flg) {
      const { show,showH } = this;
      if(flg == 1){
        if(!showH){
          this.show=false
        }
        this.showH = !showH;
      }else{
        if(!show){
          this.showH=false
        }
        this.show = !show;
      }
    },
    focus(){   
      // iscanscrollpage = false; 
    },
    blur() {
      // iscanscrollpage = true;
      // if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
      //   document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
      // }
    },
    changeName(e) {
      this.patName = e.target.value.replace(/[`~!@#$%^&)(*_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im,'')
    },
    changeVal() {
      const { type, value } = this;
      if (type == 103) {
        this.value = value.replace(/[^\d]/g, "");
      } else if (type == 102 || type == 101 || type == 104) {
        this.value = value.replace(/[^\w\.\/]/ig, "");
      }
    },
    defaultWaring(msg) {
      this.showType = "fail";
      this.failMsg = msg;
      this.submit = true;
      let timer = setTimeout(() => {
        this.submit = false;
        clearTimeout(timer);
      }, 2000);
    },
    showSubmit(flg){
      this.submit = flg;
    },
    handleDepart(){
      const { type, value,patName,allow,hospitalNum,hospitalName,code,hospitalList } = this;
      if(allow){
        return
      }
      if (value&&patName) {
        this.allow = true
        let timer = setTimeout(() => {
          if (type == 102) {
            if (!jgpattern.test(value) || value.length > 20) {//验证不通过
              this.defaultWaring("请输入正确的病历号");
              this.allow = false;
              return;
            }
          } else if (type == 101) {//身份证
            if (!identify.test(value) || value.length > 18) {//验证不通过
              this.defaultWaring("请输入正确的身份证号");
              this.allow = false;
              return;
            }
          } else if (type == 104) {//市民卡号只能输入数字字母
            if (!jgpattern.test(value)||value.length!=9) {//验证不通过
              this.defaultWaring("请输入正确的9位市民卡号");
              this.allow = false;
              return;
            }
          }
          if(!this.code){
            this.defaultWaring("医院编码必填");
            this.allow = false;
            return;
          }
          this.$store.commit('handleToggleShow', true);
          const param = {
            patientInfo: value,
            patientInfoType: type,
            hospitalCode:code,
            hospitalName:hospitalList.length>0&&hospitalList[0].hospitalName||'',
            patientName:patName,
            sonHospitalCode: code==hospitalNum?'':hospitalNum||'',
            sonHospitalName: code==hospitalNum?'':hospitalName||''
          };
          api.signIn(param).then(res => {
            let result = res.data;
            if (result.code == 0) {
              // result.data.splice(0,1);//测试只有一条数据
              localStorage.setItem('loginData',JSON.stringify(result.data))//保存登陆信息，扫码进入徐删除该参数
              if (result.data.length > 1) {
                this.$router.push({
                  name: "Department",
                  params: { result: result.data }
                });
                this.allow = false
              } else if (result.data.length == 1) {
                let msg = result.data[0];
                let params = {
                  hospitalCode: msg.hospitalCode,
                  hospitalDeptCode: msg.hospitalDeptCode,
                  doctorCode: msg.doctorCode||'',
                  patientCode: msg.patientCode||'',
                  recordId: msg.recordId||'',
                  sonHospitalCode:msg.sonHospitalCode||'',
                  time:msg.recordTime&&(new Date((msg.recordTime).replace(/\-/g, "/"))).getTime()||''
                };
                localStorage.setItem('loginParam',JSON.stringify(params))//保存登陆信息，扫码进入删除该参数
                this.$router.push({
                  path: "/home",
                  query: params
                });
                this.allow = false
              } else {
                this.message.title = '温馨提示'
                this.message.text = '暂无今日挂号信息，可更换登录方式再次尝试。'
                this.showTip = true
              }
              clearTimeout(timer)
            } else {
              // if(res.msg.indexOf('暂无今日挂号信息') != -1){
              //   this.message.title = '温馨提示'
              //   this.message.text = '暂无今日挂号信息，可更换登录方式再次尝试。'
              //   this.showTip = true
              // }else{
              //   this.defaultWaring(res.data.msg);
              // }
              this.allow = false
              this.defaultWaring(res.data.msg||"网络异常请稍后重试");
              clearTimeout(timer)
            }
            this.$store.commit('handleToggleShow', false);
          }).catch(() => {
            this.allow = false
            clearTimeout(timer)
            this.$store.commit('handleToggleShow', false);
            this.defaultWaring("网络异常请稍后重试");
          });
        }, 200);
      }
    }
  },
  components: {
    Submit,
    Tiptoast,
    Loading
  }
};
</script>
<style lang="less" scoped>
@import "../less/index.less";
.login {
  height: 100%;
  width: 100%;
  position: absolute;
  background: #colors[btn];
  padding: 0rem 0.6rem;
  box-sizing: border-box;
  .top {
    .img {
      width: 1.6rem;
      height: 1.6rem;
      background-color: #fff;
      margin: .8rem auto 0 auto;
      border-radius: 50%;
      overflow: hidden;
      padding:6px;
      img {
        width: 100%;
      }
    }
    h4 {
      font-size: 0.42rem;
      text-align: center;
      color: #fff;
      margin-top: 0.4rem;
      margin-bottom: 0.5rem;
      font-weight: normal;
    }
  }
  .main {
    width: 100%;
    // height: 5.34rem;
    background: #fff;
    border-radius: 0.2rem;
    padding: 0.6rem 0.6rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    .iptWrap {
      width: 100%;
      height: 0.88rem;
      background: rgba(242, 242, 245, 1);
      border-radius: 0.1rem;
      padding: 0.23rem 0.3rem;
      box-sizing: border-box;
    }

    .iptWrapS{
      margin-top: 0.3rem;
    }
    .choose {
      position: relative;
      p {
        width: 100%;
        position: relative;
        img {
          position: absolute;
          right: 0;
          top: 0;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .slideType {
        box-sizing: border-box;
        position: absolute;
        z-index: 10;
        width: 100%;
        top: 0.88rem;
        left: 0;
        box-shadow: 0px 4px 20px 0px rgba(102, 102, 102, 0.18);
        border-radius: 0.1rem;
        background-color: #fff;
        padding: 0.1rem 0.3rem 0 0.3rem;
        box-sizing: border-box;
        font-size: 0.28rem;
        li {
          border-bottom: 1px solid #f5f5f5;
          height: .88rem;
          line-height: .88rem;
          box-sizing: border-box;
        }
      }
    }
    .number {
      margin: 0.3rem 0 0.6rem 0;
      .input {
        float: left;
        color: rgba(51, 51, 51, 1);
        height: 0.42rem;
        line-height: 0.42rem;
        width: 100%;
        font-size: .3rem;
        background-color: transparent;
      }
    }
    .numberIpt {
      margin: 0.3rem 0 0.3rem 0;
    }
    .btn {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      background: #colors[btn];
      border-radius: 0.2rem;
      color: #fff;
      font-size: 0.32rem;
      font-weight: 500;
    }
    .btnDis {
      opacity: 0.3;
    }
    .btnClick {
      opacity: 1;
    }
  }
  .tip {
    color: #fff;
    font-size: 0.24rem;
    margin-top: 0.5rem;
  }
}
</style>