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

<template>
  <div class="imageAIVerifyErr">
    <el-dialog
      title="提示"
      :visible.sync="vanPopup"
      width="80%"
      :append-to-body="true"
      custom-class="AIVerifyErrdialog">
      <div class="AIVerifyErrMask">
        <!-- <van-popup v-model="vanPopup" @close="close" :close-on-click-overlay="false"> -->
        <div class="title">图像识别结果</div>
        <div class="content">
          <div class="AIVerify">{{ contentMessage }}</div>
          <div class="uploadImg" @click="uploadImg" v-if="shopSignChange != 1">
            <div class="label"><span class="van-f-red">*</span>重新拍照上传</div>
            <div class="icon">
              <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
            </div>
          </div>
        </div>
        <div class="uploadBtn" v-if="shotsNum >= 3 && shopSignChange != 1">
          <div class="tips"><van-icon name="question-o" @click="openTips" />上传后会有何影响</div>
          <div class="confirmUpload" @click="confirmUpload">仍要上传</div>
        </div>
        <div class="uploadBtn" v-if="shopSignChange == 1">
          <div class="confirmUpload" @click="uploadImg">重新拍照</div>
          <div class="changeImage" @click="confirmUpload">更换门店照</div>
        </div>
        <div class="historyImage" v-if="shopSignChange == 1">
          <div class="initImage imageItem" v-if="imageAIVerifyData.createStoreUrl">
            <img
              :src="imageAIVerifyData.createStoreUrl"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.createStoreUrl)" />
            <span>建店时店招</span>
          </div>
          <div class="newestImage imageItem" v-if="imageAIVerifyData.lastVisitUrl">
            <img
              :src="imageAIVerifyData.lastVisitUrl"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
            <span>上次拜访店招</span>
          </div>
          <div class="presentImage imageItem" v-if="imageAIVerifyData.url">
            <img
              :src="imageAIVerifyData.url"
              width="100px"
              height="100px"
              @click="previewsImg(imageAIVerifyData.url)" />
            <span>本次拜访店招</span>
          </div>
        </div>
        <div class="tipsRemark" v-if="shopSignChange == 1">
          <p>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></p>
          <p>本次拜访店招会作为本店标准店招，未来每次拜访时校验</p>
        </div>
        <!-- </van-popup> -->
      </div>
    </el-dialog>
    <!-- <div class="AIVerifyErrMask">
      <van-popup v-model="vanPopup" @close="close" :close-on-click-overlay="false">
      <div class="title">图像识别结果</div>
      <div class="content">
        <div class="AIVerify">{{ contentMessage }}</div>
        <div class="uploadImg" @click="uploadImg" v-if="shopSignChange != 1">
          <div class="label"><span class="van-f-red">*</span>重新拍照上传</div>
          <div class="icon">
            <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
          </div>
        </div>
      </div>
      <div class="uploadBtn" v-if="shotsNum >= 3 && shopSignChange != 1">
        <div class="tips"><van-icon name="question-o" @click="openTips" />上传后会有何影响</div>
        <div class="confirmUpload" @click="confirmUpload">仍要上传</div>
      </div>
      <div class="uploadBtn" v-if="shopSignChange == 1">
        <div class="confirmUpload" @click="uploadImg">重新拍照</div>
        <div class="changeImage" @click="confirmUpload">更换门店照</div>
      </div>
      <div class="historyImage" v-if="shopSignChange == 1">
        <div class="initImage imageItem" v-if="imageAIVerifyData.createStoreUrl">
          <img
            :src="imageAIVerifyData.createStoreUrl"
            width="100px"
            height="100px"
            @click="previewsImg(imageAIVerifyData.createStoreUrl)" />
          <span>建店时店招</span>
        </div>
        <div class="newestImage imageItem" v-if="imageAIVerifyData.lastVisitUrl">
          <img
            :src="imageAIVerifyData.lastVisitUrl"
            width="100px"
            height="100px"
            @click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
          <span>上次拜访店招</span>
        </div>
        <div class="presentImage imageItem" v-if="imageAIVerifyData.url">
          <img
            :src="imageAIVerifyData.url"
            width="100px"
            height="100px"
            @click="previewsImg(imageAIVerifyData.url)" />
          <span>本次拜访店招</span>
        </div>
      </div>
      <div class="tipsRemark" v-if="shopSignChange == 1">
        <p>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></p>
        <p>本次拜访店招会作为本店标准店招，未来每次拜访时校验</p>
      </div>
      </van-popup>
    </div> -->
  </div>
</template>
<script>
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,
    };
  },
  methods: {
    initData() {
      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招)
      // shopSignChange  是否更换店招(0:未更换，1:更换) 1不一致，0一致
      // checkInfo 图片检查结果
      // cheatState 是否作弊(0:未作弊，1:作弊)
      // cheatType	作弊类型
      // qualifiedState 是否合格(0:不合格，1:合格)
      // unqualifiedReason	不合格原因
      console.log('imageAIVerifyData=' + JSON.stringify(this.imageAIVerifyData));
      let npkpiData =
        this.source == 'visit'
          ? this.imageAIVerifyData.npkpiData
          : this.imageAIVerifyData[0].npkpiData;
      // 照片和历史照片是否一致
      this.shopSignChange = npkpiData.shopSignChange;
      this.shopSignMatchList = npkpiData.shopSignMatchList;
      if (npkpiData.shopSignChange == 1) {
        this.contentMessage = '与历史照片不一致，请确认店招是否更换?';
        return;
      }
      // 照片是否合格
      if (npkpiData.checkInfo) {
        if (npkpiData.checkInfo.qualifiedState == 0) {
          // 失败次数增加超过三次特殊处理
          store.dispatch('setShotsNum', this.shotsNum + 1);
          // 不合格
          this.contentMessage = this.contentMessage + npkpiData.checkInfo.unqualifiedReason;
          if (npkpiData.checkInfo.cheatState == 1) {
            // 作弊
            this.contentMessage = this.contentMessage + npkpiData.checkInfo.cheatType;
          }
        } else {
          this.close();
          this.$emit('normalFlow', { data: this.imageAIVerifyData });
        }
      }
    },
    // 重新拍照
    uploadImg() {
      this.$emit('close');
      this.$emit('uploadImgFun');
    },
    // 仍要上传
    confirmUpload() {
      this.$emit('close');
      this.$emit('confirmUpload', { data: this.imageAIVerifyData });
    },
    close() {
      this.$emit('close');
    },
    openTips() {
      this.$dialog
        .confirm({
          title: '系统提示',
          message: '不规范的照片上传后会更换本店标准店招，未来每次拜访时校验。',
          showCancelButton: false,
        })
        .then(() => {});
    },
    previewsImg(url) {
      ImagePreview({
        images: [url],
      });
    },
  },
};
</script>
<style lang="scss">
.el-dialog__wrapper {
  z-index: 99999999;
  .imageAIVerifyErr {
    .AIVerifyErrMask {
      width: 90%;
      padding: 8px;
      border-radius: 8px;
      overflow: hidden;
    }
    .van-popup {
      width: 90%;
      padding: 8px;
      border-radius: 8px;
      overflow: hidden;
    }
    .van-f-red {
      color: red;
      width: 8px;
      display: inline-block;
      line-height: 26px;
    }
    .photo {
      /*margin-top: 9px;*/
      float: right;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      padding: 5px;
    }
    .content {
      border-top: 1px solid #ccc;
      .AIVerify {
        padding: 6px;
        font-size: 14px;
        color: red;
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
      .uploadImg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label {
          font-size: 14px;
        }
      }
    }
    .uploadBtn {
      border-top: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      div {
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        border-radius: 6px;
      }
      .tips {
        font-size: 14px;
        color: #e7e734;
      }
      .confirmUpload {
        background-color: red;
        padding: 8px 0;
      }
      .changeImage {
        background-color: #81b337;
        padding: 8px 0;
      }
    }
    .historyImage {
      display: flex;
      justify-content: space-between;
      .imageItem {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span {
          font-size: 12px;
        }
      }
    }
    .tipsRemark {
      border-top: 1px solid #ccc;
      p {
        font-size: 12px;
        padding: 3px 0;
      }
    }
  }
}
</style>