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.
202 lines
6.8 KiB
202 lines
6.8 KiB
<view class="forum-list-page">
|
|
|
|
<!-- 顶部栏 -->
|
|
<view class="header">
|
|
<view class="title">问答论坛</view>
|
|
<button class="add-btn" bindtap="createPost">提问</button>
|
|
</view>
|
|
|
|
<!-- 筛选栏 -->
|
|
<view class="filter-bar">
|
|
<scroll-view class="filter-scroll" scroll-x>
|
|
<view class="filter-list">
|
|
<view
|
|
class="filter-item {{currentFilter === 'all' ? 'active' : ''}}"
|
|
bindtap="changeFilter"
|
|
data-type="all"
|
|
>
|
|
<text>全部</text>
|
|
</view>
|
|
<view
|
|
class="filter-item {{currentFilter === 'unsolved' ? 'active' : ''}}"
|
|
bindtap="changeFilter"
|
|
data-type="unsolved"
|
|
>
|
|
<text>待解决</text>
|
|
</view>
|
|
<view
|
|
class="filter-item {{currentFilter === 'solved' ? 'active' : ''}}"
|
|
bindtap="changeFilter"
|
|
data-type="solved"
|
|
>
|
|
<text>已解决</text>
|
|
</view>
|
|
<view
|
|
class="filter-item {{currentFilter === 'hot' ? 'active' : ''}}"
|
|
bindtap="changeFilter"
|
|
data-type="hot"
|
|
>
|
|
<text>热门</text>
|
|
</view>
|
|
<view
|
|
class="filter-item {{currentFilter === 'mine' ? 'active' : ''}}"
|
|
bindtap="changeFilter"
|
|
data-type="mine"
|
|
>
|
|
<text>我的帖子</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="search-container">
|
|
<view class="search-input-wrapper">
|
|
<image class="search-icon" src="/images/search.png" mode="aspectFit"></image>
|
|
<input
|
|
class="search-input"
|
|
placeholder="搜索问题或关键词..."
|
|
value="{{searchKeyword}}"
|
|
bindinput="onSearchInput"
|
|
bindconfirm="onSearchConfirm"
|
|
confirm-type="search"
|
|
/>
|
|
<view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch">
|
|
×
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<scroll-view
|
|
class="post-list-container"
|
|
scroll-y
|
|
enable-back-to-top
|
|
bindscrolltolower="loadMore"
|
|
refresher-enabled="{{true}}"
|
|
refresher-triggered="{{refreshing}}"
|
|
bindrefresherrefresh="onRefresh"
|
|
>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{!loading && posts.length === 0}}">
|
|
<image class="empty-image" src="/images/empty-forum.png" mode="aspectFit"></image>
|
|
<view class="empty-text" wx:if="{{searchKeyword}}">
|
|
没有找到"{{searchKeyword}}"相关的问题
|
|
</view>
|
|
<view class="empty-text" wx:else>
|
|
暂无帖子，快来发布第一个问题吧！
|
|
</view>
|
|
<button class="empty-btn" bindtap="createPost" wx:if="{{!searchKeyword}}">发布问题</button>
|
|
<button class="empty-btn" bindtap="clearSearch" wx:else>清空搜索</button>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<view class="post-list" wx:if="{{posts.length > 0}}">
|
|
<block wx:for="{{posts}}" wx:key="id">
|
|
<view class="post-item" data-id="{{item.id}}" bindtap="goToDetail">
|
|
|
|
<!-- 左侧状态栏 -->
|
|
<view class="post-status-side">
|
|
<view class="vote-count">
|
|
<view class="vote-number">{{item.likeCount}}</view>
|
|
<view class="vote-label">点赞</view>
|
|
</view>
|
|
<view class="reply-count">
|
|
<view class="reply-number">{{item.replyCount}}</view>
|
|
<view class="reply-label">回答</view>
|
|
</view>
|
|
<view class="view-count">
|
|
<view class="view-number">{{item.viewCount}}</view>
|
|
<view class="view-label">浏览</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧内容区 -->
|
|
<view class="post-content-main">
|
|
|
|
<!-- 帖子标题和状态 -->
|
|
<view class="post-header">
|
|
<view class="post-title">{{item.title}}</view>
|
|
<view class="status-badge" wx:if="{{item.solved}}">
|
|
<text class="solved-badge">已解决</text>
|
|
</view>
|
|
<view class="status-badge" wx:if="{{item.hot}}">
|
|
<text class="hot-badge">热门</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帖子内容摘要 -->
|
|
<view class="post-summary">{{item.summary}}</view>
|
|
|
|
<!-- 帖子元信息 -->
|
|
<view class="post-meta">
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="user-info">
|
|
<image class="user-avatar" src="{{item.avatar}}" mode="aspectFill"></image>
|
|
<text class="username">{{item.username}}</text>
|
|
<text class="separator">·</text>
|
|
<text class="post-time">{{item.time}}</text>
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view class="post-tags" wx:if="{{item.tags && item.tags.length > 0}}">
|
|
<block wx:for="{{item.tags.slice(0, 2)}}" wx:key="index">
|
|
<text class="tag">{{item}}</text>
|
|
</block>
|
|
<text class="more-tags" wx:if="{{item.tags.length > 2}}">+{{item.tags.length - 2}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 最后回复信息 -->
|
|
<view class="last-reply" wx:if="{{item.lastReply}}">
|
|
<text class="last-reply-label">最后回复：</text>
|
|
<text class="last-reply-user">{{item.lastReply.username}}</text>
|
|
<text class="separator">·</text>
|
|
<text class="last-reply-time">{{item.lastReply.time}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more" wx:if="{{hasMore && posts.length > 0}}">
|
|
<view class="loading-text" wx:if="{{!loadingMore}}">
|
|
上拉加载更多
|
|
</view>
|
|
<view class="loading-more" wx:else>
|
|
<image class="loading-icon" src="/images/loading.png" mode="aspectFit"></image>
|
|
加载中...
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 没有更多了 -->
|
|
<view class="no-more" wx:if="{{!hasMore && posts.length > 0}}">
|
|
<text>没有更多了</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-placeholder"></view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 加载提示 -->
|
|
<view class="loading" wx:if="{{loading && posts.length === 0}}">
|
|
<image class="loading-icon" src="/images/loading.png" mode="aspectFit"></image>
|
|
加载中...
|
|
</view>
|
|
|
|
<!-- 创建帖子浮动按钮 -->
|
|
<view class="fab-container" wx:if="{{!searchKeyword}}">
|
|
<view class="fab" bindtap="createPost">
|
|
<image class="fab-icon" src="/images/add.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|