shizhong-miniprogram/src/pages/article/index.ts

const app = getApp<IAppOption>();

Page({
  data: {
    show: false,
    BookId: '',
    ChapterId: '',
    chapterList: [],

    book: {} as any,
    chapter: {} as any,
    prevAndNext: {} as any,

    progress: 0,
    url: 'http://m10.music.126.net/20241126110303/3f2481d2d6d50acd2009359539eadda0/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3',
    play: false,
    time: '00:00/00:00',
    currentTime: 0,
    drag: false,

    toastShow: false,
    toastType: 3,
  },
  innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null,
  onLoad(options) {
    this.innerAudioContext = wx.createInnerAudioContext();
    this.setData({
      BookId: options.id,
    });
    if (options.cid) {
      this.setData({
        ChapterId: options.cid,
      });
    }
    app.waitLogin(false, true).then(() => {
      this.getChapterList();
      this.getDetail();
    });
  },
  onUnload() {
    if (this.innerAudioContext) {
      this.innerAudioContext?.stop();
      this.innerAudioContext?.destroy();
    }
  },
  getChapterList() {
    wx.ajax({
      method: 'GET',
      url: '?r=shizhong/book/chapter-list',
      data: {
        BookId: this.data.BookId,
      },
    }).then((res) => {
      this.setData({
        chapterList: res.list,
      });
    });
  },
  getDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=shizhong/book/detail',
      data: {
        BookId: this.data.BookId,
        ChapterId: this.data.ChapterId,
      },
      showMsg: false,
    })
      .then((res) => {
        this.setData({
          book: {
            ...res.book,
            PublishDate: res.book.PublishTime.split(' ')[0],
          },
          chapter: res.chapter,
          prevAndNext: {
            prev: Array.isArray(res.prevAndNext.prev) ? null : res.prevAndNext.prev,
            next: Array.isArray(res.prevAndNext.next) ? null : res.prevAndNext.next,
          },
          ChapterId: res.chapter.Id,
        });
        if (res.chapter.AudioUrl?.url) {
          const time = `00:00/${this.formatTime(res.chapter.AudioUrl.duration)}`;
          this.setData({
            time,
          });
        }
        wx.setNavigationBarTitle({
          title: res.book.BookName,
        });
        this.handleView();
      })
      .catch((err) => {
        if (err.data.code === 403) {
          this.setData({
            toastShow: true,
            toastType: 3,
          });
        }
      });
  },
  handleView() {
    wx.ajax({
      method: 'POST',
      url: '?r=shizhong/book/add-browse-record',
      data: {
        BookId: this.data.BookId,
        ChapterId: this.data.ChapterId,
      },
    });
  },
  handleDirectory() {
    this.setData({
      show: true,
    });
  },
  handleSwitchDirectory(e) {
    const { id } = e.currentTarget.dataset;
    this.setData({
      ChapterId: id,
    });
    this.getDetail();
    this.onClose();
    this.handlePause();
  },
  onClose() {
    this.setData({
      show: false,
    });
  },

  handleCollect() {
    const { Id } = this.data.book;
    wx.ajax({
      method: 'POST',
      url: '?r=shizhong/book/collect',
      data: { BookId: Id },
    }).then(() => {
      wx.showToast({
        title: '您已收藏这本书，可在我的页查看',
        icon: 'none',
      });
      this.setData({
        [`book.IsCollect`]: 1,
      });
    });
  },
  handleUnCollect() {
    const { Id } = this.data.book;
    wx.ajax({
      method: 'POST',
      url: '?r=shizhong/book/cancel-collect',
      data: { BookId: Id },
    }).then(() => {
      wx.showToast({
        title: '取消收藏',
        icon: 'none',
      });
      this.setData({
        [`book.IsCollect`]: 0,
      });
    });
  },

  handlePlay() {
    const { chapter, play, currentTime } = this.data;
    if (this.innerAudioContext) {
      if (play) {
        this.innerAudioContext.stop();
        return;
      }
      this.innerAudioContext.stop();
      this.innerAudioContext.src = chapter.AudioUrl.url;
      this.innerAudioContext.seek(currentTime);
      this.innerAudioContext.play();
      const listener = () => {
        if (this.innerAudioContext && !this.data.drag) {
          const { currentTime, duration } = this.innerAudioContext;
          const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
          const progress = (currentTime / duration) * 100;
          this.setData({
            time,
            progress,
            currentTime,
            play: true,
          });
        }
      };
      this.innerAudioContext.onTimeUpdate(listener);
      this.innerAudioContext.onEnded(() => {
        this.innerAudioContext?.seek(0);
        const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
        this.setData({
          play: false,
          progress: 0,
          time,
          currentTime: 0,
        });
      });
      this.innerAudioContext.onPlay(() => {
        this.setData({
          play: true,
        });
      });
      this.innerAudioContext.onPause(() => {
        this.setData({
          play: false,
        });
      });
    }
  },
  handlePause() {
    if (this.innerAudioContext) {
      this.innerAudioContext.pause();
    }
  },
  handleDragStart() {
    this.setData({
      drag: true,
    });
  },
  handleDragEnd() {
    this.setData({
      drag: false,
    });
    if (this.data.play) {
      this.innerAudioContext?.seek(this.data.currentTime);
    }
  },
  handleDrag(e: any) {
    const current = e.detail.value;
    const duration = this.innerAudioContext?.duration || this.data.chapter.AudioUrl.duration;
    const currentTime = (current / 100) * duration;
    const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
    this.setData({
      time,
      currentTime,
    });
  },
  formatTime(time: number) {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
  },
  handleAuthClose() {
    this.setData({
      toastShow: false,
    });
    wx.navigateBack();
  },
  handleAuthConform() {
    wx.navigateTo({
      url: '/pages/login/index?back=1',
    });
  },

  handleType() {
    wx.redirectTo({
      url: `/pages/classify/index?id=${this.data.chapter.CateId}`,
    });
  },
});

export {};