单用户版海报问题

components/StorePoster.vue

@@ -31,7 +31,7 @@
     <view class="poster-pop" v-show="canvasStatus">
       <img :src="`${$VUE_APP_RESOURCES_URL}/images/poster-close.png`" class="close" @click="posterImageClose" mode="widthFix" />
       <image :src="posterImage" alt="tp" class="poster-image" show-menu-by-longpress mode="widthFix" />
-      <view class="keep">长按图片可以保存到手机</view>
+      <view class="save-poster" @click="saveImg">保存海报</view>
     </view>
     <view class="mask"></view>
   </view>
@@ -39,60 +39,79 @@
 
 <script>
 // import html2canvas from "html2canvas";
-  import {
+import { PosterCanvas } from '@/utils'
-    PosterCanvas
+import { getProductPoster } from '@/api/store'
-  } from "@/utils";
-  import {
-    getProductPoster
-  } from "@/api/store";
 
 export default {
-    name: "StorePoster",
+  name: 'StorePoster',
   props: {
     posterImageStatus: Boolean,
     posterData: Object,
-      goodId: String
+    goodId: String,
   },
   data: function() {
     return {
       canvasStatus: false,
-        posterImage: ""
+      posterImage: '',
-      };
+    }
   },
   watch: {
     posterImageStatus: function() {
-        var that = this;
+      var that = this
       if (that.posterImageStatus === true) {
         that.$nextTick(function() {
-            that.savePosterPath();
+          that.savePosterPath()
-          });
+        })
-        }
       }
     },
+  },
   mounted: function() {},
   methods: {
     posterImageClose: function() {
-        this.posterImageStatus = false;
+      this.posterImageStatus = false
-        this.canvasStatus = false;
+      this.canvasStatus = false
-        this.$emit("setPosterImageStatus");
+      this.$emit('setPosterImageStatus')
+    },
+    saveImg: function() {
+      this.downloadFile(this.posterImage)
+    },
+    downloadFile(url) {
+      uni.downloadFile({
+        url,
+        fail: function(res) {
+          console.log(res)
+
+          uni.showModal({
+            title: '提示',
+            content: '保存失败',
+          })
+        },
+        success: function(res) {
+          console.log(res)
+          uni.showModal({
+            title: '提示',
+            content: '保存成功',
+          })
+        },
+      })
     },
     savePosterPath: function() {
-        const that = this;
+      const that = this
 
       uni.showLoading({
-          title: "海报生成中",
+        title: '海报生成中',
-          mask: true
+        mask: true,
-        });
+      })
       getProductPoster(this.goodId, {
-            from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
+        from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType,
       })
         .then(res => {
-            this.canvasStatus = true;
+          this.canvasStatus = true
-            this.posterImage = res.data;
+          this.posterImage = res.data
         })
         .finally(() => {
-            uni.hideLoading();
+          uni.hideLoading()
-          });
+        })
       // return;
       // //清空图片重新生成
       // that.posterImage = "";
@@ -113,9 +132,9 @@
       //     uni.hideLoading();
       //   }
       // });
+    },
+  },
 }
-    }
-  };
 </script>
 
 <style scoped lang="less" lang="less">
@@ -201,7 +220,8 @@
   height: 0.76 * 100rpx;
   line-height: 0.76 * 100rpx;
   width: 100%;
-    margin-top: -0.04 * 100rpx;
+  margin-top: -0.1 * 100rpx;
+  border-radius: 0 0 10rpx 10rpx;
 }
 
 .poster-pop .keep {