reader/pages/activityDet/index.js

import {
  getActivityInfo,
  saveActivity
} from '~/api/activity'
/*微信录音*/
let recorderManager = wx.getRecorderManager();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    state: false,
    tens: 3,
    bits: 0,
    fromWidth: 100,
    toWidth: 100,
    configure: {},
    avatar: '',
    percent: 0,
    tempFilePath: '',
    uploadState: false,
    // 此id保存模板使用
    id: ''
  },
  async onLoad(options) {
    let configure = await getActivityInfo(options.id)
    console.log(configure);
    this.setData({
      configure,
      avatar: configure.photoText,
      toWidth: '',
      fromWidth: configure.fromText.length * configure.fromFontSize,
      toWidth: configure.toText.length * configure.toFontSize,
      id: options.id,
      // 是否更改过头像
      changeAvatarFlag: false
    })
  },
  setInput({
    currentTarget
  }) {
    console.log(currentTarget.dataset.info);
  },
  changeAvatar: function (e) {
    const {
      avatarUrl
    } = e.detail
    wx.uploadFile({
      url: 'https://reader-api.ai160.com/file/upload',
      filePath: avatarUrl,
      name: '头像',
      header: {
        uid: wx.getStorageSync('uid')
      },
      success: (res) => {
        const newAvatar = JSON.parse(res.data).data;
        this.setData({
          changeAvatarFlag: true,
          avatar: newAvatar
        })
      }
    })
  },
  play() {
    return
    let dsq
    if (!this.data.state) {
      this.setData({
        state: true
      })
      let countDown = 30
      // 倒计时
      dsq = setInterval(item => {
        if (countDown == 1) {
          clearInterval(dsq)
        }
        if (countDown % 10 == 0) {
          this.setData({
            tens: --this.data.tens,
            bits: 9
          })
        } else {
          this.setData({
            bits: --this.data.bits
          })
        }
        --countDown
      }, 1000)
      const options = {
        sampleRate: 44100, //采样率
        numberOfChannels: 1, //录音通道数
        encodeBitRate: 192000, //编码码率
        format: 'mp3', //音频格式，有效值aac/mp3
        frameSize: 50 //指定帧大小，单位 KB
      };
      //开始录音,在开始录音回调中feed音频片
      recorderManager.start(options);
      //监听录音结束事件
      recorderManager.onStop((res) => {
        console.log('录音结束', res);
        this.setData({
          tempFilePath: res.tempFilePath,
        });
        this.uploadAudio(res.tempFilePath)
      });
    } else {
      console.log('结束');
      clearInterval(dsq)
      recorderManager.stop();
      this.setData({
        state: false,
        tens: 3,
        bits: 0
      })
    }
  },
  uploadAudio(recordSource) {
    wx.uploadFile({
      url: 'https://reader-api.ai160.com//file/upload',
      filePath: recordSource,
      name: '朗读录音',
      header: {
        uid: wx.getStorageSync('uid')
      },
      success: (res) => {
        const formateRes = JSON.parse(res.data);
        let audioPath = formateRes.data;
        console.log(formateRes);
        // this.shareWorks(audioPath);
      }
    })
  },
  bindKeyInput: function (e) {
    console.log(e);
    if (e.currentTarget.dataset.type == 'from') {
      this.setData({
        fromWidth: e.detail.cursor * this.data.configure.fromFontSize,
        'configure.fromText': e.detail.value
      })
    } else if (e.currentTarget.dataset.type == 'to') {
      this.setData({
        toWidth: e.detail.cursor * this.data.configure.toFontSize,
        'configure.toText': e.detail.value
      })
    }

    /*    this.setData({
         inputValue: e.detail.value
       }) */
  },
  // 生成活动图片
  createActivityImg() {
    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);
        let avatar = canvas.createImage();
        wx.getImageInfo({
          src: this.data.avatar,
          success: function (res) {
            console.log(res);
            avatar.src = res.path
          },
        });
        avatar.onload = () => {
          ctx.drawImage(avatar, this.data.configure.templateBase.photoLeft / 2, this.data.configure.templateBase.photoTop / 2, this.data.configure.templateBase.photoWidth / 2, this.data.configure.templateBase.photoHeight / 2);
          let bgImg = canvas.createImage();
          wx.getImageInfo({
            src: this.data.configure.bgImg,
            success: function (res) {
              bgImg.src = res.path
            },
          });
          bgImg.onload = () => {
            ctx.drawImage(bgImg, 0, 0, 375, 300);
            ctx.font = `${this.data.configure.fromFontSize/2}px PingFang`;
            ctx.fillText(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2 + this.data.configure.fromFontSize / 2)
            ctx.fillText(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2 + this.data.configure.toFontSize / 2)
            console.log(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2);
            console.log(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2);
          }
        }
        setTimeout(() => {
          wx.canvasToTempFilePath({
            canvas: canvas,
            success(res) {
              console.log(res);
              resolve({
                title: '请欣赏我的课文朗读作品，点赞+评论。',
                path: `/pages/index/index`,
                imageUrl: res.tempFilePath
              })
            },
            fail(res) {
              reject()
            }
          }, this)
        }, 1000)
      })
    })
  },
  onShareAppMessage({
    from,
  }) {
    if (from == 'button') {
      const promise = new Promise(resolve => {
        this.createActivityImg().then(res => {
          resolve(res)
        })
      })
      return {
        title: '请欣赏我的课文朗读作品，点赞+评论。',
        path: `/pages/index/index?readId`,
        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'
      }
    }
  }
})