digital-medicine-front/src/views/training/models/sign-in-code.vue

<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width" :z-index="1002">
        <template #default>
            <div>
                <div v-if="info" ref="codeImgRef" style="width: 400px; margin: 0 auto;">
                    <div class="mb-6 f-w-6 f-s-16 c-333">{{ info?.trainingName }}</div>
                    <div class="mb-6">培训时间：{{ info?.trainingStart  }}~{{ info?.trainingEnd }}</div>
                    <div class="mb-6">培训方式：{{ selectDictLabel(dict.dm_training_join_type, info.joinType) }}</div>
                    <div class="mb-6">联系电话：{{ info?.tel }}</div>
                    <div>签到二维码</div>
                    <div class="d-flex j-c a-c pd-20">
                        <vueQr :text="VITE_APP_SHARE_QR_CODE_URL + '/meeting-sign-in?meetid=' + info?.id" :size="300"></vueQr>
                    </div>
                </div>
            </div>

            <div class="d-flex j-c">
                <el-button @click="saveImg">保存签到二维码</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script setup name="SignInCode" lang="ts">
import { propTypes } from '@/utils/propTypes';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import html2canvas from 'html2canvas';
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    title: propTypes.string.def('签到二维码'),
    width: propTypes.number.def(500),
    info: propTypes.any.def(null),
    dict: propTypes.object.def({})
});
const VITE_APP_SHARE_QR_CODE_URL = ref(import.meta.env.VITE_APP_SHARE_QR_CODE_URL);
const dialogVisible = ref(false);
const close = () => {
    emit('update:show', false);
    emit('close', false);
};
const codeImgRef = ref<HTMLElement | null>(null);
const saveImg = () => {
    html2canvas(codeImgRef.value, {
        useCORS: true,
        allowTaint: false,
        scale: 2
    }).then((canvas) => {
        const url = canvas.toDataURL('image/png');
        const a: any = document.createElement('a');
        a.download = `${props?.info?.trainingName}-签到二维码.png`;
        a.href = url;
        a.click();
    });
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
</script>