pbl-teacher-table/src/components/pages/classroomObservation/components/sharePdf.vue

<template>
  <el-dialog
    :visible.sync="show"
    :append-to-body="true"
    width="560px"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <div class="share_box">
      <div class="url_box">
        <div class="title">
          分享链接
        </div>
        <div class="url">
          <el-input
            class="sc_fu_input"
            style="color: black"
            disabled
            v-model="origin"
          >
            <template slot="append"
              ><div class="sc_fu_copyBtn" @click.stop="copy()">
                复制链接
              </div></template
            >
          </el-input>
          <!-- <el-tooltip :content="origin" placement="top" effect="dark">
            <span>{{ origin }}</span>
          </el-tooltip>
          <span @click="copy" :data-clipboard-text="copyText" class="tag-read"
            >复制链接</span
          > -->
        </div>
      </div>
      <div class="qrcode_box">
        <div class="title">
          分享二维码
        </div>
        <div class="qrcode">
          <span class="qrcodeUrl" ref="qrCodeUrl"></span>
          <span @click="downQr">下载二维码</span>
        </div>
      </div>
      <div class="btn_box">
        <!-- <button
          class="c_pub_button_confirm tag-read2"
          @click="copy2"
          :data-clipboard-text="copyText2"
        >
          复制信息
        </button> -->
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
export default {
  props: {
    tid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      origin: "",
      copyText: "",
      copyText2: "",
      noCount: 0,
      pname: [],
      show: false
    };
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    open() {
      this.show = true;
      this.setQr();
    },
    close() {
      //   this.$emit("update:dialogVisibleShare", false);
      // this.$emit('shareBtn');
      this.show = false;
    },
    setQr() {
      this.$nextTick(() => {
        let url = `https://cloud.cocorobo.hk/aigpt/#/classroom_observation_board?tid=${this.tid}`;
        this.origin = url;
        this.$refs.qrCodeUrl.innerHTML = "";
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    downQr() {
      // 创建一个虚拟链接，并将 canvas 转换为图片文件
      const link = document.createElement("a");
      link.href = this.$refs.qrCodeUrl.querySelector("img").src;
      link.download = "qrcode.png";

      // 模拟点击链接进行下载
      link.click();
    },
    copy() {
      const input = document.createElement("input");
      // 设置 display为none会导致无法复制
      // input.style.display = "none";
      // 所以只能用其他方法隐藏
      input.style.opacity = 0;
      // 为了不影响布局
      input.style.position = "fixed";
      input.style.left = "-100%";
      input.style.top = "-100%";
      input.value = this.origin;
      document.body.appendChild(input);
      input.select();
      const success = document.execCommand("copy");
      document.body.removeChild(input);
      if (!success) {
        return this.$message.error("复制失败");
      } else {
        return this.$message.success("复制成功");
      }
      // this.copyText = `https://cloud.cocorobo.hk/aigpt/#/classroom_observation_board?tid=${this.tid}`;
      // var clipboard = new Clipboard(".tag-read");
      // clipboard.on("success", e => {
      //   this.$message.success("复制成功");
      //   console.log("复制成功");
      //   clipboard.destroy(); // 释放内存
      // });
      // clipboard.on("error", e => {
      //   console.log("不支持复制,该浏览器不支持自动复制");
      //   clipboard.destroy(); // 释放内存
      // });
    },
    copy2() {
      let url = "https://cloud.cocorobo.hk/#/classroomObservation";
      this.copyText2 = `链接提醒：${url}`;
      var clipboard = new Clipboard(".tag-read2");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        console.log("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", e => {
        console.log("不支持复制,该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    }
    // getData() {
    //   // if(!this.testJson.juriP){
    //   //     return;
    //   // }
    //   let params = {
    //     id: this.testJson.courseId
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "getTestWorkShare", params)
    //     .then(res => {
    //       let parray = res.data[0];
    //       let is = res.data[1];
    //       this.noCount = parray.length - is.length;
    //       let isA = [];
    //       for (var i = 0; i < is.length; i++) {
    //         isA.push(is[i].userid);
    //       }
    //       let pname = [];
    //       for (var i = 0; i < parray.length; i++) {
    //         if (isA.indexOf(parray[i].userid) == -1) {
    //           pname.push(parray[i].username);
    //         }
    //       }
    //       this.pname = pname;
    //     })
    //     .catch(err => {
    //       console.error(err);
    //     });
    // }
  },
  watch: {
    tid() {
      if (this.show) {
        this.setQr();
      }
    }
  },
  mounted() {
    // console.log("this.info", this.info);
    // console.log(top.origin);
    // this.origin = top.origin
  }
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog {
  /* height: 100%; */
  /* margin: 0 auto !important; */
}

.dialog_diy >>> .el-dialog__header {
  background: #fff !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 124px);
  box-sizing: border-box;
  padding: 0px;
}

.dialog_diy >>> .el-dialog__title {
  color: #000;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #000;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #000;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fff;
}

.share_box {
  width: 100%;
  height: 100%;
  padding: 0 20px 15px;
  box-sizing: border-box;
}

.info_box {
  margin: 0 0 20px;
}

.info_box > .info {
  line-height: 18px;
}

.info_box > .info > span:nth-child(1) {
  color: #00000099;
}

.info_box > .info > span:nth-child(2) {
  color: #000000;
}

.info_box > .info + .info {
  margin-top: 10px;
}

.url_box {
  margin-bottom: 20px;
}

.qrcode_box {
  margin-bottom: 20px;
}

.url_box > .url {
  width: 100%;
  display: flex;
  align-items: center;
  /*border: 1px solid #e7e7e7;*/
  border-radius: 4px;
  height: 35px;
  padding: 0 7px;
  box-sizing: border-box;
}

.url_box > .url > span {
  font-size: 16px;
  color: #000000;
}

.url_box > .url > span:nth-child(1) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.url_box > .url > span:nth-child(2) {
  margin-left: auto;
  border-left: 1px solid #e7e7e7;
  padding-left: 7px;
  cursor: pointer;
  min-width: fit-content;
}

.url_box > .title,
.qrcode_box > .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.qrcode_box > .qrcode {
  padding: 7px;
  border: 1px solid #e7e7e7;
  width: fit-content;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
}

.qrcode_box > .qrcode > span:nth-child(1) {
  width: 100px;
  display: block;
  height: 100px;
}

.qrcode_box > .qrcode > span:nth-child(2) {
  background: #f0f2f5;
  padding: 7px 15px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  margin-left: 7px;
}

.btn_box {
  display: flex;
  justify-content: flex-end;
}

.more {
  cursor: pointer;
  color: #0061ff;
}

.sc_fu_input /deep/.el-input__inner {
  color: black !important;
  cursor: text !important;
}

.sc_fu_input >>> .el-input__inner {
  color: black !important;
  cursor: text !important;
}

.sc_fu_copyBtn {
  color: black;
  cursor: pointer;
}
</style>