certificate-admin/ruoyi-ui/src/components/MyDialog/index.vue

<template>
    <div >
        <div v-show="imgShow==1" style="position: fixed;background: white;width: 100%;height: 100%;top: 0;left: 0;">
            <p style="text-align: center;margin: 10px 10px;font-size:20px">查询结果<i style="float: right;" class="el-icon-close" @click="close"></i></p>
            <p style="margin: 5px 15px;">您以证书编号：{{certNumber}}为关键字查询验证证书结果如下：</p>
            <p style="margin: 5px 15px;color: #403f3f;font-size: 14px;">经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请长按图片进行保存。</p>
            <img :src="imgUrl" style="width: 100%;aspect-ratio: 750/525;" ref="certImg">
            <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;margin: 5px 15px;">提示：伪造证书系违法行为，请勿尝试。</p>
            <div style="margin:10px 15px;text-align: center;">
                <el-button type="primary" style="width: 100%;" >长按保存图片</el-button>
                <!-- @click="download" -->
                <el-button @click="close" style="width: 100%;margin: 10px 0;">取 消</el-button>
            </div>
        </div>
        <div v-show="imgShow==2" style="position: fixed;background: white;width: 100%;height: 100%;top: 0;left: 0;">
            <p style="text-align: center;margin:20px 10px;font-size:20px">查询结果<i style="float: right;" class="el-icon-close" @click="close"></i></p>
            <p style="margin: 15px 15px;">您以证书编号：{{certNumber}}为关键字查询验证证书结果如下：</p>
            <p style="margin: 15px 15px;">未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
            <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;margin: 5px 15px;">如有疑问，请通知持证人与我会联系。</p>
            <div style="margin:15px 15px;text-align: center;">
                <el-button @click="close" type="primary" style="width: 100%;">确 定</el-button>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    name: "MyDialog",
    data(){
        return{

        }
    },
    props:{
        certNumber:String,
        imgUrl:String,
        imgShow:Number,
        htmlTitle:String
    },
    methods:{
        close(){
            this.$emit('mydialogshow', 0)
        },
        download(){
            const el = document.createElement('a')
            // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
            el.href = this.$refs.certImg.src
            el.download = this.htmlTitle
            // 创建一个点击事件并对 a 标签进行触发
            const event = new MouseEvent('click')
            el.dispatchEvent(event)
        }
    }
}
</script>

<style>

</style>