findme-miniprogram-frontend/components/media-preview/media-preview.wxml

<!-- 🎨 媒体预览组件 -->
<view class="media-preview-container" wx:if="{{visible}}" bindtap="onMaskTap">
  <!-- 背景遮罩 -->
  <view class="preview-mask"></view>
  
  <!-- 预览内容 -->
  <view class="preview-content" catchtap="stopPropagation">
    <!-- 头部工具栏 -->
    <view class="preview-header">
      <view class="header-info">
        <text class="media-title">{{currentMedia.name || '媒体预览'}}</text>
        <text class="media-info" wx:if="{{currentMedia.size}}">
          {{formatFileSize(currentMedia.size)}}
        </text>
      </view>
      
      <view class="header-actions">
        <!-- 下载按钮 -->
        <view class="action-btn" bindtap="downloadMedia" wx:if="{{currentMedia.url}}">
          <text class="action-icon">📥</text>
        </view>
        
        <!-- 分享按钮 -->
        <view class="action-btn" bindtap="shareMedia" wx:if="{{canShare}}">
          <text class="action-icon">📤</text>
        </view>
        
        <!-- 关闭按钮 -->
        <view class="action-btn close-btn" bindtap="closePreview">
          <text class="action-icon">✕</text>
        </view>
      </view>
    </view>
    
    <!-- 媒体内容区域 -->
    <view class="media-container">
      <!-- 图片预览 -->
      <view class="image-preview" wx:if="{{currentMedia.type === 'image'}}">
        <swiper class="image-swiper"
                current="{{currentIndex}}"
                bindchange="onSwiperChange"
                indicator-dots="{{mediaList.length > 1}}"
                indicator-color="rgba(255, 255, 255, 0.3)"
                indicator-active-color="rgba(255, 255, 255, 0.8)">
          <swiper-item wx:for="{{mediaList}}" wx:key="index" wx:if="{{item.type === 'image'}}">
            <view class="image-item">
              <image class="preview-image"
                     src="{{item.url || item.tempFilePath}}"
                     mode="aspectFit"
                     bindload="onImageLoad"
                     binderror="onImageError"
                     bindtap="onImageTap"
                     data-index="{{index}}" />
              
              <!-- 加载状态 -->
              <view class="loading-overlay" wx:if="{{item.loading}}">
                <view class="loading-spinner"></view>
                <text class="loading-text">加载中...</text>
              </view>
              
              <!-- 错误状态 -->
              <view class="error-overlay" wx:if="{{item.error}}">
                <text class="error-icon">❌</text>
                <text class="error-text">加载失败</text>
                <view class="retry-btn" bindtap="retryLoad" data-index="{{index}}">
                  <text class="retry-text">重试</text>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
        
        <!-- 图片计数 -->
        <view class="image-counter" wx:if="{{mediaList.length > 1}}">
          <text class="counter-text">{{currentIndex + 1}} / {{mediaList.length}}</text>
        </view>
      </view>
      
      <!-- 视频预览 -->
      <view class="video-preview" wx:if="{{currentMedia.type === 'video'}}">
        <video class="preview-video"
               src="{{currentMedia.url || currentMedia.tempFilePath}}"
               poster="{{currentMedia.thumbnailPath}}"
               controls="{{true}}"
               autoplay="{{false}}"
               loop="{{false}}"
               muted="{{false}}"
               show-center-play-btn="{{true}}"
               show-play-btn="{{true}}"
               show-fullscreen-btn="{{true}}"
               bindplay="onVideoPlay"
               bindpause="onVideoPause"
               bindended="onVideoEnded"
               binderror="onVideoError"
               bindtimeupdate="onVideoTimeUpdate">
        </video>
        
        <!-- 视频信息 -->
        <view class="video-info">
          <text class="video-duration">{{formatDuration(currentMedia.duration)}}</text>
          <text class="video-size">{{currentMedia.width}}×{{currentMedia.height}}</text>
        </view>
      </view>
      
      <!-- 文件预览 -->
      <view class="file-preview" wx:if="{{currentMedia.type === 'file'}}">
        <view class="file-icon-container">
          <text class="file-icon">{{getFileIcon(currentMedia.extension)}}</text>
        </view>
        
        <view class="file-details">
          <text class="file-name">{{currentMedia.name}}</text>
          <text class="file-size">{{formatFileSize(currentMedia.size)}}</text>
          <text class="file-type">{{currentMedia.extension.toUpperCase()}} 文件</text>
        </view>
        
        <view class="file-actions">
          <view class="file-action-btn" bindtap="openFile">
            <text class="action-text">打开文件</text>
          </view>
          <view class="file-action-btn" bindtap="saveFile">
            <text class="action-text">保存到本地</text>
          </view>
        </view>
      </view>
      
      <!-- 音频预览 -->
      <view class="audio-preview" wx:if="{{currentMedia.type === 'audio'}}">
        <view class="audio-player">
          <view class="audio-cover">
            <text class="audio-icon">🎵</text>
          </view>
          
          <view class="audio-controls">
            <view class="play-btn {{audioPlaying ? 'playing' : ''}}" bindtap="toggleAudioPlay">
              <text class="play-icon">{{audioPlaying ? '⏸️' : '▶️'}}</text>
            </view>
            
            <view class="audio-progress">
              <view class="progress-bar">
                <view class="progress-fill" style="width: {{audioProgress}}"></view>
              </view>
              <view class="time-info">
                <text class="current-time">{{formatTime(audioCurrentTime)}}</text>
                <text class="total-time">{{formatTime(currentMedia.duration)}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="audio-info">
          <text class="audio-name">{{currentMedia.name}}</text>
          <text class="audio-size">{{formatFileSize(currentMedia.size)}}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="preview-footer" wx:if="{{showFooter}}">
      <view class="footer-actions">
        <!-- 编辑按钮 -->
        <view class="footer-btn" bindtap="editMedia" wx:if="{{canEdit}}">
          <text class="footer-icon">✏️</text>
          <text class="footer-text">编辑</text>
        </view>
        
        <!-- 删除按钮 -->
        <view class="footer-btn" bindtap="deleteMedia" wx:if="{{canDelete}}">
          <text class="footer-icon">🗑️</text>
          <text class="footer-text">删除</text>
        </view>
        
        <!-- 收藏按钮 -->
        <view class="footer-btn" bindtap="favoriteMedia">
          <text class="footer-icon">{{currentMedia.favorited ? '❤️' : '🤍'}}</text>
          <text class="footer-text">{{currentMedia.favorited ? '已收藏' : '收藏'}}</text>
        </view>
        
        <!-- 更多按钮 -->
        <view class="footer-btn" bindtap="showMoreActions">
          <text class="footer-icon">⋯</text>
          <text class="footer-text">更多</text>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 手势操作提示 -->
  <view class="gesture-tips" wx:if="{{showGestureTips}}">
    <text class="tips-text">双击放大 · 滑动切换 · 点击关闭</text>
  </view>
</view>