- 在 AppInsuranceAudit 和 AppLoanAudit 组件中集成 AiIdcardRemote 组件 - 实现身份证信息查询和自动填充功能 - 优化用户信息获取逻辑,提高用户体验
49 lines
951 B
Vue
49 lines
951 B
Vue
<script>
|
|
|
|
export default {
|
|
name: "AiIdcardRemote",
|
|
props: {
|
|
instance: Function
|
|
},
|
|
data() {
|
|
return {
|
|
value: "",
|
|
info: {}
|
|
}
|
|
},
|
|
computed: {
|
|
infoText: v => [v.info.name, v.info.idCard].filter(Boolean)?.join(' ')?.trim()
|
|
},
|
|
methods: {
|
|
getText(idCard) {
|
|
this.info = {}
|
|
if (!this.ID.check(idCard)) return this.$message.error("请输入正确的身份证号")
|
|
return this.instance.post("/api/user/getUserByIdCard", null, {params: {idCard}}).then(res => {
|
|
if (res?.data) {
|
|
this.info = res.data
|
|
this.$emit('enter', this.info.id)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AiIdcardRemote flex">
|
|
<ai-input v-model="value" @keyup.enter.native="getText(value)"/>
|
|
<b class="text" v-text="infoText"/>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.AiIdcardRemote {
|
|
gap: 8px;
|
|
|
|
.AiInput {
|
|
min-width: 300px;
|
|
}
|
|
}
|
|
</style>
|