Procházet zdrojové kódy

新增 电子税务局提升账号安全等级操作指引 功能

yuanmingze před 1 měsícem
rodič
revize
d7d3998aa2

binární
src/assets/images/securityLevelGuide.png


+ 2 - 2
src/services/modules/faceRecognition/index.ts

@@ -1,7 +1,7 @@
 import http from '../../index'
 
 import type { PushRecordIdRequest } from '../invoiceInformation/type.d'
-import type { GetFaceAuthInfoRequest } from './type.d'
+import type { GetFaceAuthInfoRequest, GetFaceAuthInfoReqsponse } from './type.d'
 export const getFaceAuthInfoApi = (data: GetFaceAuthInfoRequest) => {
   return http.post({
     url: '/admin/invoice-order/get-face-auth-info',
@@ -10,7 +10,7 @@ export const getFaceAuthInfoApi = (data: GetFaceAuthInfoRequest) => {
 }
 
 export const getFaceAuthResultApi = (data: PushRecordIdRequest) => {
-  return http.post({
+  return http.post<GetFaceAuthInfoReqsponse>({
     url: '/admin/invoice-order/get-face-auth-result',
     data,
   })

+ 7 - 0
src/services/modules/faceRecognition/type.d.ts

@@ -2,3 +2,10 @@ export interface GetFaceAuthInfoRequest {
   pushRecordId: string
   callbackUrl: string
 }
+
+export interface GetFaceAuthInfoReqsponse {
+  lowCertLevel: boolean
+  msg: string
+  rzzt: string
+  success: boolean
+}

+ 83 - 1
src/views/pedding-face-recognition/index.vue

@@ -11,13 +11,47 @@
         </van-loading>
       </div>
     </div>
+
+    <!-- 低证等级弹窗 -->
+    <van-dialog
+      v-model:show="lowCertLevelDialog"
+      title="税局账号安全等级升级提醒"
+      confirmButtonText="我知道啦"
+      @confirm="lowCertLevelConfirm"
+    >
+      <div class="dialog-content">
+        <div class="dialog-text">
+          抱歉,您在电子税务局的账号安全等级较低,无法确认开票申请,请登录至电子税务局提升账号安全等级。
+        </div>
+        <div class="dialog-btn" @click="handleSecurityLevelGuideClick">
+          点击了解提升安全等级操作指引
+        </div>
+      </div>
+    </van-dialog>
+
+    <!-- 安全等级操作指引 -->
+    <van-dialog
+      v-model:show="securityLevelGuideDialog"
+      width="90%"
+      :closeOnClickOverlay="true"
+      className="security-level-guide-dialog"
+      @confirm="securityLevelGuideDialog = false"
+    >
+      <div class="security-level-guide-body">
+        <img
+          src="@/assets/images/securityLevelGuide.png"
+          alt="安全等级升级指引"
+          class="guide-image"
+        />
+      </div>
+    </van-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getFaceAuthResultApi } from '@/services/modules/faceRecognition'
 import type { PushRecordIdRequest } from '@/services/modules/invoiceInformation/type.d.ts'
-import { reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useUserStore } from '@/stores/modules/user'
 import { showToast } from 'vant'
 import { useInvoice } from '@/hooks/useInvoice'
@@ -36,10 +70,16 @@ const params = reactive<PushRecordIdRequest>({
   pushRecordId: userStore.pushRecordId,
 })
 
+const lowCertLevelDialog = ref(false)
 // 获取认证结果
 const getFaceAuthResult = async () => {
   try {
     const res = await getFaceAuthResultApi(params)
+    if (res.code === 0 && res.data.lowCertLevel) {
+      lowCertLevelDialog.value = true
+      return
+    }
+
     if (res.code === 0 && res.data?.success) {
       const rzzt = res.data.rzzt
       // 已认证或无需认证提交跳转
@@ -62,6 +102,15 @@ const getFaceAuthResult = async () => {
   }, 1800)
 }
 
+const lowCertLevelConfirm = () => {
+  router.back()
+}
+
+const securityLevelGuideDialog = ref(false)
+const handleSecurityLevelGuideClick = () => {
+  securityLevelGuideDialog.value = true
+}
+
 onMounted(() => {
   getFaceAuthResult()
 })
@@ -97,4 +146,37 @@ html {
   justify-content: center;
   padding-top: 14vw; /* 预留固定导航空间 */
 }
+.dialog-content {
+  padding: 12px;
+  .dialog-text {
+    font-size: 14px;
+    line-height: 22px;
+    color: #333;
+
+    font-weight: 400;
+  }
+  .dialog-btn {
+    text-align: center;
+    font-weight: 600;
+    margin: 18px 0;
+    color: #0072f8;
+  }
+}
+:deep(.security-level-guide-dialog) {
+  top: 50%;
+  height: 90vh;
+
+  .security-level-guide-body {
+    height: 80vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px;
+
+    .guide-image {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+}
 </style>