You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.9 KiB
142 lines
2.9 KiB
1 year ago
|
<script lang="ts" setup>
|
||
|
|
import {
|
||
|
|
CloseOutlined,
|
||
|
|
} from '@ant-design/icons-vue'
|
||
|
|
import { Button, QRCode } from 'ant-design-vue'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const emits = defineEmits(['update:show'])
|
||
|
|
// 关闭弹窗
|
||
|
|
function handleClose() {
|
||
|
|
emits('update:show', false)
|
||
|
|
}
|
||
|
|
// 下载二维码
|
||
|
|
const qrcodeCanvasRef = ref()
|
||
|
|
async function dowloadChange() {
|
||
|
|
const url = await qrcodeCanvasRef.value.toDataURL()
|
||
|
|
const a = document.createElement('a')
|
||
|
|
a.download = 'QRCode.png'
|
||
|
|
a.href = url
|
||
|
|
document.body.appendChild(a)
|
||
|
|
a.click()
|
||
|
|
document.body.removeChild(a)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<transition name="modal">
|
||
|
|
<div v-if="show" class="modal-mask">
|
||
|
|
<div class="modal-wrapper">
|
||
|
|
<div class="modal-container">
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="closeIcon" @click="handleClose">
|
||
|
|
<CloseOutlined style="color: #fff;" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="close" @click="handleClose">
|
||
|
|
</div>
|
||
|
|
<div class="qr">
|
||
|
|
<QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" />
|
||
|
|
</div>
|
||
|
|
<Button type="primary" class="save-qr" @click="dowloadChange">
|
||
|
|
保存二维码
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.modal-mask {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9999;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.modal-wrapper {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-body {
|
||
|
|
width: 530px;
|
||
|
|
height: 300px;
|
||
|
|
background-image: url('@/assets/images/task/invite.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
.closeIcon {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 5px;
|
||
|
|
z-index: 2;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
cursor: pointer;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 35px;
|
||
|
|
height: 35px;
|
||
|
|
background-image: linear-gradient(180deg, #5c94f7 0%, #4060e0 100%);
|
||
|
|
clip-path: polygon(100% 100%, 100% 0, 0 0);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.qr {
|
||
|
|
position: absolute;
|
||
|
|
top: 93px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%);
|
||
|
|
}
|
||
|
|
.save-qr {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 130px;
|
||
|
|
height: 32px;
|
||
|
|
background: #4670e3;
|
||
|
|
border-radius: 20px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
font-size: 13px;
|
||
|
|
font-family:
|
||
|
|
PingFangSC,
|
||
|
|
PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ffffff;
|
||
|
|
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.modal-enter-active,
|
||
|
|
.modal-leave-active {
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-enter-from,
|
||
|
|
.modal-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-enter-to,
|
||
|
|
.modal-leave-from {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
</style>
|