reader/pages/userWorks/index.js

import {
  getSelfRead
} from '~/api/user'
let videoContext = null
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: null,
    currentId: '',
    videoState: true,
    canvasHidden: false, //设置画板的显示与隐藏
    shareImgPath: '' //用于储存canvas生成的图片
  },
  onLoad(options) {
    this.getSelfRead()
  },
  // 打开评论
  openComment({
    target
  }) {
    this.selectComponent("#comment").open(target.dataset.id)
  },
  //获取自己作品列表
  async getSelfRead() {
    let list = await getSelfRead()
    this.setData({
      list
    })
  },
  creatShare(video) {
    return new Promise((resolve, reject) => {
      let context = wx.createSelectorQuery();
      context
        .select('#share')
        .fields({
          node: true,
          size: true
        }).exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          const dpr = wx.getSystemInfoSync().pixelRatio;
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr, dpr);
          ctx.font = '14px PingFang';
          let pic = canvas.createImage();
          pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
          pic.onload = () => {
            ctx.drawImage(pic, 0, 0, 375, 211);
          }
          let peiyin = canvas.createImage();
          peiyin.src = '/static/peiyin.jpg';
          peiyin.onload = () => {
            ctx.drawImage(peiyin, 0, 211, 375, 89);
            // 收藏，一个一个渲染
            let sc = canvas.createImage();
            sc.src = '/static/star.png'
            sc.onload = () => {
              ctx.drawImage(sc, 12, 220, 20, 20)
              ctx.fillText('收藏', 36, 238)
              //分享
              let fx = canvas.createImage();
              fx.src = '/static/share.png'
              fx.onload = () => {
                ctx.drawImage(fx, 78, 220, 22, 22)
                ctx.fillText('分享', 104, 238)
                //点赞
                let dz = canvas.createImage();
                dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
                dz.onload = () => {
                  ctx.drawImage(dz, 258, 222, 22, 22)
                  ctx.fillText(video.userRead.likeAmount, 284, 238)
                  //评论
                  let pl = canvas.createImage();
                  pl.src = '/static/comment.png'
                  pl.onload = () => {
                    ctx.drawImage(pl, 318, 222, 22, 22)
                    ctx.fillText(video.userRead.commentAmount, 340, 238)
                    setTimeout(() => {
                      wx.canvasToTempFilePath({
                        canvas: canvas,
                        success(res) {
                          resolve({
                            title: '请欣赏我的课文朗读作品，点赞+评论。',
                            path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
                            imageUrl: res.tempFilePath
                          })
                        },
                        fail(res) {
                          reject()
                        }
                      }, this)
                    }, 500)
                  }
                }
              }
            }
          }

        })
    })

  },
  // 改变视频状态
  changStatus({
    detail
  }) {
    this.setData(detail)
  },
  // 开始播放
  playVideo({
    currentTarget
  }) {
    this.setData({
      videoState: true,
      currentId: currentTarget.dataset.id
    })
  },
  /* 改变视频播放状态 ,暂时先不用*/
  changeVideoState() {
    this.videoContext = wx.createVideoContext('myVideo')
    let videoState = this.data.videoState
    if (videoState) {
      this.videoContext.pause()
    } else {
      this.videoContext.play()
    }
    this.setData({
      videoState: !videoState
    })
  },

  onShareAppMessage({
    from,
    target
  }) {
    if (from == 'button') {
      let video = target.dataset.info
      const promise = new Promise(resolve => {
        this.creatShare(video).then(res => {
          resolve(res)
        })
      })
      console.log(video);
      return {
        title: '请欣赏我的课文朗读作品，点赞+评论。',
        path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
        imageUrl: video.userRead.coverImg,
        promise
      }
    } else {
      return {
        title: '课文朗读，从未如此有趣。',
        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
      }
    }
  }
})