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

<!-- 人物详情页 -->
<view class="page-container">
  <!-- 顶部大图区域 -->
  <view class="hero-section">
    <image class="hero-image" src="{{character.promoImage || character.avatar}}" mode="aspectFill"></image>
    <!-- 渐变遮罩和返回按钮 -->
    <view class="hero-overlay">
      <view class="back-btn" bindtap="goBack">
        <image src="/images/icon-chevron-left.png" class="back-icon" mode="aspectFit"></image>
      </view>
    </view>
  </view>

  <!-- 内容卡片区域 -->
  <scroll-view scroll-y class="content-card" enhanced show-scrollbar="{{false}}">
    <!-- 基本信息 -->
    <view class="profile-header">
      <text class="profile-name">{{character.name}}</text>
      <text class="profile-job">{{character.job}}</text>
    </view>

    <!-- 标签 -->
    <view class="profile-tags">
      <view class="tag">{{character.ageDisplay}}</view>
      <view class="tag">{{character.location}}</view>
    </view>

    <!-- 收听独白 -->
    <view class="audio-section {{isPlaying ? 'playing' : ''}}" bindtap="onPlayAudio">
      <view class="audio-btn">
        <image src="/images/icon-headphones.png" class="audio-icon" mode="aspectFit"></image>
      </view>
      <view class="audio-info">
        <text class="audio-label">{{isPlaying ? '播放独白中...' : '收听独白'}}</text>
        <view class="audio-wave">
          <view class="wave-bar {{isPlaying ? 'animating' : ''}}" wx:for="{{20}}" wx:key="*this" style="opacity: {{0.5 + Math.random() * 0.5}}"></view>
        </view>
      </view>
      <text class="audio-duration">{{character.audioDuration || '12"'}}</text>
    </view>

    <!-- 相册 - 放在上方 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">相册</text>
        <text class="view-all" bindtap="onViewAllPhotos">查看全部</text>
      </view>
      <view class="photo-grid">
        <view class="photo-item" wx:for="{{character.photos}}" wx:key="*this" wx:if="{{index < 2}}" bindtap="onPreviewPhoto" data-index="{{index}}">
          <image class="photo-image" src="{{item}}" mode="aspectFill"></image>
          <view class="photo-overlay" wx:if="{{index === 1 && character.photos.length > 2}}">
            <text class="photo-more">+{{character.photos.length - 2}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 关于我 -->
    <view class="section">
      <text class="section-title">关于我</text>
      <text class="section-content">{{character.about}}</text>
    </view>

    <!-- 兴趣爱好 -->
    <view class="section">
      <text class="section-title">兴趣爱好</text>
      <view class="hobby-tags">
        <view class="hobby-tag" wx:for="{{character.traits}}" wx:key="*this">{{item}}</view>
        <view class="hobby-tag highlight" wx:for="{{character.hobbies}}" wx:key="*this">♥ {{item}}</view>
      </view>
    </view>

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

  <!-- 底部操作按钮 -->
  <view class="action-bar">
    <view class="action-btn dislike-btn" bindtap="onDislike">
      <image src="/images/icon-close.png" class="action-btn-icon" mode="aspectFit"></image>
    </view>
    <view class="action-btn chat-btn" bindtap="onChat">
      <image src="/images/icon-comment.png" class="action-btn-icon" mode="aspectFit"></image>
    </view>
  </view>

  <!-- 角色解锁弹窗 -->
  <view class="heart-popup-mask" wx:if="{{showHeartPopup}}" bindtap="closeHeartPopup" catchtouchmove="preventTouchMove">
    <view class="heart-popup" catchtap="preventBubble">
      <!-- 关闭按钮 -->
      <view class="heart-popup-close" bindtap="closeHeartPopup">
        <image src="/images/icon-close.png" mode="aspectFit"></image>
      </view>
      
      <!-- 弹窗头部 - 白色圆角区域 -->
      <view class="heart-popup-header">
        <view class="popup-avatar-wrap">
          <image class="popup-avatar" src="{{character.avatar}}" mode="aspectFill"></image>
          <view class="popup-avatar-badge">
            <image src="/images/icon-lock.png" mode="aspectFit"></image>
          </view>
        </view>
        <text class="popup-character-name">解锁与<text class="highlight">{{character.name}}</text>的专属聊天</text>
      </view>
      
      <!-- 选项区域 -->
      <view class="heart-popup-options">
        <!-- 分享选项 -->
        <view class="heart-option-card share-option" bindtap="onShareUnlock">
          <view class="heart-option-left">
            <view class="heart-option-icon share-icon">
              <image src="/images/icon-share.png" mode="aspectFit"></image>
            </view>
            <view class="heart-option-info">
              <text class="heart-option-title">0元解锁</text>
              <text class="heart-option-desc">传递温暖 回馈爱心</text>
            </view>
          </view>
          <view class="heart-option-btn share-btn">分享</view>
        </view>
        
        <!-- 爱心兑换选项 -->
        <view class="heart-option-card heart-option" bindtap="onHeartExchange">
          <view class="heart-option-left">
            <view class="heart-option-icon heart-icon">
              <image src="/images/icon-heart-filled.png" mode="aspectFit"></image>
            </view>
            <view class="heart-option-info">
              <text class="heart-option-title">{{unlockHeartsCost}}爱心</text>
              <text class="heart-option-desc">{{userLovePoints >= unlockHeartsCost ? '余额充足 立即兑换' : '爱心值不足 去充值'}}</text>
            </view>
          </view>
          <view class="heart-option-btn exchange-btn">兑换</view>
        </view>
      </view>
      
      <!-- 暂不需要按钮 -->
      <view class="heart-popup-footer">
        <button class="heart-cancel-btn" bindtap="closeHeartPopup">暂不需要</button>
      </view>
    </view>
  </view>
</view>