pbl-teacher-table/src/components/pages/kindStudentEva/test/component/sharePdf.vue

<template>
  <el-dialog
    title="提醒"
    :visible.sync="localDialogVisibleShare"
    :append-to-body="true"
    width="560px"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <div class="share_box">
      <div class="info">
        <span>姓名：</span>
        <span>{{ info.username }}</span>
      </div>
      <div class="info">
        <span>班级：</span>
        <span>{{ info.cname }}</span>
      </div>
      <div class="url_box">
        <div class="title">
          分享链接
        </div>
        <div class="url">
          <el-tooltip :content="origin" placement="top" effect="dark">
            <!-- content to trigger tooltip here -->
            <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>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="close()">关 闭</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
export default {
  props: {
    dialogVisibleShare: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object
    },
    userid: {
      type: String
    },
    oid: {
      type: String
    },
    org: {
      type: String
    },
    cid: {
      type: String
    }
  },
  data() {
    return {
      origin: "",
      copyText: "",
      copyText2: "",
      noCount: 0,
      pname: [],
      localDialogVisibleShare: this.dialogVisibleShare
    };
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
    //   this.$emit("update:dialogVisibleShare", false);
      this.$emit('shareBtn');

    },
    setQr() {
      setTimeout(() => {
        let url = `https://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}`;       
        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
        });
      }, 500);
    },
    downQr() {
      // 创建一个虚拟链接，并将 canvas 转换为图片文件
      const link = document.createElement("a");
      link.href = this.$refs.qrCodeUrl.querySelector("img").src;
      link.download = "qrcode.png";

      // 模拟点击链接进行下载
      link.click();
    },
    copy() {
      this.copyText = `https://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}`;
      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://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}&org=${this.org}`;
      this.copyText2 = `姓名：${this.info.username}\n班级${this.info.cname}\n链接提醒：${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: {
    dialogVisibleShare(newValue, oldValue) {
      console.log("newValue", newValue);
      if (newValue) {
        this.localDialogVisibleShare=newValue
        this.setQr();
        // this.getData();
        // console.log(top.origin);
        // this.origin = top.origin
      }
    }
  },
  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;
  margin-top: 10px;
}

.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;
}
</style>