save

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;

src/styles/tailwind.less

@@ -161,6 +161,7 @@ a {
 .box {
   display: flex;
   flex-wrap: nowrap;
+  flex-shrink: 0;
 }
 
 /*从左至右*/

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;
+      }
     }
   }
 }

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()
+        // 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, 300))
+        }
+        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

src/views/User/Invite.vue

@@ -4,7 +4,7 @@
         <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="bgSrc" 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">
@@ -41,23 +41,46 @@ export default {
             },
             link: '',
             userStore: null,
+            bgSrc: '',
         };
     },
     mounted() {
         this.loading = false;
+        this.preloadBackground().then(() => {
             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 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");