mg-ocr-invoice 0.4.8 → 0.4.10

package/src/components/InvoicePopup/InvoicePopup.vue

@@ -0,0 +1,217 @@
+<template>
+  <div
+    class="OCR-overlay"
+    :style="{ zIndex: z_index }"
+    :class="{ 'OCR-show': $props.modelValue }"></div>
+  <div
+    class="OCR-action-sheet"
+    :style="{ zIndex: z_index }"
+    :class="{ 'OCR-show': $props.modelValue }">
+    <div class="OCR-action-sheet-header">
+      <h3 class="OCR-action-sheet-title">
+        {{ $props.title || '请选择操作' }}
+      </h3>
+      <span @click="close" class="gg-close OCR-action-sheet-close"></span>
+    </div>
+    <div v-if="$slots.content" class="OCR-action-sheet-content">
+      <slot name="content"></slot>
+    </div>
+    <div class="OCR-action-sheet-content" v-else>
+      <div
+        class="OCR-action-sheet-item"
+        @click.stopp="selectRow(item)"
+        :key="index"
+        v-for="(item, index) in $props.options">
+        <slot :item="item" name="OCR-action-sheet-item"
+          ><div>{{ item.name }}</div></slot
+        >
+      </div>
+    </div>
+    <div v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+    <div v-else class="OCR-action-sheet-cancel" @click="close">取消</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { OCR_getMaxZIndex } from '@/utils/common'
+import { onUnmounted, ref, watch } from 'vue'
+const $props: any = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    default() {
+      return '选择操作'
+    },
+  },
+  options: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  zIndex: {
+    type: Number,
+    default() {
+      return OCR_getMaxZIndex() + 1
+    },
+  },
+})
+const emits = defineEmits(['onClose', 'onSelect', 'update:modelValue'])
+const z_index = ref(OCR_getMaxZIndex() + 1)
+watch(
+  () => $props.modelValue,
+  (val) => {
+    if (val) {
+      document.body.style.overflow = 'hidden'
+      z_index.value = OCR_getMaxZIndex() + 1
+    } else {
+      document.body.style.overflow = ''
+    }
+  }
+)
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+const close = () => {
+  emits('update:modelValue', false)
+}
+const selectRow = (data: any) => {
+  emits('onSelect', JSON.parse(JSON.stringify(data)))
+  close()
+}
+</script>
+<style scoped>
+/* ActionSheet 组件样式 */
+.OCR-action-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #f7f8fa;
+  border-radius: 24px 24px 0 0;
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  max-height: 80%;
+  margin: 0 auto;
+  overflow: hidden;
+  /* padding-bottom: 67px; */
+  display: flex;
+  flex-direction: column;
+}
+
+.OCR-action-sheet.OCR-show {
+  transform: translateY(0);
+}
+
+.OCR-action-sheet-header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  position: relative;
+  align-items: center;
+  border-bottom: 1px solid #f5f5f5;
+  padding: 17px 12px;
+  background-color: #fff;
+}
+
+.OCR-action-sheet-title {
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+  grid-column: 2;
+}
+
+.OCR-action-sheet-close {
+  grid-column: 3;
+  justify-self: end;
+}
+
+.OCR-action-sheet-content {
+  /* padding: 10px 0; */
+  height: inherit;
+  overflow-y: auto;
+  min-height: 50px;
+  background-color: #fff;
+}
+
+.OCR-action-sheet-item {
+  height: 50px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  transition: background 0.2s;
+}
+
+.OCR-action-sheet-item:hover {
+  background: #f9f9f9;
+}
+
+.OCR-action-sheet-item.disabled {
+  color: #c8c9cc;
+  cursor: not-allowed;
+}
+
+.OCR-action-sheet-cancel {
+  /* margin-top: 8px; */
+  padding: 18px 0;
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  border-top: 9px solid #f5f5f5;
+  font-weight: 500;
+  transition: background 0.2s;
+  /* position: absolute; */
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+}
+
+.OCR-action-sheet-cancel:hover {
+  background: #f9f9f9;
+}
+
+.OCR-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease;
+}
+
+.OCR-overlay.OCR-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  .actions {
+    grid-template-columns: 1fr;
+  }
+
+  .OCR-action-sheet {
+    max-width: 100%;
+    border-radius: 16px 16px 0 0;
+  }
+}
+</style>

package/src/components/Loading/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="fullscreen-loader"
+    :class="{ mask: attrs.showMask !== false }"
+    :style="attrs.style">
+    <div class="OCR-loading"></div>
+    <div v-if="attrs.loadingText" class="loading-text">
+      {{ attrs.loadingText }}
+    </div>
+    <slot v-else name="loadingText">
+      <div class="loading-text">{{ attrs.loadingText }}</div>
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useAttrs } from 'vue'
+
+const attrs: any = useAttrs()
+</script>
+<style scoped>
+.fullscreen-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+.mask {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.loading-text {
+  margin-top: 12px;
+  color: #1b67e4;
+}
+.OCR-loading {
+  width: 50px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #1b67e4;
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+
+</style>

package/src/components/Message/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="OCR-toast-container"
+    :class="['OCR-toast-' + $props.position]"
+    :style="attrs.style">
+    <div class="OCR-text-content">
+      <div class="OCR-toast-icon" v-if="$props.type">
+        <i :class="[iconCalss]"></i>
+      </div>
+      <div class="OCR-toast-text">{{ $props.message }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue'
+const attrs: any = useAttrs()
+const $props = defineProps({
+  position: {
+    type: String,
+    default() {
+      return 'center'
+    },
+  },
+  type: {
+    type: String,
+    default() {
+      return ''
+    },
+  },
+  message: {
+    type: String,
+    default() {
+      return ''
+    },
+  },
+})
+const iconCalss = computed(() => {
+  if (!$props.type) {
+    return ''
+  } else {
+  }
+  const obj: any = {
+    success: 'gg-check-o',
+    error: 'gg-close-o',
+    warning: 'gg-close-o',
+    loading: 'OCR-loading',
+  }
+  return obj[$props.type]
+})
+</script>
+<style scoped>
+.OCR-toast-container {
+  position: fixed;
+  width: 100%;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.OCR-toast-container .OCR-text-content {
+  color: #fff;
+  width: initial;
+  background: rgba(0, 0, 0, 0.85);
+  border-radius: 20px;
+  padding: 16px;
+  /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); */
+  backdrop-filter: blur(10px);
+  max-height: 100px;
+  overflow: hidden;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.OCR-toast-top {
+  top: 50%;
+  left: 0;
+}
+.OCR-toast-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.OCR-toast-bottom {
+}
+
+.OCR-loading {
+  display: inline-block;
+  width: 22px;
+  padding: 3px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #1b67e4;
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+</style>

package/src/components/OCRInvoice/const.ts

@@ -1,7 +1,5 @@
 export const data = {
   angle: '0',
-  attachmentLink:
-    'https://filegw.nuonuo.com/U1ylUBa5YlUHWOpta7hoLSC6QX9pEcu8Kcy-JnCnHTGn6PYXKNdZosH32iDDaLWGzhkY0N88rGOaS4w2krdeCw.png',
   description: '增值税专用发票',
   invoiceType: 'vat_special_invoice',
   invoiceRootType: '专票',
@@ -59,8 +57,6 @@ export const data = {
   status: 'entered',
   invoiceStatus: 'unused',
   realStatus: 'checked',
-  fileUrlKey:
-    'https://invoice-sit-1251881907.cos.ap-nanjing.myqcloud.com/f8c6ff4af53241269c39dbd70f59cf6a.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDwtmcPMRRMAe9d4Sju00wq7KQPKAvZ6Yt%26q-sign-time%3D1693876509%3B1693876689%26q-key-time%3D1693876509%3B1693876689%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Dd49201f59ae86085771f52b2df0b13f40556e848',
   invoiceCompanyType: '公司',
   taxRate: '1%',
   taskStatus: 'repeat',

package/src/components/OCRInvoice/index.vue

@@ -36,9 +36,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { PaymentMode, Invoice, InvoiceList } from '@/components/index'
-import { getUrlParams } from '@/utils/getUrlParams'
+import { getUrlParams } from '@/utils/common'
 import Cookies from 'js-cookie'
 import VConsole from 'vconsole'
 const setLog = () => {
@@ -122,7 +122,6 @@ const submit = (data: any, id: string) => {
   emit('submit', data, id)
 }
 onMounted(() => {
-  console.log($props.teleport, 'teleport')
   Cookies.set('teleport', $props.teleport || '')
   initToken()
   init_Base_URL()
@@ -131,11 +130,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .OCRInvoice {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   .box {
-    width: 100%;
-    min-height: 100%;
-    height: 100%;
+     width: 100%;
+  height: 100%;
   }
 }
 </style>

package/src/components/PaymentMode/index.vue

@@ -14,26 +14,20 @@
           <span class="text">{{ item.text }}</span>
         </div>
         <div class="right-icon">
-          <i class="iconfont icon-xiangyou"></i>
+          <i class="gg-chevron-right"></i>
         </div>
       </div>
     </div>
   </div>
-  <Overlay
-    :z-index="9527"
-    style="display: flex; justify-content: center; align-items: center"
-    :show="showLoading">
-    <Loading class="loading" color="#0094ff">上传中...</Loading>
-  </Overlay>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import '@/utils/disableZoom'
 import { selectPhoto, takePhoto } from '@/utils/upload'
 import { __uploadInvoice } from '@/api/invoice'
-import { showToast, Overlay, Loading } from 'vant'
-import Cookies from 'js-cookie'
+import { showLoading, showMessage } from '@/utils/components'
+
 const props = defineProps([
   'multiple',
   'batchId',
@@ -46,33 +40,29 @@ const emit = defineEmits(['uploadSuccess'])
 const payList: any = [
   {
     text: '拍照',
-    leftIcon: 'icon-xiangji',
+    leftIcon: 'gg-smart-home-wash-machine',
   },
   {
     text: '相册',
-    leftIcon: 'icon-xiangce',
+    leftIcon: 'gg-image',
   },
-  // {
-  //   text: '微信',
-  //   leftIcon: 'icon-weixin3',
-  // },
-  // {
-  //   text: '支付宝',
-  //   leftIcon: 'icon-zhifubao',
-  // },
 ]
-document.title = '请选择添加费用方式'
 const paramsObj = computed(() => {
   return Object.assign({}, props.allParams, props.allUrlParams)
 })
-const showLoading = ref(false)
+
 const handleClickText = async (text: any) => {
-  let fd: any
+  let files = []
   if (text == '拍照') {
-    fd = await takePhoto()
+    files = await takePhoto()
   }
   if (text == '相册') {
-    fd = await selectPhoto(props.multiple)
+    files = await selectPhoto(props.multiple)
+  }
+  console.log(files)
+  let fd = new FormData()
+  for (let i = 0; i < files.length; i++) {
+    fd.append('invoiceFiles', files[i])
   }
   let newData: any = {
     businessLicense: props.businessLicense || '',
@@ -85,29 +75,26 @@ const handleClickText = async (text: any) => {
   for (const key in newData) {
     fd.append(key, newData[key])
   }
-  console.log(newData,'newData')
-  showLoading.value = true
+  const ld = showLoading()
+  ld.show()
   try {
     const res: any = await __uploadInvoice(fd)
     if (res.code === 200) {
-      showToast({
-        type: 'success',
-        message: '上传成功',
-        teleport: Cookies.get('teleport') || null,
-        zIndex: 9527,
-      })
+      // showMessage({
+      //   type: 'success',
+      //   message: '上传成功',
+      //   duration: 1000,
+      // })
       emit('uploadSuccess', res.data)
     }
   } catch (err: any) {
     console.log(err)
-    showToast({
-      type: 'fail',
+    showMessage({
+      type: 'error',
       message: err.msg,
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
   }
-  showLoading.value = false
+  ld.hide()
 }
 </script>
 <style scoped lang="scss">

package/dist/types/styles/vantimpCss.d.ts

@@ -1,15 +0,0 @@
-import 'vant/lib/overlay/index.css';
-import 'vant/lib/loading/index.css';
-import 'vant/lib/image-preview/index.css';
-import 'vant/lib/cell-group/index.css';
-import 'vant/lib/field/index.css';
-import 'vant/lib/form/style/index';
-import 'vant/lib/icon/index.css';
-import 'vant/lib/button/index.css';
-import 'vant/lib/action-sheet/index.css';
-import 'vant/lib/cell/index.css';
-import 'vant/lib/popup/index.css';
-import 'vant/lib/skeleton/index.css';
-import 'vant/lib/dialog/index.css';
-import 'vant/es/toast/index.css';
-import 'vant/lib/skeleton-paragraph/index.css';

package/dist/types/utils/getUrlParams.d.ts

@@ -1 +0,0 @@
-export declare function getUrlParams(url: string): any;