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.
208 lines
7.6 KiB
208 lines
7.6 KiB
<view class="forum-page">
|
|
|
|
<!-- 顶部栏 -->
|
|
<view class="header">
|
|
<view class="header-content">
|
|
<view class="header-main">
|
|
<text class="title-text">问答社区</text>
|
|
<text class="title-sub">互帮互助，共同成长</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主内容区 -->
|
|
<view class="main-content">
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="search-section">
|
|
<view class="search-box">
|
|
<image class="search-icon" src="/pagesB/images/sou.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">
|
|
<text class="clear-text">×</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<scroll-view class="post-list-section" scroll-y enable-back-to-top scroll-top="{{scrollTop}}" bindscrolltolower="loadMore" bindscroll="onScroll" refresher-enabled="{{true}}" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
|
|
|
|
<!-- 搜索加载提示 -->
|
|
<view class="search-loading" wx:if="{{searchLoading && posts.length === 0}}">
|
|
<view class="search-spinner"></view>
|
|
<text class="search-loading-text">搜索中...</text>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{!loading && !searchLoading && posts.length === 0}}">
|
|
<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>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<view class="post-list" wx:if="{{posts.length > 0}}">
|
|
<block wx:for="{{posts}}" wx:key="id">
|
|
<view class="post-card" data-id="{{item.id}}" bindtap="goToDetail">
|
|
<view class="post-content">
|
|
<view class="post-type">
|
|
<!-- 头像 -->
|
|
<view class="user-info">
|
|
<image class="user-avatar" src="{{baseUrl+item.avatar}}" mode="aspectFill"></image>
|
|
<text class="username">{{item.nickName}}</text>
|
|
</view>
|
|
<!-- 时间 -->
|
|
<text class="post-time">{{item.createdAt}}</text>
|
|
</view>
|
|
<!-- 标题 -->
|
|
<view class="post-title-wrapper">
|
|
<text class="post-title">{{item.title}}</text>
|
|
</view>
|
|
|
|
<!-- 内容摘要 -->
|
|
<view class="post-summary">
|
|
{{item.content}}
|
|
</view>
|
|
|
|
<!-- 图片预览 -->
|
|
<view class="post-images" wx:if="{{item.images && item.images.length>0}}">
|
|
<view class="images-grid">
|
|
<block wx:for="{{item.images}}" wx:key="index" wx:for-index="imgIndex">
|
|
<image class="post-image" src="{{baseUrl+item}}" mode="aspectFill" data-postindex="{{index}}" data-imageindex="{{imgIndex}}" bindtap="previewImage"></image>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部信息 -->
|
|
<view class="post-footer">
|
|
<view class="post-meta">
|
|
<view class="meta-item">
|
|
<image class="meta-icon" src="/pagesB/images/hf.png" mode="aspectFit"></image>
|
|
<text class="meta-count">{{item.answerCount || 0}}</text>
|
|
</view>
|
|
<view class="meta-item">
|
|
<image class="meta-icon" src="/pagesB/images/lll.png" mode="aspectFit"></image>
|
|
<text class="meta-count">{{item.viewCount || 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more" wx:if="{{hasMore && posts.length > 0}}">
|
|
<view class="loading-spinner" wx:if="{{!loadingMore}}">
|
|
<text class="loading-text">上拉加载更多</text>
|
|
</view>
|
|
<view class="loading-spinner" wx:else>
|
|
<view class="spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 没有更多了 -->
|
|
<view class="no-more" wx:if="{{!hasMore && posts.length > 0}}">
|
|
<view class="no-more-line"></view>
|
|
<text class="no-more-text">已经到底了</text>
|
|
<view class="no-more-line"></view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
<!-- 固定发布按钮（左下角） -->
|
|
<view class="floating-create-btn" bindtap="createPost">
|
|
<image class="create-icon" src="/pagesA/images/jh.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 返回顶部按钮（右下角） -->
|
|
<view class="back-to-top-btn {{showBackToTop ? 'show' : ''}}" bindtap="backToTop">
|
|
<view class="back-top-icon">↑</view>
|
|
</view>
|
|
|
|
<!-- 发布模态框 -->
|
|
<view class="post-modal-overlay" wx:if="{{showPostModal}}" bindtap="hidePostModal">
|
|
<view class="post-modal-content" catchtap="stopPropagation">
|
|
|
|
<view class="modal-header">
|
|
<text class="modal-title">发布问题</text>
|
|
<view class="modal-close" bindtap="hidePostModal">
|
|
<text class="close-icon">×</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-body">
|
|
<view class="form-field">
|
|
<view class="field-header">
|
|
<text class="field-label">问题标题</text>
|
|
<text class="field-counter">{{postTitle.length}}/50</text>
|
|
</view>
|
|
<input class="title-input" placeholder="请输入问题标题" value="{{postTitle}}" bindinput="onPostTitleInput" maxlength="50" />
|
|
</view>
|
|
|
|
<view class="form-field">
|
|
<view class="field-header">
|
|
<text class="field-label">详细描述</text>
|
|
<text class="field-counter">{{postContent.length}}/500</text>
|
|
</view>
|
|
<textarea class="content-input" placeholder="请详细描述您的问题..." value="{{postContent}}" bindinput="onPostContentInput" maxlength="500" auto-height />
|
|
</view>
|
|
|
|
<view class="form-field">
|
|
<view class="field-header">
|
|
<text class="field-label">添加图片</text>
|
|
<text class="field-hint">最多3张</text>
|
|
</view>
|
|
<view class="image-upload-area">
|
|
|
|
<view class="uploaded-images" wx:if="{{postImages.length > 0}}">
|
|
<block wx:for="{{postImages}}" wx:key="index">
|
|
<view class="image-item">
|
|
<image class="preview-image" src="{{item}}" mode="aspectFill"></image>
|
|
<view class="image-remove" bindtap="removeImage" data-index="{{index}}">
|
|
<text class="remove-icon">×</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class="upload-btn" wx:if="{{postImages.length < 3}}" bindtap="chooseImage">
|
|
<image class="camera-icon" src="/pagesA/images/jh.png" mode="aspectFit"></image>
|
|
<text class="upload-text">添加图片</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="modal-footer">
|
|
<button class="cancel-btn" bindtap="hidePostModal">取消</button>
|
|
<button class="submit-btn" bindtap="submitPost" disabled="{{!postTitle || !postContent || isSubmitting}}">
|
|
{{isSubmitting ? '发布中...' : '发布'}}
|
|
</button>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 首次加载遮罩 -->
|
|
<view class="loading-overlay" wx:if="{{initialLoading && posts.length === 0}}">
|
|
<view class="loading-content">
|
|
<view class="spinner-large"></view>
|
|
<text class="loading-tip">加载中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|