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">
        <div class="contentAIVerify">
          <div class="AIVerify">{{ contentMessage }}</div>
          <div class="uploadImgAIVerify" @click="uploadImg" v-if="shopSignChange != 1">
            <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>
        <div class="uploadBtnAIVerify" v-if="shotsNum >= 3 && shopSignChange != 1">
          <!-- 拜访店招显示 -->
          <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
            <!-- <div class="tipsAIVerify" @click="openTips"> -->
            <!-- <van-icon name="question-o" />上传后会有何影响 -->
            <van-icon name="question-o" />不规范的照片上传后会更换本店标准店招，未来每次拜访时校验。
          </div>
          <div class="confirmUploadAIVerify" @click="confirmUpload">仍要上传</div>
        </div>
        <div class="historyImageAIVerify" v-if="shopSignChange == 1">
          <div class="initImage imageItemAIVerify">
            <img
              v-if="imageAIVerifyData.createStoreUrl"
              :src="imageAIVerifyData.createStoreUrl"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.createStoreUrl)" />
            <span>建店时门店照</span>
          </div>
          <div class="newestImage imageItemAIVerify">
            <img
              v-if="imageAIVerifyData.lastVisitUrl"
              :src="imageAIVerifyData.lastVisitUrl"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
            <span>最近一次拜访店招</span>
          </div>
          <div class="presentImage imageItemAIVerify">
            <img
              v-if="imageAIVerifyData.url"
              :src="imageAIVerifyData.url"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.url)" />
            <span>本次拜访店招</span>
          </div>
        </div>
        <div class="tipsRemarkAIVerify" v-if="shopSignChange == 1">
          <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
          <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</div>
        </div>
        <div class="uploadBtnAIVerify" v-if="shopSignChange == 1">
          <div class="confirmUploadAIVerify" @click="uploadImg">重新拍照</div>
          <div class="changeImageAIVerify" @click="confirmUpload('isUpdate')">更换门店照</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import store from '@/store';
import { mapState } from 'vuex';
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 {
      contentMessage: '', //提示内容
      vanPopup: true,
      shopSignChange: 0,
      npkpiData: null,
    };
  },
  methods: {
    initData() {
      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
      // shopSignChange  是否更换店招(0:未更换，1:更换) 1不一致，0一致
      // checkInfo 图片检查结果
      // cheatState 是否作弊(0:未作弊，1:作弊)
      // cheatType	作弊类型
      // qualifiedState 是否合格(0:不合格，1:合格)
      // unqualifiedReason	不合格原因
      this.npkpiData =
        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 {
          // 失败次数增加超过三次特殊处理
          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;
          }
        }
      }
    },
    // 重新拍照
    uploadImg() {
      this.$emit('close');
      this.$emit('uploadImgFun');
    },
    // 照片是否入库，1.照片识别三次不通过仍要上传，2.照片识别通过
    // isUpdate:是否更新店招照片，只有门店店招需要更新
    confirmUpload(isUpdate) {
      this.$emit('close');
      this.$emit('confirmUpload', {
        data: this.imageAIVerifyData,
        isUpdate: isUpdate ? 'true' : null,
      });
    },
    close() {
      this.$emit('close');
    },
    openTips() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '不规范的照片上传后会更换本店标准店招，未来每次拜访时校验。',
          showCancelButton: false,
          className: 'openTips',
          overlayClass: 'openTipsMask',
        })
        .then(() => {});
    },
    previewsImg(url) {
      ImagePreview({
        images: [url],
        className: 'AIImageItem',
      });
    },
  },
};
</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 #ccc;
    }
    .uploadImgAIVerify {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0;
      border-top: 1px solid #ccc;
      .labelAIVerify {
        font-size: 14px;
      }
    }
  }
  .uploadBtnAIVerify {
    border-top: 1px solid #ccc;
    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: 6px;
      margin: 0 6px;
    }
    .tipsAIVerify {
      font-size: 14px;
      color: red;
      /* white-space: nowrap; */
    }
    .confirmUploadAIVerify {
      background-color: red;
      padding: 8px 0;
    }
    .changeImageAIVerify {
      background-color: #81b337;
      padding: 8px 0;
    }
  }
  .historyImageAIVerify {
    display: flex;
    justify-content: space-between;
    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 #ccc;
    div {
      font-size: 12px;
      padding: 3px 0;
    }
  }
}
.openTipsMask,
.openTips {
  z-index: 3334 !important;
}
.AIImageItem .van-image-preview {
  z-index: 3334;
}
</style>