findme-miniprogram-frontend/subpackages/group/group-announcement/group-announcement.wxml

<!-- 📢 群公告页面 -->
<view class="group-announcement-container">
  <!-- 自定义导航栏 -->
  <view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
    <view class="navbar-content" style="height: {{navBarHeight}}px;">
      <view class="navbar-left" bindtap="goBack">
        <text class="back-icon">‹</text>
      </view>
      
      <view class="navbar-title">
        <text class="title-text">{{mode === 'edit' ? '编辑群公告' : '群公告'}}</text>
      </view>
      
      <view class="navbar-right" wx:if="{{mode === 'edit'}}" bindtap="saveAnnouncement">
        <text class="save-text {{canSave ? 'active' : ''}}">保存</text>
      </view>
    </view>
  </view>

  <!-- 页面内容 -->
  <view class="page-content">
    <!-- 编辑模式 -->
    <view wx:if="{{mode === 'edit'}}" class="edit-mode">
      <!-- 编辑提示 -->
      <view class="edit-tips">
        <text class="tips-icon">💡</text>
        <text class="tips-text">群公告将通知所有群成员，请谨慎编辑</text>
      </view>
      
      <!-- 编辑区域 -->
      <view class="edit-container">
        <textarea class="announcement-textarea"
                  placeholder="请输入群公告内容..."
                  value="{{editContent}}"
                  bindinput="onContentInput"
                  maxlength="{{maxLength}}"
                  auto-height
                  focus="{{true}}" />
        
        <view class="edit-footer">
          <view class="char-counter">
            <text class="counter-text">{{editContent.length}}/{{maxLength}}</text>
          </view>
          
          <view class="edit-actions">
            <view class="action-btn secondary" bindtap="cancelEdit">
              <text class="btn-text">取消</text>
            </view>
            <view class="action-btn primary {{canSave ? 'active' : ''}}" bindtap="saveAnnouncement">
              <text class="btn-text">发布</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 查看模式 -->
    <view wx:else class="view-mode">
      <!-- 当前公告 -->
      <view wx:if="{{currentAnnouncement}}" class="current-announcement">
        <view class="announcement-header">
          <text class="announcement-title">当前公告</text>
          <view wx:if="{{canEdit}}" class="header-actions">
            <text class="action-btn" bindtap="editAnnouncement">编辑</text>
            <text class="action-btn danger" bindtap="deleteAnnouncement">删除</text>
          </view>
        </view>
        
        <view class="announcement-content">
          <text class="content-text">{{currentAnnouncement.content}}</text>
        </view>
        
        <view class="announcement-meta">
          <text class="meta-text">发布者: {{currentAnnouncement.publisherName}}</text>
          <text class="meta-text">发布时间: {{currentAnnouncement.publishTimeText}}</text>
        </view>
      </view>
      
      <!-- 无公告状态 -->
      <view wx:else class="no-announcement">
        <text class="no-announcement-icon">📢</text>
        <text class="no-announcement-text">暂无群公告</text>
        <view wx:if="{{canEdit}}" class="no-announcement-action">
          <view class="action-btn primary" bindtap="createAnnouncement">
            <text class="btn-text">发布公告</text>
          </view>
        </view>
      </view>
      
      <!-- 历史公告 -->
      <view wx:if="{{announcementHistory.length > 0}}" class="announcement-history">
        <view class="history-header">
          <text class="history-title">历史公告</text>
          <text class="history-count">({{announcementHistory.length}}条)</text>
        </view>
        
        <view class="history-list">
          <view class="history-item"
                wx:for="{{announcementHistory}}"
                wx:key="id"
                bindtap="viewHistoryAnnouncement"
                data-announcement="{{item}}">
            <view class="history-content">
              <text class="history-text">{{item.content}}</text>
            </view>
            <view class="history-meta">
              <text class="history-publisher">{{item.publisherName}}</text>
              <text class="history-time">{{item.publishTimeText}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 历史公告详情弹窗 -->
<view class="history-detail-modal" wx:if="{{showHistoryDetail}}" bindtap="closeHistoryDetail">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">历史公告</text>
      <view class="close-btn" bindtap="closeHistoryDetail">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <view class="modal-body">
      <view class="detail-content">
        <text class="detail-text">{{selectedHistory.content}}</text>
      </view>
      
      <view class="detail-meta">
        <view class="meta-item">
          <text class="meta-label">发布者:</text>
          <text class="meta-value">{{selectedHistory.publisherName}}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">发布时间:</text>
          <text class="meta-value">{{selectedHistory.publishTimeText}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 删除确认弹窗 -->
<view class="delete-confirm-modal" wx:if="{{showDeleteConfirm}}" bindtap="closeDeleteConfirm">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">删除公告</text>
    </view>
    
    <view class="modal-body">
      <text class="confirm-text">确定要删除当前群公告吗？删除后所有群成员将收到通知。</text>
    </view>
    
    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="closeDeleteConfirm">
        <text class="btn-text">取消</text>
      </view>
      <view class="modal-btn confirm" bindtap="confirmDeleteAnnouncement">
        <text class="btn-text">删除</text>
      </view>
    </view>
  </view>
</view>

<!-- 加载提示 -->
<view class="loading-overlay" wx:if="{{loading}}">
  <view class="loading-content">
    <view class="loading-spinner"></view>
    <text class="loading-text">{{loadingText}}</text>
  </view>
</view>