|
|
@@ -0,0 +1,350 @@
|
|
|
+<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}&org=${this.org}`;
|
|
|
+ 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}&org=${this.org}`;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
11wqe1