zhangsiye/mini/pages/trace/collect.vue

<template>
  <view class="collect">
    <view
      v-for="(item,index) in collect"
      :key="index"
      class="item main-left"
    >
      <view class="cover-image">
        <image :src="item.episode.cover_img" />
      </view>
      <view class="right-box">
        <view class="op-group main-right cross-center">
          <view class="delete" @click="handleDelete(item)">删除</view>
          <view class="play" @click="handlePlay(item)">播放</view>
        </view>
        <view class="name">{{ item.episode.name }}</view>
        <view class="status-box">
          <text class="status">{{ item.episode.status_text }}</text>
          <text>共{{ item.episode.total }}集</text>
        </view>
        <view class="record">
          上次看至 <text>第{{ item.watch_record.detail.sort }}集</text>
        </view>
      </view>
    </view>
    <!--删除  收藏-->
    <u-modal
      :show="modal.show"
      :content="`确定删除收藏【${modal.item.episode.name}】？`"
      show-cancel-button
      @confirm="destroy"
      @cancel="modal.show = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      collect: [],
      modal: {
        show: false,
        item: {}
      }

    }
  },
  computed: {},
  methods: {
    handlePlay(item) {
      this.$u.route({
        url: '/pages/episode/play',
        params: {
          id: item.episode.id,
          list_id: item.watch_record.list_id
        }
      })
    },
    handleDelete(item) {
      this.modal.item = item
      this.modal.show = true
    },
    destroy() {
      this.$api.user.collect.destroy(this.modal.item.episode_id).then(res => {
        this.$u.toast('删除成功')
        this.modal.show = false
        this.collect = []
        this.page = 1
        this.isMore = true
        this.getCollect()
      })
    },
    getCollect() {
      this.$loading()
      this.$api.user.collect.record({ limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          this.collect = this.collect.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getCollect()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getCollect()
  }
}
</script>

<style lang="scss" scoped>
  .collect{
    padding: 20rpx;
    color: $default-color ;
    font-size: 30rpx;
    .item{
      padding: 30rpx;
      border: 1rpx solid $primary-color;
      border-radius: 30rpx;
      margin-top: 30rpx;
      .cover-image{
        image{
          width: 200rpx;
          height: 280rpx;
          border-radius: 16rpx;
        }
      }
      .right-box{
        flex: 1;
        margin-left: 20rpx;
        .op-group{
          .delete{
            border: 1rpx solid #FB3651;
            color: #FB3651;
            border-radius: 30rpx;
            width: 140rpx;
            padding: 10rpx;
            text-align: center;
            margin-right: 30rpx;
          }
          .play{
            background: linear-gradient(90deg, #FF74B9,#6EEBE8);
            color: $default-color;
            border-radius: 30rpx;
            width: 140rpx;
            padding: 10rpx;
            text-align: center;
          }
        }
        .name{
          font-size: 38rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
          margin-top: 50rpx;
        }
        .status-box{
          margin-bottom: 10rpx;
          .status{
            color: $primary-color;
            margin-right: 14rpx;
          }
        }
        .record{
          text{
            color: #FB3651;
          }
        }
      }
    }
  }
</style>