novel_frontend_RcKtFezyRAZX/wechat/pages/article-detail/article-detail.wxml

<!-- pages/article-detail/article-detail.wxml -->
<!-- 文章详情视图 -->

<view class="article-detail-container">
  <!-- 文章内容 -->
  <view class="article-content" wx:if="{{article}}">
    <!-- 标题 -->
    <view class="article-header">
      <text class="article-title">{{article.title}}</text>
      <view class="article-meta">
        <view class="author-info" bindtap="goToAuthor">
          <image class="author-avatar" src="{{article.authorAvatar || '/static/images/default-avatar.png'}}" />
          <text class="author-name">{{article.authorName}}</text>
        </view>
        <text class="publish-time">{{article.createTime}}</text>
        <text class="view-count">阅读 {{article.viewCount}}</text>
      </view>
    </view>

    <!-- 封面图 -->
    <image class="article-cover" wx:if="{{article.coverImage}}" src="{{article.coverImage}}" mode="widthFix" />

    <!-- 文章正文 -->
    <view class="article-body">
      <rich-text nodes="{{article.content}}"></rich-text>
    </view>

    <!-- 标签 -->
    <view class="article-tags" wx:if="{{article.tags && article.tags.length > 0}}">
      <text class="tag" wx:for="{{article.tags}}" wx:key="id">{{item.name}}</text>
    </view>

    <!-- 点赞和收藏 -->
    <view class="article-actions">
      <view class="action-item {{isLike ? 'active' : ''}}" bindtap="onLike">
        <text class="iconfont {{isLike ? 'icon-like-fill' : 'icon-like'}}"></text>
        <text>{{likeCount}}</text>
      </view>
      <view class="action-item {{isFavorite ? 'active' : ''}}" bindtap="onFavorite">
        <text class="iconfont {{isFavorite ? 'icon-favorite-fill' : 'icon-favorite'}}"></text>
        <text>{{favoriteCount}}</text>
      </view>
      <view class="action-item" bindtap="onCopyLink">
        <text class="iconfont icon-share"></text>
        <text>分享</text>
      </view>
    </view>

    <!-- 关注作者 -->
    <view class="follow-author" wx:if="{{article.authorId && !article.isFollowing}}">
      <view class="author-card">
        <image class="author-avatar-lg" src="{{article.authorAvatar || '/static/images/default-avatar.png'}}" />
        <view class="author-info">
          <text class="author-name">{{article.authorName}}</text>
          <text class="author-bio">{{article.authorBio || '这家伙很懒，什么都没写'}}</text>
        </view>
        <button class="follow-btn" bindtap="onFollow">关注</button>
      </view>
    </view>
  </view>

  <!-- 分割线 -->
  <view class="section-divider">
    <text>评论</text>
  </view>

  <!-- 评论列表 -->
  <view class="comment-list">
    <view class="comment-item" wx:for="{{commentList}}" wx:key="id">
      <image class="comment-avatar" src="{{item.avatar || '/static/images/default-avatar.png'}}" />
      <view class="comment-content">
        <view class="comment-header">
          <text class="comment-nickname">{{item.nickname}}</text>
          <text class="comment-time">{{item.createTime}}</text>
        </view>
        <text class="comment-text">{{item.content}}</text>
        <view class="comment-actions">
          <text class="reply-btn" bindtap="onReply" data-comment="{{item}}">回复</text>
        </view>
        <!-- 子评论 -->
        <view class="sub-comment-list" wx:if="{{item.children && item.children.length > 0}}">
          <view class="sub-comment-item" wx:for="{{item.children}}" wx:for-item="subItem" wx:key="id">
            <image class="sub-comment-avatar" src="{{subItem.avatar || '/static/images/default-avatar.png'}}" />
            <view class="sub-comment-content">
              <text class="sub-comment-nickname">{{subItem.nickname}}</text>
              <text class="sub-comment-text">{{subItem.content}}</text>
              <text class="sub-comment-time">{{subItem.createTime}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-more" wx:if="{{commentLoading}}">
      <text>加载中...</text>
    </view>
    <view class="no-more" wx:if="{{!commentHasMore && commentList.length > 0}}">
      <text>没有更多评论了</text>
    </view>
    <view class="empty-state" wx:if="{{!commentLoading && commentList.length === 0}}">
      <text>暂无评论，快来抢沙发</text>
    </view>
  </view>

  <!-- 底部评论输入 -->
  <view class="comment-input-bar">
    <input class="comment-input" placeholder="{{replyTo ? '回复 ' + replyTo.nickname : '写评论...'}}" bindinput="onCommentInput" value="{{commentContent}}" />
    <button class="submit-btn" bindtap="submitComment">发送</button>
  </view>
</view>

/**
 * @联系作者：16768118056
 * @描述：（此项目非免费分享）源码百分百可用，搞定毕设不发愁，支持远程调试安装、二次开发、定制、讲解、文档类。
 * @访问：https://www.notmaker.com/detail/8326a897119d4542896c863a69d7bbe7/gtt20260415，查看完整运行演示。
 */