174 lines
3.5 KiB
Vue
174 lines
3.5 KiB
Vue
<template>
|
|
<div class="login">
|
|
<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 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: "准入二维码_详情",
|
|
params: { WorkerInfo: res.result, projectSn: this.projectSn },
|
|
});
|
|
// this.$router.push({path: '/entryCodeDetail'});
|
|
} 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 lang="less">
|
|
.p {
|
|
color: red;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.anniu {
|
|
color: white;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
margin-top: 10%;
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
font-size: 1.2rem;
|
|
background-color: rgb(74, 137, 238);
|
|
border-radius: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
margin-top: 40%;
|
|
display: flex;
|
|
justify-content: center;
|
|
input {
|
|
font-size: 1.3rem;
|
|
text-align: center;
|
|
height: 2.5rem;
|
|
width: 88%;
|
|
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: 1.6rem;
|
|
font-weight: bold;
|
|
margin-top: 30%;
|
|
p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.login {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-size: cover;
|
|
background-position: right;
|
|
background-image: url("~@/assets/images/entryCodeImg/indexBg.jpg");
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|