zhangsiye/mini/pages/episode/play.vue

<template>
  <view class="play-container">
    <u-loading-page
      :loading="loading"
      :bg-color="$colors.bgColor"
      :color="$colors.primaryColor"
      :loading-color="$colors.primaryColor"
    />
    <template v-if="!loading">
      <!-- 剧集按钮-->
      <episode-buttons :episode="episode" @change="handleCollectAndFavChange" />
      <!--视频播放-->
      <view class="video-box main-center cross-center" :style="{zIndex: isPlaying ? 0 : 998}">
        <!--视频容器-->
        <swiper
          class="swiper"
          circular
          :vertical="true"
          :current="swiperCurrent"
          @change="handleSwiperChancge"
        >
          <swiper-item
            v-for="(item, index) in swiperEpisode"
            :key="index"
          >
            <!-- #ifdef  MP-TOUTIAO | MP-WEIXIN-->
            <!-- 控制按钮 - 播放 -->
            <view v-if="!item.isPlaying" class="play-layer main-center cross-center" @tap="handlePlay(item)">
              <u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
            </view>
            <!-- 控制按钮 - 暂停 -->
            <view v-if="item.isPlaying" class="pause-layer" @tap="handlePause(item, true)" />
            <!--   #endif-->
            <video
              v-if="Object.keys(item).length"
              :id="`video${index}`"
              :poster="episode.cover_img"
              :src="item.url"
              :style="{
                width:'100%',
                height: 'calc(100vh - 130rpx)',
                zIndex: 0
              }"
              :show-play-btn="video.playBtn"
              :show-center-play-btn="video.playBtn"
              :show-fullscreen-btn="video.fullscreenBtn"
              :controls="video.controls"
              :show-progress="video.progress"
              object-fit="contain"
              @timeupdate="timeupdate"
            />
          </swiper-item>
        </swiper>
      </view>
      <!--底部-->
      <episode-part
        :episode="episode"
        :is-playing="isPlaying"
        :buy-record="buyRecord"
        :current-episode="currentEpisode"
        @selectEpisode="handleSelectEpisode"
      />
      <!--充值-->
      <recharge
        :show.sync="rechargeShow"
        type="play"
        mode="bottom"
        :episode="episode"
        :list="currentEpisode"
      />
    </template>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import Recharge from '../../components/Recharge/index'
import EpisodeButtons from './components/EpisodeButtons'
import EpisodePart from './components/EpisodePart'
export default {
  name: 'Play',
  components: { EpisodePart, EpisodeButtons, Recharge },
  data() {
    return {
      id: null, // 短剧ID
      listId: null, // 剧集ID
      isPlaying: false, // 是否播放
      progress: 0, // 进度条
      episode: {}, // 短剧信息
      lists: [], // 剧集信息
      loading: false, // 数据加载
      video: { // 视频配置
        controls: true,
        progress: true,
        fullscreenBtn: false,
        playBtn: false
      },
      buyRecord: [], // 购买记录
      rechargeShow: false, // 显示充值
      swiperCurrent: 1, // 当前滚动
      currentEpisode: {}, // 当前播放剧集
      swiperEpisode: { // swiper 剧集
        prev: {},
        current: {},
        next: {}
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    }),
    videoContext() {
      const indexArr = ['prev', 'current', 'next']
      const swiperKey = indexArr[this.swiperCurrent]
      return uni.createVideoContext(`video${swiperKey}`, this)
    }
  },
  watch: {
    // 进度条
    progress(val) {
      if (val >= 100) {
        const len = this.lists.length
        const indexArr = ['prev', 'current', 'next']
        const swiperKey = indexArr[this.swiperCurrent]
        if (this.swiperEpisode[swiperKey].sort === this.lists[len - 1].sort) {
          this.$u.toast('已全部播放完成')
          return 100
        }
        // 切换
        switch (this.swiperCurrent) {
          case 0:
            this.swiperCurrent = 1
            break
          case 1:
            this.swiperCurrent = 2
            break
          case 2:
            this.swiperCurrent = 3
            break
        }
        this.$forceUpdate()
      }
    },
    swiperCurrent(val) {
      const indexArr = ['prev', 'current', 'next']
      const swiperKey = indexArr[val]
      const dataIndex = this.lists.findIndex(val => {
        return this.swiperEpisode[swiperKey].sort === val.sort
      })
      const len = this.lists.length
      let prevIndex, currentIndex, nextIndex
      switch (swiperKey) {
        case 'prev':
          currentIndex = dataIndex + 1 >= len ? 0 : dataIndex + 1
          nextIndex = dataIndex - 1 < 0 ? len - 1 : dataIndex - 1
          this.swiperEpisode.current = this.lists[currentIndex]
          this.swiperEpisode.next = this.lists[nextIndex]
          break
        case 'current':
          prevIndex = dataIndex - 1 < 0 ? len - 1 : dataIndex - 1
          nextIndex = dataIndex + 1 >= len ? 0 : dataIndex + 1
          this.swiperEpisode.prev = this.lists[prevIndex]
          this.swiperEpisode.next = this.lists[nextIndex]
          break
        case 'next':
          prevIndex = dataIndex + 1 >= len ? 0 : dataIndex + 1
          currentIndex = dataIndex - 1 < 0 ? len - 1 : dataIndex - 1
          this.swiperEpisode.current = this.lists[currentIndex]
          this.swiperEpisode.prev = this.lists[prevIndex]
          break
      }

      // 暂停其他
      this.handlePause(this.currentEpisode, false)

      // 当前播放剧集
      this.currentEpisode = this.swiperEpisode[swiperKey]
      // 播放
      this.handlePlay(this.currentEpisode)
    },
    currentEpisode(val) {
      console.log('-->当前剧集', val.sort)
    }
  },
  methods: {
    // 播放进度
    timeupdate({ detail }) {
      // currentTime, duration
      if (detail.duration) {
        this.progress = (detail.currentTime / detail.duration * 100).toFixed(2)
      }
    },
    // 播放
    handlePlay(item) {
      this.currentEpisode = item
      // 检查是否购买
      if (!this.checkBeforePlay(item)) {
        // 余额是否购买
        if (!this.checkOverage(item)) {
          this.rechargeShow = true
          return
        }
        // 余额足够 直接购买
        this.handleBuy()
        return
      }
      this.isPlaying = true
      item.isPlaying = true
      // #ifdef MP-KUAISHOU
      setTimeout(() => {
        this.videoContext.play()
      }, 1000)
      // #endif
      // #ifdef MP-TOUTIAO | MP-WEIXIN
      this.videoContext.play()
      // #endif
      this.watched(this.id, this.currentEpisode.id)
    },
    // 暂停
    handlePause(item, isAll) {
      if (!this.isPlaying) return
      item.isPlaying = false
      this.isPlaying = false
      // 展厅其他的
      const indexArr = ['prev', 'current', 'next']
      const swiperKey = indexArr[this.swiperCurrent]
      indexArr.forEach(obj => {
        if (swiperKey !== obj || isAll) {
          const videoContext = uni.createVideoContext(`video${obj}`, this)
          videoContext.pause()
        }
      })
    },
    // 选择剧集
    handleSelectEpisode(index) {
      // 暂停上一个
      this.handlePause(this.currentEpisode, true)

      const item = this.lists[index]

      // 重置SwiperEpisode数据 切换播放
      this.swiperCurrent = 1
      this.initSwiperEpisode(item.id)
    },
    // 当前剧集购买记录
    async getBuyRecord() {
      await this.$api.user.episode.buyRecord(this.id).then(res => {
        this.buyRecord = res.data
      })
    },
    // 购买剧集
    async handleBuy() {
      await this.$api.user.episode.buyHandle(this.id, this.currentEpisode.id).then(async res => {
        this.$hideLoading()
        if (typeof res.overage !== 'undefined') {
          this.rechargeShow = true
        } else {
          this.$u.toast('购买成功')
          await this.getBuyRecord()
          this.handlePlay(this.currentEpisode)
          this.$api.user.info().then(res => {
            this.$store.dispatch('user/info', res.data)
          })
        }
      }).catch(() => {
        this.$hideLoading()
      })
    },
    // 滚动 Swiper
    handleSwiperChancge({ detail }) {
      this.swiperCurrent = detail.current
    },
    // 播放前检查剧集是否购买/免费
    checkBeforePlay(item) {
      // 剧集免费 不免费已购买 VIP观看是VIP
      if (item.is_free) {
        return true
      }

      if (!item.is_free && this.buyRecord.indexOf(item.id) !== -1) {
        return true
      }

      if (this.episode.is_vip_watch && this.userInfo.info.is_vip) {
        return true
      }

      return false
    },
    // 检查余额是否足够支付
    checkOverage(item) {
      return this.userInfo.info.integral >= item.sale_price
    },
    // 记录观看记录
    watched(id, list_id) {
      this.$api.user.episode.watched(id, list_id).then(res => {

      })
    },
    // 分享
    handleShared(id, list_id) {
      this.$api.episode.shared(id, list_id).then(res => {
        this.episode.share_count += 1
      })
    },
    handleCollectAndFavChange(data) {
      if (data.type === 'collect') {
        this.episode.user_collect_count += data.num
      } else {
        this.episode.user_favorite_count += data.num
      }
    },
    // // 初始化 Swiper 剧集
    initSwiperEpisode(listId) {
      let currentIndex = 0
      if (listId) {
        currentIndex = this.lists.findIndex(obj => {
          return parseInt(listId) === parseInt(obj.id)
        })
      }
      let prevIndex = currentIndex - 1
      let nextIndex = currentIndex + 1
      const len = this.lists.length
      if (parseInt(listId) === 0 || prevIndex < 0) {
        prevIndex = len - 1
      }
      //
      if (nextIndex >= len) {
        nextIndex = 0
      }

      this.swiperEpisode = {
        prev: this.lists[prevIndex],
        current: this.lists[currentIndex],
        next: this.lists[nextIndex]
      }
      console.log('-->swiper data', JSON.stringify(this.swiperEpisode))

      this.currentEpisode = this.lists[currentIndex]
      this.$nextTick(() => {
        this.handlePlay(this.currentEpisode)
      })
    },
    // 获取剧集详情
    getEpisode() {
      this.loading = true
      this.$api.episode.detail(this.id).then(res => {
        this.loading = false
        this.episode = res.data
        uni.setNavigationBarTitle({
          title: this.episode.name + (this.episode.status === 0 ? ' | 更新中' : '已完结')
        })
        this.episode.lists.forEach((obj, index) => {
          obj.isPlaying = false
          obj.index = index
          obj.progress = 0
        })
        this.lists = this.episode.lists
        // 初始化 Swiper 剧集
        this.initSwiperEpisode(this.listId)
      })
    }
  },
  async onLoad(options) {
    this.id = options.id
    this.listId = options?.list_id
    this.listId = this.listId ? this.listId : 0
    await this.getBuyRecord()
    this.getEpisode()
  },
  // 分享
  onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    let options = {
      title: '',
      path: `/pages/episode/play?id=${this.id}`
    }
    if (this.episode) {
      options = {
        title: this.episode.name,
        path: `/pages/episode/play?id=${this.id}`,
        imageUrl: this.episode.cover_img,
        desc: this.episode.name,
        success: res => {
          this.handleShared(this.id, this.currentEpisode.id)
        }
      }
    }
    return options
  }
}
</script>

<style lang="scss" scoped>
    .play-container {
      font-size: 28rpx;
      .video-box{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .play-layer{
          position: fixed;
          top: 0;
          left: 0;
          // #ifdef  MP-KUAISHOU | MP-WEIXIN
          bottom: 240rpx;
          // #endif
          // #ifdef  MP-TOUTIAO
          bottom: 360rpx;
          // #endif
          right: 0;
          background: transparent;
          z-index: 999;
        }
        .pause-layer{
          position: absolute;
          top: 0;
          left: 0;
          // #ifdef  MP-KUAISHOU | MP-WEIXIN
          bottom: 240rpx;
          // #endif
          // #ifdef  MP-TOUTIAO
          bottom: 360rpx;
          // #endif
          right: 0;
          background: transparent;
          z-index: 99;
        }
        .swiper {
          width: 100%;
          height: 100vh;
          position: relative;
          z-index: 99;
          .swiper-item {
            width: 100%;
            height: calc(100vh - #{150rpx});
          }
        }
        .progress-container{
          width: 93vw;
          background: #fff;
          height: 10rpx;
          position: fixed;
          z-index: 100;
          bottom: 160rpx;
          .progress{
            height: 10rpx;
            background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
          }
        }
      }
    }
</style>