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

import { decryptData } from '@/utils/crypto';
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,

    chapterTip: false,

    toastShow: false,
    toastType: 3,
    previewImg: true,

    listener: false,
    globalStop: false,
  },
  BackgroundAudioManager: null as WechatMiniprogram.BackgroundAudioManager | null,
  onLoad(options) {
    this.BackgroundAudioManager = wx.getBackgroundAudioManager();
    this.setData({
      BookId: options.id,
      globalStop: this.BackgroundAudioManager.paused,
    });
    if (options.cid) {
      this.setData({
        ChapterId: options.cid,
      });
    }
    const previewImg = !['mac', 'windows'].includes(wx.getDeviceInfo().platform);
    this.setData({
      previewImg,
    });

    app.waitLogin(false, true).then(() => {
      this.getChapterList();
      this.getDetail();
    });
  },
  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) => {
        if (res.chapter.content_encrypt === 1) {
          res.chapter.Content = decryptData(res.chapter.Content);
        }
        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,
          show: !this.data.ChapterId,
        });
        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();
        this.initBackgroundAudioManager();
      })
      .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();
  },
  onClose() {
    const chapterTip = !wx.getStorageSync('chapterTip');
    this.setData({
      show: false,
      chapterTip,
    });
    if (chapterTip) {
      setTimeout(() => {
        this.handleTipClsoe();
      }, 5000);
    }
  },

  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,
      });
    });
  },
  initBackgroundAudioManager() {
    const { chapter } = this.data;
    if (this.BackgroundAudioManager) {
      if (this.BackgroundAudioManager.src === chapter.AudioUrl.url && !this.BackgroundAudioManager.paused) {
        this.setData({
          play: true,
        });
        this.backgroundAudioManagerListener();
      } else {
        this.backgroundAudioManagerListener();
        this.setData({
          play: false,
          progress: 0,
          currentTime: 0,
        });
      }
    }
  },
  backgroundAudioManagerListener() {
    const { chapter } = this.data;
    if (!this.BackgroundAudioManager) return;
    const timeUpdateListener = () => {
      const isCurrent = this.BackgroundAudioManager?.src === chapter.AudioUrl.url;
      if (this.BackgroundAudioManager && !this.data.drag && this.data.play && isCurrent) {
        const { currentTime, duration } = this.BackgroundAudioManager;
        const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
        const progress = (currentTime / duration) * 100;
        this.setData({
          time,
          progress,
          currentTime,
        });
      }
    };
    const endedListener = () => {
      const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
      this.setData({
        play: false,
        progress: 0,
        time,
        currentTime: 0,
        globalStop: true,
      });
    };
    const playListener = () => {
      const isCurrent = this.BackgroundAudioManager?.src === chapter.AudioUrl.url;
      if (!isCurrent) return;
      this.setData({
        play: true,
      });
    };
    const pauseListener = () => {
      this.setData({
        play: false,
      });
    };
    const stopListener = () => {
      const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
      this.setData({
        play: false,
        globalStop: true,
        progress: 0,
        time,
        currentTime: 0,
      });
    };
    this.BackgroundAudioManager.onTimeUpdate(timeUpdateListener);
    this.BackgroundAudioManager.onEnded(endedListener);
    this.BackgroundAudioManager.onPlay(playListener);
    this.BackgroundAudioManager.onPause(pauseListener);
    this.BackgroundAudioManager.onStop(stopListener);
    this.setData({
      listener: true,
    });
  },
  handlePlay() {
    const { chapter, currentTime, play, listener, globalStop } = this.data;
    if (play) return;
    if (this.BackgroundAudioManager) {
      if (this.BackgroundAudioManager.src !== chapter.AudioUrl.url || globalStop) {
        this.BackgroundAudioManager.title = chapter.ChapterName;
        this.BackgroundAudioManager.coverImgUrl = chapter.CoverUrl;
        this.BackgroundAudioManager.src = chapter.AudioUrl.url;
      } else {
        this.BackgroundAudioManager.play();
        this.BackgroundAudioManager.seek(this.BackgroundAudioManager.currentTime || currentTime);
      }
      if (!listener) {
        this.backgroundAudioManagerListener();
      }
    }
    this.setData({
      globalStop: false,
    });
  },
  handlePause() {
    const { play } = this.data;
    if (this.BackgroundAudioManager && play) {
      this.setData({
        play: false,
      });
      this.BackgroundAudioManager.pause();
    }
  },
  handleDragStart() {
    this.setData({
      drag: true,
    });
  },
  handleDragEnd() {
    this.setData({
      drag: false,
    });
    if (this.data.play) {
      this.BackgroundAudioManager?.seek(this.data.currentTime);
    }
  },
  handleDrag(e: any) {
    const current = e.detail.value;
    const duration = this.BackgroundAudioManager?.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({
      fail() {
        wx.reLaunch({
          url: '/pages/classify/index',
        });
      },
    });
  },
  handleAuthConform() {
    const { BookId, ChapterId } = this.data;
    const backPath = `/pages/article/index?id=${BookId}&cid=${ChapterId}`;
    app.globalData.backPath = backPath;
    wx.navigateTo({
      url: '/pages/login/index?back=1',
    });
  },
  handleType() {
    wx.redirectTo({
      url: `/pages/classify/index?id=${this.data.chapter.CateId}`,
    });
  },
  handleTipClsoe() {
    if (this.data.chapterTip) {
      wx.setStorageSync('chapterTip', 'open');
    }
    this.setData({
      chapterTip: false,
    });
  },
});

export {};