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: {},
    groupType: '',
    animationData: {},
    touchMove: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    touchMove: function () {
      return false
    },
    poster: function () {
      const ctx = wx.createCanvasContext('myCanvas');
      const that = this;
      wx.showLoading({
        title: '海报生成中',
        // mask: true
      })
      httpRequestApi.createQRCode(this.data.QRData).success(res => {
        // 下载二维码
        wx.downloadFile({
          url: res.data.data,
          success: res => {
            this.setData({
              QRCodeImagePath: res.tempFilePath
            })
          }
        });
        wx.downloadFile({
          url: that.data.avatar,
          success: res => {
            this.setData({
              avatar: res.tempFilePath
            })
          }
        });
        // 下载icon
        if (this.data.shareType === 'works') {
          wx.downloadFile({
            url: that.data.iconImg,
            success: res => {
              this.setData({
                iconImg: res.tempFilePath
              })
            }
          });
        }
        this.makeImage(ctx);
      })
    },
    makeImage: function (ctx) {
      // 画出背景和相同内容
      if (this.data.shareType === 'works') {
        ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
      } else {
        ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
      }
      ctx.save()
      ctx.beginPath()
      ctx.fill()
      ctx.setFontSize(25)
      ctx.setFillStyle('#fff')
      ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
      ctx.setFontSize(16)
      ctx.fillText('大声朗读是语感形成的必走之路', (300 - ctx.measureText('大声朗读是语感形成的必走之路').width) / 2, 75.5)
      ctx.setFontSize(15)
      ctx.setFillStyle('#838383')
      ctx.fillText('长按识别二维码', 130.5, 391)
      ctx.setFontSize(12)
      ctx.setFillStyle('#838383')
      ctx.fillText('接收邀请，获得你的课程吧', 130.5, 409.5) /*  */
      // 头像
      console.log('画头像')
      if (this.data.shareType === 'works') {
        ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
        ctx.clip(); //剪切头像区域
        ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
        ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
        ctx.setFillStyle('#ff6f42')
        ctx.fill();
        ctx.clip(); //剪切头像区域
        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
        ctx.setFontSize(15)
        ctx.setFillStyle('#ff6f42')
        ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
        ctx.setFillStyle('#434343')
        ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
        ctx.setFontSize(15)
        ctx.setFillStyle('#434343')
        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2, 262)
        ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
      } else {
        ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
        ctx.clip(); //剪切头像区域
        ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
        ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
        ctx.setFillStyle('#ff6f42')
        ctx.fill();
        ctx.clip(); //剪切头像区域
        //插入图片  
        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
        ctx.setFontSize(18)
        ctx.setFillStyle('#ff6f42')
        ctx.fillText(this.data.author, 100, 143.5)
        ctx.setFontSize(16)
        ctx.setFillStyle('#434343')
        ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
        ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
        ctx.setFontSize(15)
        ctx.setFillStyle('#434343')
        ctx.fillText('朗朗读书声，是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声，是世界上最美妙的声音').width) / 2, 327.5)
      }
      console.log('花二维码')
      console.log(this.data.QRCodeImagePath)
      ctx.drawImage(this.data.QRCodeImagePath, 35, 353, 90, 90);
      ctx.draw();
      setTimeout(() => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 300,
          height: 525,
          destWidth: 1200,
          destHeight: 2100,
          canvasId: 'myCanvas',
          success: (res) => {
            this.setData({
              imgUrls: res.tempFilePath
            })
            wx.hideLoading()
          },
          fail: (res) => {
            console.log(res)
            wx.hideLoading();
          }
        })
      }, 200)

    },
    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,
          productId: data.productId,
          // 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,
          groupType: data.groupType
        })
      }
      this.poster();

      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
    },
    // 保存最终图片
    PreservationImg: function () {
      // this.getImgAuthorize()
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imgUrls,
        success: (res) => {
          console.log(res)
          const data = {};
          console.log('productId', this.data.productId)
          // 团购分享记录
          if (this.data.shareType === 'group') {
            data.shareTypeEnum = 'POSTER';
            data.shareContentEnum = 'GROUP';
            data.productId = this.data.groupPurchaseInfo.productId;
          }
          // 朗读分享记录
          if (this.data.shareType === 'works') {
            data.shareTypeEnum = 'POSTER';
            data.shareContentEnum = 'READ';
            data.productId = this.data.productId;
          }
          httpRequestApi.shareRecord(data).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
    }
  },
})