dou_platform_applet/pages/movie/movie.vue

<template>
  <view class="page-wrap" :style="{ 'padding-top': `${pageContentTop}px;` }">
    <!-- S 搜索 -->
    <view class="search-wrap" @click="onClickSearch">
      <image class="icon" src="/static/imgs/icon-ss.png" />
      <text class="tips">请输入剧集名称</text>
    </view>
    <!-- E 搜索 -->

    <!-- S 轮播图 banner -->
    <view class="swiper-wrap">
      <u-swiper
        :border-radius="16"
        :list="swiperList"
        mode="none"
        bg-color="transparent"
        height="220"
        img-mode="aspectFit"
      />
    </view>
    <!-- E 轮播图 banner -->

    <!-- S 剧集广场 -->
    <view class="video-wrap">
      <view class="header-wrap">
        <image class="icon" src="/static/imgs/icon-jjgc.png" />
        <text class="title">剧集广场</text>
      </view>
      <view class="list-wrap">
        <view class="item-wrap" v-for="video in videoList" :key="video.album_id" @click="onClickVideo(video)">
          <view class="img-wrap"
            ><u-lazy-load
              class="img"
              :image="video.cover_url"
              img-mode="scaleToFill"
              height="280rpx"
              border-radius="20"
          /></view>
          <view class="item-name">{{ video.title }}</view>
        </view>
      </view>
    </view>
    <!-- E 剧集广场 -->
  </view>
</template>

<script>
const app = getApp();
export default {
  components: {},
  data() {
    return {
      appName: app.globalData.$appInfo.appName,
      pageContentTop: app.globalData.pageContentTop,
      swiperList: [
        "https://dou-smallapp.oss-cn-beijing.aliyuncs.com/static/banner-01.jpg",
      ],
      videoList: [],
      filter: {
        hasNext: true,
        page: 1,
        page_size: 12,
        keyword: "",
      },
    };
  },
  onLoad() {
    app.handleSetNavTitle();
  },
  onShow() {
    this.filter.hasNext = true;
    this.filter.page = 1;
    this.videoList = [];
    this.handleGetVideoList();
  },
  onPullDownRefresh() {
    this.filter.hasNext = true;
    this.filter.page = 1;
    this.videoList = [];
    this.handleGetVideoList();
  },
  onReachBottom() {
    this.handleGetVideoList();
  },
  methods: {
    // 获取短剧列表
    async handleGetVideoList() {
      const { hasNext, page, page_size, keyword } = this.filter;
      if (!hasNext) return false;
      try {
        const url = this.$api.video_albumList;
        const params = {
          keyword,
          page,
          page_size,
        };
        const { data: res = {} } = await this.$get(url, params);
        uni.stopPullDownRefresh()
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          if (!res.rst.data.length) {
            // 更新"是否有下一页"状态
            this.filter.hasNext = false;
          } else {
            this.filter.hasNext = true;
            this.filter.page++;
            this.videoList = [...this.videoList, ...res.rst.data];
          }
        } else {
          uni.showToast({ title: res.err || "操作失败", icon: "none" });
        }
      } catch (error) {
      } finally {
      }
    },
    // 监听点击“搜索”
    onClickSearch() {
      uni.navigateTo({
        url: "/pages/subPackages/search/index",
      });
    },
    // 监听点击“短剧详情”
    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;
  padding: 0 30rpx;
  background: url(https://dou-smallapp.oss-cn-beijing.aliyuncs.com/static/bg-01.png)
    #ffffff no-repeat;
  background-size: 750rpx 524rpx;
  .search-wrap {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 68rpx;
    margin-top: 8rpx;
    padding: 0 22rpx;
    background: #ffffff;
    border-radius: 34rpx;
    .icon {
      width: 32rpx;
      height: 32rpx;
    }
    .tips {
      margin-left: 12rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      text-align: right;
      font-style: normal;
    }
  }
  .swiper-wrap {
    margin-top: 26rpx;
  }
  .video-wrap {
    margin-top: 40rpx;
    .header-wrap {
      display: flex;
      align-items: center;
      .icon {
        width: 38rpx;
        height: 38rpx;
      }
      .title {
        margin-left: 10rpx;
        font-weight: 600;
        font-size: 34rpx;
        color: #000000;
        line-height: 48rpx;
        font-style: normal;
      }
    }
    .list-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-top: 50rpx;
      .item-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 1 33.33%;
        // width: 212rpx;
        margin-bottom: 40rpx;
        // margin-right: 40rpx;
        // &:nth-of-type(3n) {
        //   margin-right: 0;
        // }
        .img-wrap {
          width: 212rpx;
          height: 280rpx;
          .img {
            width: 100%;
            height: 100%;
            vertical-align: middle; // 解决图片下边框缝隙问题
          }
        }
        .item-name {
          margin-top: 28rpx;
          width: 100%;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 40rpx;
          font-style: normal;
          word-break: break-all;
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-align: center;
        }
      }
    }
  }
}
</style>