@uxda/appkit 4.3.2 → 4.3.4

package/src/shared/components/OcrInvoice.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="ocr-invoice" :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>
+  </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,
+  side?: 'face' | 'back',
+  className?: string
+  customUpload?: Function
+  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,
+  side: 'face',
+  className: '',
+  uploadUrl: '/hkbase/file/uploadFile',
+  customClick: false
+})
+
+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
+
+    if (props.customUpload) {
+      props.customUpload(filePath)
+      return
+    }
+
+    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 getOcrInfo(res.result)
+    } else {
+      hideLoading()
+      showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    hideLoading()
+    console.log(err)
+  }
+}
+
+// 根据证件路径获取证件信息
+async function getOcrInfo(file: string | FileType) {
+  try {
+    const res: any = await $http.get('/hkbase/common/vatInvoice', {
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+      fileType: 'img'
+    })
+    hideLoading()
+
+    if (!res?.purchaserRegisterNum) {
+      $n.dialog({
+        title: '识别失败',
+        message: `您上传的图片可能不够清晰或与当前功能不符，请重新上传一张清晰、完整的图片。谢谢！`,
+        okText: '我知道了',
+        cancelText: '',
+      })
+      return
+    }
+
+    emits('complete', {
+      invoiceDate: res?.invoiceDate,  
+      invoiceNum: res?.invoiceNum,
+      invoiceNumConfirm: res?.invoiceNumConfirm,
+      invoiceType: res?.invoiceType,
+      noteDrawer: res?.noteDrawer,
+      purchaserBank: res?.purchaserBank,
+      purchaserName: res?.purchaserName,
+      purchaserRegisterNum: res?.purchaserRegisterNum,
+      remarks: res?.remarks,
+      sellerName: res?.sellerName,
+      sellerRegisterNum: res?.sellerRegisterNum,
+      serviceType: res?.serviceType,
+      totalAmount: res?.totalAmount,
+      totalTax: res?.totalTax,
+      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-invoice {
+  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/index.ts

@@ -3,6 +3,8 @@ import PageHeader from './PageHeader.vue'
 import AppVerify from './AppVerify.vue'
 import DeviceVersion from './DeviceVersion.vue'
 import OcrIcon from './OcrIcon.vue'
+import OcrBank from './OcrBank.vue'
 import OcrBusinessLicense from './OcrBusinessLicense.vue'
+import OcrInvoice from './OcrInvoice.vue'
 
-export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBusinessLicense }
+export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBank,OcrBusinessLicense, OcrInvoice }

package/src/shared/composables/index.ts

@@ -7,3 +7,4 @@ export * from './useUpload'
 export * from './useCrypto'
 export * from './useLogger'
 export * from './useWxAuth'
+export * from './useCompress'

package/src/shared/composables/useCompress.ts

@@ -0,0 +1,64 @@
+import Taro, { uploadFile } from '@tarojs/taro'
+import { Media } from '@uxda/nutshell/taro'
+import { useAppKitOptions } from '../../Appkit'
+
+export type UploadConfig = {
+  baseUrl: string
+  name?: string
+  headers?: Record<string, string>
+}
+
+const mappings: { [x: string]: keyof Media } = {
+  downloadUrl: 'thrumb',
+  fileId: 'id',
+  fileName: 'name',
+  fileSize: 'size',
+  fileSuffix: 'ext',
+  fileType: 'type',
+  originalUrl: 'url',
+}
+
+const transformFields = (row: any) => {
+  return Object.fromEntries(Object.entries(row).map(([k, v]) => [mappings[k] || k, v]))
+}
+
+type UploadFunction = (url: string, file: Media) => Promise<Media>
+
+export const useUpload = (config: UploadConfig) => {
+  const appkitOptions = useAppKitOptions()
+
+  // 上传文件
+  const upload: UploadFunction = (url: string, file: Media) => {
+    return new Promise<Media>((resolve, reject) => {
+      uploadFile({
+        url: config.baseUrl + url,
+        filePath: file.path!,
+        name: 'file',
+        formData: {
+          objectNo: `min${Date.now()}`,
+          appCode: config.headers?.appcode || appkitOptions.app(),
+        },
+        header: {
+          ...config.headers,
+          token: appkitOptions.tempToken() || appkitOptions.token(),
+        },
+        success: (rsp: any) => {
+          const { data } = rsp
+          try {
+            const response = JSON.parse(data)
+            console.log('===response', response)
+            resolve(transformFields(response.result))
+          } catch (e) {
+            reject({
+              message: '文件上传异常',
+            })
+          }
+        },
+      })
+    })
+  }
+
+  return {
+    upload,
+  }
+}

package/src/shared/composables/useUpload.ts

@@ -1,61 +1,106 @@
-import Taro, { uploadFile } from '@tarojs/taro'
-import { Media } from '@uxda/nutshell/taro'
-import { useAppKitOptions } from '../../Appkit'
-
-export type UploadConfig = {
-  baseUrl: string
-  name?: string
-  headers?: Record<string, string>
-}
+import Taro from "@tarojs/taro";
 
-const mappings: { [x: string]: keyof Media } = {
-  downloadUrl: 'thrumb',
-  fileId: 'id',
-  fileName: 'name',
-  fileSize: 'size',
-  fileSuffix: 'ext',
-  fileType: 'type',
-  originalUrl: 'url',
-}
+/**
+ * 使用 canvas 压缩图片（Web 端）
+ */
+export const compressImageWithCanvas = (
+  src: string,
+  quality: number
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
 
-const transformFields = (row: any) => {
-  return Object.fromEntries(Object.entries(row).map(([k, v]) => [mappings[k] || k, v]))
-}
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
 
-type UploadFunction = (url: string, file: Media) => Promise<Media>
+        if (!ctx) {
+          reject(new Error("无法获取 canvas 上下文"));
+          return;
+        }
 
-export const useUpload = (config: UploadConfig) => {
-  const appkitOptions = useAppKitOptions()
+        // 设置画布尺寸（可以根据需要限制最大尺寸）
+        const maxWidth = 900;
+        const maxHeight = 900;
+        let width = img.width;
+        let height = img.height;
 
-  const upload: UploadFunction = (url: string, file: Media) => {
-    return new Promise<Media>((resolve, reject) => {
-      uploadFile({
-        url: config.baseUrl + url,
-        filePath: file.path!,
-        name: 'file',
-        formData: {
-          objectNo: `min${Date.now()}`,
-        },
-        header: {
-          ...config.headers,
-          token: appkitOptions.tempToken() || appkitOptions.token(),
+        // 计算压缩后的尺寸
+        if (width > maxWidth || height > maxHeight) {
+          const ratio = Math.min(maxWidth / width, maxHeight / height);
+          width = width * ratio;
+          height = height * ratio;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        // 绘制图片到 canvas
+        ctx.drawImage(img, 0, 0, width, height);
+
+        // 转换为 blob
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              reject(new Error("图片压缩失败"));
+              return;
+            }
+            // 创建 blob URL
+            const compressedUrl = URL.createObjectURL(blob);
+            resolve(compressedUrl);
+          },
+          "image/jpeg",
+          quality / 100
+        );
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error("图片加载失败"));
+    };
+
+    img.src = src;
+  });
+};
+
+// 压缩图片
+export async function compressImage(src: string, quality = 80) {
+  if (Taro.getEnv() === "WEB") {
+    try {
+      const compressedUrl = await compressImageWithCanvas(src, quality);
+      // 返回格式与小程序端一致，包含 tempFilePath 属性
+      return { tempFilePath: compressedUrl };
+    } catch (error) {
+      console.error("图片压缩失败:", error);
+      // 压缩失败时返回原图
+      return { tempFilePath: src };
+    }
+  } else {
+    return new Promise((resolve, reject) => {
+      Taro.compressImage({
+        src: src,
+        quality: quality,
+        success: (res) => {
+          resolve(res);
         },
-        success: (rsp: any) => {
-          const { data } = rsp
-          try {
-            const response = JSON.parse(data)
-            console.log('===response', response)
-            resolve(transformFields(response.result))
-          } catch (e) {
-            reject({
-              message: '文件上传异常',
-            })
-          }
+        fail: (res) => {
+          reject(res);
         },
-      })
-    })
+      });
+    });
   }
-  return {
-    upload,
+}
+
+// 获取压缩质量
+export function getCompressQuality(size: number) {
+  let quality = 100;
+  const curSize = size / (1024 * 1024);
+  if (curSize > 6) {
+    quality = quality - ((curSize - 6) / curSize) * 100;
   }
+  return quality;
 }

package/src/shared/tracking/tracking-sdk.ts

@@ -697,7 +697,6 @@ class TrackingSDK {
    * 发送埋点数据
    */
   private async flush(): Promise<void> {
-    console.log(this.eventQueue.length, 'this.eventQueue.length')
     if (this.eventQueue.length === 0) return
 
     const events = [...this.eventQueue]

package/src/user/components/UserAuth.vue

@@ -6,7 +6,7 @@
           <ns-input label="你的姓名" name="姓名" v-model="formData.姓名" placeholder="请输入或拍照识别" :maxlength="30" :disabled="已认证"
             :rules="['required']">
             <template #append>
-              <ocr-icon v-if="!已认证" @complete="onOcrComplete" />
+              <ocr-icon v-if="!已认证" :has-upload-vo="false" @complete="onOcrComplete" />
             </template>
           </ns-input>
           <ns-input label="身份证号码" name="身份证号码" placeholder="请输入身份证号码" :maxlength="30" v-model="formData.身份证号码"

package/src/user/components/UserFeedback.vue

@@ -202,6 +202,7 @@ function requestFeedback() {
 
   showLoading({
     title: '反馈中...',
+    mask: true
   })
 
   const attachment = JSON.parse(

package/src/user/components/UserInfo.vue

@@ -220,6 +220,7 @@ async function toUpload() {
 async function updateImage(filePath: string) {
   showLoading({
     title: "上传中...",
+    mask: true
   });
   const appkitOptions = useAppKitOptions();
   const $http = useHttp();

package/types/global.d.ts

@@ -20,3 +20,5 @@ declare namespace NodeJS {
 declare module '@tarojs/components' {
   export * from '@tarojs/components/types/index.vue3'
 }
+
+declare module '@uxda/nutshell/taro'