reader/pages/activityDet/index.js

import {
  getActivityInfo,
  saveActivity
} from '~/api/activity'
/*微信录音*/
let recorderManager = wx.getRecorderManager();
let dsq
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 'before录制前， process 录制中，after录制后'
    state: 'before',
    tens: 3,
    bits: 0,
    fromWidth: 100,
    toWidth: 100,
    configure: {},
    avatar: '',
    // 本地录音地址
    tempFilePath: '',
    // 线上录音地址
    audioPath: '',
    uploadState: false,
    // 此id保存模板使用
    id: '',
    greeting: [],
    // 是否更改过头像
    changeAvatarFlag: false,
    greetingCard: null,
    userAudioState: false,
    // 当前音频播放时长
    playTime: '00:00',
    endTime: '00:00',
    vProgress: 0
  },
  async onLoad(options) {
    let configure = await getActivityInfo(options.id)
    wx.setNavigationBarTitle({
      title: configure.title,
    })
    this.setData({
      configure,
      avatar: configure.photoText,
      toWidth: '',
      fromWidth: configure.fromText.length * configure.fromFontSize,
      toWidth: configure.toText.length * configure.toFontSize,
      id: options.id,
      greeting: configure.greeting.split('\r'),
      tens: configure.bgMusicLength[0],
      bits: configure.bgMusicLength[1]
    })
  },
  async changeAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    let res = await this.uploadFile(avatarUrl)
    this.setData({
      changeAvatarFlag: true,
      avatar: res
    })
  },
  play() {
    if (this.data.state == 'before') {
      this.innerAudioContext = wx.createInnerAudioContext();
      this.innerAudioContext.src = this.data.configure.bgMusic; // 这里可以是录音的临时路径
      this.innerAudioContext.play();
      this.innerAudioContext.onEnded((res) => {
        console.log('音频播放完毕');
        this.setData({
          userAudioState: false
        })
      });
      this.setData({
        state: 'process'
      })
      let countDown = Number(this.data.configure.bgMusicLength)
      // 倒计时
      this.dsq = setInterval(item => {
        console.log('仍然倒计时呢');
        // 倒计时结束
        if (countDown == 1) {
          this.stopRecording()
        }
        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) => {
        this.setData({
          tempFilePath: res.tempFilePath,
        });
        this.uploadAudio(res.tempFilePath)
      });
    } else {
      this.stopRecording()
    }
  },
  stopRecording() {
    clearInterval(this.dsq)
    this.innerAudioContext.stop();
    recorderManager.stop();
    this.setData({
      state: 'after',
      tens: this.data.configure.bgMusicLength[0],
      bits: this.data.configure.bgMusicLength[1]
    })
  },
  uploadAudio(recordSource) {
    this.setData({
      uploadState: true
    });
    const uploadTask = 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;
        this.setData({
          audioPath
        })
        this.uploadActivity()
      },
    })
  },
  // 上传贺卡
  async uploadActivity() {
    this.createActivityImg('upload').then(async res => {
      let cardUrl = await this.uploadFile(res)
      let data = {
        audioPath: this.data.audioPath,
        // 生成贺卡图片地址
        cardUrl,
        toText: this.data.configure.toText,
        fromText: this.data.configure.fromText,
        templateId: this.data.id
      }
      console.log(data, 'data');
      let greetingCard = await saveActivity(data)
      console.log('贺卡生成', greetingCard);
      this.setDuration('endTime', greetingCard.duration)
      this.setData({
        greetingCard,
        uploadState: false
      })
    })
  },
  playUserAudio() {
    if (!this.innerAudioContext) {
      this.innerAudioContext = wx.createInnerAudioContext();
    }
    if (this.data.userAudioState) {
      this.innerAudioContext.stop();
      this.setData({
        userAudioState: false
      })
    } else {
      this.innerAudioContext.src = this.data.greetingCard.audioPath;
      this.innerAudioContext.onTimeUpdate(() => {
        this.setDuration('playTime', this.innerAudioContext.currentTime)
        this.setData({
          vProgress: Math.ceil((Math.ceil(this.innerAudioContext.currentTime) / this.innerAudioContext.duration) * 100)
        })
      })
      this.innerAudioContext.play();
      this.setData({
        userAudioState: true
      })
    }
  },
  bindKeyInput(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
      })
    }
  },
  // 上传图片
  uploadFile(filePath) {
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: 'https://reader-api.ai160.com/file/upload',
        filePath,
        name: '头像',
        header: {
          uid: wx.getStorageSync('uid')
        },
        success: (res) => {
          const result = JSON.parse(res.data).data;
          resolve(result)
        }
      })
    })
  },
  // 生成活动图片
  createActivityImg(createType = 'share') {
    return new Promise((resolve, reject) => {
      let cardUrl = !this.data.greetingCard ? '' : this.data.greetingCard.cardUrl
      if (cardUrl) {
        resolve({
          title: '请欣赏我的课文朗读作品，点赞+评论。',
          path: `/pages/index/index`,
          imageUrl: cardUrl
        })
      }
      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();
          avatar.src = this.data.avatar
          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();
            bgImg.src = this.data.configure.bgImg
            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) {
                    if (createType == 'share') {
                      resolve({
                        title: '请欣赏我的课文朗读作品，点赞+评论。',
                        path: `/pages/index/index`,
                        imageUrl: res.tempFilePath
                      })
                    } else {
                      resolve(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?&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'
      }
    }
  },
  // 设置时间文案
  setDuration(label, s) {
    let t = '';
    s = Math.ceil(s);
    if (s > -1) {
      let min = Math.floor(s / 60) % 60;
      let sec = s % 60;
      if (min < 10) {
        t += "0";
      }
      t += min + ":";
      if (sec < 10) {
        t += "0";
      }
      t += sec;
    }

    this.setData({
      [label]: t,
    })
  },
  onHide() {
    recorderManager.stop()
    this.innerAudioContext.stop()
  }
})