reader/component/share/share.js

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

  /**
   * 组件的初始数据
   */
  data: {
    shareFlag: true,
    imgUrls: '',
    avatar: '',
    author: '',
    iconImg: '',
    title: '',
    path: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    poster: function () {
      const that = this;
      const ctx = wx.createCanvasContext('myCanvas');
      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(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内  
      // wx.downloadFile({
      //   url: this.data.avatar,
      //   success(res) {
      //     ctx.drawImage(res.tempFilePath, 148, 8, 100, 100);
      //   }
      // });
      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')
      if (this.data.shareType === 'works') {
        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)
        // 保存图片到本地
        // wx.downloadFile({
        //   url: this.data.iconImg,
        //   success(res) {
        //     console.log(res)
        //     ctx.drawImage(res.tempFilePath, 9, 205, 352, 145);
        //   }
        // });
        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)

      } else {
        ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
        ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
        ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
        ctx.setFontSize(14)
        ctx.setFillStyle('#fff')
        ctx.fillText('五人团', 149, 373)
        ctx.setFontSize(16)
        ctx.setFillStyle('#A95A00')
        ctx.fillText('原价', 24, 373)
        ctx.setStrokeStyle('red')
        ctx.moveTo(64, 368)
        ctx.lineTo(114, 368)
        ctx.stroke()
        ctx.fillText('￥99元', 64, 373)
        ctx.setFontSize(18)
        ctx.fillText('团购价仅需', 20, 403)
        ctx.fillText('元', 144, 403)
        ctx.setFontSize(20)
        ctx.setFillStyle('red')
        ctx.fillText('￥1', 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)
      }
      ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
      console.log(ctx)
      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
            })
          },
          fail: (res) => {
            console.log(res)
          }
        })
      })
    },
    share: function (data) {
      console.log(this.data)
      console.log(data)
      // 下载icon
      wx.downloadFile({
        url: data.iconImg,
        success: (res) => {
          this.setData({
            iconImg: res.tempFilePath
          })
        }
      });
      // 下载头像
      wx.downloadFile({
        url: data.avatar,
        success: (res) => {
          this.setData({
            avatar: res.tempFilePath
          })
        }
      });
      // 生成二维码并下载
      httpRequestApi.createQRCode({
        page: data.path,
        scene: "par=no"
      }).success(res => {
        console.log(data.path)
        console.log(res)
      })
      this.setData({
        shareFlag: !this.data.shareFlag,
        // avatar: data.avatar,
        author: data.author,
        // iconImg: data.iconImg,
        title: data.title,
        path: data.path
      })
    },
    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
    }
  },
})