单用户版海报问题

components/StorePoster.vue

@@ -31,68 +31,87 @@
     <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>
 </template>
 
 <script>
-  // import html2canvas from "html2canvas";
+// import html2canvas from "html2canvas";
-  import {
+import { PosterCanvas } from '@/utils'
-    PosterCanvas
+import { getProductPoster } from '@/api/store'
-  } from "@/utils";
+
-  import {
+export default {
-    getProductPoster
+  name: 'StorePoster',
-  } from "@/api/store";
-
-  export default {
-    name: "StorePoster",
   props: {
     posterImageStatus: Boolean,
     posterData: Object,
-      goodId: String
+    goodId: String,
   },
-    data: function () {
+  data: function() {
     return {
       canvasStatus: false,
-        posterImage: ""
+      posterImage: '',
-      };
+    }
   },
   watch: {
-      posterImageStatus: function () {
+    posterImageStatus: function() {
-        var that = this;
+      var that = this
       if (that.posterImageStatus === true) {
-          that.$nextTick(function () {
+        that.$nextTick(function() {
-            that.savePosterPath();
+          that.savePosterPath()
-          });
+        })
-        }
       }
     },
-    mounted: function () {},
+  },
+  mounted: function() {},
   methods: {
-      posterImageClose: function () {
+    posterImageClose: function() {
-        this.posterImageStatus = false;
+      this.posterImageStatus = false
-        this.canvasStatus = false;
+      this.canvasStatus = false
-        this.$emit("setPosterImageStatus");
+      this.$emit('setPosterImageStatus')
     },
-      savePosterPath: function () {
+    saveImg: function() {
-        const that = this;
+      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
 
       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,17 +132,17 @@
       //     uni.hideLoading();
       //   }
       // });
-      }
+    },
-    }
+  },
-  };
+}
 </script>
 
 <style scoped lang="less" lang="less">
-  .poster-first {
+.poster-first {
   overscroll-behavior: contain;
-  }
+}
 
-  .poster-pop {
+.poster-pop {
   width: 4.5 * 100rpx;
   height: 8 * 100rpx;
   position: fixed;
@@ -132,68 +151,68 @@
   z-index: 99;
   top: 50%;
   margin-top: -4.6 * 100rpx;
-  }
+}
 
-  .poster-pop .canvas {
+.poster-pop .canvas {
   background-color: #ffffff;
   height: 8 * 100rpx;
-  }
+}
 
-  .poster-pop .poster-image {
+.poster-pop .poster-image {
   width: 100%;
   height: auto;
-  }
+}
 
-  .poster-pop .canvas .image {
+.poster-pop .canvas .image {
   width: 4.5 * 100rpx;
   height: 4.5 * 100rpx;
   display: block;
-  }
+}
 
-  .poster-pop .canvas .text {
+.poster-pop .canvas .text {
   text-align: center;
   color: #000000;
   margin-top: 0.32 * 100rpx;
-  }
+}
 
-  .poster-pop .canvas .text.black {
+.poster-pop .canvas .text.black {
   height: 0.68 * 100rpx;
-  }
+}
 
-  .poster-pop .canvas .text.rad {
+.poster-pop .canvas .text.rad {
   color: #ff0000;
-  }
+}
 
-  .poster-pop .canvas .code {
+.poster-pop .canvas .code {
   height: 1.4 * 100rpx;
   display: flex;
-  }
+}
 
-  .poster-pop .canvas .code .code-img {
+.poster-pop .canvas .code .code-img {
   width: 33%;
   padding: 0.06 * 100rpx;
-  }
+}
 
-  .poster-pop .canvas .code .code-img image {
+.poster-pop .canvas .code .code-img image {
   width: 100%;
-  }
+}
 
-  .poster-pop .canvas .code .code-text {
+.poster-pop .canvas .code .code-text {
   width: 60%;
   font-size: 0.12 * 100rpx;
   line-height: 1.64 * 100rpx;
-  }
+}
 
-  .poster-pop .close {
+.poster-pop .close {
   width: 0.46 * 100rpx;
   height: 0.75 * 100rpx;
   position: fixed;
   right: 0;
   top: -0.73 * 100rpx;
   display: block;
-  }
+}
 
-  .poster-pop .save-poster {
+.poster-pop .save-poster {
   background-color: #df2d0a;
   font-size: 0.22 * 100rpx;
   color: #fff;
@@ -201,17 +220,18 @@
   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 {
+.poster-pop .keep {
   color: #fff;
   text-align: center;
   font-size: 0.25 * 100rpx;
   margin-top: 0.1 * 100rpx;
-  }
+}
 
-  .mask {
+.mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -219,5 +239,5 @@
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 9;
-  }
+}
 </style>