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">
      <!--播放数据-->
      <view class="view-num main-left cross-center">
        <u-icon name="eye-fill" :color="isCollect?$colors.primaryColor:$colors.defaultColor" size="26rpx" />
        <text>{{ episode.user_watch_record_count }}</text>
      </view>
      <!--按钮-->
      <view class="status-bar dir-top-wrap main-center">
        <!--喜欢-->
        <view
          class="item fav dir-top-wrap main-center cross-center"
          :class="{active: isFav}"
          @click="handleFavorite"
        >
          <u-icon name="heart-fill" size="58rpx" :color="isFav?$colors.primaryColor:$colors.defaultColor" />
          <text>{{ episode.user_favorite_count }}</text>
        </view>
        <!--收藏-->
        <view
          class="item collect dir-top-wrap main-center cross-center"
          :class="{active: isCollect}"
          @click="handleCollect"
        >
          <u-icon name="star-fill" size="58rpx" :color="isCollect?$colors.primaryColor:$colors.defaultColor" />
          <text>{{ episode.user_collect_count }}</text>
        </view>
        <!--分享-->
        <view class="item share dir-top-wrap main-center cross-center">
          <button open-type="share" />
          <u-icon name="share-fill" size="58rpx" :color="$colors.defaultColor" />
          <text>{{ episode.sahre_count }}</text>
        </view>
      </view>
      <!--视频播放-->
      <view class="video-box main-center cross-center" :style="{zIndex: isPlaying?0:998}">
        <!--进度条-->
        <view v-if="isPlaying" class="progress-container">
          <view class="progress" :style="{width: progress+'%'}" />
        </view>
        <!--视频容器-->
        <swiper
          class="swiper"
          circular
          :vertical="true"
          :current="swiperCurrent"
          @change="handleSwiperChancge"
        >
          <swiper-item
            v-for="(item,index) in episode.lists"
            :key="index"
          >
            <!-- 控制按钮 - 播放 -->
            <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)" />
            <video
              :id="`video${index}`"
              :poster="episode.cover_img"
              :src="item.url"
              style="width: 100%;height: 100%;"
              :show-play-btn="video.playBtn"
              :show-fullscreen-btn="video.fullscreenBtn"
              :controls="video.controls"
              object-fit="contain"
              @timeupdate="timeupdate"
            />
          </swiper-item>
        </swiper>
        <!--        <video-->
        <!--          id="video"-->
        <!--          :show-play-btn="video.playBtn"-->
        <!--          :show-fullscreen-btn="video.fullscreenBtn"-->
        <!--          :controls="video.controls"-->
        <!--          object-fit="contain"-->
        <!--          style="width: 100%;height: 100%;"-->
        <!--          :poster="episode.cover_img"-->
        <!--          :src="src"-->
        <!--          @timeupdate="timeupdate"-->
        <!--        />-->
      </view>
      <!--底部-->
      <view class="footer" :class="{episode: footerShow}">
        <view class="bar main-between cross-center" @click="footerShow = !footerShow">
          <view class="icon" />
          <view class="name">
            <u-text :text="episode.name" :color="$colors.infoColor" :lines="1" />
            <!--            <u-text text="321313" :color="$colors.infoColor" :lines="1" />-->
          </view>
          <view class="arrow">
            <u-icon name="arrow-up" :color="$colors.infoColor" size="32rpx" />
          </view>
        </view>
        <view class="episode-container dir-top-wrap">
          <!--分集 横向滚动-->
          <scroll-view
            class="header-box dir-left-nowrap cross-center"
            scroll-x
            scroll-with-animation
          >
            <view
              v-for="(item,index) in episodes"
              :key="index"
              class="header-item"
              :class="{active: episodesIndex === index}"
              @click="episodesIndex=index"
            >{{ item.title }}</view>
          </scroll-view>
          <!--几集选择-->
          <view class="content dir-left-wrap main-left">
            <view
              v-for="(item, index) in episodes[episodesIndex].lists"
              :key="index"
              class="episode-item"
              @click="handleSelectEpisode(item.index)"
            >
              <image :src="episode.cover_img" />
              <text>第{{ item.sort }}集</text>
              <view v-if="currentEpisode.index === item.index && isPlaying" class="playing" />
              <view v-if="!item.is_free && buyRecord.indexOf(item.id) === -1 && !(episode.is_vip_watch && userInfo.info.is_vip)" class="lock main-center cross-center">
                <u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--toast-->
      <view
        v-if="toast.show"
        class="toast dir-top-wrap main-center cross-center"
        :class="toast.status"
      >
        <u-icon
          :name="toast.status === 'success' ? 'checkmark-circle' : 'close-circle'"
          :color="toast.status === 'success' ? $colors.primaryColor : $colors.defaultColor"
          size="80rpx"
        />
        <text>{{ toast.text }}</text>
      </view>
      <!--购买弹窗-->
      <u-modal
        :show="modal.show"
        :content="`确定购买【第${currentEpisode.sort}集】？`"
        show-cancel-button
        @confirm="handleBuy"
        @cancel="modal.show = false"
      />
      <!--充值-->
      <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'
export default {
  name: 'Play',
  components: { Recharge },
  data() {
    return {
      id: null,
      listId: null,
      isPlaying: false,
      progress: 0,
      episode: null,
      loading: true,
      isCollect: false,
      isFav: false,
      video: {
        controls: false,
        fullscreenBtn: false,
        playBtn: false
      },
      toast: {
        status: 'success',
        text: '收藏成功',
        show: false
      },
      footerShow: false,
      episodesIndex: 0,
      buyRecord: [],
      modal: {
        show: false
      },
      rechargeShow: false,
      swiperCurrent: 0,
      currentEpisode: null
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    }),
    src() {
      if (!this.episode) return ''
      return this.currentEpisode.url
    },
    episodes() {
      const list = []
      if (this.episode) {
        let temp = []
        this.episode.lists.forEach((obj, index) => {
          temp.push(obj)
          if (temp.length === 6 || index === (this.episode.lists.length - 1)) {
            const start = list.length ? (list.length * 6) + 1 : 1
            const end = (start - 1) + temp.length
            list.push({ title: `${start}集-${end}集`, lists: temp })
            temp = []
          }
        })
      }
      return list
    },
    videoContext() {
      return uni.createVideoContext(`video${this.swiperCurrent}`, this)
    }
  },
  watch: {
    'toast.show'(val) {
      if (val) {
        setTimeout(() => {
          this.toast.show = false
        }, 1000)
      }
    },
    progress(val) {
      if (val >= 100) {
        if ((this.swiperCurrent + 1) === this.episode.lists.length) {
          this.$u.toast('已全部播放完成')
          return 100
        }
        this.swiperCurrent += 1
        this.currentEpisode = this.episode.lists[this.swiperCurrent]
        this.$forceUpdate()
        this.$loading('下一集加载中...')
        setTimeout(() => {
          this.$hideLoading()
          this.handlePlay(this.currentEpisode)
        }, 1000)
      }
    }
  },
  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
      }
      console.log('-->data', item)
      item.isPlaying = true
      this.isPlaying = true
      this.videoContext.play()
      this.watched(this.id, this.currentEpisode.id)
    },
    // 暂停
    handlePause(item) {
      if (!this.isPlaying) return
      item.isPlaying = false
      this.isPlaying = false
      this.videoContext.pause()
    },
    // 选择剧集
    handleSelectEpisode(index) {
      // 暂停上一个
      this.handlePause(this.currentEpisode)
      // 切换播放
      this.swiperCurrent = index

      const item = this.episode.lists[index]
      this.currentEpisode = item
      // 检查是否购买
      if (!this.checkBeforePlay(item)) {
        // 余额是否购买
        if (!this.checkOverage(item)) {
          this.rechargeShow = true
          return
        }
        // 余额足够 直接购买
        this.handleBuy(index)
        // this.modal.show = true
        return
      }
      this.footerShow = false
      this.$loading()
      setTimeout(() => {
        this.$hideLoading()
        this.handlePlay(this.currentEpisode)
        this.watched(this.id, this.currentEpisode.id)
      }, 1000)
    },
    // 当前剧集购买记录
    async getBuyRecord() {
      await this.$api.user.episode.buyRecord(this.id).then(res => {
        this.buyRecord = res.data
      })
    },
    // 购买剧集
    async handleBuy() {
      // this.$loading('购买中...')
      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('购买成功')
          this.modal.show = false
          await this.getBuyRecord()
          this.handlePlay(this.currentEpisode)
          this.footerShow = false
          this.$api.user.info().then(res => {
            this.$store.dispatch('user/info', res.data)
          })
        }
      }).catch(() => {
        this.$hideLoading()
      })
    },
    handleSwiperChancge({ detail }) {
      // 暂停上一个
      this.handlePause(this.currentEpisode)

      console.log('-->data', detail)
      this.swiperCurrent = detail.current
      this.currentEpisode = this.episode.lists[this.swiperCurrent]
      // 播放
      this.handlePlay(this.currentEpisode)
    },
    // 播放前检查剧集是否购买/免费
    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
    },
    // 检查是否收藏当前剧集
    checkCollect() {
      this.$api.user.collect.check(this.id).then(res => {
        this.isCollect = res.data
      })
    },
    // 收藏相关 处理
    handleCollect() {
      const method = this.isCollect ? 'destroy' : 'add'
      const num = this.isCollect ? -1 : 1
      this.$api.user.collect[method](this.id).then(res => {
        if (res.data) {
          this.toast.show = true
          this.toast.status = this.isCollect ? 'cancel' : 'success'
          this.toast.text = this.isCollect ? '取消收藏' : '收藏成功'
          this.episode.user_collect_count += num
          this.isCollect = !this.isCollect
        }
      })
    },
    // 检查是否喜欢当前短剧
    checkFavorite() {
      this.$api.user.favorite.check(this.id).then(res => {
        this.isFav = res.data
      })
    },
    // 处理 喜欢剧集
    handleFavorite() {
      const method = this.isFav ? 'destroy' : 'add'
      const num = this.isFav ? -1 : 1
      this.$api.user.favorite[method](this.id).then(res => {
        if (res.data) {
          this.toast.show = true
          this.toast.status = this.isFav ? 'cancel' : 'success'
          this.toast.text = this.isFav ? '取消喜欢' : '喜欢成功'
          this.episode.user_favorite_count += num
          this.isFav = !this.isFav
        }
      })
    },
    // 记录观看记录
    watched(id, list_id) {
      this.$api.user.episode.watched(id, list_id).then(res => {

      })
    },
    // 分享
    shared(id, list_id) {
      this.$api.episode.shared(id, list_id).then(res => {
        this.episode.share_count += 1
      })
    },
    // 获取剧集详情
    getEpisode() {
      this.loading = true
      this.$api.episode.detail(this.id).then(res => {
        this.loading = false
        this.episode = res.data
        this.episode.lists.forEach((obj, index) => {
          obj.isPlaying = false
          obj.index = index
        })
        if (this.listId) {
          this.episode.lists.forEach((obj, index) => {
            if (parseInt(this.listId) === parseInt(obj.id)) {
              this.currentEpisode = obj
              this.swiperCurrent = index
            }
          })
        } else {
          this.currentEpisode = this.episode.lists[0]
        }
        this.$nextTick(() => {
          this.handlePlay(this.currentEpisode)
        })
      })
    }
  },
  async onLoad(options) {
    this.id = options.id
    this.listId = options?.list_id
    await this.getBuyRecord()
    this.getEpisode()
    this.checkCollect()
    this.checkFavorite()
  },
  // 分享
  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.shared(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;
          bottom: 0;
          right: 0;
          background: transparent;
          z-index: 999;
        }
        .pause-layer{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: transparent;
          z-index: 99;
        }
        .swiper {
          width: 100%;
          height: 100vh;
          position: relative;
          z-index: 99;
          .swiper-item {
            width: 100%;
            height: 100%;
          }
        }
        .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%);
          }
        }
      }
      .view-num{
        position: fixed;
        right: 20rpx;
        top: 40rpx;
        color: #fff;
        font-size: 26rpx;
        z-index: 100;
        text{
          margin-left: 10rpx;
        }
      }

      .status-bar{
        position: fixed;
        bottom: 300rpx;
        right: 40rpx;
        color: $default-color;
        z-index: 999;
        .item{
          margin-bottom: 40rpx;
          &.share{
            position: relative;
            button{
              position: absolute;
              background: transparent;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 1;
              &:after{
                content: unset;
              }
            }
          }
          &.active{
            color: $primary-color;
          }
          text{
            margin-top: 10rpx;
          }
        }
      }

      .footer{
        position: fixed;
        width: 95vw;
        height: 76rpx;
        background: rgba(24, 28, 47, 0.8);
        bottom: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 26rpx;
        color: $info-color;
        border-radius: 20rpx;
        z-index: 999;
        transition: .3s;
        &.episode{
          bottom: 700rpx;
          margin-top: -4rpx;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          .episode-container{
            display: flex;
            margin-top: -4rpx;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
          }
          .bar{
            .arrow{
              transform: rotate(180deg);
            }
          }
        }
        .bar{
          padding: 0 20rpx;
          .icon{
            background: url("/static/image/video.png") no-repeat center;
            background-size: 70%;
            width: 80rpx;
            height: 80rpx;
          }
          .name{
            text-align: left;
            flex: 1;
            padding: 0 30rpx;
          }
          .arrow{
            transition: .3s;
          }
        }

        .episode-container{
          display: none;
          background: inherit;
          min-height: 620rpx;
          .header-box{
            white-space: nowrap;
            margin: 20rpx 0;
            .header-item{
              margin-right: 20rpx;
              border-radius: 20rpx;
              display: inline-block;
              width: 200rpx;
              border: 1rpx solid $default-color;
              text-align: center;
              padding: 10rpx 0;
              color: $default-color;
              &.active{
                border-color: $primary-color;
                color: $primary-color;
              }
            }
          }
          .content{
            margin-top: 20rpx;
            .episode-item{
              position: relative;
              width: calc((100% - #{40rpx}) / 3);
              margin-right: 20rpx;
              margin-bottom: 20rpx;
              overflow: hidden;
              border-radius: 18rpx;
              &:nth-child(3n){
                margin-right: 0;
              }
              .playing{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background: rgba(0,0,0,.5) url("/static/image/playing.png") no-repeat center;
                background-size: 40rpx;
                z-index: 2;
              }
              image{
                width: 100%;
                height: 260rpx;
              }
              text{
                position: absolute;
                left: 0;
                bottom: 0;
                right: 0;
                color: $default-color;
                padding: 20rpx 0;
                text-align: center;
                background: rgba(0,0,0,.3);
                z-index: 1;
              }
              .lock{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background: rgba(0,0,0,.5);
                z-index: 2;
              }
            }
          }
        }

      }

      .toast{
        position: fixed;
        width: 60vw;
        background: rgba(0,0,0,.5);
        height: 300rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 20rpx;
        font-size: 36rpx;
        color: $default-color;
        &.success{
          color: $primary-color;
        }
        text{
          margin-top: 20rpx;
        }
      }
    }
</style>