mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 05:16:45 +08:00
feat:增加二维码弹窗
This commit is contained in:
lixg
270
src/components/TwoDimensionalCode.vue
Normal file
270
src/components/TwoDimensionalCode.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<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="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 class="qrm_footer">
|
||||
<span style="margin-left: 52px">下载二维码</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";
|
||||
export default {
|
||||
name: "TwoDimensionalCode",
|
||||
components: {
|
||||
QrcodeVue,
|
||||
},
|
||||
props: {
|
||||
codevisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
codeInfo: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
index: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const state = reactive({
|
||||
qrcodeUrl: "https://www.baidu.com/",
|
||||
qrcodeSize: 800,
|
||||
codeInfo: {},
|
||||
});
|
||||
|
||||
//下载二维码图片
|
||||
const downloadQr = (num) => {
|
||||
state.qrcodeSize = num;
|
||||
// let filename = `${new Date().getTime()}.png`;
|
||||
// let canvas = document.getElementsByTagName("canvas")[0];
|
||||
// let imageUrl = canvas.toDataURL("image/png");
|
||||
|
||||
// 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();
|
||||
};
|
||||
const closeCodeModal = () => {
|
||||
ctx.emit("update:codevisible", false);
|
||||
};
|
||||
watch(() => {
|
||||
let obj = {
|
||||
title: "",
|
||||
name: "",
|
||||
url: "",
|
||||
};
|
||||
state.codeInfo = Object.assign(obj, props.codeInfo);
|
||||
console.log("codeInfo22222", state.codeInfo,props.index);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
downloadQr,
|
||||
closeCodeModal,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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%;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.codename {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.qrm_footer {
|
||||
display: flex;
|
||||
align-items: 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>
|
||||
Reference in New Issue
Block a user