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

<template>
  <div class="imageAIVerifyErr imageWhiteStore">
    <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="errorImg">
          <img
            v-if="imageWhiteStoreData.url"
            :src="imageWhiteStoreData.url"
            fit="contain"
            @click="previewsImg(imageWhiteStoreData.url)" />
          <img v-else :src="imageEmpty" width="100%" height="300px" />
        </div>
        <div class="AIVerifyWhite" v-html="imageWhiteStoreData.whiteMsg || ''"></div>
        <div class="uploadBtnAIVerify" :style="{ 'justify-content': 'center' }">
          <div class="changeImageAIVerify" @click="normalFlow">确认</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import imageEmpty from '@/assets/imageEmpty.png';
export default {
  props: {
    imageWhiteStoreFlag: {
      type: Boolean,
      default: false,
    },
    imageWhiteStoreData: {
      type: Object,
    },
  },
  watch: {
    imageAIVerifyFlag: {
      handler(val) {
        console.log('imageAIVerifyFlag=' + val);
        if (val) this.initData();
      },
      immediate: true,
    },
  },
  data() {
    return {
      imageEmpty: imageEmpty,
      contentMessage: '', //提示内容
      vanPopup: true,
      url: '', //	本次图片路径
    };
  },
  methods: {
    initData() {},
    normalFlow() {
      this.$emit('close');
      let res = {
        data: [this.imageWhiteStoreData],
      };
      this.$emit('normalFlow', res);
    },
    close() {
      this.$emit('close');
    },
    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);
      }
    }
    .AIVerifyWhite {
      font-size: vw(32);
      margin-top: vw(45);
      justify-content: center;
      text-align: left;
      // color: #9e0202;
      display: block;
      text-indent: 2em;
      b {
        color: #9e0202;
      }
    }
  }
  .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;
  }
  .uploadBtnAIVerify {
    display: flex;
    align-items: center;
    margin: vw(30) 0;
    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;
    }
  }
}
.van-overlay {
  /* z-index: 3334 !important; */
}
.van-image-preview {
  z-index: 3335 !important;
  background: rgba(0, 0, 0, 0.8) !important;
}
</style>