Browse Source

优化拉新活动保存图片调用

t_finder 1 month ago
parent
commit
351cb2056a

+ 94 - 28
pages/activity/invite-user/components/SharePopup.vue

@@ -84,6 +84,20 @@ export default {
       show: false,
     };
   },
+  computed: {
+    // 是否是ios环境
+    isIos() {
+      return this.$userAgent.isIos;
+    },
+    // 是否是安卓环境
+    isAndroid() {
+      return this.$userAgent.isAndroid;
+    },
+    // 是否是App环境
+    isApp() {
+      return this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+    }
+  },
   methods: {
     showPopup() {
       this.show = true;
@@ -92,44 +106,96 @@ export default {
       this.show = false;
     },
     async copyCode() {
-      await this.$native.clipboard.writeText(this.qrText);
-      this.$toast.success('复制成功');
-      this.onClose();
+      try {
+        await this.$native.clipboard.writeText(this.qrText || '复制的连接为空');
+        this.$toast.success('复制成功');
+        this.onClose();
+      } catch (error) {
+        console.log(error)
+      }
     },
     async saveImg() {
+      console.log(this.$userAgent)
+      // http://192.168.0.101:3000/h5/activity/invite-user/invite-new-user/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIyMjg4MiIsImNsaWVudCI6IjciLCJ1c2VyVHlwZSI6IjIiLCJtZXJjaGFudFNpZ24iOiJTWlgiLCJleHAiOjE3NDcyNjEwNjAsInVzZXJuYW1lIjoiMEVzSDAxNjY2MTc1NTMwU1pYIn0.0s0DI-hf_pFhgQUOQIueUAjzJ34WTv-XQLv0qBaYC1k
       try {
         const img = this.$refs.qrcode.$el;
-        const base64Data = img.src;
-        // 创建Blob对象
-        const byteString = atob(base64Data.split(',')[1]);
-        const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
-        const ab = new ArrayBuffer(byteString.length);
-        const ia = new Uint8Array(ab);
-        for (let i = 0; i < byteString.length; i++) {
-            ia[i] = byteString.charCodeAt(i);
+        const base64Data = img.src; // 获取图片的base64数据
+
+        if(this.isApp && this.isIos) {
+          window.webkit.messageHandlers.picture.postMessage(base64Data);
+        }else if(this.isApp && this.isAndroid) {
+          window.native.saveImg(base64Data);
+        }else {
+          // h5 保存图片
+          // 创建Blob对象
+          const byteString = atob(base64Data.split(',')[1]);
+          const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
+          const ab = new ArrayBuffer(byteString.length);
+          const ia = new Uint8Array(ab);
+          for (let i = 0; i < byteString.length; i++) {
+              ia[i] = byteString.charCodeAt(i);
+          }
+          const blob = new Blob([ab], { type: mimeString });
+  
+          // 创建下载链接
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.style.display = 'none';
+          a.href = url;
+          // 设置下载的文件名
+          a.download = '1.png';
+          document.body.appendChild(a);
+          a.click();
+  
+          // 清理
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+  
+          this.onClose();
         }
-        const blob = new Blob([ab], { type: mimeString });
-
-        // 创建下载链接
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        // 设置下载的文件名
-        a.download = '1.png';
-        document.body.appendChild(a);
-        a.click();
-
-        // 清理
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
-
-        this.onClose();
       } catch (error) {
         console.log(error)
       }
     }
   },
+  /* 示例参照代码
+  downloadFile (url) {
+    Toast.clear()
+    if (this.isiOS) {
+      try {
+        window.webkit.messageHandlers.picture.postMessage(url)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    if (this.isAndroid) {
+      try {
+        window.native.saveImg(url)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  },
+  downloadFileByBase64 (base64) {
+    this.downloadFile(base64)
+    switch (this.current) {
+      case 0: 
+        this.makePoint('si_game_script_images'); 
+        break
+      case 1: 
+        this.makePoint('si_crack_resource_images'); 
+        break
+      case 2: 
+        this.makePoint('si_location_service_images'); 
+        break
+      case 3: 
+        this.makePoint('si_entertainment_images'); 
+        break
+        case 4: this.makePoint('si_game_images'); 
+        break
+    }
+  },
+  */
 }
 </script>
 

+ 10 - 5
pages/activity/invite-user/components/layout.vue

@@ -49,6 +49,7 @@ export default {
     return {
       isApp: null,
       isAndroid: null,
+      isIos: null,
     };
   },
   mounted() {
@@ -56,6 +57,7 @@ export default {
     // 如果是H5、微信小程序,不需要显示次按钮
     this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
     this.isAndroid = this.$userAgent.isAndroid;
+    this.isIos = this.$userAgent.isIos;
     // if (!this.isApp) return this.visible = false
     // if (this.isApp && this.isAndroid) {
     //   this.visible = !!window.native.goneBack
@@ -106,20 +108,23 @@ export default {
 
       return bool || this.forceShowNavBar;
     },
-
   },
   methods: {
     goBackFun() {
-      if (this.$listeners.goBack) {
+      if (this?.$listeners?.goBack) {
         this.$emit('goBack');
         return;
       }
       // 如果为true是最前一页
       if (this.isGoBack) {
-        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
-        return
+        if(this.isApp && this.isAndroid) {
+          window.native.backClick();
+        }else if(this.isApp && this.isIos) {
+          window.webkit.messageHandlers.appGoBack.postMessage({})
+        }else {
+          this.$router.go(-1)
+        }
       }
-      this.$router.go(-1)
     },// 退出相关逻辑
   },
 };