wxamp-ymtxUser/pagesB/pages/training/training.wxml

<!-- pages/training/training.wxml -->
<view class="training-container">
  <!-- 顶部标题 -->
  <view class="header">
    <view class="title">在线培训</view>
    <view class="subtitle">专业学习资源，助您快速成长</view>
    <view class="header-decoration">
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>

  <!-- 主选项卡切换 -->
  <view class="tabs">
    <view 
      class="tab-item {{currentTab === 0 ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="0"
    >
      <text>文章</text>
      <view class="tab-highlight {{currentTab === 0 ? 'active' : ''}}"></view>
    </view>
    <view 
      class="tab-item {{currentTab === 1 ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="1"
    >
      <text>视频</text>
      <view class="tab-highlight {{currentTab === 1 ? 'active' : ''}}"></view>
    </view>
    <view class="tab-slider {{currentTab === 0 ? 'left' : 'right'}}"></view>
  </view>

  <!-- 文章板块 -->
  <view class="content-section" wx:if="{{currentTab === 0}}">
    <!-- 搜索框 -->
    <view class="search-box">
      <image class="search-icon" src="/pagesB/images/sou.png"></image>
      <input 
        class="search-input" 
        placeholder="搜索文章..." 
        placeholder-class="placeholder-style"
        bindinput="onSearchInput"
        value="{{searchKeyword}}"
      />
      <view class="search-decoration">
        <view class="search-wave"></view>
      </view>
    </view>

    <!-- 文章分类筛选 -->
    <scroll-view class="category-scroll" scroll-x scroll-with-animation>
      <view class="category-list">
        <view 
          class="category-item {{articleActiveCategory === 0 ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="0"
        >
          <text>全部</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{item.dictSort ===  articleActiveCategory? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="{{item.dictSort}}"
          wx:for="{{wzzd}}"
          wx:key="index"
        >
          <text>{{item.dictLabel}}</text>
          <view class="category-indicator"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 文章列表 -->
    <view class="articles-list">
      <view 
        class="article-card" 
        wx:for="{{filteredArticles}}" 
        wx:key="id"
        bindtap="viewArticleDetail"
        data-id="{{item.id}}"
      >
        <!-- 封面图片 -->
        <view class="article-cover-container">
          <image class="article-cover" src="{{baseUrl+item.coverImage}}" mode="aspectFill"></image>
          <view class="cover-overlay"></view>
          <view class="category-tag">{{item.category}}</view>
          <view class="article-hover-effect"></view>
        </view>
        
        <!-- 文章信息 -->
        <view class="article-info">
          <view class="article-title">{{item.title}}</view>
          <view class="article-desc">{{item.subtitle}}</view>
          
          <view class="article-meta">
            <view class="meta-item">
              <image class="meta-icon" src="{{baseUrl+item.expertAvatar}}"></image>
              <text class="meta-text">{{item.expertName}}</text>
            </view>

            <view class="meta-item">
              <text class="meta-text">{{item.publishTime}}</text>
            </view>
          </view>
          
          <view class="article-stats">
            <view class="stat-item">
              <image class="stat-icon" src="/pagesB/images/lll.png"></image>
              <text>{{item.viewCount}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多状态 -->
    <view wx:if="{{currentTab === 0 && filteredArticles.length > 0}}">
      <view class="load-more" wx:if="{{articleHasMore && !articleLoading}}">
        <text>上拉加载更多</text>
      </view>
      <view class="loading-more" wx:if="{{articleLoading}}">
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <text>加载中...</text>
      </view>
      <view class="no-more" wx:if="{{!articleHasMore && filteredArticles.length > 0}}">
        <text>已加载全部</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredArticles.length === 0}}">
      <view class="empty-animation">
        <view class="empty-circle"></view>
        <view class="empty-circle circle-2"></view>
        <view class="empty-circle circle-3"></view>
      </view>
      <text class="empty-text">暂无相关文章</text>
      <text class="empty-hint">换个关键词试试吧</text>
    </view>
  </view>

  <!-- 视频板块 -->
  <view class="content-section" wx:if="{{currentTab === 1}}">
    <!-- 搜索框 -->
    <view class="search-box">
      <image class="search-icon" src="/pagesB/images/sou.png"></image>
      <input 
        class="search-input" 
        placeholder="搜索视频..." 
        placeholder-class="placeholder-style"
        bindinput="onSearchInput"
        value="{{searchKeyword}}"
      />
      <view class="search-decoration">
        <view class="search-wave"></view>
      </view>
    </view>

    <!-- 视频分类筛选 -->
    <scroll-view class="category-scroll" scroll-x scroll-with-animation>
      <view class="category-list">
        <view 
          class="category-item {{videoActiveCategory === '全部' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="全部"
        >
          <text>全部视频</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          wx:for="{{videoType}}"
          wx:key="index"
          class="category-item {{ item.dictLabel=== videoActiveCategory ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="{{item.dictLabel}}"
        >
          <text>{{item.dictLabel}}</text>
          <view class="category-indicator"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 视频列表 -->
    <view class="videos-grid">
      <view 
        class="video-card" 
        wx:for="{{filteredVideos}}" 
        wx:key="id"
        bindtap="playVideo"
        data-id="{{item.id}}"
      >
        <!-- 视频封面 -->
        <view class="video-cover-container">
          <image class="video-cover" src="{{baseUrl+item.coverImage}}" mode="aspectFill"></image>
          <view class="video-duration">{{item.category}}</view>
          <view class="cover-overlay"></view>
          <view class="play-button">
            <image class="play-icon" src="/pagesB/images/bo.png"></image>
            <view class="play-ripple"></view>
          </view>
          <view class="video-hover-effect"></view>
        </view>
        
        <!-- 视频信息 -->
        <view class="video-info">
          <view class="video-title">{{item.title}}</view>
          <view class="video-instructor">
            <image class="instructor-avatar" src="{{baseUrl+item.publisherAvatar}}"></image>
            <text class="instructor-name">{{item.publisherName}}</text>
          </view>
          
          <view class="video-meta">
            <view class="video-meta-item">
              <text>{{item.auditTime}}</text>
            </view>
            <view class="video-meta-item">
              <text>{{item.viewCount}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多状态 -->
    <view wx:if="{{currentTab === 1 && filteredVideos.length > 0}}">
      <view class="load-more" wx:if="{{videoHasMore && !videoLoading}}">
        <text>上拉加载更多</text>
      </view>
      <view class="loading-more" wx:if="{{videoLoading}}">
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <text>加载中...</text>
      </view>
      <view class="no-more" wx:if="{{!videoHasMore && filteredVideos.length > 0}}">
        <text>已加载全部</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredVideos.length === 0}}">
      <view class="empty-animation">
        <view class="empty-circle"></view>
        <view class="empty-circle circle-2"></view>
        <view class="empty-circle circle-3"></view>
      </view>
      <text class="empty-text">暂无相关视频</text>
      <text class="empty-hint">换个关键词试试吧</text>
    </view>
  </view>
</view>