zhangsiye/mini/pages/index/components/Recent.vue

<template>
  <view v-if="show" class="recent-container main-between cross-center">
    <view class="close" @click="handleClose">
      <u-icon name="close-circle" :color="$colors.primaryColor" size="54rpx" />
    </view>
    <view class="cover-image">
      <image :src="recent.detail.episode.cover_img" mode="aspectFill" />
    </view>
    <view class="info">
      <text class="name">{{ recent.detail.episode.name }}</text>
      <view class="status-box">
        <text class="status">{{ recent.detail.episode.status_text }}</text>
        <text>共{{ recent.detail.episode.total }}集</text>
      </view>
      <view class="recent">上次观看至 <text>第{{ recent.detail.sort }}集</text></view>
    </view>
    <view class="play-btn" @click="handlePlay(recent)">继续观看</view>
  </view>
</template>

<script>
export default {
  name: 'Recent',
  data() {
    return {
      show: false,
      recent: []
    }
  },
  created() {
    this.getRecent()
  },
  methods: {
    handlePlay(item) {
      this.show = false
      this.$u.route({
        url: '/pages/episode/play',
        params: {
          id: item.episode_id,
          list_id: item.list_id
        }
      })
    },
    getRecent() {
      this.$api.user.episode.recent().then(res => {
        if (res.data) {
          this.recent = res.data
          setTimeout(() => {
            this.show = true
          }, 500)
        }
      })
    },
    handleClose() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
    .recent-container {
      position: fixed;
      bottom: 140rpx;
      width: 96vw;
      left: 50%;
      transform: translateX(-50%);
      border: 1rpx solid $primary-color;
      height: 300rpx;
      border-radius: 20rpx;
      background: rgba(24, 28, 47, 0.8);
      padding: 20rpx 26rpx;
      font-size: 32rpx;
      .close{
        position: absolute;
        top: -70rpx;
        right: 0;
      }
      .cover-image{
        image{
          width: 200rpx;
          height: 240rpx;
        }
      }
      .info{
        flex: 1;
        margin-left: 20rpx;
        color: #fff;
        .name{
          font-weight: 800;
          font-size: 34rpx;
        }
        .status-box{
          margin-bottom: 10rpx;
          font-size: 24rpx;
          margin-top: 60rpx;
          .status{
            color: $primary-color;
            margin-right: 14rpx;
          }
        }
        .recent{
          color: $info-color;
          font-size: 24rpx;
          text{
            color: #FB3651;
            margin-left: 8rpx;
          }
        }
      }
      .play-btn{
        width: 180rpx;
        border-radius: 30rpx;
        padding: 20rpx 0;
        background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
        text-align: center;
        flex-shrink: 0;
        font-size: 32rpx;
        color: $default-color;

      }
    }
</style>