From c4a848b2e331cf9f2e1423da449cfa4568476f23 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Thu, 20 May 2021 01:45:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E7=94=A8=E6=88=B7=E7=89=88=E6=B5=B7?=
 =?UTF-8?q?=E6=8A=A5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StorePoster.vue | 370 +++++++++++++++++++------------------
 1 file changed, 195 insertions(+), 175 deletions(-)

diff --git a/components/StorePoster.vue b/components/StorePoster.vue
index 75da5bc..da26f44 100644
--- a/components/StorePoster.vue
+++ b/components/StorePoster.vue
@@ -31,193 +31,213 @@
     <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 {
-    PosterCanvas
-  } from "@/utils";
-  import {
-    getProductPoster
-  } from "@/api/store";
-
-  export default {
-    name: "StorePoster",
-    props: {
-      posterImageStatus: Boolean,
-      posterData: Object,
-      goodId: String
+// import html2canvas from "html2canvas";
+import { PosterCanvas } from '@/utils'
+import { getProductPoster } from '@/api/store'
+
+export default {
+  name: 'StorePoster',
+  props: {
+    posterImageStatus: Boolean,
+    posterData: Object,
+    goodId: String,
+  },
+  data: function() {
+    return {
+      canvasStatus: false,
+      posterImage: '',
+    }
+  },
+  watch: {
+    posterImageStatus: function() {
+      var that = this
+      if (that.posterImageStatus === true) {
+        that.$nextTick(function() {
+          that.savePosterPath()
+        })
+      }
     },
-    data: function () {
-      return {
-        canvasStatus: false,
-        posterImage: ""
-      };
+  },
+  mounted: function() {},
+  methods: {
+    posterImageClose: function() {
+      this.posterImageStatus = false
+      this.canvasStatus = false
+      this.$emit('setPosterImageStatus')
     },
-    watch: {
-      posterImageStatus: function () {
-        var that = this;
-        if (that.posterImageStatus === true) {
-          that.$nextTick(function () {
-            that.savePosterPath();
-          });
-        }
-      }
+    saveImg: function() {
+      this.downloadFile(this.posterImage)
     },
-    mounted: function () {},
-    methods: {
-      posterImageClose: function () {
-        this.posterImageStatus = false;
-        this.canvasStatus = false;
-        this.$emit("setPosterImageStatus");
-      },
-      savePosterPath: function () {
-        const that = this;
-
-        uni.showLoading({
-          title: "海报生成中",
-          mask: true
-        });
-        getProductPoster(this.goodId, {
-            from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
+    downloadFile(url) {
+      uni.downloadFile({
+        url,
+        fail: function(res) {
+          console.log(res)
+
+          uni.showModal({
+            title: '提示',
+            content: '保存失败',
           })
-          .then(res => {
-            this.canvasStatus = true;
-            this.posterImage = res.data;
+        },
+        success: function(res) {
+          console.log(res)
+          uni.showModal({
+            title: '提示',
+            content: '保存成功',
           })
-          .finally(() => {
-            uni.hideLoading();
-          });
-        // return;
-        // //清空图片重新生成
-        // that.posterImage = "";
-        // uni.showLoading({ title: "海报生成中", mask: true });
-        // console.log(this);
-        // var prodId = that.$yrouter.currentRoute.query.id;
-        // uni.downloadFile({
-        //   url:
-        //     this.$VUE_APP_API_URL +
-        //     "/shareImg/" +
-        //     prodId +
-        //     "?shareImgName=" +
-        //     this.posterData.code,
-        //   fail: function(res) {},
-        //   success: function(res) {
-        //     that.canvasStatus = true;
-        //     that.posterImage = res.tempFilePath;
-        //     uni.hideLoading();
-        //   }
-        // });
-      }
-    }
-  };
+        },
+      })
+    },
+    savePosterPath: function() {
+      const that = this
+
+      uni.showLoading({
+        title: '海报生成中',
+        mask: true,
+      })
+      getProductPoster(this.goodId, {
+        from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType,
+      })
+        .then(res => {
+          this.canvasStatus = true
+          this.posterImage = res.data
+        })
+        .finally(() => {
+          uni.hideLoading()
+        })
+      // return;
+      // //清空图片重新生成
+      // that.posterImage = "";
+      // uni.showLoading({ title: "海报生成中", mask: true });
+      // console.log(this);
+      // var prodId = that.$yrouter.currentRoute.query.id;
+      // uni.downloadFile({
+      //   url:
+      //     this.$VUE_APP_API_URL +
+      //     "/shareImg/" +
+      //     prodId +
+      //     "?shareImgName=" +
+      //     this.posterData.code,
+      //   fail: function(res) {},
+      //   success: function(res) {
+      //     that.canvasStatus = true;
+      //     that.posterImage = res.tempFilePath;
+      //     uni.hideLoading();
+      //   }
+      // });
+    },
+  },
+}
 </script>
 
 <style scoped lang="less" lang="less">
-  .poster-first {
-    overscroll-behavior: contain;
-  }
-
-  .poster-pop {
-    width: 4.5 * 100rpx;
-    height: 8 * 100rpx;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 99;
-    top: 50%;
-    margin-top: -4.6 * 100rpx;
-  }
-
-  .poster-pop .canvas {
-    background-color: #ffffff;
-    height: 8 * 100rpx;
-  }
-
-  .poster-pop .poster-image {
-    width: 100%;
-    height: auto;
-  }
-
-  .poster-pop .canvas .image {
-    width: 4.5 * 100rpx;
-    height: 4.5 * 100rpx;
-    display: block;
-  }
-
-  .poster-pop .canvas .text {
-    text-align: center;
-    color: #000000;
-    margin-top: 0.32 * 100rpx;
-  }
-
-  .poster-pop .canvas .text.black {
-    height: 0.68 * 100rpx;
-  }
-
-  .poster-pop .canvas .text.rad {
-    color: #ff0000;
-  }
-
-  .poster-pop .canvas .code {
-    height: 1.4 * 100rpx;
-    display: flex;
-  }
-
-  .poster-pop .canvas .code .code-img {
-    width: 33%;
-    padding: 0.06 * 100rpx;
-  }
-
-  .poster-pop .canvas .code .code-img image {
-    width: 100%;
-  }
-
-  .poster-pop .canvas .code .code-text {
-    width: 60%;
-    font-size: 0.12 * 100rpx;
-    line-height: 1.64 * 100rpx;
-  }
-
-  .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 {
-    background-color: #df2d0a;
-    font-size: 0.22 * 100rpx;
-    color: #fff;
-    text-align: center;
-    height: 0.76 * 100rpx;
-    line-height: 0.76 * 100rpx;
-    width: 100%;
-    margin-top: -0.04 * 100rpx;
-  }
-
-  .poster-pop .keep {
-    color: #fff;
-    text-align: center;
-    font-size: 0.25 * 100rpx;
-    margin-top: 0.1 * 100rpx;
-  }
-
-  .mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    z-index: 9;
-  }
+.poster-first {
+  overscroll-behavior: contain;
+}
+
+.poster-pop {
+  width: 4.5 * 100rpx;
+  height: 8 * 100rpx;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+  top: 50%;
+  margin-top: -4.6 * 100rpx;
+}
+
+.poster-pop .canvas {
+  background-color: #ffffff;
+  height: 8 * 100rpx;
+}
+
+.poster-pop .poster-image {
+  width: 100%;
+  height: auto;
+}
+
+.poster-pop .canvas .image {
+  width: 4.5 * 100rpx;
+  height: 4.5 * 100rpx;
+  display: block;
+}
+
+.poster-pop .canvas .text {
+  text-align: center;
+  color: #000000;
+  margin-top: 0.32 * 100rpx;
+}
+
+.poster-pop .canvas .text.black {
+  height: 0.68 * 100rpx;
+}
+
+.poster-pop .canvas .text.rad {
+  color: #ff0000;
+}
+
+.poster-pop .canvas .code {
+  height: 1.4 * 100rpx;
+  display: flex;
+}
+
+.poster-pop .canvas .code .code-img {
+  width: 33%;
+  padding: 0.06 * 100rpx;
+}
+
+.poster-pop .canvas .code .code-img image {
+  width: 100%;
+}
+
+.poster-pop .canvas .code .code-text {
+  width: 60%;
+  font-size: 0.12 * 100rpx;
+  line-height: 1.64 * 100rpx;
+}
+
+.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 {
+  background-color: #df2d0a;
+  font-size: 0.22 * 100rpx;
+  color: #fff;
+  text-align: center;
+  height: 0.76 * 100rpx;
+  line-height: 0.76 * 100rpx;
+  width: 100%;
+  margin-top: -0.1 * 100rpx;
+  border-radius: 0 0 10rpx 10rpx;
+}
+
+.poster-pop .keep {
+  color: #fff;
+  text-align: center;
+  font-size: 0.25 * 100rpx;
+  margin-top: 0.1 * 100rpx;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+}
 </style>