tuanfeng-pc-mer/src/views/shop/paymentCode/index.vue

<template>
    <div class="paymentCode">
        <div class="paymentCode-left">
            <div class="paymentCode-title">商家收款码样式</div>
            <template  v-if="canvasImg == ''">
                <!-- v-if="canvasImg == ''" -->
                <div ref="paymentCodeCanvas" id="paymentCodeCanvas">
                    <div class="paymentCode-img" ref="businessCardCanvas" id="businessCardCanvas">
                        <div class="paymentCode-img-title">扫码消费有补贴</div>
                        <div class="img-box">
                            <img :src="codeInfo.shopCode" alt="">
                        </div>
                        <div class="img-button">{{ codeInfo.shopName }}</div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="paymentCode-img-box">
                    <el-image style="width: 463px; height: 595px" :src="canvasImg" :preview-src-list="srcList">
                    </el-image>
                </div>
            </template>
            <div class="paymentCode-open">
                <div class="open-icon">
                    <img src="@/assets/images/scan.png" alt="">
                </div>
                <div class="open-text">打开微信扫一扫可付款</div>
            </div>
            <div class="paymentCode-btn" @click="downloadCode">下载收款码</div>
        </div>
        <div class="paymentCode-right">
            <div class="paymentCode-explain">
                <div class="explain-title">商家收款码使用说明</div>
                <div class="explain-text">商家收款码仅限已入驻团蜂平台的商家使用，请勿向他人出租商家收款码，否则可能被他人用于违法犯罪活动。</div>
            </div>
            <div class="paymentCode-mode">
                <div class="mode-title">支持支付方式</div>
                <div class="mode-list">
                    <div class="mode-item" v-for="(item, index) in payList" :key="index">
                        <div class="img">
                            <img class="" :src="item.url" />
                        </div>
                        <div class="text">{{ item.text }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getQrcode } from "@/api/shop"
import html2canvas from 'html2canvas'
export default {
    created() {
        this.generateCode()
        //  本地拿到商家名称
        this.codeInfo.roleName = localStorage.getItem('roleName')
    },
    data() {
        return {
            codeInfo: {},
            canvasImg: '',
            srcList: [],
            //  支持支付方式数据
            payList: [
                {
                    url: require('@/assets/images/mode-img/1.png'),
                    text: '团蜂佣金'
                },
                {
                    url: require('@/assets/images/mode-img/2.png'),
                    text: '团蜂代金券'
                },
                {
                    url: require('@/assets/images/mode-img/3.png'),
                    text: '建行支付'
                },
                {
                    url: require('@/assets/images/mode-img/4.png'),
                    text: '团蜂交易金'
                },
                {
                    url: require('@/assets/images/mode-img/5.png'),
                    text: '微信支付'
                },
                {
                    url: require('@/assets/images/mode-img/6.png'),
                    text: '支付宝'
                },
            ],
        }
    },
    updated() {
        this.generateImage()
    },
    methods: {
        async generateCode() {
            const res = await getQrcode({ codeType: 1, state: 1 })
            this.codeInfo = res.data
        },
        generateImage() {
            html2canvas(this.$refs.paymentCodeCanvas, {
                dpi: 300,
                useCORS: true,
                allowTaint: true,
                logging: false,
                scale: 1,
                windowHeight: this.$refs.businessCardCanvas?.offsetHeight,
                width: this.$refs.businessCardCanvas?.offsetWidth,
                height: this.$refs.businessCardCanvas?.offsetHeight
            }).then((canvas) => {
                this.canvasImg = canvas.toDataURL('image/png');
                // console.log(this.canvasImg);
                this.srcList.push(this.canvasImg)
            }).catch(() => {
                console.log("生成图片错误");
            });
        },
        downloadCode() {
            this.$confirm('您确定需要下载商家二维码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.setImgSize(463, 595)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消下载成功'
                });
            });
        },
        //  设置图片大小
        setImgSize(width, height) {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            // 设置canvas尺寸
            canvas.width = width
            canvas.height = height

            // 绘制图片到canvas上
            const img = new Image()
            img.src = this.canvasImg
            img.onload = () => {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

                // 将canvas内容转换为base64格式的图片数据
                const imageData = canvas.toDataURL('image/png')

                // 创建下载链接并设置文件名
                const filename = `${this.codeInfo.shopName}的商家收款码.png`
                const link = document.createElement('a')
                link.href = imageData
                link.download = filename

                // 将下载链接添加到页面并点击下载
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

img {
    margin: 0;
    padding: 0;
}

.paymentCode {
    display: flex;
    justify-content: center;
    gap: 117px;
    padding-top: 50px;

    .paymentCode-left {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .paymentCode-title {
            font-size: 28px;
            color: #000;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .paymentCode-img {
            width: 463px;
            height: 595px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #EF530E;
            border-radius: 10px;
            position: relative;

            .paymentCode-img-title {
                display: block !important;
                width: 100%;
                height: 76px !important;
                color: #fff !important;
                font-size: 50px !important;
                margin: 32px 0 24px !important;
                font-weight: 700 !important;
                font-style: italic !important;
                box-sizing: border-box;
                text-align: center;
                line-height: 76px;
            }

            .img-box {
                width: 300px;
                height: 300px;

                img {
                    width: 100% !important;
                    height: 100% !important;
                }
            }


            .img-button {
                width: 100% !important;
                height: 88px !important;
                background-color: #fff;
                position: absolute;
                left: 0;
                bottom: 0;
                border-radius: 0 0 9px 9px !important;
                text-align: center !important;
                line-height: 88px !important;
                font-size: 24px !important;
            }
        }

        .paymentCode-img-box {
            width: 463px;
            height: 595px;

            img {
                width: 100% !important;
                height: 100% !important;
            }
        }

        .paymentCode-open {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 30px;

            .open-icon {
                width: 50px;
                height: 50px;

                img {
                    width: 100% !important;
                    height: 100% !important;
                }
            }

            .open-text {
                font-size: 28px;
                color: #3D3D3D;
            }
        }

        .paymentCode-btn {
            width: 315px;
            height: 67px;
            background-color: #EF530E;
            color: #fff;
            border-radius: 10px;
            text-align: center;
            line-height: 67px;
            margin-top: 32px;
            font-size: 28px;
            cursor: pointer;
        }
    }

    .paymentCode-right {
        width: 846px;
        padding-top: 65px;

        .paymentCode-explain {
            width: 100%;
            height: 271px;
            padding: 22px 47px 40px 65px;
            box-sizing: border-box;
            background-color: #fff;

            .explain-title {
                margin-bottom: 33px;
                font-size: 30px;
                color: #000;
                font-weight: 600;
                text-align: center;
            }

            .explain-text {
                font-size: 28px;
                color: #000000;
            }
        }

        .paymentCode-mode {
            margin-top: 53px;
            padding: 22px 24px 44px;
            padding-right: 0;
            height: 271px;
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;

            .mode-title {
                margin-bottom: 33px;
                font-size: 30px;
                color: #000;
                font-weight: 600;
                text-align: center;
            }

            .mode-list {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;

                .mode-item {
                    width: calc(100% / 3);
                    height: 50px;
                    padding: 3px 0;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-top: 31px;
                    box-sizing: border-box;

                    .img {
                        img {
                            width: 50px !important;
                            height: 50px !important;
                        }
                    }

                    .text {
                        font-size: 28px;
                        color: #000000;
                    }
                }
            }
        }
    }

}
</style>