From faba34294ab4e213680346eee0080724ac62a2f2 Mon Sep 17 00:00:00 2001
From: weichengwu <wuvcen@gmail.com>
Date: Wed, 26 Nov 2025 22:46:29 +0800
Subject: [PATCH] add id card ocr api

---
 src/pages/home/index.vue   | 228 ++++++++++++++++++-------------------
 src/services/apiService.ts |  62 ++++++++--
 src/types/apiService.d.ts  |   4 +-
 3 files changed, 171 insertions(+), 123 deletions(-)

diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 4bccd87..5616cf3 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -93,26 +93,26 @@
               </button>
             </div>
 
-            <div v-if="formData.qrCode">
-              <div>
-                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
-                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
-              </div>
-              <div class="mt-4 flex flex-col items-center">
-                <div class="flex justify-center items-center relative h-[210px] w-[210px]" ref="qrCodeWrapper">
-                  <div v-if="formData.status == 1"
-                    class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute z-10">
-                    <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
-                  </div>
-                  <qrcode-vue class="absolute opacity-0 pointer-events-none" :value="formData.qrCode" :size="200"
-                    level="H" render-as="canvas" />
-                  <img v-if="qrImageSrc" :src="qrImageSrc" alt="核销二维码"
-                    class="h-[210px] w-[210px] rounded-md shadow-[0_10px_24px_rgba(232,66,77,0.18)] bg-white object-contain" />
-                </div>
-                <div class="mt-3 text-xs text-gray-500">长按二维码保存至相册</div>
-              </div>
-            </div>
-          </div>
+            <div v-if="formData.qrCode">
+              <div>
+                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
+                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
+              </div>
+              <div class="mt-4 flex flex-col items-center">
+                <div class="flex justify-center items-center relative h-[210px] w-[210px]" ref="qrCodeWrapper">
+                  <div v-if="formData.status == 1"
+                    class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute z-10">
+                    <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
+                  </div>
+                  <qrcode-vue class="absolute opacity-0 pointer-events-none" :value="formData.qrCode" :size="200"
+                    level="H" render-as="canvas" />
+                  <img v-if="qrImageSrc" :src="qrImageSrc" alt="核销二维码"
+                    class="h-[210px] w-[210px] rounded-md shadow-[0_10px_24px_rgba(232,66,77,0.18)] bg-white object-contain" />
+                </div>
+                <div class="mt-3 text-xs text-gray-500">长按二维码保存至相册</div>
+              </div>
+            </div>
+          </div>
 
           <div v-if="activityInfo.status === 2">
             <!-- 活动结束状态 -->
@@ -204,32 +204,32 @@
 
 <script setup lang="ts">
 import apiService from '../../services/apiService'
-import { ref, onMounted, nextTick } from 'vue'
-import dayjs from 'dayjs'
-import QrcodeVue from 'qrcode.vue'
-import { showLoading, hideLoading } from '../../components/loading'
-import { showDialog } from 'vant';
-import 'vant/es/dialog/style';
-
-const ocrUploadId = ref<HTMLInputElement>();
-const qrCodeWrapper = ref<HTMLDivElement | null>(null);
-const qrImageSrc = ref('');
-
-const syncQrImage = () => {
-  nextTick(() => {
-    const canvas = qrCodeWrapper.value?.querySelector('canvas') as HTMLCanvasElement | null;
-    if (!canvas) {
-      qrImageSrc.value = '';
-      return;
-    }
-    try {
-      qrImageSrc.value = canvas.toDataURL('image/png');
-    } catch (error) {
-      console.error('生成二维码图片失败:', error);
-      qrImageSrc.value = '';
-    }
-  });
-};
+import { ref, onMounted, nextTick } from 'vue'
+import dayjs from 'dayjs'
+import QrcodeVue from 'qrcode.vue'
+import { showLoading, hideLoading } from '../../components/loading'
+import { showDialog } from 'vant';
+import 'vant/es/dialog/style';
+
+const ocrUploadId = ref<HTMLInputElement>();
+const qrCodeWrapper = ref<HTMLDivElement | null>(null);
+const qrImageSrc = ref('');
+
+const syncQrImage = () => {
+  nextTick(() => {
+    const canvas = qrCodeWrapper.value?.querySelector('canvas') as HTMLCanvasElement | null;
+    if (!canvas) {
+      qrImageSrc.value = '';
+      return;
+    }
+    try {
+      qrImageSrc.value = canvas.toDataURL('image/png');
+    } catch (error) {
+      console.error('生成二维码图片失败:', error);
+      qrImageSrc.value = '';
+    }
+  });
+};
 
 // 表单数据
 const formData = ref({
@@ -296,15 +296,15 @@ const clearPhone = () => {
   formData.value.marriageNo = '';
   formData.value.husbandName = '';
   formData.value.wifeName = '';
-  formData.value.registerDate = '';
-  formData.value.qrCode = '';
-  formData.value.status = 0;
-  qrImageSrc.value = '';
-  countdown.value = 0;
-  if (countdownTimer) {
-    clearInterval(countdownTimer);
-    countdownTimer = null;
-  }
+  formData.value.registerDate = '';
+  formData.value.qrCode = '';
+  formData.value.status = 0;
+  qrImageSrc.value = '';
+  countdown.value = 0;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
   localStorage.removeItem('userAs');
   if (ocrUploadId.value) ocrUploadId.value.value = '';
 }
@@ -373,34 +373,34 @@ const verifyCode = (flag: any) => {
     mobile: formData.value.phone,
     smsCode: smsCode,
     type: 3,
-  }).then((res) => {
-    localStorage.setItem('userAs', JSON.stringify({
-      phone: formData.value.phone,
-      smsCode: formData.value.smsCode,
-    }));
+  }).then((res) => {
+    localStorage.setItem('userAs', JSON.stringify({
+      phone: formData.value.phone,
+      smsCode: formData.value.smsCode,
+    }));
 
     formData.value.verifyCode = true;
 
     // 验证成功后重置倒计时
     countdown.value = 0;
 
-    // 验证成功如果有二维码，保存到表单
-    if (res?.data?.code) {
-      formData.value = {
-        ...formData.value,
-        qrCode: res.data.code,
-        status: res.data.status,
-      }
-      syncQrImage();
-    } else {
-      formData.value = {
-        ...formData.value,
-        marriageNo: "",
-        husbandName: "",
-        wifeName: "",
-        registerDate: "",
-        qrCode: ""
-      }
+    // 验证成功如果有二维码，保存到表单
+    if (res?.data?.code) {
+      formData.value = {
+        ...formData.value,
+        qrCode: res.data.code,
+        status: res.data.status,
+      }
+      syncQrImage();
+    } else {
+      formData.value = {
+        ...formData.value,
+        marriageNo: "",
+        husbandName: "",
+        wifeName: "",
+        registerDate: "",
+        qrCode: ""
+      }
     }
   }).catch((error) => {
     localStorage.removeItem('userAs');
@@ -408,21 +408,21 @@ const verifyCode = (flag: any) => {
     flag && showDialog({
       message: error.msg || '验证码验证失败，请重试',
     });
-    formData.value = {
-      ...formData.value,
-      smsCode: "",
-      marriageNo: "",
-      husbandName: "",
-      wifeName: "",
-      registerDate: "",
-      qrCode: ""
-    }
-    qrImageSrc.value = '';
-  }).finally(() => {
-    hideLoading();
-  })
-}
-// 重置结婚证信息
+    formData.value = {
+      ...formData.value,
+      smsCode: "",
+      marriageNo: "",
+      husbandName: "",
+      wifeName: "",
+      registerDate: "",
+      qrCode: ""
+    }
+    qrImageSrc.value = '';
+  }).finally(() => {
+    hideLoading();
+  })
+}
+// 重置结婚证信息
 function resetMarriageInfo() {
   formData.value = {
     ...formData.value,
@@ -456,7 +456,7 @@ const handleImageChange = () => {
 
   showLoading();
   apiService.uploadOcrImage(formFormData).then((response: any) => {
-    apiService.parseOcrInfo({
+    apiService.marriageParseOcrInfo({
       mobile: formData.value.phone,
       smsCode: formData.value.smsCode,
       uploadId: response.data.uploadId,
@@ -492,11 +492,11 @@ const handleImageChange = () => {
 
 
 // 提交表单
-const submitForm = () => {
-  if (!formData.value.phone || !formData.value.smsCode) {
-    showDialog({
-      message: '请完善所有信息',
-    });
+const submitForm = () => {
+  if (!formData.value.phone || !formData.value.smsCode) {
+    showDialog({
+      message: '请完善所有信息',
+    });
     return
   }
 
@@ -506,22 +506,22 @@ const submitForm = () => {
     receiveName: formData.value.husbandName,
     receiveMobile: formData.value.phone,
     smsCode: formData.value.smsCode,
-  }).then((res: any) => {
-    formData.value.qrCode = res.data.code;
-    syncQrImage();
-  }).catch((error) => {
-    showDialog({
-      message: error?.msg || '提交失败，请稍后重试',
-    });
-  }).finally(() => {
-    hideLoading();
-  })
-}
-
-// 组件卸载时清理定时器
-import { onUnmounted } from 'vue'
-onUnmounted(() => {
-  if (countdownTimer) {
+  }).then((res: any) => {
+    formData.value.qrCode = res.data.code;
+    syncQrImage();
+  }).catch((error) => {
+    showDialog({
+      message: error?.msg || '提交失败，请稍后重试',
+    });
+  }).finally(() => {
+    hideLoading();
+  })
+}
+
+// 组件卸载时清理定时器
+import { onUnmounted } from 'vue'
+onUnmounted(() => {
+  if (countdownTimer) {
     clearInterval(countdownTimer)
   }
 })
diff --git a/src/services/apiService.ts b/src/services/apiService.ts
index 69f1608..d4882d2 100644
--- a/src/services/apiService.ts
+++ b/src/services/apiService.ts
@@ -13,14 +13,53 @@ export interface OcrUploadResponse {
   uploadId: string
 }
 
-export interface OcrParseResponse {
+export interface IdCardOcrParseResponse {
   raw: string
   words: string[]
   parsed: {
-    marriageNo: string
-    husbandName: string
-    wifeName: string
-    registerDate: string
+    birthday?: string
+    id_number: string
+    address: string
+    image_status:
+    | 'normal'
+    | 'reversed_side'
+    | 'non_idcard'
+    | 'blurred'
+    | 'other_type_card'
+    | 'over_exposure'
+    | 'over_dark'
+    | 'unknown'
+    risk_type:
+    | 'normal'
+    | 'copy'
+    | 'scan'
+    | 'temporary'
+    | 'screen'
+    | 'screenshot'
+    | 'unknown'
+    gender: '男' | '女' | '未知' | null | undefined
+    name?: string
+    nationality?: string
+  }
+}
+
+export interface MarriageOcrParseResponse {
+  raw: string
+  words: string[]
+  parsed: {
+    marriageNo?: string
+    registerDate?: string
+    certificateHolder?: string
+    wifeId?: string
+    wifeName?: string
+    wifeBirthDate?: string
+    wifeNationality?: string
+    wifeGender?: '男' | '女' | '未知' | null | undefined
+    husbandId?: string
+    husbandName?: string
+    husbandGender?: '男' | '女' | '未知' | null | undefined
+    husbandBirthDate?: string
+    husbandNationality?: string
   }
 }
 
@@ -86,12 +125,21 @@ export const apiService = {
   },
 
   // OCR识别并返回证件信息
-  parseOcrInfo(data: {
+  marriageParseOcrInfo(data: {
     mobile: string
     smsCode: string
     uploadId: string
   }) {
-    return request.post<OcrParseResponse>('/marriage/ocr/parse', data)
+    return request.post<MarriageOcrParseResponse>('/marriage/ocr/parse', data)
+  },
+
+  // OCR 识别身份证
+  idCardParseOcrInfo(data: {
+    mobile: string
+    smsCode: string
+    uploadId: string
+  }) {
+    return request.post<IdCardOcrParseResponse>('/marriage/ocr/parseIdCard', data)
   },
 
   // 领取流程相关接口
diff --git a/src/types/apiService.d.ts b/src/types/apiService.d.ts
index d9b00fc..864429c 100644
--- a/src/types/apiService.d.ts
+++ b/src/types/apiService.d.ts
@@ -13,7 +13,7 @@ export interface OcrUploadResponse {
   uploadId: string
 }
 
-export interface OcrParseResponse {
+export interface MarriageOcrParseResponse {
   raw: string
   words: string[]
   parsed: {
@@ -70,7 +70,7 @@ export interface ApiService {
   sendSms(data: CommSmsDTO): Promise<any>
 
   // OCR识别并返回证件信息
-  parseOcrInfo(data: {
+  marriageParseOcrInfo(data: {
     mobile: string
     smsCode: string
     uploadId: string