118 lines
3.1 KiB
Vue
118 lines
3.1 KiB
Vue
<!--身份证验证-->
|
||
<template>
|
||
<view class="boxBg">
|
||
<view class="tit">
|
||
<text v-if="detailsData.idCardNoVerify === 0 && !flag">
|
||
身份验证（未验证）
|
||
<icon class="iconTip"></icon>
|
||
</text>
|
||
<text v-else-if="detailsData.idCardNoVerify === 1 || flag">
|
||
身份验证（验证通过）
|
||
<!-- TODO 先保留-->
|
||
<!-- <icon class="iconTip"></icon> -->
|
||
</text>
|
||
<text v-else>
|
||
身份验证（验证未通过）
|
||
<icon class="iconTip"></icon>
|
||
</text>
|
||
</view>
|
||
<view class="identityBox" v-if="detailsData.idCardNoVerify !== 1 && !flag">
|
||
<view>
|
||
<uni-forms ref="customForm">
|
||
<uni-forms-item name="name"
|
||
><uni-easyinput
|
||
class="item"
|
||
v-model="name"
|
||
placeholder="请输入真实姓名"
|
||
/></uni-forms-item>
|
||
<uni-forms-item name="idCard"
|
||
><uni-easyinput
|
||
class="item"
|
||
v-model="idCard"
|
||
placeholder="请输入身份证号码"
|
||
@blur="handleIdcard"
|
||
/></uni-forms-item>
|
||
</uni-forms>
|
||
<button class="uni-btn concelBtn" @click="handleCheck">验证</button>
|
||
</view>
|
||
</view>
|
||
<view class="identitySuccee" v-else>
|
||
<view class="text" v-if="name !== ''">{{ name }}</view>
|
||
<view class="text">{{
|
||
idCard !== "" ? idCard : detailsData.idCardNo
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { useStore } from "vuex";
|
||
// 验证
|
||
import { validateIdentityCard } from "@/utils/validate";
|
||
// 接口
|
||
import { idCardCheck } from "@/pages/api/index.js";
|
||
// 获取父组件数据
|
||
const props = defineProps({
|
||
detailsData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
// ------定义变量------
|
||
const customForm = ref();
|
||
const store = useStore(); //vuex获取、储存数据
|
||
const users = store.state.user;
|
||
// 表单数据
|
||
let idCard = ref(""); //身份证号
|
||
let name = ref(""); //身份证号
|
||
let isValidate = ref(false); //输入身份证是否验证成功
|
||
let flag = ref(null); //是否校验成功
|
||
// ------定义方法------
|
||
onMounted(() => {
|
||
if (users.cardData) {
|
||
name.value = users.cardData.name;
|
||
name.idCard = users.cardData.idCard;
|
||
flag.value = true;
|
||
}
|
||
});
|
||
// 身份校验
|
||
const handleIdcard = () => {
|
||
const validate = validateIdentityCard(idCard.value);
|
||
if (validate) {
|
||
isValidate.value = true;
|
||
} else {
|
||
return uni.showToast({
|
||
title: validate,
|
||
duration: 1000,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
// 验证身份号
|
||
const handleCheck = async () => {
|
||
const params = {
|
||
name: name.value,
|
||
idCard: idCard.value,
|
||
};
|
||
store.commit("user/setCardData", params);
|
||
await idCardCheck(params)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
flag.value = res.data.flag;
|
||
return uni.showToast({
|
||
title: "验证成功",
|
||
duration: 1000,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
};
|
||
// 暴漏给父组件
|
||
defineExpose({
|
||
customForm,
|
||
idCard,
|
||
name,
|
||
isValidate,
|
||
});
|
||
</script> |