zhgdyun/src/views/projectFront/entryCode/myLogin.vue

<template>
  <div class="login">
    <div class="nav">
      <div class="iconBack"><i class="el-icon-arrow-left"></i></div>
      <div class="pageName">
        <h2 class="tou">准入二维码</h2>
      </div>
    </div>

    <div class="content">
      <div class="title">
        <p>准入二维码</p>
      </div>
      <div class="input">
        <input
          type="text"
          placeholder="请输入身份证号码"
          v-model="value"
          maxlength="18"
        >
      </div>
      <div
        class="anniu"
        @click="toQR"
      >
        查看二维码
      </div>
      <div class="p">
        <p v-if="!isValidIdCard">请输入有效的身份证号码!</p>
      </div>
      <div class="p">
        <p v-if="!iscunzai">身份证号码不能为空!</p>
      </div>
    </div>
  </div>
</template>

<script>
import { entryCodeApi } from '@/assets/js/api/safeManage.js'
export default {
  name: 'myLogin',
  data () {
    return {
      value: "",
      isValidIdCard: true,
      iscunzai: true,
      projectSn: "",
      userId: "",
      id: "",
    }
  },

  mounted () {
    this.getQuery();

  },

  methods: {
    getQuery () {
      this.projectSn = this.$route.query.projectSn;
      this.userId = this.$route.query.userId;
    },

    async selectWorkerInfo () {
      const params = {
        // projectSn: this.projectSn,
        idCard: this.value
      };
      // const idCard = this.value;
      const { data: res } = await entryCodeApi(params);
      console.log(res);
      if (res.success == true) {
        this.id = res.result.id;
        console.log("this.id:" + this.id);
        this.$router.push({ name: 'home', params: { WorkerInfo: res.result } })
      } else {
        console.log("没有查到信息");
      }

    },

    validateIdCard () {
      // 身份证号码正则表达式，简单示例
      const idCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])([0-2][1-9]|10|20|30)\d{3}[\dX]$/;
      // 验证身份证号码格式
      this.isValidIdCard = idCardRegex.test(this.value);
    },
    toQR () {
      if (this.value != null && this.value != "") {
        this.iscunzai = true
        this.validateIdCard();
        if (this.isValidIdCard) {
          console.log("身份证号：" + this.value);
          this.selectWorkerInfo();
        }
      } else {
        this.isValidIdCard = true
        this.iscunzai = false
      }
    },
  }

}
</script>

<style scoped>
.p {
  color: red;
  font-size: 1rem;
}

.anniu {
  color: white;
  margin: 3.3rem 2.5rem;
  height: 4.16rem;
  font-size: 1.2rem;
  background-color: rgb(74, 137, 238);
  border-radius: 2.5rem;
  align-items: center;
  line-height: 4.16rem;
}

.input {
  margin: 0 20px;
}

input {
  font-size: 1.3rem;
  text-align: center;
  height: 3.33rem;
  width: 100%;
  border: rgb(165, 165, 165) solid 0.08rem;
  border-radius: 0.41rem;
}

input::placeholder {
  font-weight: bold;
  font-size: 1.2rem;
  color: rgb(123, 123, 123);
}

input::-ms-input-placeholder {
  text-align: center;
}

input::-webkit-input-placeholder {
  text-align: center;
}

.title {
  font-size: 2.2rem;
  font-weight: bold;
  padding: 3.5rem 0;
}

.iconBack {
  position: absolute;
  left: 0;
  font-size: 2.08rem;
}

.pageName {}

.tou {
  margin: 0;
}

.login {
  width: 100%;
  height: 100%;
}

.nav {
  width: 100%;
  height: 3.33rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 100%;
  height: calc(100% - 3.33rem);
  background-size: cover;
  background-position: right;
  background-image: url("../../assets/工地背景.jpg");
}

h1 {
  font-size: 1.5rem;
}
</style>