pbl-teacher-table/src/components/pages/test/shareBox/index.vue

<template>
    <el-dialog title="提醒" :visible.sync="dialogVisibleShare" :append-to-body="true" width="560px"
        :before-close="handleClose" class="dialog_diy">
        <div class="share_box">
            <div class="info_box">
                <div class="info">
                    <span>表单名称：</span>
                    <span>{{ testJson.title }}</span>
                </div>
                <div class="info" >
                    <span>表单范围：</span>
                    <span>{{ testJson.juriP ? testJson.juriP : '所有人' }}</span>
                </div>
                <!-- <div class="info" v-if="testJson.overtime">
                    <span>截止时间：</span>
                    <span>{{ testJson.overtime }}</span>
                </div>
                <div class="info" v-if="testJson.juriP">
                    <span>未完成人数：</span>
                    <span>{{ noCount }}</span>
                </div> -->
                <div class="info">
                    <span>已完成人数：</span>
                    <span>{{ testJson.worksPerson }}</span>
                </div>
                <div class="info" v-if="testJson.juriP && pname &&pname.length">
                    <span>未完成名单：</span>
                    <span>{{ pname.join(',') }}</span>
                </div>
            </div>
            <div class="url_box">
                <div class="title">
                    链接提醒
                </div>
                <div class="url">
                    <span>{{ origin }}</span>
                    <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>
        <!-- <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
        },
        testJson: {
            type: Object
        },
    },
    data() {
        return {
            origin: top.origin,
            copyText: "",
            noCount: 0,
            pname:[]
        };
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        close() {
            this.$emit("update:dialogVisibleShare", false);
        },
        setQr() {
            setTimeout(() => {
                this.$refs.qrCodeUrl.innerHTML = "";
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: "https://beta.cloud.cocorobo.cn/#/testDetail?testid=" + this.testJson.courseId, // 需要转换为二维码的内容
                    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 = this.origin;
            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(); // 释放内存
            });
        },
        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) {
            if (newValue) {
                this.setQr()
                this.getData()
            }
        }
    },
};
</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-bottom: 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(2) {
    margin-left: auto;
    border-left: 1px solid #e7e7e7;
    padding-left: 7px;
    cursor: pointer;
}

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