hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-15 05:46:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

面授连同周边修改

Browse Source
This commit is contained in:
zhangsir
2024-10-09 18:03:01 +08:00
parent e4145f08e0
commit 29876bd0f3
3 changed files with 420 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/components/TwoDimensionalCodeNew.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<div class="twoDimensionalCode">
<!--二维码页面 -->
<a-modal
:visible="codevisible"
:footer="null"
:closable="closableQR"
wrapClassName="codeModal"
style="margin-top: 400px"
:zIndex="9999"
@cancel="qr_exit"
>
<div id="qrcode" class="QR">
<div class="qr_header"></div>
<div class="qr_main">
<div class="qrm_header">
<span style="title">{{
codeInfo.title ? codeInfo.title : ""
}}</span>
<div class="close_exit" @click="closeCodeModal"></div>
</div>
<div class="downloadCode" style="">
<div class="qrm_body">
<div :class="codeInfo.teacherName?'qrm_body_item':''">
<div v-if="codeInfo.name&&!codeInfo.teacherName" class="codename">
{{ codeInfo.name ? codeInfo.name : "" }}
</div>
<div v-if="codeInfo.name&&codeInfo.teacherName" class="codename">
开课：{{ codeInfo.name ? codeInfo.name : "" }}
</div>
<div v-if="codeInfo.teacherName" class="codename" :title="codeInfo.titleTeacherName">
讲师：{{ codeInfo.teacherName ? codeInfo.teacherName : "" }}
</div>
</div>
<qrcode-vue
:value="codeInfo.url.startsWith('/')?(`${domain+codeInfo.url}&t=10`):`${codeInfo.url}&t=10`"
:size="qrcodeSize"
style="width: 200px; height: 200px"
></qrcode-vue>
</div>
</div>
<div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'flex' }">
<div class="codeUrlLink">链接</div>
<a-input
:value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
disabled
class="codeUrlInp"
/>
<a-input
:value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
id="courseUrl"
class="codeUrlInp"
style="position: absolute; opacity: 0; z-index: -1"
/>
<div @click="copyUrl" class="codeUrlCopy">复制链接</div>
</div>
<div class="qrm_footer">
<span
style="color: #387df7; cursor: pointer"
@click="downloadQr(200)"
>下载二维码</span
>
<!-- <div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">200*200</div>
</div> -->
<!-- <div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">400*400</div>
</div>
<div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">800*800</div>
</div> -->
</div>
</div>
</div>
</a-modal>
<!--二维码页面 -->
</div>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
import QrcodeVue from "qrcode.vue";
import html2canvas from "html2canvas";
import { message } from "ant-design-vue";
export default {
name: "TwoDimensionalCode",
components: {
QrcodeVue,
},
props: {
codevisible: {
type: Boolean,
default: false,
},
codeInfo: {
type: Object,
default: function () {
return {};
},
},
index: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
setup(props, ctx) {
const state = reactive({
qrcodeSize: 800,
codeInfo: {},
courseUrl: "https://www.baidu.com/",
showUrl: false,
domain: location.protocol+'//'+location.host
});
//下载二维码图片
const downloadQr = (num) => {
state.qrcodeSize = num;
html2canvas(
document.querySelectorAll(".downloadCode")[Number(props.index)],
{
useCORS: true, //支持图片跨域
}
).then((canvas) => {
// console.log("canvas", canvas, canvas.width, canvas.style.width);
let filename = `${new Date().getTime()}.png`;
let imageUrl = canvas.toDataURL("image/png");
let a = document.createElement("a");
a.style.display = "none";
a.download = filename;
a.href = imageUrl;
document.body.appendChild(a);
a.click();
});
// let canvas =document.getElementsByClassName('codeModal')[Number(props.index)].getElementsByTagName('canvas')[0];
// let filename = `${new Date().getTime()}.png`;
// let imageUrl = canvas.toDataURL("image/png");
// let a = document.createElement("a");
// a.style.display = "none";
// a.download = filename;
// a.href = imageUrl;
// document.body.appendChild(a);
// a.click();
};
//复制链接
const copyUrl = () => {
// const range = document.createRange(); //创建range对象
// range.selectNode(document.getElementById('courseUrl')); //获取复制内容的 id 选择器
// const selection = window.getSelection(); //创建 selection对象
// if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
// selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
// document.execCommand("Copy"); //复制选中的文字到剪贴板
// message.success('复制成功')
// selection.removeRange(range); // 移除选中的元素
var input = document.createElement("input"); // 创建input对象
input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
document.execCommand("Copy"); // 执行复制
document.body.removeChild(input); // 删除临时实例
message.success("复制成功！");
};
const closeCodeModal = () => {
ctx.emit("update:codevisible", false);
};
watch(() => {
let obj = {
title: "",
name: "",
url: "",
teacherName: "",
};
state.codeInfo = Object.assign(obj, props.codeInfo);
console.log("codeInfo22222", state.codeInfo, props.index, props.type);
if (props.type === "签到二维码") {
state.showUrl = false;
console.log(" state.showUrl", state.showUrl);
} else if (props.type === "课程二维码") {
state.showUrl = true;
}
});
return {
...toRefs(state),
downloadQr,
closeCodeModal,
copyUrl,
};
},
};
</script>
<style scoped lang="scss">
.twoDimensionalCode {
}
.codeModal {
.ant-modal {
.ant-modal-content {
width: 479px !important;
.ant-modal-body {
.QR {
z-index: 9999;
width: 520px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.qr_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.qr_main {
width: 100%;
position: relative;
.qrm_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.title {
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.qrm_body {
width: 100%;
padding-top: 22px;
padding-bottom: 32px;
display: flex;
flex-direction: column;
align-items: center;
.qrm_body_item{
width: 100%;
margin-left: 270px;
}
.codename {
font-size: 18px;
font-weight: 400;
color: #333333;
line-height: 25px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
}
}
.codeUrl {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
.codeUrlLink {
width: 72px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
line-height: 20px;
border: 1px solid #c7cbd2;
border-right: 0px solid #c7cbd2;
}
.codeUrlInp {
width: 305px;
height: 40px;
border: 1px solid #c7cbd2;
}
.ant-input-disabled {
background-color: rgba(0, 0, 0, 0) !important;
}
.ant-input[disabled] {
background-color: rgba(0, 0, 0, 0) !important;
}
.codeUrlCopy {
width: 96px;
height: 40px;
background-color: #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
cursor: pointer;
margin-left: 8px;
}
}
.qrm_footer {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 44px;
.qrmbtn {
width: 80px;
height: 32px;
display: flex;
line-height: 32px;
justify-content: center;
border-radius: 4px;
border: 1px solid #387df7;
// margin-left: 16px;
cursor: pointer;
.btntext {
color: #387df7;
}
}
}
}
}
}
}
}
}
</style>