reader/pages/score/index.js

import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  store
} from '~/store/index'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    score: {},
    // 目前用来处理区分上传普通作品还是朗读赛作品
    readingType: '',
    uploadHide: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: {
        userInfo: 'userInfo',
        readDetail: 'readDetail'
      },
    })
    this.storeBindings.updateStoreBindings()
    let score = this.data.readDetail
    wx.setNavigationBarTitle({
      title: score.title
    })
    this.setData({
      score,
      readingType: options.readingType ? options.readingType : ''
    })
  },
  backReading() {
    wx.redirectTo({
      url: `/pages/reading/index?videoId=${this.data.score.id}&reset=true&uploadHide=${this.data.uploadHide}`,
    })
  },
  hideFooter() {
    this.setData({
      uploadHide: true
    })
  },
  creatShare() {
    let video = this.data.readDetail
    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.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 fx = canvas.createImage();
              fx.src = '/static/share.png'
              fx.onload = () => {
                ctx.drawImage(fx, 12, 220, 20, 20)
                ctx.fillText('分享', 36, 238)
                // 收藏，一个一个渲染
                let sc = canvas.createImage();
                sc.src = '/static/no_collect.png'
                sc.onload = () => {
                  ctx.drawImage(sc, 110, 220, 19, 19)
                  ctx.fillText('收藏', 134, 238)
                  //点赞
                  let dz = canvas.createImage();
                  dz.src = '/static/heart.png'
                  dz.onload = () => {
                    ctx.drawImage(dz, 318, 222, 22, 22)
                    ctx.fillText(0, 254, 238)
                    // 评论
                    let pl = canvas.createImage();
                    pl.src = '/static/comment.png'
                    pl.onload = () => {
                      ctx.drawImage(pl, 228, 222, 22, 22)
                      ctx.fillText(0, 340, 238)
                      setTimeout(() => {
                        wx.canvasToTempFilePath({
                          canvas: canvas,
                          success(res) {
                            resolve({
                              title: '请欣赏我的课文朗读作品，点赞+评论。',
                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
                              imageUrl: res.tempFilePath
                            })
                          },
                          fail(res) {
                            reject()
                          }
                        }, this)
                      }, 500)
                    }
                  }
                }
              }
            }
          }
        })
    })
  },
  onShareAppMessage({
    from,
    target
  }) {
    if (from == 'button') {
      const promise = new Promise(resolve => {
        this.creatShare().then(res => {
          resolve(res)
        })
      })
      return {
        title: '请欣赏我的课文朗读作品，点赞+评论。',
        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png',
        promise
      }
    } else {
      return {
        title: '课文朗读，从未如此有趣。',
        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
      }
    }
  },
})