与牧同行-小程序用户端
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.
 

126 lines
4.4 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
class="category-item {{currentCategory === '全部' ? 'active' : ''}}"
bindtap="switchCategory"
data-category="全部"
data-type=""
>
<text>全部</text>
<text class="dot" wx:if="{{currentCategory === '全部'}}"></text>
</view>
<view
wx:for="{{categories}}"
wx:key="index"
class="category-item {{currentCategory === item.dictLabel ? 'active' : ''}}"
bindtap="switchCategory"
data-category="{{item.dictLabel}}"
data-type="{{item.dictValue}}"
>
<text>{{item.dictLabel}}</text>
<text class="dot" wx:if="{{currentCategory === item.dictLabel}}"></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: {{getImportanceColor(item.warningLevel)}};"></view>
<view class="card-content">
<view class="card-header">
<text class="notice-title">{{item.title}}</text>
<text class="notice-tag" style="background: {{getTagBg(item.warningLevel)}};">{{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 class="warning-level" style="color: {{getLevelColor(item.warningLevel)}}; background: {{getLevelBg(item.warningLevel)}};">
{{item.warningLevel || '一般'}}
</view>
</view>
</view>
</view>
</view>
<!-- 上拉加载更多状态 -->
<view class="load-more" wx:if="{{noticeList.length > 0}}">
<block wx:if="{{loading}}">
<text class="loading-icon">⋯</text>
<text>加载中...</text>
</block>
<block wx:elif="{{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}}">
<text>📭 暂无相关公告</text>
<text style="font-size: 28rpx; color: #999; margin-top: 16rpx;">
{{searchKeyword ? '试试其他关键词' : currentCategory !== '全部' ? '试试其他分类' : '暂无数据'}}
</text>
</view>
</scroll-view>
</view>
</view>
</view>