mg-ocr-invoice 0.1.7 → 0.1.9

package/src/components/PaymentMode/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="PaymentMode">
+    <div class="title">选择识别方式</div>
+    <div class="list">
+      <div
+        class="method-item"
+        @click="handleClickText(item.text)"
+        v-for="(item, index) in payList"
+        :key="item.id || index">
+        <div class="left-text">
+          <span class="icon-left">
+            <i class="iconfont" :class="item.leftIcon"></i>
+          </span>
+          <span class="text">{{ item.text }}</span>
+        </div>
+        <div class="right-icon">
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Overlay
+    style="display: flex; justify-content: center; align-items: center"
+    :show="showLoading">
+    <Loading class="loading" color="#0094ff">上传中...</Loading>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import '@/utils/disableZoom'
+import { selectPhoto, takePhoto } from '@/utils/upload'
+import { __uploadInvoice } from '@/api/invoice'
+import { showToast, Overlay, Loading, showFailToast } from 'vant'
+const props = defineProps(['multiple', 'batchId'])
+const emit = defineEmits(['uploadSuccess'])
+const payList: any = [
+  {
+    text: '拍照',
+    leftIcon: 'icon-xiangji',
+  },
+  {
+    text: '相册',
+    leftIcon: 'icon-xiangce',
+  },
+  // {
+  //   text: '微信',
+  //   leftIcon: 'icon-weixin3',
+  // },
+  // {
+  //   text: '支付宝',
+  //   leftIcon: 'icon-zhifubao',
+  // },
+]
+document.title = '请选择添加费用方式'
+const showLoading = ref(false)
+const handleClickText = async (text: any) => {
+  let fd: any
+  if (text == '拍照') {
+    fd = await takePhoto()
+  }
+  if (text == '相册') {
+    fd = await selectPhoto(props.multiple)
+  }
+  if (props.batchId) {
+    fd.append('batchId', props.batchId)
+  }
+  console.log(props.batchId,'props.batchIdprops.batchIdprops.batchId')
+  showLoading.value = true
+  try {
+    const res: any = await __uploadInvoice(fd)
+    if (res.code === 200) {
+      showToast({
+        type: 'success',
+        message: '上传成功',
+      })
+      emit('uploadSuccess', res.data)
+    }
+  } catch (err: any) {
+    console.log(err)
+    showFailToast(err.msg)
+  }
+  showLoading.value = false
+}
+</script>
+<style scoped lang="scss">
+.PaymentMode {
+  width: 100%;
+  height: 100%;
+  padding: 20px 12px 0;
+  background-color: #f3f4f6;
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .list {
+    .method-item {
+      width: 100%;
+      height: 60px;
+      background-color: #fff;
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px;
+      .left-text {
+        // display: flex;
+        // align-items: center;
+        // gap: 11px;
+        // font-size: 16px;
+        // font-weight: 700;
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: auto;
+        grid-template-rows: auto;
+        grid-gap: 11px;
+        font-size: 16px;
+        font-weight: 700;
+        span {
+          align-self: center;
+        }
+        .icon-left {
+          i {
+            font-size: 22px;
+            font-weight: initial;
+          }
+        }
+      }
+      .right-icon {
+        background-color: rgba(38, 111, 232, 0.1);
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        i {
+          color: #266fe8;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,5 @@
+import Invoice from './Invoice/index.vue'
+import InvoiceList from './InvoiceList/index.vue'
+import PaymentMode from './PaymentMode/index.vue'
+import OCRInvoice from './OCRInvoice/index.vue'
+export { Invoice, InvoiceList, PaymentMode, OCRInvoice }