Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
192
components/media-preview/media-preview.wxml
Normal file
192
components/media-preview/media-preview.wxml
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<!-- 🎨 媒体预览组件 -->
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue