mg-ocr-invoice 0.4.8 → 0.4.9

package/src/components/InvoiceList/index.vue

@@ -11,128 +11,136 @@
           @change.self="changeSelectAll"
           v-model="selectedAll"
           @click.stop
-          class="checkbox" />
+          class="inv-checkbox" />
       </div>
     </div>
     <div class="card">
-      <ul>
-        <li v-for="(item, index) in list" :key="index" @click="clickItem(item)">
-          <div class="li">
-            <div
-              class="item-card"
-              v-if="
-                item.taskStatus === 'finish' || item.taskStatus === 'repeat'
-              ">
-              <div class="details-btn" @click.stop="openDetails(item)">
-                详情
+      <div class="li" v-for="(item, index) in list" :key="index">
+        <div
+          @click="clickItem(item)"
+          class="item-card"
+          v-if="item.taskStatus === 'finish' || item.taskStatus === 'repeat'">
+          <div class="details-btn" @click.stop="openDetails(item)">
+            <i class="gg-more-alt"></i>
+          </div>
+          <div
+            class="title"
+            :class="{
+              company: item.invoiceCompanyType === '公司',
+              err:
+                item.invoiceCompanyType === '异常抬头' ||
+                item.invoiceCompanyType === '异常税号',
+            }">
+            {{ item.invoiceCompanyType }}
+          </div>
+          <div class="storeName">
+            <div class="name">
+              <div class="left">{{ item.sellerName }}</div>
+              <div class="right" v-if="item.taskStatus === 'repeat'">
+                已收录
               </div>
-              <div
-                class="title"
-                :class="{
-                  company: item.invoiceCompanyType === '公司',
-                  err:
-                    item.invoiceCompanyType === '异常抬头' ||
-                    item.invoiceCompanyType === '异常税号',
-                }">
-                {{ item.invoiceCompanyType }}
+            </div>
+            <div class="tags">
+              <span v-if="item.manualModify" class="manual"> 手工录入 </span>
+              <div v-else-if="item.invoiceExceptionInfo">
+                <span :class="setClass(item.invoiceExceptionInfo)">{{
+                  const_invoiceExceptionInfo[item.invoiceExceptionInfo]
+                }}</span>
               </div>
-              <div class="storeName">
-                <div class="name">
-                  <div class="left">{{ item.sellerName }}</div>
-                  <div class="right" v-if="item.taskStatus === 'repeat'">
-                    已收录
-                  </div>
+              <span v-else :class="setClass(item.realStatus)">{{
+                const_realStatus[item.realStatus]
+              }}</span>
+              <span :class="setClass(item.invoiceStatus)">{{
+                const_invoiceStatus[item.invoiceStatus]
+              }}</span>
+            </div>
+            <div class="InvoiceInfo">
+              <div class="leftinfo">
+                <div class="item-info">
+                  <span class="label">发票金额</span>
+                  <span class="value price"
+                    >¥{{
+                      item.priceTaxTotalFigure || item.noTaxAmountTotal
+                    }}</span
+                  >
                 </div>
-                <div class="tags">
-                  <span v-if="item.manualModify" class="manual">
-                    手工录入
-                  </span>
-                  <div v-else-if="item.invoiceExceptionInfo">
-                    <span :class="setClass(item.invoiceExceptionInfo)">{{
-                      const_invoiceExceptionInfo[item.invoiceExceptionInfo]
-                    }}</span>
-                  </div>
-                  <span v-else :class="setClass(item.realStatus)">{{
-                    const_realStatus[item.realStatus]
-                  }}</span>
-                  <span :class="setClass(item.invoiceStatus)">{{
-                    const_invoiceStatus[item.invoiceStatus]
+                <div class="item-info">
+                  <span class="label">发票抬头</span>
+                  <span class="value">{{ item.payerName }}</span>
+                </div>
+                <div class="item-info">
+                  <span class="label">发票类型</span>
+                  <span class="value">{{ item.invoiceRootType }}</span>
+                </div>
+                <div class="item-info">
+                  <span class="label" style="flex-shrink: 0">发票号码</span>
+                  <span class="value" v-if="item.invoiceNum">{{
+                    item.invoiceNum
                   }}</span>
+                  <span class="value" style="color: red; font-size: 12px" v-else
+                    >未识别出发票号码，不允许使用，请点击右上角，进入详情修改</span
+                  >
                 </div>
-                <div class="InvoiceInfo">
-                  <div class="leftinfo">
-                    <div class="item-info">
-                      <span class="label">发票金额</span>
-                      <span class="value price"
-                        >¥{{
-                          item.priceTaxTotalFigure || item.noTaxAmountTotal
-                        }}</span
-                      >
-                    </div>
-                    <div class="item-info">
-                      <span class="label">发票抬头</span>
-                      <span class="value">{{ item.payerName }}</span>
-                    </div>
-                    <div class="item-info">
-                      <span class="label">发票类型</span>
-                      <span class="value">{{ item.invoiceRootType }}</span>
-                    </div>
-                    <div class="item-info">
-                      <span class="label">发票时间</span>
-                      <span class="value">{{ item.invoiceDate }}</span>
-                    </div>
-                  </div>
-                  <div class="rightCheckbox">
-                    <input
-                      @click.stop
-                      type="checkbox"
-                      class="checkbox"
-                      @change="changeItemCheckbox"
-                      v-model="item.selected"
-                      icon-size="22px" />
-                  </div>
+                <div class="item-info">
+                  <span class="label">发票时间</span>
+                  <span class="value">{{ item.invoiceDate }}</span>
                 </div>
               </div>
-            </div>
-
-            <div
-              v-else-if="
-                item.taskStatus === 'ocr_doing' ||
-                item.taskStatus === 'ocr_success'
-              "
-              style="
-                background-color: #fff;
-                padding: 21px 0 15px 12px;
-                position: relative;
-                width: 100%;
-              ">
-              <Loading class="loading" color="#0094ff">识别中...</Loading>
-              <Skeleton :loading="true" title :row="6"></Skeleton>
-            </div>
-            <div class="err-card" v-else>
-              <div class="left-img" @click="openErrImg(item.fileUrlKey)">
-                <img :src="item.fileUrlKey" alt="" />
+              <div class="rightCheckbox">
+                <input
+                  @click.stop
+                  type="checkbox"
+                  class="inv-checkbox"
+                  @change="changeItemCheckbox"
+                  v-model="item.selected"
+                  icon-size="22px" />
               </div>
-              <div class="right-errText">
-                <div class="title"><span>识别失败</span></div>
-                <div class="content">
-                  <div class="recognitionResult">
-                    <p class="errContent">OCR识别失败</p>
-                    <p>可以重新拍照识别，或手动添加信息导入</p>
-                  </div>
-                  <div>
-                    <input
-                      type="checkbox"
-                      class="checkbox"
-                      @click.stop
-                      v-model="item.selected" />
-                  </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else-if="
+            item.taskStatus === 'ocr_doing' || item.taskStatus === 'ocr_success'
+          "
+          style="
+            background-color: #fff;
+            padding: 21px 0 15px 12px;
+            position: relative;
+            width: 100%;
+          ">
+          <Loading
+            class="loading"
+            style="background-color: rgba(255, 255, 255, 0.5)"
+            loadingText="识别中..."></Loading>
+          <Skeleton :loading="true" title :row="5"></Skeleton>
+        </div>
+        <div class="err-card" v-else>
+          <div class="left-img" @click="openErrImg(item.fileUrlKey)">
+            <img :src="item.fileUrlKey" alt="" />
+          </div>
+          <div class="right-errText">
+            <div class="title"><span>识别失败</span></div>
+            <div class="content">
+              <div class="recognitionResult">
+                <div v-if="item.statusInfo">
+                  {{ item.statusInfo }}
                 </div>
+                <div v-else>
+                  <p class="errContent">OCR识别失败</p>
+                  <p>可以重新拍照识别，或手动添加信息导入</p>
+                </div>
+              </div>
+              <div>
+                <input
+                  type="checkbox"
+                  class="inv-checkbox"
+                  @click.stop
+                  v-model="item.selected" />
               </div>
             </div>
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
     <div class="btn-form">
       <div class="operate">
@@ -140,47 +148,54 @@
           <span>移除</span>
         </div>
         <div class="right-btn">
-          <span class="add" @click="add">继续添加发票</span>
-          <span class="ok" :class="{ disabledColor: !submitBtn }" @click="submitData"
+          <span class="add" @click.stop="add">继续添加发票</span>
+          <span
+            class="ok"
+            :class="{ disabledColor: !submitBtn }"
+            @click="submitData"
             >确定选择</span
           >
         </div>
       </div>
     </div>
+    <InvoicePopup
+      title="添加发票"
+      @onSelect="onSelect"
+      :options="options"
+      v-model="showPopup">
+      <template #OCR-action-sheet-item="{ item }: any">
+        <div class="select-item">
+          <span :class="[item.icon]"></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </template>
+    </InvoicePopup>
+    <InvoicePopup
+      @onSelect="CardEdit"
+      :options="CardEditOptions"
+      v-model="showCardEdit">
+      <template #OCR-action-sheet-item="{ item }: any">
+        <div class="select-item">
+          <span :class="[item.icon]"></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </template>
+    </InvoicePopup>
+    <!-- <ActionSheet
+      title="请选择操作"
+      cancel-text="取消"
+      v-if="showCardEdit"
+      close-on-click-action
+      :actions="actions"
+      v-model:show="showCardEdit"
+      @select="CardEdit"></ActionSheet> -->
   </div>
-  <Popup
-    :z-index="9527"
-    v-model:show="showPopup"
-    :teleport="Cookies.get('teleport') || null"
-    position="bottom"
-    closeable>
-    <div class="boxPopup">
-      <div class="title">
-        <span>添加发票</span>
-      </div>
-      <div style="padding-bottom: 24px" @click="selectImg(1)">从相册中选择</div>
-      <div @click="selectImg(2)">拍照上传</div>
-    </div>
-  </Popup>
-  <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 { ref, onMounted, computed, h } from 'vue'
-import {
-  Popup,
-  Skeleton,
-  Loading,
-  showToast,
-  showConfirmDialog,
-  Overlay,
-  showImagePreview,
-} from 'vant'
+import InvoicePopup from '../InvoicePopup/InvoicePopup.vue'
+import Skeleton from './Skeleton.vue'
 import '@/utils/disableZoom'
 import { selectPhoto, takePhoto } from '@/utils/upload'
 import {
@@ -197,7 +212,16 @@ import {
 } from './const'
 import Cookies from 'js-cookie'
 import { onUnmounted } from 'vue'
+import { api as viewerApi } from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+import { OCR_getMaxZIndex } from '@/utils/common'
+import {
+  CreateLoading,
+  showConfirmDialog,
+  showMessage,
+} from '@/utils/components'
 
+import Loading from '../Loading/index.vue'
 const emit = defineEmits(['edit', 'ok'])
 const $props = defineProps({
   listId: {
@@ -233,7 +257,6 @@ const $props = defineProps({
   },
 })
 const token: any = ref(sessionStorage.getItem('token'))
-const showLoading = ref(false)
 const showPopup = ref(false)
 const list: any = ref<Array<any>>([])
 if ($props.catchList) {
@@ -266,7 +289,6 @@ const getList = async () => {
             // ...Object.assign(data, item),
           }
         })
-        console.log(list.value)
         batchId.value = res.data.batchId
         if (list.value.length <= 0) {
           selectedAll.value = false
@@ -281,24 +303,38 @@ const getList = async () => {
     }
   })
 }
+const CardEditOptions = ref([{ name: '查看/编辑发票' }])
+const activeRow: any = ref({})
+const showCardEdit = ref(false)
+const CardEdit = (val: any) => {
+  if (val.name === '查看/编辑发票') {
+    emit(
+      'edit',
+      {
+        taskId: activeRow.value.taskId,
+        batchId: batchId.value,
+      },
+      activeRow.value,
+      list.value
+    )
+  }
+}
 const clickItem = (row: any) => {
-  console.log(row)
   if (!row.invoiceStatus) {
-    return showToast({
-      type: 'text',
+    return showMessage({
       teleport: Cookies.get('teleport') || null,
       message: '发票无效！',
-      zIndex: 9527,
+      zIndex: OCR_getMaxZIndex() + 1,
     })
   }
   if (row.invoiceStatus !== 'unused') {
-    return showToast({
-      type: 'text',
-      teleport: Cookies.get('teleport') || null,
+    return showMessage({
       message: '发票已被使用！',
-      zIndex: 9527,
     })
   }
+  if (!row.invoiceNum) {
+    return
+  }
   row.selected = !row.selected
 }
 
@@ -306,18 +342,15 @@ const openDetails = (row: any) => {
   // if (!isEdit(row)) {
   //   return
   // }
-  emit(
-    'edit',
-    {
-      taskId: row.taskId,
-      batchId: batchId.value,
-    },
-    row,
-    list.value
-  )
+  showCardEdit.value = true
+  activeRow.value = row
+  return
 }
 const selectStatus = (item: any) => {
   // 未使用&& (验真通过||无需验真|| 手工录入||验真异常) && 发票推断状态错误值为空 && 发票识别任务已完成
+  if (!item.invoiceNum) {
+    return false
+  }
   if (item.invoiceStatus === 'unused') {
     if (item.manualModify) {
       return true
@@ -333,11 +366,8 @@ const selectStatus = (item: any) => {
 const selectedAll: any = ref(false)
 const changeSelectAll = (v: any) => {
   if (selectedAll.value) {
-    showToast({
-      type: 'text',
+    showMessage({
       message: '已选择全部可用发票',
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
   }
   list.value.forEach((item: any) => {
@@ -348,63 +378,65 @@ const changeItemCheckbox = () => {
   const status = list.value
     .filter((item: any) => selectStatus(item))
     .every((item: any) => item.selected)
-  selectedAll.value = status
+  selectedAll.value = status && selectId.value.length > 0
 }
 const deleteSelectItem = () => {
   if (selectId.value.length <= 0) {
-    showToast({
-      type: 'text',
+    showMessage({
       message: '请先选择发票',
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
     return
   }
   showConfirmDialog({
     title: '提醒',
     message: '请确认是否需要移除选中项，移除后不可恢复!',
-    teleport: Cookies.get('teleport') || null,
-    className: 'OCR-Zindex-OCR',
-    overlayClass: 'OCR-Zindex-OCR',
+  }).then(async () => {
+    const idsStr = selectId.value.join(',')
+    let newData: any = {
+      batchId: batchId.value,
+      taskIds: idsStr,
+    }
+    newData = Object.assign(newData, paramsObj.value)
+    var urlencoded = new URLSearchParams()
+    for (const key in newData) {
+      urlencoded.append(key, newData[key])
+    }
+    const res: any = await __deleteInvoice(urlencoded, token.value)
+    if (res.code === 200) {
+      showMessage({
+        type: 'success',
+        message: '移除成功',
+      })
+      getList()
+    }
   })
-    .then(async () => {
-      const idsStr = selectId.value.join(',')
-      let newData: any = {
-        batchId: batchId.value,
-        taskIds: idsStr,
-      }
-      newData = Object.assign(newData, paramsObj.value)
-      var urlencoded = new URLSearchParams()
-      for (const key in newData) {
-        urlencoded.append(key, newData[key])
-      }
-      const res: any = await __deleteInvoice(urlencoded, token.value)
-      if (res.code === 200) {
-        showToast({
-          type: 'success',
-          message: '移除成功',
-          teleport: Cookies.get('teleport') || null,
-          zIndex: 9527,
-        })
-        getList()
-      }
-    })
-    .catch(() => {
-      // on cancel
-    })
 }
 const add = () => {
   showPopup.value = true
 }
 
-const selectImg = async (type: number) => {
-  let fd: FormData
-  if (type === 1) {
-    fd = await selectPhoto($props.multiple)
+const options = ref([
+  {
+    name: '从相册中选择',
+    icon: 'gg-image',
+  },
+  {
+    name: '拍照上传',
+    icon: 'gg-smart-home-wash-machine',
+  },
+])
+const onSelect = async (type: any) => {
+  console.log(type)
+  let files = []
+  if (type.name === '从相册中选择') {
+    files = await selectPhoto($props.multiple)
   } else {
-    fd = await takePhoto()
+    files = await takePhoto()
+  }
+  let fd = new FormData()
+  for (let i = 0; i < files.length; i++) {
+    fd.append('invoiceFiles', files[i])
   }
-
   let newData: any = {
     businessLicense: $props.businessLicense || '',
     taxCode: $props.taxCode || '',
@@ -414,16 +446,15 @@ const selectImg = async (type: number) => {
   for (const key in newData) {
     fd.append(key, newData[key])
   }
-  showLoading.value = true
+  const ld = new CreateLoading()
+  ld.show()
   showPopup.value = false
   try {
     const res: any = await __uploadInvoice(fd)
     if (res.code === 200) {
-      showToast({
+      showMessage({
         type: 'success',
         message: '上传成功',
-        teleport: Cookies.get('teleport') || null,
-        zIndex: 9527,
       })
       setTimeGetList()
     }
@@ -431,7 +462,7 @@ const selectImg = async (type: number) => {
     console.log(error)
     setTimeGetList()
   }
-  showLoading.value = false
+  ld.hide()
 }
 const submitBtn = computed(() => {
   const flag = list.value
@@ -449,24 +480,23 @@ const selectedLengthCount = computed(() => {
   return list.value.filter((item: any) => selectStatus(item)).length
 })
 const openErrImg = (url: any) => {
-  showImagePreview([url])
+  viewerApi({
+    images: [url],
+    options: {
+      zIndex: OCR_getMaxZIndex() + 1,
+    },
+  })
 }
 const submitData = () => {
   if (selectId.value.length <= 0) {
-    showToast({
-      type: 'text',
+    showMessage({
       message: '请先选择发票',
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
     return
   }
   if (!submitBtn.value) {
-    showToast({
-      type: 'text',
+    showMessage({
       message: '发票无效或已被使用，请进行确认',
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
     return
   }
@@ -487,8 +517,8 @@ const submitData = () => {
     (item) => item.invoiceRootType === '专票' || item.invoiceRootType === '普票'
   )
   if (ProhibitSubmissionFlag) {
-    console.log('专票和普票不允许出现异常抬头或异常税号，请取消勾选后继续提交')
     showConfirmDialog({
+      title: '财务要求',
       message: () => {
         return h('div', {
           style: 'color:#EF1725;',
@@ -496,11 +526,7 @@ const submitData = () => {
             '专票和普票不允许出现异常抬头或异常税号，请取消勾选后继续提交',
         })
       },
-      teleport: Cookies.get('teleport') || null,
-      confirmButtonText: '确定',
-      className: 'OCR-Zindex-OCR',
       showCancelButton: false,
-      overlayClass: 'OCR-Zindex-OCR',
     })
     return
   }
@@ -508,11 +534,8 @@ const submitData = () => {
     showConfirmDialog({
       title: '提醒',
       message: '存在异常抬头发票，请确认是否继续提交？',
-      teleport: Cookies.get('teleport') || null,
-      cancelButtonText: '返回修改',
-      confirmButtonText: '继续提交',
-      className: 'OCR-Zindex-OCR',
-      overlayClass: 'OCR-Zindex-OCR',
+      cancelText: '返回修改',
+      confirmText: '继续提交',
     })
       .then(() => {
         emit('ok', selectData, batchId.value)
@@ -553,6 +576,11 @@ onUnmounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.select-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 .disabledColor {
   opacity: 0.6; /* 降低不透明度以表示禁用状态 */
   cursor: not-allowed; /* 鼠标指针样式设置为禁用 */
@@ -561,13 +589,12 @@ onUnmounted(() => {
   padding-bottom: 100px;
   position: relative;
   width: 100%;
-  min-height: 100vh;
+  height: 100%;
   background-color: #f3f4f6;
+  display: flex;
+  flex-direction: column;
   .selectAll {
     background-color: #f3f4f6;
-    position: sticky;
-    top: 0;
-    z-index: 999;
     padding: 12px;
     display: flex;
     justify-content: space-between;
@@ -579,215 +606,214 @@ onUnmounted(() => {
   }
   .card {
     width: 100%;
-    ul {
+    height: inherit;
+    overflow: auto;
+    .li {
+      width: 100%;
+      border-radius: 4px;
+      padding: 0 12px;
       display: flex;
-      flex-direction: column;
-      gap: 12px;
-      .li {
-        width: 100%;
-        border-radius: 4px;
-        padding: 0 12px;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        overflow: hidden;
+      align-items: center;
+      overflow: hidden;
+      margin-bottom: 12px;
+      .item-card {
+        flex: 1;
+        position: relative;
 
-        .item-card {
-          flex: 1;
-          position: relative;
+        background-color: #fff;
+        padding-bottom: 20px;
+        min-width: 100%;
+        .details-btn {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 0 8px 4px;
+          font-size: 14px;
+          color: #333;
+          border-radius: 2px;
+          flex-shrink: 0;
+          text-align: right;
+          padding: 8px 16px 16px 16px;
+        }
+        div.company {
+          background-color: #ff8b26;
+        }
+        div.err {
+          background-color: #d5001c;
+        }
+        .title {
+          color: #fff;
+          display: flex;
+          width: max-content;
+          text-align: center;
+          align-items: center;
+          font-size: 12px;
+          border-radius: 4px 0px 4px 0px;
+          padding: 2px 4px;
+          background-color: #266fe8;
+          margin-bottom: 5px;
+        }
 
-          background-color: #fff;
-          padding-bottom: 20px;
-          min-width: 100%;
-          .details-btn {
-            position: absolute;
-            bottom: 12px;
-            right: 9px;
-            border: 1px solid #dcdee0;
-            padding: 4px 16px;
-            font-size: 14px;
-            color: #333;
-            border-radius: 2px;
-          }
-          div.company {
-            background-color: #ff8b26;
-          }
-          div.err {
-            background-color: #d5001c;
-          }
-          .title {
-            color: #fff;
+        .storeName {
+          padding: 0 12px;
+          .name {
             display: flex;
-            width: max-content;
-            text-align: center;
+            justify-content: space-between;
+            width: 100%;
             align-items: center;
-            font-size: 12px;
-            border-radius: 4px 0px 4px 0px;
-            padding: 2px 4px;
-            background-color: #266fe8;
-            margin-bottom: 5px;
+            .left {
+              font-size: 15px;
+              color: #333333;
+              font-weight: 700;
+            }
+            .right {
+              font-size: 12px;
+              color: #ee0a24;
+            }
           }
-
-          .storeName {
-            padding: 0 12px;
-            .name {
-              display: flex;
-              justify-content: space-between;
-              width: 100%;
-              align-items: center;
-              .left {
-                font-size: 15px;
-                color: #333333;
-                font-weight: 700;
+          .tags {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            margin-top: 8px;
+            margin-bottom: 15px;
+            .manual {
+              background-color: #facd91;
+              color: #c77458;
+            }
+            span {
+              padding: 2px 4px;
+              font-size: 12px;
+              font-weight: 400;
+              border-radius: 2px;
+              &.ok {
+                background-color: rgba(38, 111, 232, 0.1);
+                color: #266fe8;
               }
-              .right {
-                font-size: 12px;
-                color: #ee0a24;
+              &.warning {
+                background-color: rgba(255, 251, 230, 1);
+                color: #ff8f26;
               }
-            }
-            .tags {
-              display: flex;
-              align-items: center;
-              gap: 7px;
-              margin-top: 8px;
-              margin-bottom: 15px;
-              .manual {
-                background-color: #facd91;
-                color: #c77458;
+              &.error {
+                background-color: rgba(255, 242, 240, 1);
+                color: #ff4d4f;
               }
-              span {
-                padding: 2px 4px;
-                font-size: 12px;
-                font-weight: 400;
-                border-radius: 2px;
-                &.ok {
-                  background-color: rgba(38, 111, 232, 0.1);
-                  color: #266fe8;
-                }
-                &.warning {
-                  background-color: rgba(255, 251, 230, 1);
-                  color: #ff8f26;
-                }
-                &.error {
-                  background-color: rgba(255, 242, 240, 1);
-                  color: #ff4d4f;
-                }
-                &.default {
-                  background-color: rgba(153, 153, 153, 0.2);
-                  color: #666666;
-                }
-                &.success {
-                  background-color: #e6ffdd;
-                  color: #2ba500;
+              &.default {
+                background-color: rgba(153, 153, 153, 0.2);
+                color: #666666;
+              }
+              &.success {
+                background-color: #e6ffdd;
+                color: #2ba500;
 
-                  opacity: 0.68;
-                }
+                opacity: 0.68;
               }
             }
-            .InvoiceInfo {
-              display: flex;
-              justify-content: space-between;
-              .leftinfo {
-                .item-info {
-                  display: flex;
-                  align-items: center;
-                  gap: 16px;
-                  margin-bottom: 8px;
-                  &:last-child {
-                    margin-bottom: 0;
+          }
+          .InvoiceInfo {
+            display: flex;
+            justify-content: space-between;
+            .leftinfo {
+              .item-info {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+                margin-bottom: 8px;
+                &:last-child {
+                  margin-bottom: 0;
+                }
+                span {
+                  font-size: 14px;
+                  &.label {
+                    color: #999999;
+                  }
+                  &.value {
+                    color: #333333;
                   }
-                  span {
-                    font-size: 14px;
-                    &.label {
-                      color: #999999;
-                    }
-                    &.value {
-                      color: #333333;
-                    }
-                    &.price {
-                      color: #266fe8;
-                      font-weight: 700;
-                    }
+                  &.price {
+                    color: #266fe8;
+                    font-weight: 700;
                   }
                 }
               }
-              .rightCheckbox {
-                height: max-content;
-              }
+            }
+            .rightCheckbox {
+              height: max-content;
             }
           }
         }
+      }
 
-        .err-card {
-          background-color: #fff;
-          width: 100%;
-          display: flex;
-          gap: 9px;
-          .left-img {
-            width: 113px;
-            height: 79px;
-            margin: 10px 0;
-            margin-left: 10px;
-            flex-shrink: 0;
-            img {
-              width: 100%;
-              height: 100%;
-            }
+      .err-card {
+        background-color: #fff;
+        width: 100%;
+        display: flex;
+        gap: 9px;
+        .left-img {
+          width: 113px;
+          height: 79px;
+          margin: 10px 0;
+          margin-left: 10px;
+          flex-shrink: 0;
+          img {
+            width: 100%;
+            height: 100%;
           }
-          .right-errText {
-            .title {
-              color: #fff;
-              display: flex;
-              text-align: right;
-              align-items: center;
-              justify-content: flex-end;
-              margin-bottom: 5px;
-              span {
-                background-color: rgba(238, 10, 36, 0.1);
-                color: #ee0a24;
-                padding: 2px 4px;
-                font-size: 12px;
-                border-radius: 0 4px 0 4px;
-              }
+        }
+        .right-errText {
+          .title {
+            color: #fff;
+            display: flex;
+            text-align: right;
+            align-items: center;
+            justify-content: flex-end;
+            margin-bottom: 5px;
+            span {
+              background-color: rgba(238, 10, 36, 0.1);
+              color: #ee0a24;
+              padding: 2px 4px;
+              font-size: 12px;
+              border-radius: 0 4px 0 4px;
             }
-            .content {
+          }
+          .content {
+            display: flex;
+            padding-right: 12px;
+            align-items: center;
+            font-size: 12px;
+            gap: 18px;
+            .recognitionResult {
+              gap: 5px;
               display: flex;
-              padding-right: 12px;
-              align-items: center;
-              font-size: 12px;
-              gap: 18px;
-              .recognitionResult {
-                gap: 5px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                p {
-                  color: #666666;
-                }
+              flex-direction: column;
+              justify-content: space-between;
+              p {
+                color: #666666;
+                font-size: 14px;
               }
             }
           }
         }
       }
-      .loading {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 100;
-      }
+    }
+    .loading {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 100;
     }
   }
 
   .btn-form {
-    z-index: 999;
+    // z-index: 999;
+    z-index: 99;
     position: fixed;
     bottom: 0;
     left: 0;
     background-color: #fff;
     height: 90px;
     width: 100%;
-
     .operate {
       width: 100%;
       height: 100%;
@@ -857,7 +883,7 @@ onUnmounted(() => {
 }
 
 /* 重置复选框的默认样式 */
-.checkbox {
+.inv-checkbox {
   appearance: none; /* 去除默认外观 */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -868,12 +894,14 @@ onUnmounted(() => {
   border-radius: 50%; /* 使复选框成为圆形 */
   outline: none; /* 去除点击时的边框 */
   cursor: pointer;
+  position: relative;
 }
 
 /* 根据复选框的选中状态设置颜色 */
-.checkbox:checked {
+.inv-checkbox:checked {
   width: 22px;
   height: 22px;
+  border-radius: 50%; /* 使复选框成为圆形 */
   background: url('@/assets/xuanzhong@2x.png') no-repeat center;
   background-size: 110%;
   border: none;