storevisit-ui-mobile/src/components/imageAIVerifyErr.vue

<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" v-if="npkpiData">
        <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
        <template v-if="shopSignChange == 0">
          <div class="errorImg">
            <img v-if="url" :src="url" height="200px" @click="previewsImg(url)" />
            <img v-else :src="imageEmpty" width="100%" height="200px" />
          </div>
          <div class="AIVerify">
            <span style="color: red">{{ contentMessage }}</span>
          </div>
          <template v-if="shotsNum >= 3">
            <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 v-if="shotsNum >= 3">
            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
            </div>
          </template>
        </template>
        <template v-if="shopSignChange == 1">
          <div class="historyImageAIVerify">
            <!-- 有门店身份证时 只显示门店身份证和本地拜访照 -->
            <template v-if="storeIDCardUrl">
              <div class="storeIDCardUrl imageItemAIVerify">
                <img
                  :src="storeIDCardUrl"
                  width="100px"
                  height="100px"
                  @click="previewsImg(storeIDCardUrl)" />
                <span>门店标准店招</span>
              </div>
            </template>
            <template v-else>
              <div class="initImage imageItemAIVerify">
                <img
                  v-if="createStoreUrl"
                  :src="createStoreUrl"
                  width="100px"
                  height="100px"
                  @click="previewsImg(createStoreUrl)" />
                <img v-else :src="imageEmpty" width="100px" height="100px" />
                <span>建店时门店照</span>
              </div>
              <div class="newestImage imageItemAIVerify">
                <img
                  v-if="lastVisitUrl"
                  :src="lastVisitUrl"
                  width="100px"
                  height="100px"
                  @click="previewsImg(lastVisitUrl)" />
                <img v-else :src="imageEmpty" width="100px" height="100px" />
                <span>上次拜访店招</span>
              </div>
            </template>
            <div class="presentImage imageItemAIVerify">
              <img v-if="url" :src="url" width="100px" height="100px" @click="previewsImg(url)" />
              <img v-else :src="imageEmpty" width="100px" height="100px" />
              <span>本次拜访店招</span>
            </div>
          </div>
          <div class="AIVerify">
            <span style="color: red">{{ contentMessage }}</span>
          </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>
          <div class="tipsRemarkAIVerify">
            <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
            <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</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: '', //反馈图像识别不正确原因
      url: '', //	本次图片路径
      createStoreUrl: '', //	建店时店招
      lastVisitUrl: '', //	上次拜访时店招
      storeIDCardUrl: '', //	门店身份证
    };
  },
  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;
      let imageAIVerifyData =
        this.source == 'visit' ? this.imageAIVerifyData : this.imageAIVerifyData[0];
      this.shopSignMatchList = this.npkpiData.shopSignMatchList;
      this.url = imageAIVerifyData.url || ''; //	图片路径
      this.createStoreUrl = imageAIVerifyData.createStoreUrl || ''; //	建店时店招
      this.lastVisitUrl = imageAIVerifyData.lastVisitUrl || ''; //	上次拜访时店招
      this.storeIDCardUrl = imageAIVerifyData.storeIDCardUrl || ''; //	门店身份证
      // 先判断照片作弊情况，然后是否合格，然后是否和历史照片一致
      // 作弊和不合格记录识别次数，超过两次弹框提醒
      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; */
    .errorImg {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .AIVerify {
      padding: 6px 0;
      font-size: 16px;
      /* color: red; */
      text-align: center;
      /* border-top: 1px solid #cfcfcf; */
    }
  }
  .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 {
    .uploadImgAIVerify {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-top: 1px solid #cfcfcf;
      .labelAIVerify {
        font-size: 14px;
      }
    }
  }
  .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;
        padding-top: 3px;
      }
    }
  }
  .tipsRemarkAIVerify {
    border-top: 1px solid #cfcfcf;
    padding: 3px 0;
    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>