- 在 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>
 |