<script setup>
import {onMounted} from 'vue';
import UQRCode from 'uqrcodejs';

const CODE_CONTENT = 'https://www.baidu.com/';

onMounted(() => {
// 获取uQRCode实例
    const qr = new UQRCode();
// 设置二维码内容
    qr.data = CODE_CONTENT;
// 设置二维码大小，必须与canvas设置的宽高一致
    qr.size = 160;
// 调用制作二维码方法
    qr.make();
// 获取canvas元素
    const canvas = document.getElementById("qrcode");
// 获取canvas上下文
    const canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
    qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
    qr.drawCanvas();
})
</script>

<template>
    <!-- 联系客服 -->
    <div class="flex justify-center items-center flex-grow">
        <div class="flex flex-col items-center justify-center gap-[12px] rounded-[12px] bg-white py-[20px] px-[15px]">
            <div class="title">微信扫码添加</div>
            <div class="w-[160px] h-[160px]">
                <canvas id="qrcode" width="160" height="160"></canvas>
            </div>
            <div class="info">请发送 [个人中心] 页面截图给客服</div>
            <div class="info">再描述您的问题</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
}

.info {
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
}
</style>
