mini_read_space_front/pages/collect-video/video.wxml

<!--pages/video/video.wxml-->
<view class="nav-bar" style="{{navStyle}}">
  <image class="icon-back" src="/assets/images/icons/icon-back-black.png" style="top:{{statusBarHeight}}px" bindtap="clickBack">
</image>
</view>
<view class="collect-video-container">
  <view class="video-main">
    <block wx:if="{{eps && eps.length > 0}}">
      <video autoplay="{{true}}" src="{{videoDetail.playUrl}}" direction="{{0}}"
        bindplay="onVideoPlay" bindpause="onVideoPause" bindended="onVideoEnd" class="my-video" id="my-video"
        style="height: 100%" bindtimeupdate="onVideoUpdate" bindseekcomplete="onVideoSeek"
        bindloadedmetadata="onVideoLoaded" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait">
        <view wx:if="{{isShowComplainBtn}}" class="complaint-btn" catchtap="handleComplain">投诉</view>
        <!-- 激励使用设置的首帧图 -->
        <!-- <image wx:if="{{videoDetail.coverUrl && !videoDetail.lock}}" class="poster" src="{{videoDetail.coverUrl}}"> -->
        <!-- </image> -->
        <view catchtap="handleClickRewardMask" class="reward-mask" wx:if="{{videoDetail.lock}}">
          <view class="reward-btn" catchtap="clickUnlock">
            <image class="icon-lock" src="/assets/images/lock.png"></image>
            <text>看完广告解锁本合集所有内容</text>
          </view>
          <view class="reward-tip">今日看满3个广告可解锁本小程序所有内容</view>
        </view>
      </video>
    </block>
    
    <!-- 加载中提示 -->
    <view wx:if="{{(isLoading || !videoDetail.playUrl) && !videoDetail.lock}}" class="loading-container">
      <view class="loading-spinner"></view>
      <view class="loading-text">{{isLoading ? '加载中...' : '获取视频中...'}}</view>
    </view>
  </view>
  <view class="video-info">
    <view class="video-title">{{videoDetail.videoTitle}}</view>
    <view class="video-desc">
      <text class="xuanji">选集</text>
      <text class="total-ep">共{{eps.length}}集</text>
      <text class="ep-tip">锁定集在观看广告后可解锁</text>
    </view>
    <scroll-view scroll-x class="video-eps-scroll">
      <view class="video-eps">
        <view wx:for="{{eps}}" class="ep-item" data-ep="{{item}}" data-idx="{{index}}" bindtap="clickEp">
        <view class="ep-item-title">
            <image wx:if="{{playingEp === index && !item.lock}}" class="icon" src="/assets/images/playing.png"></image>
            <image wx:if="{{item.lock}}" class="icon" src="/assets/images/lock.png"></image>
            <text style="color: {{playingEp === index ? '#CA4D7A':'#ffffff'}}">第{{index + 1}}集</text>
          </view>
          <image class="ep-item-cover" src="{{item.coverUrl}}"></image>
      </view>
      </view>
    </scroll-view>
  </view>
  <view class="title">猜你喜欢</view>
  <!-- 视频列表 -->
  <view
    class="list-container"
  >
    <view class="list">
      <view wx:if="{{hasLoadAdConfig }}" class="ad-custom-card-1">
        <ad-custom unit-id="{{templateAdId}}" style="height: 100%;margin-bottom: 20rpx;"></ad-custom>
      </view>
      <block wx:for="{{ videoList }}" wx:key="id" wx:for-index="idx">
      <view wx:if="{{item.adType === 'templateAd' && hasLoadAdConfig }}" class="ad-custom-card-1">
        <ad-custom unit-id="{{templateAdId}}" style="height: 100%;margin-bottom: 20rpx;"></ad-custom>
      </view>
        <view wx:if="{{ item.adType === 'video' }}">
          <!-- 视频卡片 -->
          <view class="video-item" bindtap="clickCollect" data-info="{{ item }}" data-id="{{ item.id }}" data-index="{{idx}}">
            <view class="video-cover-container">
              <image
                class="video-cover"
                src="{{ item.coverUrl }}"
                mode="aspectFill"
              />
            </view>
            <view class="video-item-right">
              <view class="video-title">{{ item.title }}</view>
              <view class="video-play-count">
                <image class="icon" src="/assets/images/tv.png"></image>
                <text>{{ item.views }}w+人观看</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>

    <!-- 加载状态 -->
    <view class="loading-status">
      <!-- loading 提示 -->
      <view class="loading" wx:if="{{ loading }}">
        <view class="loading-spinner"></view>
        <text>加载中...</text>
      </view>

      <!-- 没有更多 -->
      <view
        class="finished"
        wx:if="{{ !loading && videoList.length > 0 && !hasMore }}"
      >
        <text>没有更多视频了</text>
      </view>

      <!-- 空状态 -->
      <view class="empty" wx:if="{{ !loading && videoList.length === 0 }}">
        <image class="empty-icon" src="/assets/images/empty.png"></image>
        <text>暂无视频内容</text>
      </view>
    </view>
  </view>

</view>