zhangsiye/mini/pages/episode/components/EpisodeButtons.vue

<template>
  <view v-if="Object.keys(episode).length" class="episode-buttons">
    <!--播放数据-->
    <view class="view-num main-left cross-center">
      <u-icon name="eye-fill" :color="isCollect?$colors.primaryColor:$colors.defaultColor" size="26rpx" />
      <text>{{ $util.tranNumber(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>{{ $util.tranNumber(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>{{ $util.tranNumber(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>{{ $util.tranNumber(episode.share_count) }}</text>
      </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>
  </view>
</template>

<script>
export default {
  name: 'EpisodeButtons',
  props: {
    episode: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isCollect: false,
      isFav: false,
      toast: { // 收藏/喜欢 toast
        status: 'success',
        text: '收藏成功',
        show: false
      },
      btnLock: false
    }
  },
  watch: {
    'toast.show'(val) {
      if (val) {
        setTimeout(() => {
          this.toast.show = false
        }, 1000)
      }
    }
  },
  created() {
    if (Object.keys(this.episode).length) {
      this.checkCollect()
      this.checkFavorite()
    }
  },
  methods: {
    // 检查是否收藏当前剧集
    checkCollect() {
      this.$api.user.collect.check(this.episode.id).then(res => {
        this.isCollect = res.data
      })
    },
    // 收藏相关 处理
    handleCollect() {
      if (this.btnLock) return
      this.btnLock = true
      const method = this.isCollect ? 'destroy' : 'add'
      const num = this.isCollect ? -1 : 1
      this.$api.user.collect[method](this.episode.id).then(res => {
        this.btnLock = false
        if (res.data) {
          this.toast.show = true
          this.toast.status = this.isCollect ? 'cancel' : 'success'
          this.toast.text = this.isCollect ? '取消收藏' : '收藏成功'
          this.isCollect = !this.isCollect
          this.$emit('change', { type: 'collect', num: num })
        }
      })
    },
    // 检查是否喜欢当前短剧
    checkFavorite() {
      this.$api.user.favorite.check(this.episode.id).then(res => {
        this.isFav = res.data
      })
    },
    // 处理 喜欢剧集
    handleFavorite() {
      if (this.btnLock) return
      this.btnLock = true
      const method = this.isFav ? 'destroy' : 'add'
      const num = this.isFav ? -1 : 1
      this.$api.user.favorite[method](this.episode.id).then(res => {
        this.btnLock = false
        if (res.data) {
          this.toast.show = true
          this.toast.status = this.isFav ? 'cancel' : 'success'
          this.toast.text = this.isFav ? '取消喜欢' : '喜欢成功'
          this.$emit('change', { type: 'fav', num: num })
          this.isFav = !this.isFav
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.episode-buttons {
  .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;
          border: unset;
          box-shadow: unset;
          &:after{
            content: unset;
          }
        }
      }
      &.active{
        color: $primary-color;
      }
      text{
        margin-top: 10rpx;
      }
    }
  }

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