reader/component/share/share.js

// component/shar-dialog/shar-dialog.js
import httpRequestApi from '../../utils/APIClient';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    shareType: {
      type: 'String',
      value: ''
    },
    shareId: {
      type: 'String',
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    shareFlag: false,
    imgUrls: '',
    avatar: '',
    author: '',
    iconImg: '',
    title: '',
    path: '',
    QRCodeImagePath: '',
    QRCodeImageLocalPath: '',
    groupPurchaseInfo: {},
    animationData: {},
    touchMove: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    touchMove: function () {
      return false
    },
    poster: function () {
      const that = this;
      const ctx = wx.createCanvasContext('myCanvas');
      // 先画背景
      this.drawBg(ctx)
        .then(() => {
          // 下载保存图片
          console.log('背景画完');
          return this.saveImg(ctx);
        })
        .then(() => {
          // 画头像和作者||发起者
          console.log('头像画完');
          return this.drawAuthor(ctx);
        })
        .then(() => {
          console.log(this.data.shareType)
          if (this.data.shareType === 'works') {
            // 分享作品的主题内容
            console.log('主题画完');
            return this.drawWorksGut(ctx)
          } else {
            return this.drawGroupGut(ctx)
          }
        })
        .then(() => {
          wx.getImageInfo({
            src: this.data.QRCodeImagePath, //服务器返回的图片地址
            success: function (res) {
              console.log('下载content成功1')
              console.log(res.path)
              //res.path是网络图片的本地地址
              ctx.drawImage(res.path, 127, 423, 121, 121);
              console.log('下载content成功2')
              ctx.draw(true, function (res) {
                setTimeout(() => {
                  wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 375,
                    height: 667,
                    // destWidth: 370,
                    destWidth: 1500,
                    // destHeight: 507,
                    destHeight: 2668,
                    canvasId: 'myCanvas',
                    success: (res) => {
                      console.log(res.tempFilePath)
                      that.setData({
                        imgUrls: res.tempFilePath
                      }, () => {
                        wx.hideLoading();
                      })
                    },
                    fail: (res) => {
                      console.log(res)
                    }
                  })
                }, 200)
              })
            },
            fail: function (res) {
              //失败回调
            }
          });
        })




    },
    share: function (data) {
      console.log(data)
      if (this.data.shareType === 'works') {

        this.setData({
          shareFlag: !this.data.shareFlag,
          avatar: data.avatar,
          author: data.author,
          iconImg: data.iconImg,
          title: data.title,
          // path: data.path,
          QRData: {
            page: data.path,
            scene: data.scene,
            qrCodeId: this.data.shareId
          }
        })
      }
      if (this.data.shareType === 'group') {
        console.log(data)
        console.log('团购分享')
        this.setData({
          shareFlag: !this.data.shareFlag,
          avatar: data.avatar,
          author: data.author,
          iconImg: data.iconImg,
          title: data.title,
          // path: data.path,
          QRData: {
            page: data.path,
            scene: data.scene,
            qrCodeId: this.data.shareId
          },
          groupPurchaseInfo: data.groupPurchaseInfo
        })
      }

      if (this.data.shareType === 'class') {
        console.log('课程分享')
        this.setData({
          shareFlag: !this.data.shareFlag
        })
      }
      // 动画测试
      this.animation = wx.createAnimation({
        duration: 700,
        timingFunction: 'ease',
      })
      this.animation.bottom(0).step();
      this.setData({
        animationData: this.animation.export()
      })
      // 动画测试
    },
    //关闭弹框
    close: function (e) {
      this.animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease',
      })
      this.animation.bottom(-300).step();
      this.setData({
        animationData: this.animation.export()
      }, () => {
        setTimeout(() => {
          this.setData({
            shareFlag: !this.data.shareFlag,
            imgUrls: ''
          })
          this.triggerEvent('ShareDialogClose', {})
        }, 200)
      })


    },
    nothing: function (e) {
      return
    },
    // 保存图片到本地
    saveImg: function () {
      console.log('yibuububu')
      let download = new Promise((resolve, reject) => {
        let QRCode = () => {
          // 生成二维码并下载
          httpRequestApi.createQRCode(this.data.QRData).success(res => {
            console.log(this.data.QRData);
            this.setData({
              QRCodeImagePath: res.data.data
            })
            // wx.downloadFile({
            //   url: res,
            //   success: (res) => {
            //     console.log(res)
            //     console.log('下载二维码成功')
            //     // this.setData({
            //     //   avatar: res.tempFilePath
            //     // }, () => {

            //     // })

            //   }
            // });
            console.log(this.data.QRCodeImagePath)
            console.log(res)
            resolve();
          })
        }
        let downAvatar = () => {
          wx.downloadFile({
            url: this.data.avatar,
            success: (res) => {
              console.log('下载头像成功')
              console.log(this.data.avatar)
              this.setData({
                avatar: res.tempFilePath
              }, () => {
                QRCode();
              })

            }
          });
        }

        // resolve(()=>{
        // 下载icon
        wx.downloadFile({
          url: this.data.iconImg,
          success: (res) => {
            console.log('下载icon成功')
            console.log(this.data.iconImg)
            this.setData({
              iconImg: res.tempFilePath
            }, () => {
              // 下载头像
              downAvatar();
            })

          }
        });
      })
      return download;
    },
    // 先画出背景
    drawBg: function (ctx) {
      let background = new Promise((resolve, reject) => {
        wx.showLoading({
          title: '海报生成中',
          mask: true
        })
        if (this.data.shareType === 'works') {
          ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1500, 2668, 0, 0, 750, 1334); //插入图片  
        } else {
          ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1500, 2668, 0, 0, 750, 1334); //插入图片  
        }
        ctx.save()
        ctx.beginPath()
        ctx.fill()
        resolve();
      });
      return background;
    },
    // 画头像和作者||发起者
    drawAuthor: function (ctx) {
      let author = new Promise((resolve, reject) => {
        if (this.data.shareType === 'works') {
          ctx.arc(187.5, 171, 36, 0, 2 * Math.PI, false)
          ctx.clip(); //剪切头像区域
          ctx.fill('red')
          ctx.drawImage(this.data.avatar, 152, 135, 72, 72); //插入图片  
          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
          ctx.setFontSize(18)
          ctx.setFillStyle('#444444')
          ctx.fillText(this.data.author, (375 - ctx.measureText(this.data.author).width) / 2, 232)
          ctx.setFontSize(16)
          ctx.setFillStyle('#ff9209')
          ctx.fillText('播音主持特长生', (375 - ctx.measureText('播音主持特长生').width) / 2, 253)
        } else {
          ctx.arc(52, 58, 36, 0, 2 * Math.PI, false)
          ctx.clip(); //剪切头像区域
          ctx.fill('red')
          ctx.drawImage(this.data.avatar, 16, 22, 72, 72); //插入图片  
          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
          ctx.setFontSize(20)
          ctx.setFillStyle('#fff')
          ctx.fillText(this.data.author, 97, 49)
          ctx.setFontSize(22)
          ctx.fillText('邀您一起来拼团', 97, 77)
        }
        resolve();
      })
      return author;
    },
    // 分享作品的主题内容
    drawWorksGut: function (ctx) {
      let works = new Promise((resolve, reject) => {
        // resolve(() => {
        console.log('开始画内容')
        ctx.setFillStyle('#fff')
        ctx.setFontSize(18)
        ctx.fillText('小学语文 最新全国统一教材', (375 - ctx.measureText('小学语文 最新全国统一教材').width) / 2, 55);
        ctx.setFontSize(30)
        ctx.fillText('课文朗读 从未如此有趣', (375 - ctx.measureText('课文朗读 从未如此有趣').width) / 2, 103);
        ctx.setFontSize(16)
        ctx.setFillStyle('#444')
        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (375 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2, 297)
        // ctx.fillText(`配了一段惊世之作`,  90, 240)
        // ctx.setFontSize(16)
        // ctx.setFillStyle('red')
        ctx.fillText(`《${this.data.title}》`, (375 - ctx.measureText(`《${this.data.title}》`).width) / 2, 322)

        ctx.setFontSize(16)
        ctx.setFillStyle('#000')
        // ctx.setFillStyle('#000')
        ctx.setFontSize(16)
        // ctx.setFillStyle('#c90000')
        ctx.setFillStyle('#ff9209')
        ctx.fillText('为TA疯狂打CALL 快去听听', (375 - ctx.measureText('为TA疯狂打CALL 快去听听').width) / 2, 401)
        ctx.setFontSize(12)
        ctx.setFillStyle('#666666')
        ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
        // })
        resolve();
      })
      return works;
    },

    // 分享团购的主体内容
    drawGroupGut: function (ctx) {
      let group = new Promise((resolve, reject) => {
        ctx.setFontSize(28)
        ctx.setFillStyle('#ff670d')
        ctx.fillText('小学语文 朗读配音', (375 - ctx.measureText('小学语文 朗读配音').width) / 2, 152)
        ctx.setFontSize(16)
        ctx.setFillStyle('#444')
        ctx.fillText('朗朗读书声，是世上最美的声音', (375 - ctx.measureText('朗朗读书声，是世上最美的声音').width) / 2, 351)
        // if (this.data.groupPurchaseInfo.productId === 1) {
          ctx.drawImage(this.data.iconImg, 12, 176, 351, 145);
        // }
        // if (this.data.groupPurchaseInfo.productId === 2) {
        //   ctx.drawImage('../../../static/share/poster_2.jpg', 12, 176, 351, 145);
        // }
        // if (this.data.groupPurchaseInfo.productId === 3) {
        //   ctx.drawImage('../../../static/share/poster_3.jpg', 12, 176, 351, 145);
        // }
        ctx.setFontSize(17)
        ctx.setFillStyle('#A95A00')
        ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 96, 412)
        ctx.setFontSize(19)
        ctx.fillText('每人仅需', 151, 412)
        // ctx.fillText('元', 120, 495)
        ctx.setFontSize(28)
        ctx.setStrokeStyle('red')
        ctx.setFillStyle('red')
        ctx.fillText(`${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}元`, 235, 415)
        ctx.setFontSize(12)
        ctx.setFillStyle('#666666')
        ctx.fillText('长按识别二维码', (375 - ctx.measureText('长按识别二维码').width) / 2, 574)
        //})
        resolve();
      })
      return group;
    },

    // 保存最终图片
    PreservationImg: function () {
      // this.getImgAuthorize()
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imgUrls,
        success: (res) => {
          console.log(res)
          this.setData({
            imgUrls: false
          })
        },
        fail: res => {
          wx.getSetting({
            success(res) {
              if (!res.authSetting['scope.writePhotosAlbum']) {
                // wx.showToast({
                //   title: '无权限操作',
                //   icon: 'fail',
                //   duration: 800
                // })
                wx.showModal({
                  title: '无法保存分享图片到相册',
                  content: '点击右上角浮点按钮->进入关于->点击右上角按钮->设置，进行授权',
                  confirmText: '我知道了',
                  showCancel: false,
                  success(res) {
                    console.log('用户点击确定')
                  }
                })
              }
            }
          })
        }
      })
    },
    shareFriend: function () {
      this.triggerEvent('customevent', {})
    }
  },
  onShareAppMessage: (res) => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.data.title,
      path: this.data.path
    }
  },
})