图片识别添加取消按钮

src/api/index.js

@@ -678,11 +678,12 @@ export function getChainsByDeptCode(query) {
 }
 // 照片上传
 //门店
-export function uploadImagev(data) {
+export function uploadImagev(data, signal) {
   return request({
     url: '/mobile/store/uploadImage',
     method: 'post',
     data: data,
+    signal: signal,
   });
 }
 //任务

src/components/imageAIVerifyErr.vue

@@ -77,7 +77,7 @@
         </div>
         <div class="uploadBtnAIVerify" v-if="shopSignChange == 1">
           <div class="confirmUploadAIVerify" @click="uploadImg">重新拍照</div>
-          <div class="changeImageAIVerify" @click="confirmUpload('isUpdate')">更换门店照</div>
+          <div class="changeImageAIVerify" @click="confirmUpload('isUpdate')">更新门店照</div>
         </div>
       </div>
     </el-dialog>
@@ -138,39 +138,49 @@ export default {
         this.source == 'visit'
           ? this.imageAIVerifyData.npkpiData
           : this.imageAIVerifyData[0].npkpiData;
-      // 照片和历史照片是否一致
-      this.shopSignChange = this.npkpiData.shopSignChange;
       this.shopSignMatchList = this.npkpiData.shopSignMatchList;
-      if (this.npkpiData.shopSignChange == 1) {
-        this.contentMessage = '与历史照片不一致，请确认店招是否更换?';
-        return;
-      }
+      // 先判断照片作弊情况，然后是否合格，然后是否和历史照片一致
+      // 作弊和不合格记录识别次数，超过两次弹框提醒
       // 照片是否合格
       if (this.npkpiData.checkInfo) {
-        // 照片合格并且没有作弊
-        if (
-          this.npkpiData.checkInfo.qualifiedState == 1 &&
-          this.npkpiData.checkInfo.cheatState == 0
-        ) {
-          // this.close();
-          // this.$emit('normalFlow', { data: this.imageAIVerifyData });
-          // recognizeType 识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别)
-          let isUpdate = this.npkpiData.recognizeType == 1 ? 'isUpdate' : null;
-          this.confirmUpload(isUpdate);
-        } else {
-          // 失败次数增加超过三次特殊处理
+        // 作弊
+        if (this.npkpiData.checkInfo.cheatState == 1) {
+          // 增加识别次数
+          store.dispatch('setShotsNum', this.shotsNum + 1);
+          // 作弊原因
+          this.contentMessage = this.contentMessage + this.npkpiData.checkInfo.cheatType;
+          return;
+        }
+        // 不合格
+        if (this.npkpiData.checkInfo.qualifiedState == 0) {
+          // 增加识别次数
           store.dispatch('setShotsNum', this.shotsNum + 1);
-          // 不合格
-          if (this.npkpiData.checkInfo.qualifiedState == 0) {
-            this.contentMessage = this.contentMessage + this.npkpiData.checkInfo.unqualifiedReason;
-          }
-          // 作弊
-          if (this.npkpiData.checkInfo.cheatState == 1) {
-            this.contentMessage = this.contentMessage + this.npkpiData.checkInfo.cheatType;
-          }
+          // 不合格原因
+          this.contentMessage = this.contentMessage + this.npkpiData.checkInfo.unqualifiedReason;
+          return;
+        }
+        // 识别次数大于等于3先确认是否仍要上传，仍要上传在校验是否和历史照片一致
+        if (this.shotsNum >= 3) {
+          return;
+        } else {
+          // 照片和历史照片是否一致
+          this.comparisonImage();
         }
       }
     },
+    // 照片和历史照片是否一致
+    comparisonImage() {
+      this.shopSignChange = this.npkpiData.shopSignChange;
+      if (this.npkpiData.shopSignChange == 1) {
+        this.contentMessage = '与历史照片不一致，请确认店招是否更换?';
+        return false;
+      } else {
+        // 照片合格并且没有作弊
+        // recognizeType 识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别)
+        let isUpdate = this.npkpiData.recognizeType == 1 ? 'isUpdate' : null;
+        this.confirmUpload(isUpdate);
+      }
+    },
     // 重新拍照
     uploadImg() {
       this.$emit('close');
@@ -179,11 +189,15 @@ export default {
     // 照片是否入库，1.照片识别三次不通过仍要上传，2.照片识别通过
     // isUpdate:是否更新店招照片，只有门店店招需要更新
     confirmUpload(isUpdate) {
-      this.$emit('close');
-      this.$emit('confirmUpload', {
-        data: this.imageAIVerifyData,
-        isUpdate: isUpdate ? 'true' : null,
-      });
+      if (!isUpdate) {
+        this.comparisonImage();
+      } else {
+        this.$emit('close');
+        this.$emit('confirmUpload', {
+          data: this.imageAIVerifyData,
+          isUpdate: isUpdate ? 'true' : null,
+        });
+      }
     },
     close() {
       this.$emit('close');

src/components/uploadImgVStore.vue

@@ -23,6 +23,7 @@
         :percentage="percentage"
         :show-text="true"
         :format="format"></el-progress>
+      <!-- <div class="progressClose" @click="progressClose">取消</div> -->
     </div>
     <imageAIVerifyErr
       v-if="imageAIVerifyFlag"
@@ -95,6 +96,7 @@ export default {
       timeFlag: null,
       imageAIVerifyFlag: false,
       imageAIVerifyData: null, //图匠校验返回的数据
+      controller: null, //取消请求状态
     };
   },
   watch: {
@@ -165,14 +167,16 @@ export default {
         locationRemark: localStorage.getItem('locationRemark'),
         deptName: localStorage.getItem('deptName'),
       };
+      this.controller = null;
       // 需要图匠校验的添加参数和loading
       if (this.photoIdentifyType) {
         form.photoIdentifyType = this.photoIdentifyType;
         this.progress();
+        this.controller = new AbortController(); //取消请求
       } else {
         this.toastLoading(0, '上传中...', true);
       }
-      uploadImagev(form)
+      uploadImagev(form, this.controller ? this.controller.signal : null)
         .then((res) => {
           this.toastLoading().clear();
           if (res.code == -1) {
@@ -196,6 +200,10 @@ export default {
           }
         })
         .catch(() => {
+          if (error.message === 'canceled') {
+            this.$toast('取消上传');
+            console.log('请求被取消:', error.message);
+          }
           this.resetProgress();
         });
     },
@@ -246,6 +254,10 @@ export default {
       this.progressFlag = false;
       this.percentage = 0;
     },
+    // 取消图片上传
+    progressClose() {
+      this.controller.abort();
+    },
     confirmUpload(res) {
       this.normalFlow(res);
     },
@@ -322,8 +334,18 @@ export default {
   justify-content: center;
   align-items: center;
   z-index: 99999999;
-  .el-progress__text {
-    white-space: pre-wrap;
+  display: flex;
+  flex-direction: column;
+  .progressClose {
+    width: 70px;
+    text-align: center;
+    background: #67c23a;
+    color: #fff;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 5px;
+    margin-top: 5px;
+    font-size: 12px;
   }
 }
 </style>