136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
|
||
import { useVbenModal } from '@vben/common-ui';
|
||
|
||
import { Button, Image } from 'ant-design-vue';
|
||
import html2canvas from 'html2canvas';
|
||
|
||
const qrCodeUrl = ref('');
|
||
const htmlToImage = ref('');
|
||
const url = ref('');
|
||
const previewTitle = ref('二维码');
|
||
const previewAddress = ref('');
|
||
const [Modal, modalApi] = useVbenModal({
|
||
fullscreenButton: false,
|
||
footer: false,
|
||
header: false,
|
||
showCancelButton: true,
|
||
showConfirmButton: true,
|
||
confirmText: '保存诊所卡片图片',
|
||
cancelText: '保存诊所二维码图片',
|
||
draggable: true,
|
||
onCancel() {
|
||
modalApi.close();
|
||
},
|
||
onConfirm: async () => {
|
||
modalApi.close();
|
||
},
|
||
onOpenChange(isOpen: boolean) {
|
||
if (isOpen) {
|
||
const { values, title, address } =
|
||
modalApi.getData<Record<string, any>>();
|
||
if (values) {
|
||
url.value = values;
|
||
qrCodeUrl.value = values;
|
||
previewTitle.value = title;
|
||
previewAddress.value = address;
|
||
}
|
||
}
|
||
},
|
||
});
|
||
/**
|
||
* 下载二维码
|
||
* @param name
|
||
* @param isQr
|
||
*/
|
||
const downloadQRCode = async (name: string, isQr = false) => {
|
||
const element = isQr ? qrCodeUrl.value : htmlToImage.value;
|
||
html2canvas(element, {
|
||
useCORS: true,
|
||
allowTaint: true,
|
||
logging: false,
|
||
}).then((canvas) => {
|
||
// 创建a标签下载
|
||
const link = document.createElement('a'); // 创建a标签
|
||
link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码
|
||
link.setAttribute('download', `${previewTitle.value}${name}.png`); // 利用了a标签的download 来下载 canvas图片
|
||
link.style.display = 'none'; // 将图片隐藏起来
|
||
document.body.append(link); // 插入到其中
|
||
link.click();
|
||
});
|
||
};
|
||
</script>
|
||
<template>
|
||
<Modal :title="`${previewTitle}二维码`" class="w-[50%]">
|
||
<div class="qrBox" style="text-align: center">
|
||
<div ref="htmlToImage" class="qrModal">
|
||
<div id="qrcode" ref="qrCodeUrl" class="qrcode">
|
||
<div class="qrTitle">{{ previewTitle }}</div>
|
||
<Image :preview="false" :src="url" height="30" width="30" />
|
||
<div class="qrAddress">
|
||
<span class="addressTitle">诊所地址：</span>{{ previewAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
style="margin: 20px auto"
|
||
type="primary"
|
||
@click="downloadQRCode('二维码卡片下载')"
|
||
>
|
||
二维码卡片下载
|
||
</Button>
|
||
<Button
|
||
style="margin: 20px auto 20px 20px"
|
||
type="primary"
|
||
@click="downloadQRCode('二维码下载', true)"
|
||
>
|
||
二维码下载
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.qrModal {
|
||
// 宽度适应文本长度
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
background: radial-gradient(
|
||
circle at center,
|
||
rgba(173, 216, 230, 0.8),
|
||
rgba(135, 206, 235, 0.8),
|
||
rgba(100, 149, 237, 0.8)
|
||
);
|
||
padding: 20px 30px;
|
||
|
||
.qrTitle {
|
||
font-size: 20px;
|
||
margin-bottom: 30px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.qrAddress {
|
||
font-size: 12px;
|
||
margin-top: 30px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.addressTitle {
|
||
color: #3a8ee6;
|
||
}
|
||
|
||
.qrcode {
|
||
width: fit-content;
|
||
//width: 50%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
padding: 20px 30px;
|
||
background-color: #fff;
|
||
border-radius: 20px;
|
||
}
|
||
}
|
||
</style>
|