wxamp-ymtxMerchant/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 class="create-btn-container" bind:tap="bindPublish">
      <view class="create-btn" bindtap="showCreateModal">
        <image class="btn-icon" src="/pagesA/images/jh.png"></image>
        <text class="btn-text">发布</text>
      </view>
    </view>

</view>