R524809
132 lines
5.6 KiB
Plaintext
132 lines
5.6 KiB
Plaintext
<view class="cat-page">
|
|
<nav-bar title="分类" />
|
|
|
|
<view class="cat-body">
|
|
<!-- <view class="cat-search-wrap">
|
|
<view class="cat-search">
|
|
<van-icon
|
|
name="search"
|
|
size="36rpx"
|
|
color="rgba(50, 46, 37, 0.45)"
|
|
class="cat-search__icon" />
|
|
<input
|
|
class="cat-search__input"
|
|
placeholder="{{searchPlaceholder}}"
|
|
placeholder-class="cat-search__placeholder"
|
|
value="{{searchKeyword}}"
|
|
bindinput="onSearchInput"
|
|
confirm-type="search" />
|
|
<van-icon
|
|
wx:if="{{searchKeyword}}"
|
|
name="clear"
|
|
size="32rpx"
|
|
color="rgba(50, 46, 37, 0.35)"
|
|
bindtap="onClearSearch" />
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="cat-main">
|
|
<scroll-view
|
|
class="cat-sidebar"
|
|
scroll-y
|
|
enhanced
|
|
show-scrollbar="{{false}}">
|
|
<view
|
|
wx:for="{{sidebarTabs}}"
|
|
wx:key="id"
|
|
class="cat-sidebar__item {{activeCategoryId === item.id ? 'cat-sidebar__item--active' : ''}}"
|
|
data-id="{{item.id}}"
|
|
bindtap="onTapCategory">
|
|
<text wx:if="{{item.icon}}" class="cat-sidebar__icon"
|
|
>{{item.icon}}</text
|
|
>
|
|
<text class="cat-sidebar__name">{{item.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view
|
|
class="cat-content"
|
|
scroll-y
|
|
enhanced
|
|
show-scrollbar="{{false}}"
|
|
scroll-into-view="{{scrollIntoViewId}}">
|
|
<view class="cat-content__inner">
|
|
<view
|
|
wx:for="{{displayItems}}"
|
|
wx:key="id"
|
|
class="cat-card {{item.skeleton ? 'cat-card--skeleton' : ''}}"
|
|
data-path="{{item.path}}"
|
|
data-title="{{item.title}}"
|
|
data-available="{{item.available}}"
|
|
bindtap="{{item.skeleton ? '' : 'onTapItem'}}">
|
|
<view class="cat-card__thumb">
|
|
<image
|
|
wx:if="{{item.previewImg}}"
|
|
class="cat-card__thumb-img"
|
|
src="{{item.previewImg}}"
|
|
mode="aspectFill" />
|
|
<text
|
|
wx:elif="{{!item.skeleton}}"
|
|
class="cat-card__thumb-icon"
|
|
>{{item.icon}}</text
|
|
>
|
|
</view>
|
|
<view class="cat-card__body">
|
|
<view class="cat-card__header">
|
|
<text class="cat-card__title"
|
|
>{{item.title}}</text
|
|
>
|
|
</view>
|
|
<text class="cat-card__subtitle"
|
|
>{{item.subtitle}}</text
|
|
>
|
|
<view
|
|
wx:if="{{!item.skeleton}}"
|
|
class="cat-card__tags">
|
|
<text class="tag tag--age"
|
|
>{{item.ageBand}}</text
|
|
>
|
|
<text class="tag tag--diff"
|
|
>{{item.difficultyLabel}}</text
|
|
>
|
|
</view>
|
|
<view
|
|
wx:if="{{!item.skeleton}}"
|
|
class="cat-card__footer">
|
|
<view class="cat-card__stats">
|
|
<view class="cat-card__stat">
|
|
<toy-icon
|
|
name="heart-o"
|
|
size="22rpx"
|
|
color="#7c766a" />
|
|
<text>{{item.likes}}</text>
|
|
</view>
|
|
<view class="cat-card__stat">
|
|
<toy-icon
|
|
name="download"
|
|
size="22rpx"
|
|
color="#7c766a" />
|
|
<text>{{item.downloads}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="cat-card__date"
|
|
>{{item.date}}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
wx:if="{{displayItems.length === 0 && !loading}}"
|
|
class="cat-empty">
|
|
<text class="cat-empty__icon">🔍</text>
|
|
<text class="cat-empty__text">没有找到匹配的内容</text>
|
|
</view>
|
|
|
|
<view class="cat-content__footer"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|