静态页面

src/pages/WoDe/XiaZaiErWeiMa/index.vue

@@ -25,7 +25,7 @@ import html2canvas from 'html2canvas'
 import QRCode from 'qrcode'
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState } = createNamespacedHelpers('user')
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
@@ -55,6 +55,9 @@ export default {
     })
   },
   methods: {
+    ...mapUserActions([
+      'UploadBase64Img'
+    ]),
     GetBase64Image (img) {
       let canvas = document.createElement('canvas')
       canvas.width = img.width
@@ -67,8 +70,14 @@ export default {
       return dataURL
     },
     SaveImg () {
-      if (this.$refs.CanvasImgDownload) {
-        this.$refs.CanvasImgDownload.click()
+      if (window.downloadImage) {
+        this.UploadBase64Img({ data: { image: this.Base64Img } }).then((res) => {
+          window.downloadImage(res.data.data)
+        })
+      } else {
+        if (this.$refs.CanvasImgDownload) {
+          this.$refs.CanvasImgDownload.click()
+        }
       }
     },
     Init () {

src/store/user/index.js

@@ -124,6 +124,11 @@ export default {
     }
   },
   actions: {
+    UploadBase64Img (context, payload) { // 上传base64图片
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.UploadBase64Img, context, payload, 1000)
+      })
+    },
     NewBindAliPay (context, payload) { // 绑定支付宝（新）
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.NewBindAliPay, context, payload, 1000)

src/util/Api.js

@@ -2,6 +2,10 @@
 const prefix = '/api'
 
 const $api = {
+  UploadBase64Img: { // 上传base64图片
+    method: 'post',
+    url: `${prefix}/app/base64`
+  },
   NewBindAliPay: { // 绑定支付宝（新）
     method: 'post',
     url: `${prefix}/app/:id/ali-pay`