icore-pass/src/views/sale/components/saleSelfMachine/printWarranty.vue

<template>
  <div class="tableAllDate"> 
     <!-- <div>
       <el-table
       v-loading="loading"
       style="width: 100%">
      </el-table>
     </div>  -->
     <div class="loading"  v-if="urls.length==0"></div>
      <div id="pdfDom">
      <div class="blank">
      </div>
    <div class="demo-image__lazy" v-for="(img,index) in urls" :key="index">
       <!-- <el-image v-for="(img,index) in urls" :key="index" :src="img" lazy></el-image> -->
       <el-image   style='width: 100%; height: 100%; justify-content: center;
            align-items: center;' :src='img'></el-image>
     </div> 
      </div>
      <!-- <el-button style="margin-left: 45%;" type="primary" @click="getPdf()">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button> -->
      <el-button style="margin-left: 45%;margin-top: 0.2%;" type="primary" v-print="'#pdfDom'" @click="backScan()">
        <i class="el-icon-printer"></i>打印
      </el-button>
  </div>
</template>

<script>
import table from '@/components/DilCommonUI/packages/table/src/table.vue';
export default {
  components: { table },
  name: "Login",
  data() {
    return {
      urls:[],
      name: 'Loading'
    };
  }, 
  mounted() {
    this.information();
  },
  methods: {
     information() {
      //编辑
      console.log("this.$route.query.orderNumber",this.$route.query.orderNumber)
      this.axios
        .post(
          "/api/v1/uc/getWarranty?orderNumber="+this.$route.query.orderNumber 
        )
        .then((res) => {
          console.log("res.data.data",res.data.data)
          if(res.data.code==201){
            this.$message("质保书正在紧张制作中，请耐心等待！")
          }else{
            res.data.data.forEach((e) => {
              console.log(e)
              this.urls.push(e)
          
            })
          }
        });
        },
       
        
      backScan(){
        this.$router.go(-2);
      },
      
  },
};
</script>

<style lang="scss" scoped>
.demo-image__lazy{
  position: relative;
}
.title{
  font-size:25px;
}
.tableBody{
  table, th, td
  {
      border: 1px solid black;
      font-size:20px;
      margin: auto;
  }
  .tablePart1 th{
      border-top: 1px solid black;
  }
  .tablePart2 td,th{
    border-top: 0px
  }
  .tablePart3 td,th{
    border-top: 0px
  }
  .tablePart4 td,th{
    border-top: 0px
  }
  .tablePart5 td,th{
    border-top: 0px
  }
}
.blank{
  width: 100%;
  height: 50px;
}
.loading {
  position: fixed;
  left: 0;
  top: 0;
  background: url('~@/assets/loading_images/loading.gif') center center no-repeat #fff;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
</style>