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" :current-episode="currentEpisode" @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"
          @animationfinish="handleSwiperAnimationFinish"
        >
          <swiper-item v-for="(item, index) in swiperEpisode" :key="index" class="swiper-item">
            <!-- #ifdef  MP-TOUTIAO | MP-WEIXIN-->
            <!-- 控制按钮 - 播放 -->
            <view v-if="!item.isPlaying" class="play-layer main-center cross-center" @tap="handlePlay(item)">
              <view class="icon">
                <u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
              </view>
            </view>
            <!-- 控制按钮 - 暂停 -->
            <view v-if="item.isPlaying" class="pause-layer" @tap="handlePause(item, true)" />
            <!--   #endif-->
            <video
              v-if="Object.keys(item).length"
              :id="`video${index}`"
              :autoplay="(index==='current'&&isFirstLoad)?'autoplay':false"
              :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"
              @ended="ended"
              @play="play($event,item)"
            />
          </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 {
      isFirstLoad: true, // 是否首次播放
      id: null, // 短剧ID
      listId: null, // 剧集ID
      isPlaying: false, // 是否播放
      progress: 0, // 进度条
      episode: {}, // 短剧信息
      lists: [], // 剧集信息
      loading: false, // 数据加载
      video: { // 视频配置
        controls: true,
        progress: true,
        fullscreenBtn: false,
        playBtn: false,
        // #ifdef  MP-KUAISHOU | MP-TOUTIAO
        duration: 450,
        // #endif
        // #ifdef  MP-WEIXIN
        duration: 500
        // #endif
      },
      buyRecord: [], // 购买记录
      rechargeShow: false, // 显示充值
      swiperCurrent: 1, // 当前滚动
      currentEpisode: {}, // 当前播放剧集
      swiperEpisode: { // swiper 剧集
        prev: {},
        current: {},
        next: {}
      },
      indexArr: {
        'prev': 0,
        'current': 1,
        'next': 2
      }
    }
  },
  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 indexArr = ['prev', 'current', 'next']
        const len = this.lists.length
        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 = 0
            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)
      }
    },
    ended() {
      // #ifdef  MP-KUAISHOU
      this.progress = 100
      // #endif
    },
    play(e, item) {
      console.log('-->data', e, item)
      // #ifdef  MP-KUAISHOU
      this.handlePlay(item)
      // #endif
    },
    // 播放
    handlePlay(item) {
      this.currentEpisode = item
      // 检查是否购买
      if (!this.checkBeforePlay(item)) {
        // 余额是否购买
        if (!this.checkOverage(item)) {
          // #ifdef  MP-KUAISHOU
          // 如果没有购买，那把视频链接设置为空 停止播放，使用 pause 和 stop 在真机上不生效 只能采用这种方式
          // item.url = ''//让对应的视频停止播放==========》
          this.videoContext.stop()
          // #endif
          this.rechargeShow = true
          return
        }
        // 余额足够 直接购买
        this.handleBuy()
        return
      }
      this.isPlaying = true
      item.isPlaying = true
      // #ifdef MP-KUAISHOU
      item.url = item.src
      this.$forceUpdate()
      setTimeout(() => {
        this.isFirstLoad || this.videoContext.play() // 当滑动的时候自动播放
        // const query = uni.createSelectorQuery().in(this);
        // let videoDom=query.select('#videocurrent');
        // console.log('视频播放器:',videoDom.node())
        // videoDom.node().play();
      }, 1000)
      // #endif
      // #ifdef MP-TOUTIAO | MP-WEIXIN
      this.videoContext.play()
      // #endif
      this.progress = 0
      this.watched(this.id, this.currentEpisode.id)
    },
    // 暂停
    handlePause(item, isAll = false) {
      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.data.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.isFirstLoad = false
      // this.swiperCurrent = detail.current
    },
    handleSwiperAnimationFinish({ 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) {
      console.log('-->handleShared success')
      this.$api.episode.shared(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]
      console.log('-->currentEpisode', this.currentEpisode)
      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
          obj.src = obj.url
        })
        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}&user_id=${this.userInfo.user_id}`
    }
    if (this.episode) {
      // 没有success 回调 只要点击分享了就默认成功
      this.handleShared(this.id)
      options = {
        title: this.episode.name,
        path: `/pages/episode/play?id=${this.id}&user_id=${this.userInfo.user_id}`,
        imageUrl: this.episode.cover_img,
        desc: this.episode.name
      }
    }
    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;

        .icon {
          position: absolute;
          top: 50%;
          transform: translate(2px, 63%);
        }
      }

      .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: 100vh !important;
        }
      }

      .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>