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="footer main-between cross-center">
        <view class="icon" />
        <view class="name">
          <u-text :text="episode.name" :color="$colors.infoColor" :lines="1" />
        </view>
        <view class="arrow">
          <u-icon name="arrow-up" :color="$colors.infoColor" size="32rpx" />
        </view>
      </view>
      <!--视频播放-->
      <view class="video-box main-center cross-center">
        <!-- 控制按钮 - 播放 -->
        <view v-if="!isPlaying" class="play-layer main-center cross-center" @tap="handlePlay">
          <u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
        </view>
        <!-- 控制按钮 - 暂停 -->
        <view v-if="isPlaying" class="pause-layer" @tap="handlePause" />
        <!--进度条-->
        <view v-if="isPlaying" class="progress-container">
          <view class="progress" :style="{width: progress+'%'}" />
        </view>
        <video
          id="video"
          :show-play-btn="playBtn"
          :show-fullscreen-btn="fullscreenBtn"
          :controls="controls"
          object-fit="contain"
          style="width: 100%;height: 100%;"
          :poster="episode.cover_img"
          :src="src"
          @timeupdate="timeupdate"
        />
      </view>
    </template>
    <!--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>
  </view>
</template>

<script>
export default {
  name: 'Play',
  data() {
    return {
      id: null,
      listId: null,
      isPlaying: false,
      videoContext: null,
      controls: false,
      fullscreenBtn: false,
      playBtn: false,
      progress: 0,
      episode: null,
      activeIndex: 0,
      loading: true,
      isCollect: false,
      isFav: false,
      toast: {
        status: 'success',
        text: '收藏成功',
        show: false
      }
    }
  },
  computed: {
    src() {
      if (this.episode) {
        return this.episode.lists[this.activeIndex].url
      }
    }
  },
  watch: {
    'toast.show'(val) {
      console.log('-->data1', val)
      if (val) {
        setTimeout(() => {
          this.toast.show = false
        }, 1000)
      }
    }
  },
  methods: {
    timeupdate({ detail }) {
      // currentTime, duration
      if (detail.duration) {
        this.progress = (detail.currentTime / detail.duration * 100).toFixed(2)
      }
    },
    handlePlay() {
      this.isPlaying = true
      this.videoContext.play()
    },
    handlePause() {
      if (!this.isPlaying) return
      this.isPlaying = false
      this.videoContext.pause()
    },
    getEpisode() {
      this.loading = true
      this.$api.episode.detail(this.id).then(res => {
        this.loading = false
        this.episode = res.data
        if (this.listId) {
          this.episode.lists.forEach((obj, index) => {
            if (parseInt(this.listId) === obj.id) {
              this.activeIndex = index
            }
          })
        } else {
          this.listId = this.episode.lists[0].id
        }
        this.watched(this.id, this.listId)
      })
    },
    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 => {

      })
    }
  },
  onLoad(options) {
    this.videoContext = uni.createVideoContext('video', this)
    this.id = options.id
    this.listId = options?.list_Id
    this.getEpisode()
    this.checkCollect()
    this.checkFavorite()
  }
}
</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;
        }
        video{
          position: absolute;
          z-index: 98;
        }
        .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: 100;
        .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;
        padding: 0 20rpx;
        z-index: 100;
        .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;
        }
      }

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