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

feat:增加选择模版等

Browse Source
This commit is contained in:
lixg
2022-11-15 20:02:20 +08:00
parent d362f3db09
commit f8d1a5c779
8 changed files with 1590 additions and 1782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/components/TwoDimensionalCode.vue
View File

@@ -7,25 +7,45 @@
:closable="closableQR"
wrapClassName="codeModal"
style="margin-top: 400px"
:zIndex="9999"
:zIndex="999"
@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>
<span style="title">{{
codeInfo.title ? codeInfo.title : ""
}}</span>
<div class="close_exit" @click="closeCodeModal"></div>
</div>
<div class="qrm_body">
<div class="codename">{{codeInfo.name?codeInfo.name:''}}</div>
<qrcode-vue
:value="codeInfo.url?codeInfo.url:''"
:size="qrcodeSize"
style="width: 200px; height: 200px"
></qrcode-vue>
<div class="downloadCode" style="">
<div class="qrm_body">
<div class="codename">
{{ codeInfo.name ? codeInfo.name : "" }}
</div>
<qrcode-vue
:value="codeInfo.url ? codeInfo.url : ''"
:size="qrcodeSize"
style="width: 200px; height: 200px"
></qrcode-vue>
</div>
</div>
<div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'none' }">
<div class="codeUrlLink">链接</div>
<a-input
:value="codeInfo.url ? codeInfo.url : ''"
disabled
class="codeUrlInp"
/>
<a-input
:value="codeInfo.url ? codeInfo.url : ''"
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="margin-left: 52px">下载二维码</span>
<div class="qrmbtn" @click="downloadQr(200)">
@@ -47,7 +67,8 @@
<script>
import { reactive, toRefs, watch } from "vue";
import QrcodeVue from "qrcode.vue";
// import html2canvas from "html2canvas";
import html2canvas from "html2canvas";
import { message } from "ant-design-vue";
export default {
name: "TwoDimensionalCode",
components: {
@@ -64,97 +85,70 @@ export default {
return {};
},
},
index: {
index: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
setup(props, ctx) {
const state = reactive({
qrcodeUrl: "https://www.baidu.com/",
qrcodeSize: 800,
codeInfo: {},
courseUrl: "https://www.baidu.com/",
showUrl: false,
});
//下载二维码图片
const downloadQr = (num) => {
state.qrcodeSize = num;
// let filename = `${new Date().getTime()}.png`;
// let canvas = document.getElementsByTagName("canvas")[0];
// let imageUrl = canvas.toDataURL("image/png");
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); // 移除选中的元素
// let canvasBox = document.createElement("canvas");
// let ctx = canvasBox.getContext("2d");
// var img = new Image();
// // 需要添加文字的图片
// img.src = imageUrl;
// // 等待图片加载完成
// img.onload = function () {
// // 将图片添加到canvas
// ctx.drawImage(img, 0, 0, 1240, 2208);
// // 设置字体
// ctx.font = "73px 微软雅黑 bolder";
// // 设置字体颜色
// ctx.fillStyle = "#955f17";
// ctx.textAlign = "center";
// // 添加文字和位置
// ctx.fillText("微信名", 621, 1050);
// // 导出为图片
// let url = canvasBox.toDataURL("image/png");
// let a = document.createElement("a");
// a.style.display = "none";
// a.download = filename;
// a.href = url;
// document.body.appendChild(a);
// a.click();
// };
// // let a = document.createElement("a");
// // a.style.display = "none";
// // a.download = filename;
// // a.href = imageUrl;
// // document.body.appendChild(a);
// // a.click();
// html2canvas(document.querySelector("#qrcode"), {
// useCORS: true, //支持图片跨域
// }).then((canvas) => {
// // var extra_canvas = document.createElement("canvas");
// // extra_canvas.setAttribute('width',num);
// // extra_canvas.setAttribute('height',num);
// // var ctx = extra_canvas.getContext('2d');
// // ctx.drawImage(canvas,0,0,num,num);
// // let filename = `${new Date().getTime()}.png`;
// // var imageUrl = extra_canvas.toDataURL("image/png",1.0);
// console.log("canvas", canvas, canvas.width, canvas.style.width);
// // // let ctx = canvas.getContext('2d');
// // // ctx.drawImage(canvas,0,0,canvas.width, canvas.height);
// // // canvas.width=num
// // // canvas.height=num
// // // canvas.style.width=num+'px'
// // // canvas.style.height=num+'px'
// // 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();
// });
console.log('document.getElementsByClassName',document.getElementsByClassName('codeModal'),Number(props.index))
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();
var input = document.createElement("input"); // 创建input对象
input.value = 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);
@@ -166,12 +160,20 @@ console.log('document.getElementsByClassName',document.getElementsByClassName('c
url: "",
};
state.codeInfo = Object.assign(obj, props.codeInfo);
console.log("codeInfo22222", state.codeInfo,props.index);
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,
};
},
};
@@ -229,8 +231,8 @@ console.log('document.getElementsByClassName',document.getElementsByClassName('c
}
.qrm_body {
width: 100%;
margin-top: 22px;
margin-bottom: 32px;
padding-top: 22px;
padding-bottom: 32px;
display: flex;
flex-direction: column;
align-items: center;
@@ -242,6 +244,51 @@ console.log('document.getElementsByClassName',document.getElementsByClassName('c
margin-bottom: 20px;
}
}
.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: #388be1;
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;