图像识别白名单拜访提醒

src/components/imageWhiteStore.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="imageAIVerifyErr">
+    <el-dialog
+      title="图像识别结果"
+      :visible.sync="vanPopup"
+      width="80%"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      @close="close"
+      custom-class="AIVerifyErrdialog">
+      <div class="AIVerifyErrMask">
+        <div class="errorImg">
+          <img
+            v-if="imageWhiteStoreData.data.url"
+            :src="imageWhiteStoreData.data.url"
+            fit="contain"
+            @click="previewsImg(imageWhiteStoreData.data.url)" />
+          <img v-else :src="imageEmpty" width="100%" height="300px" />
+        </div>
+        <div class="AIVerify">
+          <span>{{ imageWhiteStoreData.data.whiteMsg || '' }}</span>
+        </div>
+        <div class="uploadBtnAIVerify" :style="{ 'justify-content': 'center' }">
+          <div class="confirmUploadAIVerify" @click="normalFlow">确认</div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ImagePreview } from 'vant';
+import imageEmpty from '@/assets/imageEmpty.png';
+export default {
+  props: {
+    imageWhiteStoreFlag: {
+      type: Boolean,
+      default: false,
+    },
+    imageWhiteStoreData: {
+      type: Object,
+    },
+  },
+  watch: {
+    imageAIVerifyFlag: {
+      handler(val) {
+        console.log('imageAIVerifyFlag=' + val);
+        if (val) this.initData();
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      imageEmpty: imageEmpty,
+      contentMessage: '', //提示内容
+      vanPopup: true,
+      url: '', //	本次图片路径
+    };
+  },
+  methods: {
+    initData() {},
+    normalFlow() {
+      this.$emit('close');
+      this.$emit('normalFlow', this.imageWhiteStoreData);
+    },
+    close() {
+      this.$emit('close');
+    },
+    previewsImg(url) {
+      ImagePreview({
+        images: [url],
+        className: 'AIImageItem',
+        getContainer: 'el-dialog__wrapper',
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-dialog__wrapper {
+  z-index: 3333 !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5) !important;
+  .el-dialog__body {
+    padding: 0px !important;
+  }
+  .el-dialog__header {
+    text-align: center;
+  }
+  .AIVerifyErrdialog {
+    width: vw(690) !important;
+    margin-top: 1vh !important;
+    border-radius: 8px !important;
+    font-size: vw(32) !important;
+    .el-dialog__headerbtn {
+      width: vw(44);
+      height: vw(44);
+      background-color: #e1e1e1;
+      border-radius: 50%;
+      margin-top: -3px;
+    }
+  }
+  .AIVerifyErrMask {
+    width: 100%;
+    padding: vw(30) vw(30) 0 vw(30);
+    overflow: hidden;
+    /* min-height: 180px; */
+    .errorImg {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: vw(303);
+      img {
+        width: vw(235);
+        height: vw(303);
+        border-radius: vw(10);
+      }
+    }
+    .AIVerify {
+      font-size: vw(32);
+      margin-top: vw(45);
+      display: flex;
+      justify-content: center;
+      span {
+        color: #9e0202;
+        display: block;
+        max-width: 70%;
+      }
+    }
+  }
+  .van-popup {
+    width: 90%;
+    padding: 8px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .van-f-red-AIVerify {
+    color: red;
+    width: 8px;
+    display: inline-block;
+    line-height: 26px;
+  }
+  .photoAIVerify {
+    /*margin-top: 9px;*/
+    float: right;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    padding: 5px;
+  }
+  .uploadBtnAIVerify {
+    display: flex;
+    align-items: center;
+    margin: vw(30) 0;
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: vw(28);
+      color: #fff;
+      border-radius: 10px;
+      /* margin: 0 6px; */
+      width: vw(298);
+      height: vw(68);
+      background-blend-mode: normal, normal;
+    }
+    .confirmUploadAIVerify {
+      background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
+        linear-gradient(#aed0f9, #aed0f9);
+      box-shadow: 0px 3px 6px 0px rgba(183, 30, 14, 0.35);
+      margin-right: 6px;
+    }
+    .changeImageAIVerify {
+      background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
+        linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
+      margin-left: 6px;
+    }
+    .stillUploadAIVerify {
+      background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
+        linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
+      margin-left: 6px;
+    }
+  }
+}
+.van-overlay {
+  /* z-index: 3334 !important; */
+}
+.van-image-preview {
+  z-index: 3335 !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+</style>

src/components/uploadVNormal.vue

@@ -30,12 +30,21 @@
       :source="'visit'"
       @normalFlow="normalFlow"
       @close="close"></imageAIVerifyErr>
+    <!-- 图像识别白名单弹框提示 -->
+    <imageWhiteStore
+      v-if="imageWhiteStoreFlag"
+      :imageWhiteStoreFlag="imageWhiteStoreFlag"
+      :imageWhiteStoreData="imageWhiteStoreData"
+      @normalFlow="normalFlow"
+      @close="close">
+    </imageWhiteStore>
   </div>
 </template>
 
 <script>
 import { addstorePhoto, addVisitsPosition, addPhotoToDB } from '@/api/index';
 import imageAIVerifyErr from './imageAIVerifyErr';
+import imageWhiteStore from './imageWhiteStore';
 import H5Camera from '@/components/H5Camera';
 import axios from 'axios';
 import uploadAliOss from '@/utils/uploadAliOss';
@@ -44,7 +53,7 @@ import { mapState } from 'vuex';
 
 export default {
   name: 'uploadImg',
-  components: { imageAIVerifyErr, H5Camera },
+  components: { imageAIVerifyErr, H5Camera, imageWhiteStore },
   props: {
     uploadid: {
       type: String,
@@ -141,6 +150,8 @@ export default {
       addressesRemark: '', //当前位置信息
       controller: null, //取消请求状态
       fileUrl: '',
+      imageWhiteStoreData: null,
+      imageWhiteStoreFlag: false,
     };
   },
   methods: {
@@ -389,7 +400,13 @@ export default {
           this.imageAIVerifyData = res.data;
         } else {
           // 正常流程
-          this.normalFlow(res);
+          // 图像识别白名单用户弹出框提示
+          if (res.data.whiteStore) {
+            this.imageWhiteStoreFlag = true;
+            this.imageWhiteStoreData = res;
+          } else {
+            this.normalFlow(res);
+          }
         }
       } else {
         this.resetProgress();
@@ -475,6 +492,7 @@ export default {
     },
     close() {
       this.imageAIVerifyFlag = false;
+      this.imageWhiteStoreFlag = false;
     },
     requestTimeOut(res) {
       this.resetProgress();