erp-el-element/Dialog/xyqualitydialog.vue

<template>
  <div class="xylog">
    <el-dialog
      :title="
        xylogtype == '0'
          ? '闲鱼质检报告'
          : xylogtype == '2'
          ? '质检报告'
          : '商品详情'
      "
      :visible.sync="xylogdialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <i
        class="el-icon-document-copy"
        style="cursor: pointer; color: #409eff; margin-right: 5px"
        title="点击复制"
        @click="copyLink($event, '0')"
        >复制链接</i
      >
      <el-button type="text" @click="qrcode">查看二维码</el-button>
      <iframe
        style="width: 100%; "
        :height="height" 
        :src="src"
        allowfullscreen="allowfullscreen"
        frameborder="0"
        data-id="1"
      ></iframe>
      <!-- <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">确 定</el-button>
            </span> -->
      <el-dialog
        width="30%"
        title="查看二维码"
        :visible.sync="innerVisible"
        append-to-body
        :before-close="qrclose"
      >
        <div class="box">
          <div ref="qrCodeUrl" class="qrcode" />
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      src: ``,
      innerVisible: false,
    };
  },
  props: {
    xylogdialogVisible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    xylogid: {
      default: () => {
        return "";
      },
    },
    xylogtype: {
      default: () => {
        return "";
      },
    },
  },
  computed: {
    height() {
      return document.documentElement.clientHeight - 400;
    },
  },
  watch: {
    xylogid(newval) {
      if (this.xylogtype == "0") {
        this.src = `https://www.aiguoerp.com/qc.html?id=${newval}`;
      } else if (this.xylogtype == "1") {
        this.src = `https://h5.m.goofish.com/item?id=${newval}`;
      } else if (this.xylogtype == "2") {
        this.src = `https://www.aiguoerp.com/qc1.html?business_id=${newval}`;
      }
      // this.src = `https://vant-contrib.gitee.io/vant/v2/mobile.html#/zh-CN/`
    },
  },
  methods: {
    handleClose() {
      this.close();
    },
    close() {
      this.$emit("xylogdialog", false);
    },
    // 点击复制功能
    copyLink(e) {
      let text = this.src;
      const clipboard = new this.clipboard(e.target, { text: () => text });
      clipboard.on("success", (e) => {
        this.$message({ type: "success", message: "复制成功" });
        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message({ type: "waning", message: "该浏览器不支持自动复制" });
        // 释放内存
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.onClick(e);
    },
    qrcode() {
      this.innerVisible = true;
      console.log(this.src, "srcsrcsrcsrcsrc");
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeUrl, {
          text: this.src,
          width: 120,
          height: 110,
          colorDark: "#333333", // 二维码颜色
          colorLight: "#ffffff", // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
        });
      });
    },
    qrclose() {
      this.innerVisible = false;
      this.$refs.qrCodeUrl.innerHTML = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
}
</style>