share

pages/mall/index.vue

@@ -151,17 +151,10 @@
           </view>
         </view>
       </view> -->
-      <canvas
-        style="
-          width: 280px;
-          height: 355px;
-          margin-top: 15px;
-          padding: 60rpx 0;
-          border-radius: 20rpx;
-        "
-        canvas-id="posters"
-        id="posters"
-      ></canvas>
+      <image
+        style="width: 560rpx; height: 710rpx"
+        :src="shareInfo.storeCodeImg"
+      ></image>
       <view class="bottom-group flex-row view_3">
         <text>下载海报</text>
         <text class="text_18">下载二维码</text>
@@ -192,7 +185,7 @@
 <script>
 import notLogged from '@/components/not-logged/not-logged.vue'
 import uGap from '@/components/u-gap/u-gap.vue'
-import { back, go2, loginGo2, screenShot } from '@/utils/hook.js'
+import { back, go2, loginGo2, saveImage } from '@/utils/hook.js'
 import {
   SupplierList,
   productStatus,
@@ -276,10 +269,6 @@ export default {
     loginChange() {
       go2('login')
     },
-    // 截屏
-    makeScreenShot() {
-      screenShot()
-    },
     // 获取上新商品数量
     getSupplier(id) {
       storeDetail(id)
@@ -409,9 +398,7 @@ export default {
             this.visible = true
             this.shareInfo.storeCodeImg = `data:image/png;base64,${res}`
             this.shareInfo.storeName = this.storeInformation.name
-            setTimeout(() => {
-              this.createCanvas()
-            }, 500)
+            saveImage(this.shareInfo.storeCodeImg)
           }
         })
       } else {
@@ -424,11 +411,6 @@ export default {
     closeShare() {
       this.visible = false
     },
-    createCanvas() {
-      let ctx = uni.createCanvasContext('posters', this)
-      ctx.drawImage('/static/imgs/mall/qrCode-bg.png', 0, 0, 280, 355)
-      ctx.draw(false, () => {})
-    },
   },
 }
 </script>
@@ -742,4 +724,9 @@ export default {
     white-space: nowrap;
   }
 }
+#posters {
+  margin-top: 15px;
+  padding: 60rpx 0;
+  border-radius: 20rpx;
+}
 </style>

utils/hook.js

@@ -11,7 +11,7 @@ const tabList = ['client', 'trade', 'mall', 'mine']
 export function tab2(tabPage) {
   if (tabList.includes(tabPage)) {
     uni.switchTab({
-      url: `/pages/${tabPage}/index`
+      url: `/pages/${tabPage}/index`,
     })
   }
 }
@@ -22,7 +22,7 @@ export function tab2(tabPage) {
 export function back() {
   if (getCurrentPages().length > 1) {
     uni.navigateBack({
-      delta: 1
+      delta: 1,
     })
   } else {
     go2('client')
@@ -51,16 +51,16 @@ export function go2(url, data = {}, isRedirect = false) {
   })
   if (tabList.includes(url)) {
     uni.switchTab({
-      url: `/pages/${url}/index${param ? '?' + param : ''}`
+      url: `/pages/${url}/index${param ? '?' + param : ''}`,
     })
   } else {
     if (isRedirect) {
       uni.redirectTo({
-        url: `/pages/${url}/index${param ? '?' + param : ''}`
+        url: `/pages/${url}/index${param ? '?' + param : ''}`,
       })
     } else {
       uni.navigateTo({
-        url: `/pages/${url}/index${param ? '?' + param : ''}`
+        url: `/pages/${url}/index${param ? '?' + param : ''}`,
       })
     }
   }
@@ -125,7 +125,7 @@ export function uploadImage(sourceType = ['album', 'camera'], count = 1) {
       fail: (err) => {
         console.error('chooseImage error:', err)
         resolve(null)
-      }
+      },
     })
   })
 }
@@ -144,7 +144,7 @@ export function uploadFile(path, type = 'image') {
       name: type,
       header: {
         Authorization: store.state.qnToken,
-        'X-APP-ID': XAPPID
+        'X-APP-ID': XAPPID,
       },
       // fileType: type,
       success: (res) => {
@@ -159,7 +159,7 @@ export function uploadFile(path, type = 'image') {
       fail: (err) => {
         console.error('uploadFile error:', err)
         reject(err)
-      }
+      },
     })
   })
 }
@@ -190,9 +190,9 @@ export function screenShot() {
               uni.showToast({
                 title: '保存图片成功',
                 mask: false,
-                duration: 1500
+                duration: 1500,
               })
-            }
+            },
           })
         },
         function (e) {
@@ -200,7 +200,7 @@ export function screenShot() {
           uni.showToast({
             title: '保存图片失败，请手动截图',
             mask: false,
-            duration: 1500
+            duration: 1500,
           })
         }
       )
@@ -210,8 +210,33 @@ export function screenShot() {
       uni.showToast({
         title: '保存图片失败，请手动截图',
         mask: false,
-        duration: 1500
+        duration: 1500,
       })
     }
   )
 }
+
+/**
+ * 判断是否授权相册并保存图片base64到相册
+ * @param {string} base64 图片base64
+ */
+export function saveImage(base64) {
+  uni.saveImageToPhotosAlbum({
+    filePath: base64,
+    success: function () {
+      uni.showToast({
+        title: '保存图片成功',
+        mask: false,
+        duration: 1500,
+      })
+    },
+    fail: function (err) {
+      console.log(err)
+      uni.showToast({
+        title: '保存图片失败，请手动截图',
+        mask: false,
+        duration: 1500,
+      })
+    },
+  })
+}