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.
108 lines
3.7 KiB
108 lines
3.7 KiB
<view class="notice-page">
|
|
<!-- 毛玻璃背景装饰 -->
|
|
<view class="bg-blur"></view>
|
|
|
|
<!-- 主内容区 -->
|
|
<view class="content">
|
|
<!-- 头部标题 & 搜索栏一体化 -->
|
|
<view class="header">
|
|
<text class="title">📋 公告·通知</text>
|
|
<view class="search-box">
|
|
<text class="icon">🔍</text>
|
|
<input
|
|
type="text"
|
|
placeholder="搜索标题或摘要..."
|
|
placeholder-class="placeholder"
|
|
bindinput="onSearchInput"
|
|
value="{{searchKeyword}}"
|
|
confirm-type="search"
|
|
bindconfirm="handleSearch"
|
|
/>
|
|
<text class="clear-icon" wx:if="{{searchKeyword}}" bindtap="clearSearch">✕</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分类导航 - 滑动流畅 -->
|
|
<scroll-view class="category-scroll" scroll-x show-scrollbar="{{false}}" enhanced>
|
|
<view class="category-list">
|
|
<view
|
|
wx:for="{{categories}}"
|
|
wx:key="index"
|
|
class="category-item {{currentCategory === item.value ? 'active' : ''}}"
|
|
bindtap="switchCategory"
|
|
data-category="{{item.value}}"
|
|
>
|
|
<text>{{item.name}}</text>
|
|
<text class="dot" wx:if="{{currentCategory === item.value}}"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 列表内容区域 -->
|
|
<view class="list-container">
|
|
<!-- 骨架屏 / 加载提示 -->
|
|
<block wx:if="{{loading && noticeList.length === 0}}">
|
|
<view class="skeleton-list">
|
|
<view wx:for="{{4}}" wx:key="*this" class="skeleton-item"></view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 列表渲染 -->
|
|
<scroll-view
|
|
class="notice-scroll"
|
|
scroll-y
|
|
enhanced
|
|
show-scrollbar="{{false}}"
|
|
bindscrolltolower="loadMore"
|
|
lower-threshold="50"
|
|
refresher-enabled
|
|
refresher-triggered="{{refreshing}}"
|
|
bindrefresherrefresh="onRefresh"
|
|
>
|
|
<view class="notice-list">
|
|
<view
|
|
wx:for="{{noticeList}}"
|
|
wx:key="id"
|
|
class="notice-card"
|
|
bindtap="viewDetail"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<!-- 重要性标记装饰 -->
|
|
<view class="card-left-bar" style="background: {{item.importanceColor}};"></view>
|
|
<view class="card-content">
|
|
<view class="card-header">
|
|
<text class="notice-title">{{item.title}}</text>
|
|
<text class="notice-tag" style="background: {{item.tagBg}};">{{item.warningType}}</text>
|
|
</view>
|
|
<view class="notice-abstract">{{item.responseMeasures}}</view>
|
|
<view class="card-footer">
|
|
<view class="date-time">
|
|
<text class="date-icon">📅</text>
|
|
<text>{{item.createdTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 上拉加载更多状态 -->
|
|
<view class="load-more" wx:if="{{noticeList.length > 0}}">
|
|
<block wx:if="{{hasMore}}">
|
|
<text class="loading-icon">⋯</text>
|
|
<text>加载更多</text>
|
|
</block>
|
|
<block wx:else>
|
|
<text>—— 已经到底了 ——</text>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 空状态展示 -->
|
|
<view class="empty-state" wx:if="{{!loading && noticeList.length === 0}}">
|
|
<image src="/images/empty-notice.png" mode="aspectFit" style="width: 160rpx; height: 160rpx;" wx:if="{{false}}"></image>
|
|
<text>📭 暂无相关公告</text>
|
|
<text style="font-size: 28rpx; color: #999; margin-top: 16rpx;">试试其他关键词或分类</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|