@uxda/appkit 4.3.11 → 4.3.13

package/src/shared/components/AppVerify.vue

@@ -17,8 +17,8 @@
       </div>
     </ns-form>
     <div class="row buttons">
-      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" @click="emits('cancel')">取消</ns-button>
-      <ns-button color="primary" v-track-click="'手机号验证-确认'" @click="onOk">确认</ns-button>
+      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" :r="20" @click="emits('cancel')">取消</ns-button>
+      <ns-button color="primary" v-track-click="'手机号验证-确认'" :r="20" @click="onOk">确认</ns-button>
     </div>
   </div>
 </template>
@@ -75,9 +75,9 @@ const props = defineProps<AppVerifyProps>();
   }
 
   .caption {
-    font-size: 13px !important;
-    color: #ccc;
-    line-height: 21px;
+    font-size: 14px !important;
+    color: #666;
+    margin-bottom: 5px;
   }
 
   .number {
@@ -97,11 +97,20 @@ const props = defineProps<AppVerifyProps>();
       border-radius: 5px;
       flex: 1;
       padding-left: 12px;
+      .input-text {
+        text-align: left !important;
+      }
     }
 
     .form-btn {
       margin-left: 12px;
-      width: 105px;
+      width: 90px;
+
+      .caption {
+        font-size: 10px !important;
+        color: #ccc;
+        margin-bottom: 0;
+      }
     }
   }
 

package/src/shared/components/OcrBank.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="ocr-bank" :class="[disabled ? 'disabled' : '']" v-track-click="'银行卡识别-点击'" @click="!customClick ? onUpload() : null">
+    <slot name="icon">
+      <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
+    </slot>
+  </div>
+
+  <nut-action-sheet v-model:visible="activeSheetVisible" :menu-items="actionSheetMenus" @choose="chooseImages"
+    cancel-txt="取消" />
+</template>
+
+<script lang="ts" setup>
+import Taro, { showToast, showLoading, hideLoading, chooseMedia, chooseMessageFile, uploadFile } from '@tarojs/taro'
+import { NsIcon, useNutshell } from '@uxda/nutshell/taro'
+import { useAppKitOptions } from '../../Appkit'
+import { ref } from 'vue';
+import { useHttp } from '../../balance/api'
+import { compressImage, getCompressQuality } from '../composables/useUpload'
+
+const appKitOptions = useAppKitOptions()
+const $http = useHttp(),
+$n = useNutshell()
+
+const emits = defineEmits(['complete'])
+
+type OcrProps = {
+  disabled?: boolean,
+  class?: string
+  uploadUrl?: string
+  customClick?: boolean
+}
+type FileType = {
+	"downloadUrl": string,
+	"fileId": string,
+	"fileName": string,
+	"fileSize": number,
+	"fileSuffix": string,
+	"fileType": string,
+	"originalUrl": string
+}
+
+const props = withDefaults(defineProps<OcrProps>(), {
+  disabled: false,
+  class: '',
+  uploadUrl: '/hkbase/file/uploadFile',
+  customClick: false
+})
+
+type BankCardType = {
+  bankCardNumber: string
+  bankCardType: string
+  bankName: string
+}
+
+async function onUploadFile(csRes: any) {
+  try {
+    let { path, size, tempFilePath } = csRes.tempFiles[0]
+    const compressImg: any = (await compressImage(path || tempFilePath, getCompressQuality(size))) || {}
+    const filePath = compressImg.tempFilePath || path
+
+    showLoading({ title: '银行卡识别中..', mask: true })
+
+    const session = appKitOptions.token()
+    const baseUrl = appKitOptions.baseUrl()
+    const upRes: any = await uploadFile({
+      url: baseUrl + props.uploadUrl,
+      filePath,
+      name: 'file',
+      formData: {
+        objectNo: `min${Date.now()}`,
+        appCode: appKitOptions.app(),
+      },
+      header: {
+        token: session || '',
+      },
+    })
+
+    const res = JSON.parse(upRes.data)
+    if (res.code === '200') {
+      await getBankCardInfo(res.result)
+    } else {
+      hideLoading()
+      showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    hideLoading()
+    console.log(err)
+  }
+}
+
+// 根据银行卡路径获取银行卡信息
+async function getBankCardInfo(file: string | FileType) {
+  try {
+    const res: BankCardType = await $http.get('/hkbase/common/bankCard', {
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+    })
+    hideLoading()
+
+    if (res && !res.bankCardNumber) {
+      $n.dialog({
+        title: '识别失败',
+        message: `您上传的图片可能不够清晰或与当前功能不符，请重新上传一张清晰、完整的图片。谢谢！`,
+        okText: '我知道了',
+        cancelText: '',
+      })
+      return
+    }
+
+    emits('complete', {
+      ...res,
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+      fileKey: typeof file === 'string' ? file : file.fileId,
+    })
+  } catch (err) {
+    hideLoading()
+  }
+}
+
+// 上传图片操作面板
+const activeSheetVisible = ref(false)
+const actionSheetMenus = [
+  {
+    name: '拍摄',
+    type: 'camera',
+  },
+  {
+    name: '从相册选择',
+    type: 'album',
+  },
+  {
+    name: '从聊天会话选择',
+    type: 'message',
+  },
+]
+if (Taro.getEnv() === 'WEB') {
+  actionSheetMenus.pop()
+}
+
+// 选择图像上传
+async function chooseImages(item: any) {
+  if (['camera', 'album'].includes(item.type)) {
+    const csRes = await chooseMedia({
+      count: 1,
+      sourceType: [item.type], // "camera" | "album"
+      maxDuration: 60, // 使用duration属性判断是图片还是视频，图片没有该属性
+    })
+
+    onUploadFile(csRes)
+  } else {
+    const csRes = await chooseMessageFile({
+      count: 1,
+      type: 'image',
+    })
+
+    onUploadFile(csRes)
+  }
+}
+
+async function onUpload() {
+  if (props.disabled) return
+
+  if (Taro.getEnv() === 'WEB') {
+    const csRes = await chooseMedia({
+      count: 1,
+      sourceType: ['album'], // "camera" | "album"
+      maxDuration: 60, // 使用duration属性判断是图片还是视频，图片没有该属性
+    })
+
+    onUploadFile(csRes)
+    return
+  }
+
+  activeSheetVisible.value = true
+}
+
+defineExpose({
+  onUpload
+})
+</script>
+
+<style lang="scss">
+.ocr-bank {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+
+  .ns-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.disabled {
+    .ns-icon {
+      filter: brightness(1.5) grayscale(1);
+    }
+  }
+}
+</style>

package/src/shared/components/OcrBusinessLicense.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :class="['ocr-business-license', disabled ? 'disabled' : '']" class="ocr-icon" v-track-click="'营业执照识别-点击'" @click="onIconClick">
-    <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
+  <div :class="['ocr-business-license', disabled ? 'disabled' : '']" class="ocr-icon" v-track-click="'营业执照识别-点击'" @click="!customClick ? onUpload() : null">
+    <slot name="icon">
+      <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
+    </slot>
   </div>
 </template>
 
@@ -8,6 +10,7 @@
 import Taro, { showToast, showLoading, hideLoading, uploadFile, chooseMedia } from '@tarojs/taro';
 import { NsIcon } from '@uxda/nutshell/taro';
 import { useAppKitOptions } from '../../Appkit';
+import { compressImage, getCompressQuality } from '../composables/useUpload';
 
 const appKitOptions = useAppKitOptions();
 
@@ -15,49 +18,29 @@ const emits = defineEmits(['complete']);
 
 type OcrBusinessLicenseProps = {
   disabled: boolean;
+  customClick?: boolean
 };
 
-const props = defineProps<OcrBusinessLicenseProps>();
+const props = withDefaults(defineProps<OcrBusinessLicenseProps>(), {
+  disabled: false,
+  customClick: false
+});
 
 export type OcrResult = {
   companyName: string;
   idCardNo: string;
   legalPersonName: string;
+  [x: string]: any;
 };
 
-async function taroImgCompress(src: string, quality = 80) {
-  return new Promise((resolve, reject) => {
-    Taro.compressImage({
-      src: src,
-      quality: quality,
-      success: (res) => {
-        resolve(res)
-      },
-      fail: (res) => {
-        reject(res)
-      },
-    })
-  })
-}
-
-function getCompressQuality(size: number) {
-  let quality = 100;
-  const curSize = size / (1024 * 1024);
-  if (curSize > 6) {
-    quality = quality - ((curSize - 6) / curSize) * 100;
-  }
-  return quality;
-}
-
 function allTrim(str: string) {
   return str.replace(/\s+/g, '');
 }
 
-async function onIconClick() {
+async function onUpload() {
   if (props.disabled) {
     return;
   }
-  console.log('===onIconClick');
   let result: OcrResult | null = null;
   try {
     const csRes = await chooseMedia({
@@ -65,15 +48,10 @@ async function onIconClick() {
       sourceType: ['album', 'camera']
     });
     let { size, tempFilePath } = csRes.tempFiles[0];
-    let filePath
-    if (Taro.getEnv() !== 'WEB') {
-      const compressImg: any = (await taroImgCompress(tempFilePath, getCompressQuality(size))) || {}
-      filePath = compressImg.tempFilePath
-    } else {
-      filePath = tempFilePath
-    }
+    const compressImg: any = (await compressImage(tempFilePath, getCompressQuality(size))) || {}
+    const filePath = compressImg.tempFilePath
 
-    showLoading({ title: '营业执照识别中..' });
+    showLoading({ title: '营业执照识别中..', mask: true });
 
     const session = appKitOptions.token();
     const baseUrl = appKitOptions.baseUrl();
@@ -83,6 +61,7 @@ async function onIconClick() {
       name: 'file',
       formData: {
         objectNo: `min${Date.now()}`,
+        appCode: appKitOptions.app(),
       },
       header: {
         token: session || '',
@@ -116,6 +95,10 @@ async function onIconClick() {
   }
   emits('complete', result);
 }
+
+defineExpose({
+  onUpload
+})
 </script>
 
 <style lang="scss">

package/src/shared/components/OcrIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ocr-icon" :class="[disabled ? 'disabled' : '']" v-track-click="'身份证识别-点击'" @click="onPhotograph">
+  <div class="ocr-icon" :class="[disabled ? 'disabled' : '', className]" v-track-click="'身份证识别-点击'" @click="!customClick ? onUpload() : null">
     <slot name="icon">
       <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
     </slot>
@@ -11,24 +11,44 @@
 
 <script lang="ts" setup>
 import Taro, { showToast, showLoading, hideLoading, chooseMedia, chooseMessageFile, uploadFile } from '@tarojs/taro'
-import { NsIcon } from '@uxda/nutshell/taro'
+import { NsIcon, useNutshell } from '@uxda/nutshell/taro'
 import { useAppKitOptions } from '../../Appkit'
 import { ref } from 'vue';
+import { useHttp } from '../../balance/api'
+import { compressImage, getCompressQuality } from '../composables/useUpload'
 
 const appKitOptions = useAppKitOptions()
+const $http = useHttp(),
+$n = useNutshell()
 
 const emits = defineEmits(['complete'])
 
-type OcrIconProps = {
+type OcrProps = {
   disabled?: boolean,
   side?: 'face' | 'back',
-  class?: string
+  className?: string
+  uploadUrl?: string
+  customUpload?: Function
+  hasUploadVo?: boolean
+  customClick?: boolean
+}
+type FileType = {
+	"downloadUrl": string,
+	"fileId": string,
+	"fileName": string,
+	"fileSize": number,
+	"fileSuffix": string,
+	"fileType": string,
+	"originalUrl": string
 }
 
-const props = withDefaults(defineProps<OcrIconProps>(), {
+const props = withDefaults(defineProps<OcrProps>(), {
   disabled: false,
   side: 'face',
-  class: ''
+  className: '',
+  hasUploadVo: true,
+  customClick: false,
+  uploadUrl: '/saas-base/file/uploadPublic',
 })
 
 type OcrResultType = {
@@ -49,34 +69,6 @@ type OcrResultType = {
   }
 }
 
-async function taroImgCompress(src: string, quality = 80) {
-  if (Taro.getEnv() === 'WEB') {
-    return src;
-  } else {
-    return new Promise((resolve, reject) => {
-      Taro.compressImage({
-        src: src,
-        quality: quality,
-        success: (res) => {
-          resolve(res)
-        },
-        fail: (res) => {
-          reject(res)
-        },
-      })
-    })
-  }
-}
-
-function getCompressQuality(size: number) {
-  let quality = 100
-  const curSize = size / (1024 * 1024)
-  if (curSize > 6) {
-    quality = quality - ((curSize - 6) / curSize) * 100
-  }
-  return quality
-}
-
 function allTrim(str: string) {
   return str.replace(/\s+/g, '')
 }
@@ -84,59 +76,62 @@ function allTrim(str: string) {
 async function onUploadFile(csRes: any) {
   let result: OcrResultType | null = null
   try {
-    console.log('===上传', csRes)
     let { path, size, tempFilePath } = csRes.tempFiles[0]
-    let filePath
-    if (Taro.getEnv() !== 'WEB') {
-      const compressImg: any = (await taroImgCompress(path || tempFilePath, getCompressQuality(size))) || {}
-      filePath = compressImg.tempFilePath || path
-    } else {
-      filePath = path || tempFilePath
+    const compressImg: any = (await compressImage(path || tempFilePath, getCompressQuality(size))) || {}
+    const filePath = compressImg.tempFilePath || path
+    
+    if (props.customUpload) {
+      props.customUpload(filePath)
+      return
     }
 
-    console.log(filePath, 'filePath')
-    showLoading({ title: '身份证识别中..' })
+    showLoading({ title: '身份证识别中..', mask: true })
 
     const session = appKitOptions.token()
     const baseUrl = appKitOptions.baseUrl()
     const upRes: any = await uploadFile({
-      url: baseUrl + '/hkapprove/ocr/idcard',
+      url: `${baseUrl}${!props.hasUploadVo ? props.uploadUrl : '/hkapprove/ocr/idcard'}`,
       filePath,
       name: 'file',
       formData: {
         objectNo: `min${Date.now()}`,
         side: props.side,
+        appCode: appKitOptions.app(),
       },
       header: {
         token: session || '',
       },
     })
-    hideLoading()
 
     const res = JSON.parse(upRes.data)
     if (res.code === '200') {
-      const faceInfo = res.result.faceInfo || {}
-      const backInfo = res.result.backInfo || {}
-      result = {
-        faceInfo: {
-          name: allTrim(faceInfo.name || ''),
-          certNo: allTrim(faceInfo.num || ''),
-          address: allTrim(faceInfo.address || ''),
-        },
-        backInfo: {
-          startDate: backInfo?.startDate || '',
-          endDate: backInfo?.endDate || ''
-        },
-        fileUploadVO: res.result.fileUploadVO || {},
-      }
-      console.log('===识别', result)
-      if (props.side === 'face' && !result.faceInfo.name && !result.faceInfo.certNo) {
-        showToast({ title: '识别失败，请重试', icon: 'none' })
-      }
-      if (props.side === 'back' && !result.backInfo?.startDate && !result.backInfo?.endDate) {
-        showToast({ title: '识别失败，请重试', icon: 'none' })
+      if (props.hasUploadVo) {
+        hideLoading()
+        const faceInfo = res.result.faceInfo || {}
+        const backInfo = res.result.backInfo || {}
+        result = {
+          faceInfo: {
+            name: allTrim(faceInfo.name || ''),
+            certNo: allTrim(faceInfo.num || ''),
+            address: allTrim(faceInfo.address || ''),
+          },
+          backInfo: {
+            startDate: backInfo?.startDate || '',
+            endDate: backInfo?.endDate || ''
+          },
+          fileUploadVO: res.result.fileUploadVO || {},
+        }
+        if (props.side === 'face' && !result.faceInfo.name && !result.faceInfo.certNo) {
+          showToast({ title: '识别失败，请重试', icon: 'none' })
+        }
+        if (props.side === 'back' && !result.backInfo?.startDate && !result.backInfo?.endDate) {
+          showToast({ title: '识别失败，请重试', icon: 'none' })
+        }
+      } else {
+        await getOcrInfo(res.result)
       }
     } else {
+      hideLoading()
       showToast({
         title: res.msg,
         icon: 'error',
@@ -146,9 +141,48 @@ async function onUploadFile(csRes: any) {
     hideLoading()
     console.log(err)
   }
-  emits('complete', result)
+
+  props.hasUploadVo && (result?.faceInfo.name || result?.backInfo.startDate) && emits('complete', result)
 }
 
+// 根据证件路径获取证件信息
+async function getOcrInfo(file: string | FileType) {
+  try {
+    const res: any = await $http.get('/hkbase/common/idCard', {
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+      side: props.side,
+    })
+    hideLoading()
+
+    if ((props.side === 'face' && !res?.name) || (props.side === 'back' && !res?.signDate)) {
+      $n.dialog({
+        title: '识别失败',
+        message: `您上传的图片可能不够清晰或与当前功能不符，请重新上传一张清晰、完整的图片。谢谢！`,
+        okText: '我知道了',
+        cancelText: '',
+      })
+      return
+    }
+
+    emits('complete', {
+      faceInfo: {
+        name: allTrim(res?.name || ''),
+        certNo: allTrim(res?.cardNumber || ''),
+        address: allTrim(res?.address || ''),
+      },
+      backInfo: {
+        startDate: res?.expireDate || '',
+        endDate: res?.signDate || ''
+      },
+      fileUploadVO: {
+        fileUrl: typeof file === 'string' ? file : file.originalUrl,
+        fileKey: typeof file === 'string' ? file : file.fileId,
+      },
+    })
+  } catch (err) {
+    hideLoading()
+  }
+}
 
 // 上传图片操作面板
 const activeSheetVisible = ref(false)
@@ -190,7 +224,7 @@ async function chooseImages(item: any) {
   }
 }
 
-async function onPhotograph() {
+async function onUpload() {
   if (props.disabled) return
 
   if (Taro.getEnv() === 'WEB') {
@@ -206,6 +240,10 @@ async function onPhotograph() {
 
   activeSheetVisible.value = true
 }
+
+defineExpose({
+  onUpload
+})
 </script>
 
 <style lang="scss">