authentication.vue
3.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!--身份证验证-->
<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>