<template>
    <div class="downloadQR" v-show="isshow">
        <div class="box">
            <img :src="imgUrl" style="width: 300px;height: 300px;" alt="">
            <div class="btnStyle">
                <el-button type="primary" @click="isshow = false">取消</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a :href="imgUrl"><el-button type="primary" @click="downImg">下载</el-button></a>
            </div>

        </div>
    </div>
</template>
<script>
import { getwxacode } from '@/api/shop'

export default {
    data() {
        return {
            isshow: false,
            imgUrl: ""
        }
    },
    mounted() {
    },
    methods: {
        show() {
            this.getlist()
        },
        async getlist() {
            let res = await getwxacode({
                shopId: localStorage.getItem('shopId')
            })
            this.isshow = true

            this.imgUrl = res
        }, downImg() {
            // window.location.href()
            window.URL.revokeObjectURL(this.imgUrl)
        }
    }
}
</script>
<style scoped lang="scss">
.downloadQR {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba($color: #000000, $alpha: .6);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

    .box {
        padding: 20px;
        border-radius: 3px;
        height: 400px;
        width: 340px;
        background-color: #fff;
        display: flex;
        // align-items: center;
        // justify-content: center;
        flex-direction: column;

    }



    .btnStyle {
        margin-top: 20px;
        text-align: center;
    }
}
</style>