ai-c/pages/activity-detail/activity-detail.wxml

<!-- 活动详情页面 -->
<view class="page-container">
  <!-- 固定导航栏容器 -->
  <view class="nav-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">活动详情</view>
      <!-- 分享按钮 -->
      <view class="nav-share" bindtap="onShare">
        <image src="/images/icon-share.png" class="share-icon" mode="aspectFit"></image>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
    <!-- 活动封面图 -->
    <view class="cover-section">
      <image src="{{activity.cover_image}}" class="cover-image" mode="aspectFill" show-menu-by-longpress></image>
      <!-- 状态标签 -->
      <view class="status-badge {{activity.status}}">
        <text class="status-text">{{statusText}}</text>
      </view>
    </view>

    <!-- 活动基本信息 -->
    <view class="info-section">
      <view class="activity-title">{{activity.title}}</view>
      
      <!-- 价格信息 -->
      <view class="price-info">
        <view class="price-main" wx:if="{{activity.is_free}}">
          <text class="price-label">免费活动</text>
        </view>
        <view class="price-main" wx:else>
          <text class="price-symbol">¥</text>
          <text class="price-value">{{activity.price}}</text>
          <text class="price-unit">/人</text>
        </view>
        <view class="participants-info">
          <image src="/images/icon-users.png" class="participants-icon" mode="aspectFit"></image>
          <text class="participants-text">{{activity.participants_count}}人已报名</text>
        </view>
      </view>

      <!-- 活动信息列表 -->
      <view class="info-list">
        <!-- 时间 -->
        <view class="info-item">
          <image src="/images/icon-calendar.png" class="info-icon" mode="aspectFit"></image>
          <view class="info-content">
            <text class="info-label">活动时间</text>
            <text class="info-value">{{activity.start_date}} {{activity.start_time}}</text>
          </view>
        </view>

        <!-- 地点 -->
        <view class="info-item">
          <image src="/images/icon-location.png" class="info-icon" mode="aspectFit"></image>
          <view class="info-content">
            <text class="info-label">活动地点</text>
            <text class="info-value">{{activity.address}}</text>
          </view>
        </view>

        <!-- 主办方 -->
        <view class="info-item">
          <image src="/images/icon-organizer.png" class="info-icon" mode="aspectFit"></image>
          <view class="info-content">
            <text class="info-label">主办方</text>
            <text class="info-value">{{activity.organizer}}</text>
          </view>
        </view>

        <!-- 联系方式 -->
        <view class="info-item" wx:if="{{activity.contact_phone}}">
          <image src="/images/icon-phone.png" class="info-icon" mode="aspectFit"></image>
          <view class="info-content">
            <text class="info-label">联系电话</text>
            <text class="info-value phone-link" bindtap="onCallPhone">{{activity.contact_phone}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 活动详情 -->
    <view class="detail-section">
      <view class="section-title">活动详情</view>
      
      <!-- 使用rich-text渲染HTML内容 -->
      <view class="detail-content" wx:if="{{activity.detailHtml}}">
        <view class="detail-rich-text-wrapper" bindtap="onDetailImageTap">
          <rich-text nodes="{{activity.detailHtml}}" class="detail-rich-text"></rich-text>
        </view>
      </view>
      
      <!-- 纯文本内容 -->
      <view class="detail-content" wx:else>
        <text class="detail-text">{{activity.description}}</text>
      </view>
      
      <!-- 活动图片 -->
      <view class="detail-images" wx:if="{{activity.images && activity.images.length > 0}}">
        <image 
          wx:for="{{activity.images}}" 
          wx:key="index"
          src="{{item}}" 
          class="detail-image" 
          mode="widthFix"
          show-menu-by-longpress
          bindtap="onPreviewImage"
          data-url="{{item}}"></image>
      </view>
    </view>

    <!-- 参与者列表 -->
    <view class="participants-section" wx:if="{{participants.length > 0}}">
      <view class="section-header">
        <view class="section-title">参与者 ({{participants.length}})</view>
        <view class="view-all" bindtap="onViewAllParticipants">
          <text class="view-all-text">查看全部</text>
          <image src="/images/icon-chevron-right.png" class="view-all-icon" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="participants-list">
        <view class="participant-item" wx:for="{{participants}}" wx:key="id">
          <image src="{{item.avatar}}" class="participant-avatar" mode="aspectFill"></image>
          <view class="participant-info">
            <text class="participant-name">{{item.name}}</text>
            <text class="participant-time">{{item.join_time}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 相关活动推荐 -->
    <view class="recommend-section" wx:if="{{recommendList.length > 0}}">
      <view class="section-title">相关活动推荐</view>
      <view class="recommend-list">
        <view class="recommend-item" 
              wx:for="{{recommendList}}" 
              wx:key="id"
              data-id="{{item.id}}"
              bindtap="onRecommendTap">
          <image src="{{item.cover_image}}" class="recommend-image" mode="aspectFill" lazy-load></image>
          <view class="recommend-info">
            <text class="recommend-title">{{item.title}}</text>
            <text class="recommend-date">{{item.start_date}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

  <!-- 底部操作栏 -->
  <view class="bottom-bar">
    <view class="bar-left">
      <!-- 收藏按钮 -->
      <view class="action-btn" bindtap="onToggleFavorite">
        <app-icon name="{{activity.is_favorited ? 'heart-filled' : 'heart'}}" size="56" color="{{activity.is_favorited ? '#FF5252' : '#4A5565'}}" />
        <text class="action-text">{{activity.is_favorited ? '已收藏' : '收藏'}}</text>
      </view>
      
      <!-- 分享按钮 -->
      <button class="action-btn share-btn" open-type="share">
        <app-icon name="share" size="56" color="#4A5565" />
        <text class="action-text">分享</text>
      </button>
    </view>
    
    <view class="bar-right">
      <!-- 报名按钮 -->
      <view class="signup-btn {{activity.status}}" bindtap="onSignUp">
        <text class="signup-text">{{activity.status === 'ended' ? '活动已结束' : signupButtonText}}</text>
      </view>
    </view>
  </view>
</view>

<!-- 参与者列表弹窗 -->
<view class="participants-modal {{showParticipantsModal ? 'show' : ''}}" catchtap="onCloseParticipantsModal">
  <view class="modal-content" catchtap="preventBubble">
    <view class="modal-header">
      <text class="modal-title">参与者列表</text>
      <view class="modal-close" bindtap="onCloseParticipantsModal">
        <image src="/images/icon-close.png" class="close-icon" mode="aspectFit"></image>
      </view>
    </view>
    
    <scroll-view scroll-y class="modal-scroll">
      <view class="modal-participants-list">
        <view class="modal-participant-item" wx:for="{{allParticipants}}" wx:key="id">
          <image src="{{item.avatar}}" class="modal-participant-avatar" mode="aspectFill"></image>
          <view class="modal-participant-info">
            <text class="modal-participant-name">{{item.name}}</text>
            <text class="modal-participant-time">{{item.join_time}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

<!-- 二维码引导弹窗 -->
<view class="qrcode-modal {{showQrcodeModal ? 'show' : ''}}" catchtap="onCloseQrcodeModal">
  <view class="modal-mask"></view>
  <view class="modal-content" catchtap="preventBubble">
    <view class="close-btn" bindtap="onCloseQrcodeModal">
      <image src="/images/icon-close.png" class="close-icon" mode="aspectFit"></image>
    </view>
    <view class="modal-title">加入活动群</view>
    <view class="modal-subtitle">进群获取更多活动资讯，结交志同道合的朋友</view>
    <view class="qrcode-container">
      <image src="{{qrcodeImageUrl || activity.activity_guide_qrcode}}" class="qrcode-image" mode="aspectFit" show-menu-by-longpress></image>
    </view>
    <view class="modal-tips">长按二维码识别或保存</view>
    <view class="save-btn" bindtap="onSaveQrcode">保存二维码</view>
  </view>
</view>