dou_platform_applet/pages/subPackages/history/index.vue

<template>
  <view class="page-wrap" :style="{ 'padding-top': `${pageContentTop}px;` }">
    <!-- S 今天 剧集列表 -->
    <view class="list-wrap">
      <view class="tag">今天</view>
      <view v-for="video in videoListToday" :key="video.album_id" class="item-wrap">
        <view class="lt-wrap">
          <view class="img-wrap"
            ><u-lazy-load
              class="img"
              :image="video.cover_url"
              img-mode="scaleToFill"
              height="227rpx"
              border-radius="20"
          /></view>
        </view>
        <view class="rt-wrap">
          <view class="title">{{ video.title }}</view>
          <view class="info">
            <view>{{ video.seq_num }}集全</view>
            <view class="line"> | </view>
            <view>观看至<text class="num">{{ video.seq }}</text>集</view>
          </view>
          <view class="btn" @click="onClickVideo(video)">继续观看</view>
        </view>
      </view>
      <!-- 空数据 -->
      <view v-if="!videoListToday.length" class="empty-wrap">
        <u-empty
          text="暂无"
          mode="history"
          icon-size="0"
        />
      </view>
    </view>
    <!-- E 今天 剧集列表 -->

    <!-- S 更早 剧集列表 -->
    <view class="list-wrap">
      <view class="tag">更早</view>
      <view v-for="video in videoListLast" :key="video.album_id" class="item-wrap">
        <view class="lt-wrap">
          <view class="img-wrap"
            ><u-lazy-load
              class="img"
              :image="video.cover_url"
              img-mode="scaleToFill"
              height="227rpx"
              border-radius="20"
          /></view>
        </view>
        <view class="rt-wrap">
          <view class="title">{{ video.title }}</view>
          <view class="info">
            <view>{{ video.seq_num }}集全</view>
            <view class="line"> | </view>
            <view>观看至<text class="num">{{ video.seq }}</text>集</view>
          </view>
          <view class="btn" @click="onClickVideo(video)">继续观看</view>
        </view>
      </view>
       <!-- 空数据 -->
      <view v-if="!videoListLast.length" class="empty-wrap">
        <u-empty
          text="暂无"
          mode="history"
          icon-size="0"
        />
      </view>
    </view>
    <!-- E 更早 剧集列表 -->
  </view>
</template>

<script>
const app = getApp();
export default {
  components: {},
  data() {
    return {
      appName: app.globalData.$appInfo.appName,
      pageContentTop: app.globalData.pageContentTop,
      videoListToday: [],
      videoListLast: [],
      filter: {
        hasNext: true,
        page: 1,
        page_size: 12,
        source: 2, // 1追剧 2浏览历史 3收藏
      },
    };
  },
  onLoad() {
    // this.handleGetVideoList();
  },
  onShow() {
    this.filter.hasNext = true;
    this.filter.page = 1;
    this.videoListToday = [];
    this.videoListLast = [];
    this.handleGetVideoList();
  },
  onPullDownRefresh() {
    this.filter.hasNext = true;
    this.filter.page = 1;
    this.videoListToday = [];
    this.videoListLast = [];
    this.handleGetVideoList();
  },
  onReachBottom() {
    this.handleGetVideoList();
  },
  methods: {
    // 获取短剧列表
    async handleGetVideoList() {
      const { hasNext, page, page_size, source } = this.filter;
      if (!hasNext) return false;
      try {
        const url = this.$api.video_likeList;
        const params = {
          source,
          page,
          page_size,
        };
        const { data: res = {} } = await this.$get(url, params);
        console.log('res => ', res)
        uni.stopPullDownRefresh()
        if (res && res.errno == 0) {
          this.videoListToday = [...res.rst.data.today];
          if (!res.rst.data.last.length) {
            // 更新"是否有下一页"状态
            this.filter.hasNext = false;
          } else {
            this.filter.hasNext = true;
            this.filter.page++;
            this.videoListLast = [...this.videoListLast, ...res.rst.data.last];
          }
        } else {
          uni.showToast({ title: res.err || "操作失败", icon: "none" });
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
      }
    },

    // 监听点击“短剧详情”
    onClickVideo({ album_id, episode_id, seq }) {
      uni.navigateTo({
        url: `/pages/subPackages/videoPlayer/index?album_id=${album_id}&episode_id=${episode_id}&seq=${seq}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrap {
  min-height: 100vh;
  background: url(https://dou-smallapp.oss-cn-beijing.aliyuncs.com/static/bg-01.png)
    #ffffff no-repeat;
  background-size: 750rpx 524rpx;
  background-color: #f9f9f9;
  .list-wrap {
    padding: 20rpx;
    background-color: #f9f9f9;
    .tag {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      font-style: normal;
      margin-bottom: 20rpx;
    }
    .item-wrap {
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 20rpx;
      display: flex;
      align-items: flex-start;
      border-radius: 10rpx;
      .lt-wrap {
        .img-wrap {
          width: 172rpx;
          height: 227rpx;
          border-radius: 20rpx;
          .img {
            width: 100%;
            height: 100%;
            vertical-align: middle; // 解决图片下边框缝隙问题
          }
        }
      }
      .rt-wrap {
        flex: 1;
        min-height: 227rpx;
        margin-left: 24rpx;
        .title {
          min-height: 86rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          word-break: break-all;
        }
        .info {
          display: flex;
          align-items: center;
          margin-top: 20rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
          font-style: normal;
          .line {
            margin: 0 18rpx;
            color: #e3e3e3;
          }
          .num {
            color: #ff5757;
          }
        }
        .btn {
          margin-top: 24rpx;
          width: 180rpx;
          height: 60rpx;
          background: linear-gradient(263deg, #ff7070 0%, #ff5037 100%);
          border-radius: 34rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          font-style: normal;
        }
      }
    }
  }
}
</style>