ch-tgr-h5/src/views/User/Invite.vue

<template>
    <BasePage>
        <!-- v-if="data.Icon" -->
        <div class="ewm_bg" style="font-family: 'PingFang SC'">
            <div class="d1">
                <div class="w100">
                    <img id="invite_bg" :src="$file($datadic.getContent('code_yqmbj'))" crossorigin="anonymous" />
                    <!-- <img id="invite_bg" src="/img/invite_bg.jpg" crossorigin="anonymous"> -->
                </div>
                <img class="icon" :src="$file(data.Avatar) + '?t=1'" crossorigin="anonymous">
                <div class="name">
                    <b>{{ $substring(data.NickName, 0, 8) }}</b>
                    <p>邀请你使用泰古润平台<br>
                        共赴葡园品鉴醇香</p>
                </div>
                <div class="ewm_test box box-tb box-align-center">
                    <vue-qr v-if="!loading" :text="link" backgroundColor="rgb(255,255,255)"
                        colorLight="rgb(255,255,255)"></vue-qr>
                    <!-- <span>扫码立即注册</span> -->
                </div>

            </div>
        </div>
        <div id="sc_ewm" class="b_l_w bx" style="font-family: 'PingFang SC'"></div>

    </BasePage>
</template>

<script>
import { html2canvas, canvasToDataURL } from '@/utils/html2image';
import { useUserStore } from '@/stores/user';

export default {
    name: 'Invite',
    data() {
        return {
            loading: true,
            data: {
                Icon: '',
                Avatar: '',
                NickName: '',
            },
            link: '',
            userStore: useUserStore(),
        };
    },
    mounted() {
        this.loading = false;
        this.init().then(() => {
            // 等数据和二维码都准备好后再生成海报
            this.$nextTick(() => {
                const img = document.getElementById("invite_bg");
                if (img.complete) {
                    this.CreatePoster(".ewm_bg > div", "#sc_ewm");
                } else {
                    img.onload = () => this.CreatePoster(".ewm_bg > div", "#sc_ewm");
                }
            });
        });
    },
    methods: {
        async init() {
            try {
                // 获取用户信息
                const userInfo = await this.$get('/v1/client/DUsersClient');
                if (userInfo?.data) {
                    this.data.Avatar = userInfo.data.userimg || '';
                    this.data.NickName = userInfo.data.nickname || '';
                    this.data.Icon = userInfo.data.Icon || '';
                }
                // 生成包含邀请码的链接
                const inviteCode = userInfo?.data?.cellphone || '';
                this.link = `${location.origin}${location.pathname}#/Login?invite=${inviteCode}`;
            } catch (err) {
                console.error('获取用户信息失败:', err);
            }
        },
        async CreatePoster(divID, targetID) {
            var shareContent = document.querySelector(divID);
            var width = shareContent.offsetWidth;
            var height = shareContent.offsetHeight;

            try {
                // 等待头像图片加载完成
                const avatarImg = shareContent.querySelector('.icon');
                if (avatarImg && !avatarImg.complete) {
                    await new Promise((resolve, reject) => {
                        avatarImg.onload = resolve;
                        avatarImg.onerror = resolve; // 加载失败也继续
                        setTimeout(resolve, 5000); // 超时也继续
                    });
                }

                var canvas = await html2canvas(shareContent, {
                    scale: 2,
                    width: width,
                    height: height,
                    useCORS: true,
                    allowTaint: false,
                });
                var dataUrl = canvasToDataURL(canvas, "image/png", 1.0);
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                newImg.width = width;
                newImg.height = height;
                document.querySelector(targetID).appendChild(newImg);
            } catch (err) {
                console.error('生成海报失败', err);
            }
        },
    },
};
</script>

<style lang="less">
.ewm_bg {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 12.267vw;
    z-index: 0;
    height: 0px;
    overflow: hidden;

    .d1 {
        position: relative;

        .name {
            position: absolute;
            left: 20.27vw;
            bottom: 25.6vw;
            line-height: 6vw;
            width: 100%;

            b {
                font-size: 3.47vw;
                color: #3a0a05;
            }

            p {
                font-size: 3.2vw;
            }
        }

        .icon {
            position: absolute;
            width: 10.67vw;
            height: 10.67vw;
            left: 20.27vw;
            bottom: 42vw;
            border-radius: 50%;
        }

        .ewm_test {
            position: absolute;
            left: 23.73vw;
            bottom: 57.47vw;
            white-space: nowrap;

            img {
                width: 52.53vw;
                height: 52.53vw;
            }
        }
    }
}
</style>