图像识别页面优化

src/components/imageAIVerifyErr copy.vue

@@ -0,0 +1,429 @@
+<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="contentAIVerify">
+          <!-- <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
+            <div class="labelAIVerify"><span class="van-f-red-AIVerify">*</span>重新拍照上传</div>
+            <div class="iconAIVerify">
+              <van-icon class="photoAIVerify" name="photograph" size="22px" color="#969696" />
+            </div>
+          </div> -->
+          <div class="errorImg" v-if="shopSignChange == 0">
+            <img
+              v-if="imageAIVerifyData.url"
+              :src="imageAIVerifyData.url"
+              width="100%"
+              height="200px"
+              @click="previewsImg(imageAIVerifyData.url)" />
+            <img v-else :src="imageEmpty" width="100%" height="200px" />
+          </div>
+          <div class="AIVerify">
+            图像识别结果：<span style="color: red">{{ contentMessage }}</span>
+          </div>
+        </div>
+        <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
+        <template v-if="shopSignChange == 0">
+          <template v-if="shotsNum >= 3">
+            <!-- 拜访店招显示 -->
+            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
+              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
+            </div>
+            <div class="feedbackMessage">
+              <div class="label">反馈图像识别不正确:</div>
+              <div class="value">
+                <van-field
+                  v-model="feedbackMessage"
+                  rows="1"
+                  autosize
+                  type="textarea"
+                  placeholder="请输入反馈意见" />
+              </div>
+            </div>
+          </template>
+          <div class="uploadBtnAIVerify">
+            <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
+            <div v-if="shotsNum >= 3" class="stillUploadAIVerify" @click="confirmUpload">
+              仍要上传
+            </div>
+          </div>
+        </template>
+        <template v-if="shopSignChange == 1">
+          <div class="historyImageAIVerify">
+            <!-- 有门店身份证时 只显示门店身份证和本地拜访照 -->
+            <template v-if="imageAIVerifyData.storeIDCardUrl">
+              <div class="storeIDCardUrl imageItemAIVerify">
+                <img
+                  :src="imageAIVerifyData.storeIDCardUrl"
+                  width="100px"
+                  height="100px"
+                  @click="previewsImg(imageAIVerifyData.storeIDCardUrl)" />
+                <span>门店标准店招</span>
+              </div>
+            </template>
+            <template v-else>
+              <div class="initImage imageItemAIVerify">
+                <img
+                  v-if="imageAIVerifyData.createStoreUrl"
+                  :src="imageAIVerifyData.createStoreUrl"
+                  width="100px"
+                  height="100px"
+                  @click="previewsImg(imageAIVerifyData.createStoreUrl)" />
+                <img v-else :src="imageEmpty" width="100px" height="100px" />
+                <span>建店时门店照</span>
+              </div>
+              <div class="newestImage imageItemAIVerify">
+                <img
+                  v-if="imageAIVerifyData.lastVisitUrl"
+                  :src="imageAIVerifyData.lastVisitUrl"
+                  width="100px"
+                  height="100px"
+                  @click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
+                <img v-else :src="imageEmpty" width="100px" height="100px" />
+                <span>上次拜访店招</span>
+              </div>
+            </template>
+            <div class="presentImage imageItemAIVerify">
+              <img
+                v-if="imageAIVerifyData.url"
+                :src="imageAIVerifyData.url"
+                width="100px"
+                height="100px"
+                @click="previewsImg(imageAIVerifyData.url)" />
+              <img v-else :src="imageEmpty" width="100px" height="100px" />
+              <span>本次拜访店招</span>
+            </div>
+          </div>
+          <div class="tipsRemarkAIVerify">
+            <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
+            <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</div>
+          </div>
+          <div class="feedbackMessage">
+            <div class="label">反馈图像识别不正确:</div>
+            <div class="value">
+              <van-field
+                v-model="feedbackMessage"
+                rows="2"
+                autosize
+                type="textarea"
+                placeholder="请输入反馈意见" />
+            </div>
+          </div>
+          <div class="uploadBtnAIVerify">
+            <div class="confirmUploadAIVerify" @click="uploadImg(true)">重新拍照</div>
+            <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
+          </div>
+        </template>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ImagePreview } from 'vant';
+import store from '@/store';
+import { mapState } from 'vuex';
+import imageEmpty from '@/assets/imageEmpty.png';
+export default {
+  props: {
+    imageAIVerifyFlag: {
+      type: Boolean,
+      default: false,
+    },
+    imageAIVerifyData: {
+      type: [Array, Object],
+    },
+    source: {
+      // 新建店还是门店拜访 visit/newCreated
+      type: String,
+    },
+  },
+  computed: {
+    ...mapState({
+      shotsNum: (state) => state.otheStore.shotsNum,
+    }),
+  },
+  watch: {
+    imageAIVerifyFlag: {
+      handler(val) {
+        console.log('imageAIVerifyFlag=' + val);
+        if (val) this.initData();
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      imageEmpty: imageEmpty,
+      contentMessage: '', //提示内容
+      vanPopup: true,
+      shopSignChange: 0,
+      npkpiData: null,
+      feedbackMessage: '', //反馈图像识别不正确原因
+    };
+  },
+  methods: {
+    initData() {
+      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
+      // shopSignChange  是否更换店招(0:未更换，1:更换) 1不一致，0一致
+      // checkInfo 图片检查结果
+      // cheatState 是否作弊(0:未作弊，1:作弊)
+      // cheatType	作弊类型
+      // qualifiedState 是否合格(0:不合格，1:合格)
+      // unqualifiedReason	不合格原因
+      this.feedbackMessage = '';
+      this.shopSignChange = 0;
+      this.npkpiData =
+        this.source == 'visit'
+          ? this.imageAIVerifyData.npkpiData
+          : this.imageAIVerifyData[0].npkpiData;
+      this.shopSignMatchList = this.npkpiData.shopSignMatchList;
+      // 先判断照片作弊情况，然后是否合格，然后是否和历史照片一致
+      // 作弊和不合格记录识别次数，超过两次弹框提醒
+      if (this.npkpiData.checkInfo) {
+        // 作弊
+        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);
+          // 不合格原因
+          this.contentMessage = this.contentMessage + this.npkpiData.checkInfo.unqualifiedReason;
+          return;
+        }
+        // recognizeType 识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别)
+        if (this.npkpiData.recognizeType == 1) {
+          this.comparisonImage();
+        } else {
+          this.confirmUpload();
+        }
+      }
+    },
+    // 照片和历史照片是否一致
+    comparisonImage() {
+      this.shopSignChange = this.npkpiData.shopSignChange;
+      if (this.npkpiData.shopSignChange == 1) {
+        this.contentMessage = '与历史照片不一致，请确认店招是否更换?';
+        return false;
+      } else {
+        this.confirmUpDataImage();
+      }
+    },
+    // 重新拍照
+    uploadImg(flag) {
+      // flag: true,识别与历史照片不一致状态下，点击重新拍照，照片识别次数需要加1
+      if (flag) {
+        // 增加识别次数
+        store.dispatch('setShotsNum', this.shotsNum + 1);
+      }
+      this.$emit('close');
+      this.$emit('uploadImgFun');
+    },
+    // 照片是否入库，1.照片识别三次不通过仍要上传，2.照片识别通过
+    // isUpdate:是否更新店招照片，只有门店店招需要更新
+    confirmUpload() {
+      // 拜访店招 不合格或作弊三次先提示是否仍要上传，确认后在判断是否与历史照片一致
+      if (this.npkpiData.recognizeType == 1 && this.shotsNum >= 3) {
+        this.comparisonImage();
+      } else {
+        this.$emit('close');
+        this.$emit('confirmUpload', {
+          data: this.imageAIVerifyData,
+          feedbackMessage: this.feedbackMessage,
+        });
+      }
+    },
+    confirmUpDataImage() {
+      this.$emit('close');
+      this.$emit('confirmUpload', {
+        data: this.imageAIVerifyData,
+        isUpdate: 'true',
+        feedbackMessage: this.feedbackMessage,
+      });
+    },
+    close() {
+      this.$emit('close');
+    },
+    openTips() {
+      this.$dialog
+        .confirm({
+          title: '提示',
+          message: '不规范的照片上传后会更换本店标准店招，未来每次拜访时校验。',
+          showCancelButton: false,
+          className: 'openTips',
+          overlayClass: 'openTipsMask',
+        })
+        .then(() => {});
+    },
+    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: 6px !important;
+  }
+  .el-dialog__header {
+    text-align: center;
+  }
+  .AIVerifyErrdialog {
+    width: 95% !important;
+    margin-top: 1vh !important;
+    border-radius: 8px !important;
+  }
+  .AIVerifyErrMask {
+    width: 100%;
+    padding: 8px;
+    overflow: hidden;
+    /* min-height: 180px; */
+  }
+  .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;
+  }
+  .contentAIVerify {
+    .AIVerify {
+      padding: 6px 0;
+      font-size: 14px;
+      /* color: red; */
+      /* text-align: center; */
+      /* border-top: 1px solid #cfcfcf; */
+    }
+    .uploadImgAIVerify {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 0;
+      border-top: 1px solid #cfcfcf;
+      .labelAIVerify {
+        font-size: 14px;
+      }
+    }
+    .errorImg {
+      width: 100%;
+    }
+  }
+  .tipsAIVerify {
+    border-top: 1px solid #cfcfcf;
+    padding: 5px 0;
+    font-size: 14px;
+    color: red;
+    /* white-space: nowrap; */
+  }
+  .uploadBtnAIVerify {
+    /* border-top: 1px solid #cfcfcf; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+    div {
+      /* width: 40%; */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      color: #fff;
+      border-radius: 10px;
+      margin: 0 6px;
+      flex: 1;
+    }
+    .confirmUploadAIVerify {
+      background-color: #0057ba;
+      padding: 8px 0;
+    }
+    .changeImageAIVerify {
+      background-color: #81b337;
+      padding: 8px 0;
+    }
+    .stillUploadAIVerify {
+      border: 1px solid #0057ba;
+      color: #0057ba;
+      padding: 8px 0;
+    }
+  }
+  .historyImageAIVerify {
+    display: flex;
+    justify-content: space-around;
+    padding: 5px 0;
+    .imageItemAIVerify {
+      width: 30%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      span {
+        font-size: 12px;
+      }
+    }
+  }
+  .tipsRemarkAIVerify {
+    border-top: 1px solid #cfcfcf;
+    div {
+      font-size: 12px;
+      padding: 3px 0;
+    }
+  }
+  .feedbackMessage {
+    border-top: 1px solid #cfcfcf;
+    padding: 5px 0;
+    /* width: 100%; */
+    .van-field__body {
+      border: 1px solid #ccc;
+      padding-left: 10px;
+    }
+  }
+}
+.openTipsMask,
+.openTips {
+  z-index: 3334 !important;
+}
+.van-overlay {
+  /* z-index: 3334 !important; */
+}
+.van-image-preview {
+  z-index: 3335 !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+</style>

src/components/imageAIVerifyErr.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="imageAIVerifyErr">
     <el-dialog
-      title=""
+      title="图像识别结果"
       :visible.sync="vanPopup"
       width="80%"
       :append-to-body="true"
@@ -10,47 +10,36 @@
       custom-class="AIVerifyErrdialog">
       <div class="AIVerifyErrMask">
         <div class="contentAIVerify">
-          <!-- <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
+          <div class="AIVerify">{{ contentMessage }}</div>
+          <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
             <div class="labelAIVerify"><span class="van-f-red-AIVerify">*</span>重新拍照上传</div>
             <div class="iconAIVerify">
               <van-icon class="photoAIVerify" name="photograph" size="22px" color="#969696" />
             </div>
-          </div> -->
-          <div class="errorImg" v-if="shopSignChange == 0">
-            <img
-              v-if="imageAIVerifyData.url"
-              :src="imageAIVerifyData.url"
-              width="100%"
-              height="200px"
-              @click="previewsImg(imageAIVerifyData.url)" />
-            <img v-else :src="imageEmpty" width="100%" height="200px" />
-          </div>
-          <div class="AIVerify">
-            图像识别结果：<span style="color: red">{{ contentMessage }}</span>
           </div>
         </div>
         <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
-        <template v-if="shopSignChange == 0">
-          <template v-if="shotsNum >= 3">
-            <!-- 拜访店招显示 -->
-            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
-              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
-            </div>
-            <div class="feedbackMessage">
-              <div class="label">反馈图像识别不正确:</div>
-              <div class="value">
-                <van-field
-                  v-model="feedbackMessage"
-                  rows="1"
-                  autosize
-                  type="textarea"
-                  placeholder="请输入反馈意见" />
-              </div>
+        <template v-if="shopSignChange == 0 && shotsNum >= 3">
+          <!-- 拜访店招显示 -->
+          <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
+            <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
+          </div>
+          <div class="feedbackMessage">
+            <div class="label">反馈图像识别不正确:</div>
+            <div class="value">
+              <van-field
+                v-model="feedbackMessage"
+                rows="1"
+                autosize
+                type="textarea"
+                placeholder="请输入反馈意见" />
             </div>
-          </template>
+          </div>
           <div class="uploadBtnAIVerify">
-            <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
-            <div v-if="shotsNum >= 3" class="stillUploadAIVerify" @click="confirmUpload">
+            <div
+              class="confirmUploadAIVerify"
+              @click="confirmUpload"
+              style="background-color: #0057ba">
               仍要上传
             </div>
           </div>
@@ -97,7 +86,6 @@
                 width="100px"
                 height="100px"
                 @click="previewsImg(imageAIVerifyData.url)" />
-              <img v-else :src="imageEmpty" width="100px" height="100px" />
               <span>本次拜访店招</span>
             </div>
           </div>
@@ -118,7 +106,12 @@
           </div>
           <div class="uploadBtnAIVerify">
             <div class="confirmUploadAIVerify" @click="uploadImg(true)">重新拍照</div>
-            <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
+            <div
+              class="changeImageAIVerify"
+              @click="confirmUpDataImage()"
+              style="background-color: #0057ba">
+              更新门店照
+            </div>
           </div>
         </template>
       </div>
@@ -327,8 +320,8 @@ export default {
     .AIVerify {
       padding: 6px 0;
       font-size: 14px;
-      /* color: red; */
-      /* text-align: center; */
+      color: red;
+      text-align: center;
       /* border-top: 1px solid #cfcfcf; */
     }
     .uploadImgAIVerify {
@@ -341,9 +334,6 @@ export default {
         font-size: 14px;
       }
     }
-    .errorImg {
-      width: 100%;
-    }
   }
   .tipsAIVerify {
     border-top: 1px solid #cfcfcf;
@@ -359,7 +349,7 @@ export default {
     justify-content: center;
     padding: 8px 0;
     div {
-      /* width: 40%; */
+      width: 40%;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -367,21 +357,15 @@ export default {
       color: #fff;
       border-radius: 10px;
       margin: 0 6px;
-      flex: 1;
     }
     .confirmUploadAIVerify {
-      background-color: #0057ba;
+      background-color: red;
       padding: 8px 0;
     }
     .changeImageAIVerify {
       background-color: #81b337;
       padding: 8px 0;
     }
-    .stillUploadAIVerify {
-      border: 1px solid #0057ba;
-      color: #0057ba;
-      padding: 8px 0;
-    }
   }
   .historyImageAIVerify {
     display: flex;