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" fit="contain" @click="previewsImg(url)" />
            <img v-else :src="imageEmpty" width="100%" height="300px" />
          </div>
          <div class="AIVerify">
            <span>{{ contentMessage }}</span>
          </div>
          <!-- 调色机识别异常反馈 -->
          <template v-if="npkpiData.recognizeType == 3 && tsjErrorMsg != ''">
            <div class="tsjErrorMsg">
              <span>{{ tsjErrorMsg }}</span>
            </div>
          </template>
          <template v-if="shotsNum >= maxNum">
            <div class="feedbackMessage">
              <!-- 调色机 -->
              <div class="label" v-if="npkpiData.recognizeType == 3">
                <template v-if="contentMessage == '投放号错误'">
                  AI识别投放号为{{ deliveryCode }}，如与实际投放号不一致，请在此反馈:
                </template>
                <template v-else-if="contentMessage == '投放号缺失'">
                  AI未识别到调色机投放号，若AI识别错误，请在此反馈：
                </template>
                <template v-else>若认为AI识别错误，请在此反馈：</template>
              </div>
              <!-- 门店 -->
              <div class="label" v-else>若门店异常、或图像识别错误，可在此反馈:</div>
              <div class="value">
                <van-field
                  v-model="feedbackMessage"
                  rows="3"
                  type="textarea"
                  placeholder="请输原因" />
              </div>
            </div>
          </template>
          <div
            class="uploadBtnAIVerify"
            :style="{ 'justify-content': shotsNum >= maxNum ? 'space-between' : 'center' }">
            <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
            <div v-if="shotsNum >= maxNum" class="stillUploadAIVerify" @click="confirmUpload">
              仍要上传
            </div>
          </div>
          <div class="tipsAIVerify">
            <template v-if="shotsNum >= maxNum && npkpiData.recognizeType == 1">
              <van-icon name="warning-o" />上传后作为本店标准店招，未来每次拜访时校验。
            </template>
          </div>
        </template>
        <!-- 店招识别，标准门店照对比 -->
        <template v-if="shopSignChange == 1">
          <div class="historyImageAIVerify">
            <!-- 有门店身份证时 只显示门店身份证和本地拜访照 -->
            <template v-if="storeIDCardUrl">
              <div class="storeIDCardUrl imageItemAIVerify">
                <img :src="storeIDCardUrl" @click="previewsImg(storeIDCardUrl)" />
                <span>门店标准店招</span>
              </div>
            </template>
            <template v-else>
              <div class="initImage imageItemAIVerify">
                <img
                  v-if="createStoreUrl"
                  :src="createStoreUrl"
                  @click="previewsImg(createStoreUrl)" />
                <img v-else :src="imageEmpty" />
                <span>建店时门店照</span>
              </div>
              <div class="newestImage imageItemAIVerify">
                <img v-if="lastVisitUrl" :src="lastVisitUrl" @click="previewsImg(lastVisitUrl)" />
                <img v-else :src="imageEmpty" />
                <span>上次拜访店招</span>
              </div>
            </template>
            <div class="presentImage imageItemAIVerify">
              <img v-if="url" :src="url" @click="previewsImg(url)" />
              <img v-else :src="imageEmpty" />
              <span>本次拜访店招</span>
            </div>
          </div>
          <div class="AIVerify">
            <span>{{ 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" style="justify-content: center">
            <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><van-icon name="warning-o" />若历史照片拍摄不规范，请选择更新门店照</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: '', //	门店身份证
      maxNum: 2,
      tsjErrorMsg: '',
      deliveryCode: '', //AI识别投放编号
    };
  },
  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 || ''; //	门店身份证
      this.tsjErrorMsg = imageAIVerifyData.tsjErrorMsg || ''; //	调色机识别结果
      this.deliveryCode = this.npkpiData.colorantDispenserInfo
        ? this.npkpiData.colorantDispenserInfo.deliveryCode
        : ''; //AI识别投放编号
      // 先判断照片作弊情况，然后是否合格，然后是否和历史照片一致
      // 作弊和不合格记录识别次数，超过两次弹框提醒
      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 >= this.maxNum) {
        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: 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%;
      }
    }
    .tsjErrorMsg {
      font-size: vw(32);
      margin-top: vw(30);
      display: flex;
      justify-content: center;
      span {
        display: block;
        max-width: 90%;
      }
    }
  }
  .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 {
    padding: vw(30) 0 vw(40) 0;
    font-size: vw(22);
    color: #999999;
  }
  .coveringPosition {
    height: vw(60);
  }
  .uploadBtnAIVerify {
    display: flex;
    align-items: center;
    margin-top: vw(30);
    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;
    }
  }
  .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;
      }
      img {
        width: vw(196);
        height: vw(228);
        border-radius: vw(10);
      }
    }
  }
  .tipsRemarkAIVerify {
    padding: vw(28) 0;
    div {
      font-size: vw(22);
      color: #999999;
      position: relative;
      padding-left: 17px;
    }
    .van-icon {
      position: absolute;
      left: 0;
    }
  }
  .feedbackMessage {
    margin-top: vw(45);
    .label {
      font-size: vw(26);
      line-height: vw(50);
    }
    .value {
      .van-cell {
        padding: 0;
      }
    }
    .van-field__body {
      border-radius: vw(10);
      border: solid 1px #aaaaaa;
      padding-left: vw(10);
      background-color: #e7e7e7;
      .van-field__control {
      }
    }
  }
}
.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>