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>
|