diff --git a/src/styles/public.less b/src/styles/public.less index f6211d4..84e16f5 100644 --- a/src/styles/public.less +++ b/src/styles/public.less @@ -2310,6 +2310,8 @@ img { .box; .box-tb; .box-align-center; + .box-pack-center; + margin: 0 auto; padding: 6.8vw 9.2vw; width: 100%; flex-shrink: 0; diff --git a/src/styles/tailwind.less b/src/styles/tailwind.less index 6773a5f..9db9bb7 100644 --- a/src/styles/tailwind.less +++ b/src/styles/tailwind.less @@ -161,6 +161,7 @@ a { .box { display: flex; flex-wrap: nowrap; + flex-shrink: 0; } /*从左至右*/ diff --git a/src/views/Goods/GoodsDetail.vue b/src/views/Goods/GoodsDetail.vue index 4326647..b304b32 100644 --- a/src/views/Goods/GoodsDetail.vue +++ b/src/views/Goods/GoodsDetail.vue @@ -190,7 +190,8 @@ export default { shareLink: '', ShareImg: '', loading: false, - transparent: 'rgba(0,0,0,0)' + transparent: 'rgba(0,0,0,0)', + shareBoxHidden: false } }, methods: { @@ -245,8 +246,18 @@ export default { this.showShare = false; if (option.name === "分享海报") { this.show = true; + // 如果图片已生成且元素已隐藏，直接显示，不重复生成 + if (this.ShareImg && this.shareBoxHidden) { + this.loading = false; + return; + } + // 如果图片已生成但元素未隐藏，先隐藏元素再显示 + if (this.ShareImg) { + this.hideShareBox(); + this.loading = false; + return; + } this.loading = true; - this.ShareImg = ''; // 等待 DOM 渲染后再生成 setTimeout(() => { this.generateShareImg(); @@ -291,13 +302,20 @@ export default { useCORS: true, format: 'png' }); - document.querySelector('.share_box').style = 'display: none'; - this.loading = false; + this.hideShareBox(); this.loading = false; } catch (e) { console.error(e); this.loading = false; } + }, + + hideShareBox() { + const shareBox = document.querySelector('.share_box'); + if (shareBox) { + shareBox.style.display = 'none'; + this.shareBoxHidden = true; + } } } } diff --git a/src/views/Merchant/PayCode.vue b/src/views/Merchant/PayCode.vue index 8c6696d..cd2e491 100644 --- a/src/views/Merchant/PayCode.vue +++ b/src/views/Merchant/PayCode.vue @@ -57,6 +57,9 @@ export default { this.shopname = res.data.shopname this.shopimg = res.data.shopimg this.link = `${location.origin}${location.pathname}#/Checkout?id=${res.data.userid}` + this.$nextTick(() => { + this.generateImage() + }) }).catch(err => { this.$showFailToast('加载失败') }) @@ -64,20 +67,25 @@ export default { onBgLoad() { this.bgLoaded = true - // 背景图加载完成后自动生成图片 - this.generateImage() }, async generateImage() { - if (!this.bgLoaded || this.loading) return + if (this.loading) return this.loading = true try { await this.$nextTick() - await document.fonts.ready - await new Promise(resolve => setTimeout(resolve, 300)) + // Wait for fonts with fallback for WeChat/Safari compatibility + if (document.fonts && document.fonts.ready) { + await document.fonts.ready + } + await new Promise(resolve => setTimeout(resolve, 500)) const el = this.$refs.paycodeOriginalRef + if (!el) { + throw new Error('Element not found') + } this.generatedImage = await toDataURL(el, { format: 'png', pixelRatio: 3, useCORS: true }) } catch (e) { + console.error('生成收款码失败:', e) this.$showFailToast('生成失败') } finally { this.loading = false diff --git a/src/views/User/Invite.vue b/src/views/User/Invite.vue index 85b888f..ab0aa1e 100644 --- a/src/views/User/Invite.vue +++ b/src/views/User/Invite.vue @@ -4,7 +4,7 @@
- +
@@ -41,23 +41,46 @@ export default { }, link: '', userStore: null, + bgSrc: '', }; }, mounted() { this.loading = false; - this.init().then(() => { - // 等数据和二维码都准备好后再生成海报 - this.$nextTick(() => { - const img = document.getElementById("invite_bg"); - if (img.complete) { + this.preloadBackground().then(() => { + this.init().then(() => { + this.$nextTick(() => { this.CreatePoster(".ewm_bg > div", "#sc_ewm"); - } else { - img.onload = () => this.CreatePoster(".ewm_bg > div", "#sc_ewm"); - } + }); }); }); }, methods: { + async preloadBackground() { + const bgUrl = this.$file(this.$datadic.getContent('code_yqmbj')); + const cacheKey = 'invite_bg_cache'; + const cached = localStorage.getItem(cacheKey); + if (cached) { + this.bgSrc = cached; + return; + } + try { + const response = await fetch(bgUrl, { mode: 'cors' }); + const blob = await response.blob(); + const reader = new FileReader(); + return new Promise((resolve) => { + reader.onloadend = () => { + localStorage.setItem(cacheKey, reader.result); + this.bgSrc = reader.result; + resolve(); + }; + reader.readAsDataURL(blob); + }); + } catch (e) { + console.error('Background preload failed:', e); + this.bgSrc = bgUrl; + resolve(); + } + }, async init() { try { // 获取用户信息 @@ -78,15 +101,27 @@ export default { var shareContent = document.querySelector(divID); try { - // 等待头像图片加载完成 + // Wait for background and avatar images to load + const promises = []; + const bgImg = shareContent.querySelector('#invite_bg'); + if (bgImg && !bgImg.complete) { + promises.push(new Promise(resolve => { + bgImg.onload = resolve; + bgImg.onerror = resolve; + })); + } const avatarImg = shareContent.querySelector('.icon'); if (avatarImg && !avatarImg.complete) { - await new Promise((resolve, reject) => { + promises.push(new Promise(resolve => { avatarImg.onload = resolve; - avatarImg.onerror = resolve; // 加载失败也继续 - setTimeout(resolve, 5000); // 超时也继续 - }); + avatarImg.onerror = resolve; + })); } + if (promises.length > 0) { + await Promise.all(promises); + } + // Extra delay for Safari/WeChat compatibility + await new Promise(resolve => setTimeout(resolve, 300)); var dataUrl = await toDataURL(shareContent, { format: 'png', pixelRatio: 2, useCORS: true }); var newImg = document.createElement("img");