zhangsiye/mini/pages/my/history.vue

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

<script>
import UModal from '../../uni_modules/uview-ui/components/u-modal/u-modal'
export default {
  components: { UModal },
  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      history: [],
      modal: {
        show: false,
        id: null
      }
    }
  },
  computed: {},
  methods: {
    handlePlay(detail) {
      this.$u.route({
        url: '/pages/episode/play',
        params: {
          id: detail.episode.id,
          list_id: detail.id
        }
      })
    },
    handleModal(id) {
      this.modal.id = id
      this.modal.show = true
    },
    handleDelete() {
      this.$loading('删除中...')
      this.$api.user.episode.deleteRecord(this.modal.id).then(res => {
        this.$hideLoading()
        this.page = 1
        this.isMore = true
        this.history = []
        this.getHistory()
        this.modal.show = false
      }).catch(err => {
        this.$hideLoading()
      })
    },
    getHistory() {
      this.$loading()
      this.$api.user.episode.record({ limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          this.history = this.history.concat(res.data)
        } else {
          this.isMore = false
        }
      }).catch(err => {
        this.$hideLoading()
        console.error('-->error', err)
      })
    }
  },
  onLoad() {
    this.getHistory()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getHistory()
  }
}
</script>

<style lang="scss" scoped>
    .history{
      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{
            font-size: 28rpx;
            margin-bottom: 10rpx;
            color: $info-color;
            .status{
              color: $primary-color;
              margin-right: 14rpx;
            }
          }
          .record{
            text{
              color: #FB3651;
            }
          }
        }
      }
    }
</style>