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:{}
  },

  /**
   * 组件的方法列表
   */
  methods: {
    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(() => {
          debugger;
          wx.getImageInfo({
            src: this.data.QRCodeImagePath,//服务器返回的图片地址
            success: function (res) {
              //res.path是网络图片的本地地址
              ctx.drawImage(res.path, 227, 364, 135, 135);




              ctx.draw(true, function (res) {
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  width: 370,
                  height: 507,
                  destWidth: 370,
                  destHeight: 507,
                  canvasId: 'myCanvas',
                  success: (res) => {
                    console.log(res.tempFilePath)
                    wx.saveImageToPhotosAlbum({
                      filePath: res.path,
                      success(res) {
                        console.log(res);
                      }
                    })
                    that.setData({
                      imgUrls: res.tempFilePath
                    }, () => {
                      wx.hideLoading();
                    })
                  },
                  fail: (res) => {
                    console.log(res)
                  }
                })
              })



            },
            fail: function (res) {
              //失败回调
            }
          });
        })




    },
    share: function (data) {
      debugger;
      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('团购分享')
        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
        })
      }
    },
    // 保存图片到本地
    saveImg: function () {
      console.log('yibuububu')
      let download = new Promise((resolve, reject) => {
        let QRCode = () => {
          // 生成二维码并下载
          debugger;
          httpRequestApi.createQRCode(this.data.QRData).success(res => {
            // let base64 = wx.arrayBufferToBase64(res.data);
            // console.log(a)
            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
        })
        console.log('开始画背景')
        ctx.rect(0, 0, 370, 507)
        ctx.setFillStyle('#fff')
        ctx.fill()
        ctx.save()
        ctx.beginPath()
        ctx.setFillStyle('#fff')
        ctx.fill()
        ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
        ctx.clip(); //画
        resolve();
      });
      return background;
    },
    // 画头像和作者||发起者
    drawAuthor: function (ctx) {

      let author = new Promise((resolve, reject) => {
        // resolve(() => {
        console.log('开始画头像')
        ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片  
        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
        ctx.setFontSize(20)
        ctx.setFillStyle('#535353')
        ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
        ctx.setFillStyle('#FF4400')
        // })
        resolve();
      })
      return author;
    },
    // 分享作品的主题内容
    drawWorksGut: function (ctx) {
      let works = new Promise((resolve, reject) => {
        // resolve(() => {
        console.log('开始画内容')
        ctx.fillText('已使出洪荒之力，声情并茂的为', (370 - ctx.measureText('已使出洪荒之力，声情并茂的为').width) / 2, 138)
        ctx.fillText(`《${this.data.title}》`, (370 - ctx.measureText(`《${this.data.title}》`).width) / 2, 160)
        ctx.fillText(`配了一段惊世之作`, (370 - ctx.measureText(`配了一段惊世之作`).width) / 2, 182)
        ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
        ctx.setFontSize(18)
        ctx.setFillStyle('#000')
        ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
        ctx.setFontSize(20)
        ctx.setFillStyle('red')
        ctx.fillText('为TA疯狂打CALL', 9, 467)
        ctx.setFontSize(18)
        ctx.setFillStyle('#000')
        ctx.fillText('长按识别二维码，快去听听', 9, 493)
        // })
        resolve();
      })
      return works;
    },

    // 分享团购的主体内容
    drawGroupGut: function (ctx) {
      let group = new Promise((resolve, reject) => {
        //resolve(() => {
          ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
        ctx.drawImage(this.data.groupPurchaseInfo.bgImg, 9, 205, 352, 145);
          ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
          ctx.setFontSize(14)
          ctx.setFillStyle('#fff')
          ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
          ctx.setFontSize(16)
          ctx.setFillStyle('#A95A00')
          ctx.fillText('原价', 20, 373)
          ctx.setStrokeStyle('red')
          ctx.moveTo(64, 368)
          ctx.lineTo(114, 368)
          ctx.stroke()
          ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 64, 373)
          ctx.setFontSize(18)
          ctx.fillText('团购价仅需', 20, 403)
          ctx.fillText('元', 174, 403)
          ctx.setFontSize(20)
          ctx.setFillStyle('red')
          ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 109, 403)
          ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
          ctx.setFontSize(20)
          ctx.setFillStyle('red')
          ctx.fillText('名额有限，售完截止', 9, 467)
          ctx.setFontSize(18)
          ctx.setFillStyle('#000')
          ctx.fillText('长按识别二维码参加团购', 9, 493)
        //})
        resolve();
      })
      return group;
    },


    // 保存最终图片
    PreservationImg: function () {
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imgUrls,
        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
    }
  },
})