lzga-doc/lzga-ui/src/views1/Personal/Identificat/IdentificatView.vue

<template>
  <div class="containe">
    <div class="main1" v-show="aaa">
      <div class="left">
        <el-image style="width: 350px; height: 350px" :src="url" fit="contain"></el-image>
      </div>
      <div class="right">
        {{ tt }}
      </div>
    </div>
    <div class="main2" v-show="bbb">
      <div class="top">
        <img src="../../../assets/img/shangchuan.png" alt="" />
      </div>
      <el-upload class="upload-demo" :action="ocrUrl" :on-preview="handlePreview" :on-success="handleAvatarSuccess"
        list-type="picture" :show-file-list="false">
        <el-button size="small" type="primary">点击上传图片</el-button>
      </el-upload>
    </div>
    <el-button class="returns" @click="returns" v-if="ccc">上传新的</el-button>
    <el-button class="copys" @click="copys" v-if="ccc">复制</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: "",
        //扫描界面默认关闭
        aaa: false,
        //图片上传界面默认打开
        bbb: true,
        //返回按钮与扫描界面同步
        ccc: false,
        //复制按钮与扫描界面同步
        tt: null,
        ocrUrl: ""
      };
    },
    created() {
      // this.ocrUrl=process.env.VUE_APP_BASE_API+"/ocr/";
      this.ocrUrl="http://192.168.1.28/dev-api/ocr/";
    },
    methods: {
      handlePreview(file) {
        console.log(file);
      },
      handleAvatarSuccess(response, file, fileList) {
        this.url = file.url;
        this.tt = response;
        this.aaa = true;
        this.bbb = false;
        this.ccc = true;
      },
      returns() {
        this.aaa = false;
        this.bbb = true;
        this.ccc = false;
        this.url = "";
      },
      copys() {
        this.$copyText(this.tt).then(
          this.$modal.alertSuccess("复制成功")
        );
      },
    },
  };
</script>

<style scoped lang='scss'>
.containe {
    .main1 {
      display: flex;
      justify-content: space-around;
      padding-top: calc(100vh * (100 / 1080));

      .left {
        width: calc(100vw * (800 / 1920));
        height: calc(100vh * (700 / 1080));
        border: 1px dashed white;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .right {
        width: calc(100vw * (800 / 1920));
        height: calc(100vh * (700 / 1080));
        border: 1px dashed white;
        color: #7ea4c8ff;
      }
    }

    .main2 {
      width: calc(100vw * (800 / 1920));
      height: calc(100vh * (700 / 1080));
      position: absolute;
      left: 30%;
      top: 15%;
      text-align: center;

      .top {
        margin-top: 10%;
        margin-bottom: calc(100vh * (20 / 1080));
      }
    }

    .returns {
      margin-left: 20%;
      margin-top: calc(100vh * (50 / 1080));
    }

    .copys {
      margin-left: 30%;
      margin-top: calc(100vh * (50 / 1080));
    }
  }

  ::v-deep .el-button--small {
    width: calc(100vw * (400 / 1920));
    height: calc(100vh * (80 / 1080));
    font-size: 25px;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
  }
</style>