53 lines
1.8 KiB
Text
53 lines
1.8 KiB
Text
<!-- 🎤 语音消息组件 -->
|
|
<view class="voice-message-container {{isSelf ? 'self' : 'other'}} {{isPlaying ? 'playing' : ''}}">
|
|
<!-- 语音消息气泡 -->
|
|
<view class="voice-bubble" bindtap="togglePlay">
|
|
<!-- 播放按钮 -->
|
|
<view class="play-button">
|
|
<view class="play-icon {{isPlaying ? 'pause' : 'play'}}">
|
|
<text wx:if="{{!isPlaying}}" class="icon">▶</text>
|
|
<text wx:else class="icon">⏸</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 语音波形 -->
|
|
<view class="voice-waveform">
|
|
<view class="waveform-container">
|
|
<view wx:for="{{waveformData}}"
|
|
wx:key="index"
|
|
class="wave-bar {{index <= currentWaveIndex ? 'active' : ''}}"
|
|
style="height: {{item}}%;">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 语音时长 -->
|
|
<view class="voice-duration">
|
|
<text class="duration-text">{{formatDuration(duration)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 播放进度条 -->
|
|
<view wx:if="{{isPlaying}}" class="progress-container">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" style="width: {{playProgress}}%;"></view>
|
|
</view>
|
|
<view class="progress-time">
|
|
<text class="current-time">{{formatTime(currentTime)}}</text>
|
|
<text class="total-time">{{formatTime(duration)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view wx:if="{{isLoading}}" class="loading-container">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 错误状态 -->
|
|
<view wx:if="{{hasError}}" class="error-container">
|
|
<text class="error-icon">⚠️</text>
|
|
<text class="error-text">播放失败</text>
|
|
<text class="retry-button" bindtap="retryPlay">重试</text>
|
|
</view>
|
|
</view>
|