123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
<template>
|
|
<view class="loginbox">
|
|
<view class="logintop flex justify-center align-center">
|
|
<image :src="`${imgPath}static/userui/kncxbj.png`" style="width: 100px; height: 100px;" />
|
|
</view>
|
|
<view class="input-fields padding">
|
|
<!-- 输入姓名 -->
|
|
<view class="input-item flex align-center">
|
|
<text class="cuIcon-peoplefill" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
|
|
<input v-model="name" placeholder="请输入姓名" />
|
|
</view>
|
|
<!-- 输入身份证号 -->
|
|
<view class="input-item flex align-center">
|
|
<text class="cuIcon-card lg text-gray" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
|
|
<input v-model="idCard" placeholder="请输入身份证号" />
|
|
</view>
|
|
<!-- 登录按钮 -->
|
|
<view class="flex flex-direction loginbotton">
|
|
<button @click="phonelogin" class="cu-btn lg bg-green text-white">
|
|
认证
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<zero-loading v-if="isloading" color="#c1c1c0" type="wobble" mask="true"></zero-loading>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import * as api from '@/utils/api.js';
|
|
import {
|
|
showModelMessage
|
|
} from '@/utils/tools.js';
|
|
import config from '@/utils/config';
|
|
|
|
const imgPath = config.imgPath;
|
|
|
|
const isloading = ref(false);
|
|
const name = ref(''); // 用于存储姓名
|
|
const idCard = ref(''); // 用于存储身份证号
|
|
const countdown = ref(60); // 设置倒计时时间为60秒
|
|
|
|
const phonelogin = async () => {
|
|
if (!name.value || !idCard.value) {
|
|
showModelMessage('姓名和身份证号不能为空');
|
|
return;
|
|
}
|
|
const idCardRegex =
|
|
/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([12][0-9])|(3[01]))\d{3}(\d|X)$/; // 身份证号正则表达式
|
|
if (!idCardRegex.test(idCard.value)) {
|
|
showModelMessage('请输入有效的身份证号');
|
|
return;
|
|
}
|
|
// 如果验证通过，发起认证请求
|
|
isloading.value = true;
|
|
setTimeout(() => {
|
|
isloading.value = false;
|
|
// 假设成功认证后跳转
|
|
uni.navigateTo({
|
|
url: "/pages/user/home/home"
|
|
});
|
|
}, 1000);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loginbox {
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.logintop {
|
|
height: 280px;
|
|
}
|
|
|
|
.input-fields {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.input-item {
|
|
height: 45px;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
background: rgb(246, 245, 248);
|
|
padding: 0px 15px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.get-code-text {
|
|
margin-left: 10px;
|
|
color: #4caf50;
|
|
font-size: 14px;
|
|
width: 40%;
|
|
cursor: pointer;
|
|
line-height: 40px;
|
|
text-align: right;
|
|
}
|
|
|
|
.get-code-text:disabled {
|
|
color: #ccc;
|
|
}
|
|
|
|
.get-code-text {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.loginbotton {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.is-input-border {
|
|
border: none;
|
|
}
|
|
</style> |