You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
8.6 KiB
256 lines
8.6 KiB
<!-- 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>
|