GFRS-2591【前端】修改桂冠海报页面

src/api/ebiz/laurelClub/laurelClub.js

@@ -172,7 +172,7 @@ export function queryTeamList(data) {
   })
 }
 
-// 查询团队数据
+// 获取海报数据的
 export function queryPosterDataUrl(data) {
   return request({
     url: getUrl('/agent/laure/queryPoster', 1),

src/views/ebiz/laurelClub/ExclusivePosters.vue

@@ -28,8 +28,8 @@
       <div style='position: relative;overflow-x: hidden;'>
         <img id='poster_main-image' src='' class='poster_main-image' style='display: none' />
         <div class='bottom_btn'>
-          <van-button class='share-posters' type='default' @click='uploadImg(0)'>分享</van-button>
-          <van-button class='download-posters' type='default' @click='uploadImg(1)'>下载</van-button>
+          <van-button class='share-posters' type='default' @click='shareFunc()' v-no-more-click="1000">分享</van-button>
+          <van-button class='download-posters' type='default' @click='downLoadImagesFunc()' v-no-more-click="1000">下载</van-button>
         </div>
       </div>
       <canvas id='canvas' width='750' height='1271' style='display: none'></canvas>
@@ -71,8 +71,7 @@ export default {
         memberGradeImg: '', // 会员级别图片地址
         imageUrl: '', // canvas绘图后生产的base64格式的图片链接地址
         downLoadUrl: '' // 下载图片的链接地址
-      },
-      canvasHeight: ''
+      }
     }
   },
   mounted() {
@@ -134,12 +133,6 @@ export default {
      * @Date:2021-08-25
      */
     queryPosterDataFunc() {
-      this.$toast.loading({
-        duration: 0, // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        loadingType: 'spinner',
-        message: '加载中……'
-      })
       let dateArr = this.datePickerObj.filterDate.split('-')
       let params = { 'monthStr': dateArr[0] + dateArr[1] }
       queryPosterDataUrl(params).then(res => {
@@ -173,22 +166,28 @@ export default {
      * @Date:2021-08-25
      */
     getCanvas() {
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
       let that = this
       let canvas = document.getElementById('canvas')
       let ctx = canvas.getContext('2d')
       // 重置canvas绘图后生产的base64格式的图片链接，防止缓存导致链接错误
       that.posterCanvasObj.imageUrl = ''
 
+      // 头像图片
+      let agentHeadImg = new Image()
+      agentHeadImg.setAttribute('crossOrigin', 'Anonymous')
+      agentHeadImg.src = that.posterCanvasObj.agentHeadImg
+
       // 背景图片
       let backgroundImg = new Image()
       backgroundImg.setAttribute('crossOrigin', 'Anonymous')
       backgroundImg.src = that.posterCanvasObj.backgroundImg
 
-      // 头像图片
-      let agentHeadImg = new Image()
-      agentHeadImg.setAttribute('crossOrigin', 'anonymous')
-      agentHeadImg.src = that.posterCanvasObj.agentHeadImg
-
       // 皇冠图片
       let crownImg = new Image()
       crownImg.setAttribute('crossOrigin', 'Anonymous')
@@ -235,7 +234,8 @@ export default {
           document.getElementById('poster_main-image').style.display = 'block'
           // 将canvas绘图后生产的base64格式的图片链接赋值给变量
           that.posterCanvasObj.imageUrl = genUrl
-        }, 1000)
+          that.uploadImg()
+        }, 2000)
       }
     },
 
@@ -262,18 +262,11 @@ export default {
      * @Description: 上传图片的方法
      * @Description: 分享与下载功能，需要先把canvas绘图后生产的base64格式的图片链接地址进行上传，
      * @Description: 然后利用返回的path路径进行后续的'分享'或者'下载'操作
-     * @params: type -- 触发此方法的事件，0-分享事件；1-下载事件
      * @author:zhangqi
      * @Date:2021-08-26
      */
-    uploadImg(type) {
+    uploadImg() {
       let that = this
-      this.$toast.loading({
-        duration: 0, // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        loadingType: 'spinner',
-        message: '加载中……'
-      })
       let time = that.getCurrentDateFunc().split('-')
       let currentTime = time[0] + time[1]
       let imgName = that.posterCanvasObj.agentcode + currentTime + Math.floor(Math.random() * 100).toString() + '.png'
@@ -284,13 +277,6 @@ export default {
             this.$toast.clear()
             // 给下载图片的链接地址这个变量进行赋值
             that.posterCanvasObj.downLoadUrl = config.imgDomain + `/returnImageStream?a=b.jpg&timeStamp=${new Date().getTime()}&imgPath=${encodeURI(res.path).replace(/\+/g, '%2B')}`
-            if (type) {
-              // 调用原生下载图片的方法
-              that.downLoadImagesFunc()
-            } else {
-              // 调用原生分享微信好友和微信朋友圈的方法
-              that.shareFunc()
-            }
           }
         }
       ).catch(err => {
@@ -320,13 +306,22 @@ export default {
      * @Date:2021-08-26
      */
     downLoadImagesFunc() {
-      // eslint-disable-next-line no-undef
-      EWebBridge.webCallAppInJs('download', {
-        name: '桂冠专属海报.png',
-        url: this.posterCanvasObj.downLoadUrl
-      }).then(() => {
-        console.log('下载完成')
-      })
+      if (this.posterCanvasObj.downLoadUrl) {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('download', {
+          name: '桂冠专属海报.png',
+          url: this.posterCanvasObj.downLoadUrl
+        }).then(() => {
+          console.log('下载完成')
+        }).catch(() => {
+          this.$toast.fail('海报下载失败，请重新下载！')
+          this.uploadImg()
+        })
+      } else {
+        this.$toast.fail('海报下载失败，请重新下载！')
+        this.uploadImg()
+      }
+
     }
   }
 }