<template>
  <div class="checkRecord">
    <headNav :title="title" class="headNav"></headNav>
    <div class="content">
      <img class="qcCode" :src="codeUrl" width="240px" height="240px" alt="">
    </div>
  </div>
</template>
<script>
import headNav from "@/components/headNav.vue";
import QRCode from "qrcode";
export default {
  name: "reportqrcode",
  components: {
    headNav,
  },
  data() {
    return {
        codeUrl: ''
    };
  },
  mounted() {
     this.makeCode()
  },
  computed: {
    url() {
      return this.$route.query.url || 'https://www.baidu.com';
    },
    title() {
      return this.$route.query.title || '下发文件';
    }
  },
  methods: {
      async makeCode() {
        const str = await QRCode.toDataURL(this.url)
        console.log(str);
        this.codeUrl = str
      }
  }
};
</script>
<style lang="scss" scoped>
.checkRecord {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .headNav {
        flex: 0 0 50px;
    }
    .content {
        flex: 1;
        overflow: auto;
        text-align: center;
    }
}
.qcCode {
  margin: 15vh auto;
  border: 1px solid #ddd;
}
</style>
