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>
    <!--删除  收藏-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      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) {
    },
    destroy() {

    },
    getCollect() {
      this.$loading()
      this.$api.user.collect.record({ limit: 4 }).then(res => {
        this.$hideLoading()
        this.collect = res.data
      })
    }
  },
  onLoad() {
    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;
        }
      }
      .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>