preliminary/src/components/Login.vue

<template>
  <div class="login">
    <div class="top">
      <div class="img">
        <img src="../images/logo.jpg" alt />
      </div>
      <h4>欢迎使用智能预问诊</h4>
    </div>
    <div class="main">
      <div class="iptWrap choose">
        <p @click="handleShow">
          {{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">
        <input
          @blur="blur"
          :maxlength="type==103?11:type==101?18:type==102?7:type==104?9:30"
          v-model="value"
          @input="changeVal"
          :type="type==101||type==104?'text':'tel'"
          class="input"
          type="text"
          :placeholder="'请输入'+name"
        />
      </div>
      <div :class="['btn',value?'btnClick':'btnDis']" @click="handleDepart">进入预问诊</div>
    </div>
    <div class="tip">注：建议您可先输入病情情况，方便医生提前了解情况</div>
    <Submit v-if="submit" :showType="showType" :fail="failMsg" @showSubmit="showSubmit"></Submit>
    <Tiptoast
        :show="showTip"
				@close="close"
				:data="message"/>
  </div>
</template>
<script>
import { phoneTest, identify, jgpattern } from "@utils/tools.js";
import Submit from "../common/Submit";
import Tiptoast from "../common/Tiptoast";
import api from "@utils/api.js";
export default {
  name: "Login",
  data() {
    return {
      showTip: false,
      showType: "fail",
      failMsg: "",
      submit: false,
      show: false,
      type: "103",
      name: "手机号",
      value: "",
      message:{
        title: "",
        text: ""
      }
    };
  },
  methods: {
    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;
    },
    handleShow() {
      const { show } = this;
      this.show = !show;
    },
    blur() {
      document.activeElement.scrollIntoViewIfNeeded(true);
      setTimeout(() => {
        document.activeElement.scrollIntoViewIfNeeded(true);
      }, 300);
    },
    changeVal() {
      document.activeElement.scrollIntoViewIfNeeded(true);
      const { type, value } = this;
      if (type == 102 || type == 103) {
        this.value = value.replace(/[^\d]/g, "");
      } else if (type == 101 || type == 104) {
        this.value = value.replace(/[\u4e00-\u9fa5]/g, "");
      }
    },
    defaultWaring(msg) {
      this.$store.commit("handleToggleShow", false);
      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 } = this;
      if (value) {
        if (type == 103) {
          if (!phoneTest.test(value)) {
            //验证不通过
            this.defaultWaring("请输入正确的11位手机号码");
            return;
          }
        } else if (type == 101) {
          //身份证
          if (!identify.test(value)) {
            //验证不通过
            this.defaultWaring("请输入正确的身份证号");
            return;
          }
        } else if (type == 104) {
          //病历号只能输入数字字母
          if (!jgpattern.test(value)) {
            //验证不通过
            this.defaultWaring("请输入正确的市民卡号");
            return;
          }
        }
        const param = {
          patientInfo: this.value,
          patientInfoType: this.type
        };
        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 }
                });
              } 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
                };
                localStorage.setItem('loginParam',JSON.stringify(params))//保存登陆信息，扫码进入徐删除该参数
                this.$router.push({
                  path: "/home",
                  query: params
                });
              } else {
                this.message.title = '温馨提示'
                this.message.text = '暂无今日挂号信息，可更换登录方式再次尝试。'
                this.showTip = true
              }
            } else {
              this.defaultWaring(res);
            }
          })
          .catch(() => {
            this.defaultWaring("网络异常请稍后重试");
          });
      }
    }
  },
  components: {
    Submit,
    Tiptoast
  }
};
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  width: 100%;
  position: fixed;
  background: linear-gradient(
    180deg,
    rgba(79, 79, 255, 1) 0%,
    rgba(79, 137, 255, 1) 100%
  );
  padding: 0.3rem 0.6rem;
  box-sizing: border-box;
  .top {
    .img {
      width: 1.6rem;
      height: 1.6rem;
      background-color: #fff;
      margin: 1rem auto 0 auto;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    h4 {
      font-size: 0.42rem;
      text-align: center;
      color: #fff;
      margin-top: 0.5rem;
      margin-bottom: 0.8rem;
      font-weight: normal;
    }
  }
  .main {
    width: 100%;
    height: 5.34rem;
    background: #fff;
    border-radius: 0.2rem;
    padding: 0.8rem 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;
    }
    .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: 0.6rem;
          line-height: 0.6rem;
          box-sizing: border-box;
        }
      }
    }

    .number {
      margin: 0.3rem 0 0.8rem 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;
      }
    }
    .btn {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      background: linear-gradient(
        270deg,
        rgba(79, 139, 255, 1) 0%,
        rgba(79, 79, 255, 1) 100%
      );
      border-radius: 0.44rem;
      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.6rem;
  }
}
</style>