reader/pages/match/index.js

import {
  getSelfRead
} from '~/api/user'
import {
  isActivityWork
} from '~/api/works'
import {
  getModelTexts,
  getReadRanking,
  getSelfReadRanking
} from '~/api/global'
import {
  store
} from '~/store/index'
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import share from '~/mixins/share'
Page({
  // behaviors: [share],
  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    // true是人气榜，false是参赛作品
    currentType: true,
    activityUserList: [],
    bannerList: [],
    myActivityUser: {},
    explain: '',
    activityId: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      activityId: options.activityId
    })
    this.getLocUserInfo()
    if (Object.keys(this.data.userInfo).length > 0) {
      this.reload()
    } else {
      getApp().callBack = (res) => {
        this.getLocUserInfo()
        this.reload()
      }
    }
  },
  getLocUserInfo() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: {
        userInfo: 'userInfo'
      },
      actions: {
        setUser: 'setUser'
      }
    })
    this.storeBindings.updateStoreBindings()
  },
  reload() {
    this.getModelTexts()
    this.getReadRanking()
  },
  // 获取范文
  async getModelTexts() {
    let bannerList = await getModelTexts({
      grade: this.data.userInfo.grade,
      activityId: this.data.activityId
    })
    this.setData({
      bannerList
    })
  },
  async getReadRanking() {
    let {
      activityUserList,
      myActivityUser,
      activity
    } = await getReadRanking({
      activityId: this.data.activityId
    })
    this.setData({
      activityUserList,
      myActivityUser,
      explain: activity.explain
    })
  },
  async getSelfReadRanking() {
    let list = await getSelfReadRanking()
    this.setData({
      list
    })
  },
  bannelEvent({
    target
  }) {
    wx.navigateTo({
      url: `/pages/reading/index?videoId=${target.dataset.id}&readingType=readMatch&autoPlay=true`
    })
  },
  jumpUserInfo({
    currentTarget
  }) {
    wx.navigateTo({
      url: `/pages/personal/index?uid=${currentTarget.dataset.uid}`,
    })
  },
  jumpIntro() {
    wx.navigateTo({
      url: `/pages/rankIntro/index?title=活动规则&img=${this.data.explain}`,
    })
  },
  selectType({
    target
  }) {
    if (target.dataset.type) {
      let currentType = JSON.parse(target.dataset.type)
      if (!currentType) {
        this.getSelfReadRanking()
      }
      this.setData({
        currentType
      })
    }
  },
  onShareAppMessage({
    from,
    target
  }) {
    console.log(this.data.activityId);
    if (from == 'button') {
      let video = target.dataset.info
      console.log(video);
      const promise = new Promise(resolve => {
        this.creatShare(video).then(res => {
          resolve(res)
        })
      })
      return {
        title: '这个小程序太赞了！孩子朗读能力蹭蹭上涨，推荐你试试！',
        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg',
        promise
      }
    } else {
      return {
        title: '这个小程序太赞了！孩子朗读能力蹭蹭上涨，推荐你试试！',
        path: `/pages/match/index?uid=${wx.getStorageSync('uid')}&activityId=${this.data.activityId}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
      }
    }
  },
  creatShare(video) {
    return new Promise(async (resolve, reject) => {
      let isActivity = await isActivityWork(video.userRead.id)
      let context = wx.createSelectorQuery(video.id);
      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.userReadExtend && video.userReadExtend.resourcesType == 1 ? video.userReadExtend.backgroundVirtualImg : 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 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 pl = canvas.createImage();
                  pl.src = '/static/comment.png'
                  pl.onload = () => {
                    ctx.drawImage(pl, 228, 222, 22, 22)
                    ctx.fillText(video.userRead.commentAmount || 0, 340, 238)
                    //点赞
                    let dz = canvas.createImage();
                    dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
                    dz.onload = () => {
                      ctx.drawImage(dz, 318, 222, 22, 22)
                      ctx.fillText(video.userRead.likeAmount || 0, 254, 238)
                      if (video.userReadExtend.resourcesType == 1) {
                        let aBg = canvas.createImage();
                        aBg.src = '/static/shareAudioBg.png';
                        aBg.onload = () => {
                          ctx.drawImage(aBg, 127.5, 38, 120, 120);
                          let rate = 0.5
                          ctx.arc(
                            Math.floor(375 * rate),
                            98,
                            Math.floor(100 * rate),
                            0,
                            2 * Math.PI
                          );
                          ctx.clip() //裁剪
                          let coverImg = canvas.createImage();
                          coverImg.src = video.userRead.coverImg;
                          coverImg.onload = () => {
                            ctx.drawImage( //定位在圆圈范围内便会出现
                              coverImg, //图片暂存路径
                              129, 42,
                              110, 110,
                            );
                            ctx.restore()
                          }
                        }
                      }
                      setTimeout(() => {
                        wx.canvasToTempFilePath({
                          canvas: canvas,
                          success(res) {
                            let path = video.user.profession == '官方' ? '/pages/reading/index' : '/pages/pkPage/index'
                            let title = wx.getStorageSync('uid') == video.user.uid ? '我的新作品发布啦，快来捧场点赞！' : video.userRead.type == 'READ' ? '发现一篇宝藏作品，这声音让人爱了！不信你不着迷！' : '我正在听这篇朗读示范，这发音，播音专业水准！你也来听听！'
                            if (isActivity) {
                              title = '点赞、评论、转发三件套，数据今天就过万！'
                            }
                            resolve({
                              title,
                              path: `${path}?videoId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}&isShare=true`,
                              imageUrl: res.tempFilePath
                            })
                          },
                          fail(res) {
                            reject()
                          }
                        }, this)
                      }, 500)
                    }
                  }
                }
              }
            }
          }
        })
    })
  },
})