miniprogramme/components/voice-recorder/voice-recorder.wxml

<!-- 🎤 语音录制组件 -->
<view class="voice-recorder-container {{visible ? 'visible' : 'hidden'}}">
  <!-- 录音遮罩 -->
  <view class="recorder-overlay" bindtap="onOverlayTap" catchtouchmove="noop"></view>
  
  <!-- 录音界面 -->
  <view class="recorder-content" catchtap="noop" catchtouchmove="noop">
    <!-- 录音状态显示 -->
    <view class="recorder-status">
      <view class="status-icon {{recordingState}}">
        <view wx:if="{{recordingState === 'idle'}}" class="icon-microphone">🎤</view>
        <view wx:elif="{{recordingState === 'recording'}}" class="icon-recording">
          <view class="recording-dot"></view>
        </view>
        <view wx:elif="{{recordingState === 'paused'}}" class="icon-paused">⏸️</view>
        <view wx:elif="{{recordingState === 'completed'}}" class="icon-completed">✅</view>
        <view wx:elif="{{recordingState === 'error'}}" class="icon-error">❌</view>
      </view>
      
      <text class="status-text">{{statusText}}</text>
    </view>
    
    <!-- 录音时长 -->
    <view class="recording-duration">
      <text class="duration-text">{{formatDuration(recordingDuration)}}</text>
      <text class="max-duration-text">/ {{formatDuration(maxDuration)}}</text>
    </view>
    
    <!-- 实时波形显示 -->
    <view wx:if="{{recordingState === 'recording'}}" class="realtime-waveform">
      <view class="waveform-container">
        <view wx:for="{{realtimeWaveform}}" 
              wx:key="index" 
              class="wave-bar realtime"
              style="height: {{item}}%;">
        </view>
      </view>
    </view>
    
    <!-- 录音完成预览 -->
    <view wx:if="{{recordingState === 'completed'}}" class="recording-preview">
      <view class="preview-waveform">
        <view class="waveform-container">
          <view wx:for="{{finalWaveform}}" 
                wx:key="index" 
                class="wave-bar preview"
                style="height: {{item}}%;">
          </view>
        </view>
      </view>
      
      <view class="preview-info">
        <text class="file-size">{{getFileSizeText(fileSize)}}</text>
        <text class="quality-text">{{getQualityText(recordingDuration)}}</text>
      </view>
    </view>
    
    <!-- 录音控制按钮 -->
    <view class="recorder-controls">
      <!-- 开始/停止录音按钮 -->
      <view wx:if="{{recordingState === 'idle' || recordingState === 'error'}}" 
            class="control-button primary"
            bindtouchstart="startRecording"
            bindtouchend="stopRecording"
            bindtouchcancel="cancelRecording">
        <text class="button-text">按住录音</text>
      </view>
      
      <!-- 录音中的控制 -->
      <view wx:elif="{{recordingState === 'recording'}}" class="recording-controls">
        <view class="control-button secondary" bindtap="pauseRecording">
          <text class="button-text">暂停</text>
        </view>
        <view class="control-button danger" bindtap="cancelRecording">
          <text class="button-text">取消</text>
        </view>
        <view class="control-button primary" bindtap="stopRecording">
          <text class="button-text">完成</text>
        </view>
      </view>
      
      <!-- 暂停状态的控制 -->
      <view wx:elif="{{recordingState === 'paused'}}" class="paused-controls">
        <view class="control-button secondary" bindtap="resumeRecording">
          <text class="button-text">继续</text>
        </view>
        <view class="control-button danger" bindtap="cancelRecording">
          <text class="button-text">取消</text>
        </view>
        <view class="control-button primary" bindtap="stopRecording">
          <text class="button-text">完成</text>
        </view>
      </view>
      
      <!-- 录音完成的控制 -->
      <view wx:elif="{{recordingState === 'completed'}}" class="completed-controls">
        <view class="control-button secondary" bindtap="playPreview">
          <text class="button-text">{{isPlaying ? '暂停' : '试听'}}</text>
        </view>
        <view class="control-button danger" bindtap="discardRecording">
          <text class="button-text">重录</text>
        </view>
        <view class="control-button primary" bindtap="sendRecording">
          <text class="button-text">发送</text>
        </view>
      </view>
    </view>
    
    <!-- 录音提示 -->
    <view class="recorder-tips">
      <text wx:if="{{recordingState === 'idle'}}" class="tip-text">
        按住录音按钮开始录制，最长{{Math.floor(maxDuration/1000)}}秒
      </text>
      <text wx:elif="{{recordingState === 'recording'}}" class="tip-text">
        松开结束录音，向上滑动取消
      </text>
      <text wx:elif="{{recordingState === 'paused'}}" class="tip-text">
        录音已暂停，可以继续录制或完成录音
      </text>
      <text wx:elif="{{recordingState === 'completed'}}" class="tip-text">
        录音完成，可以试听或发送
      </text>
      <text wx:elif="{{recordingState === 'error'}}" class="tip-text error">
        {{errorMessage}}
      </text>
    </view>
    
    <!-- 关闭按钮 -->
    <view class="close-button" bindtap="closeRecorder">
      <text class="close-icon">×</text>
    </view>
  </view>
  
  <!-- 权限引导 -->
  <view wx:if="{{showPermissionGuide}}" class="permission-guide">
    <view class="guide-content">
      <view class="guide-icon">🎤</view>
      <text class="guide-title">需要录音权限</text>
      <text class="guide-desc">使用语音消息功能需要录音权限，请在设置中开启</text>
      <view class="guide-buttons">
        <view class="guide-button secondary" bindtap="cancelPermission">
          <text class="button-text">取消</text>
        </view>
        <view class="guide-button primary" bindtap="openSettings">
          <text class="button-text">去设置</text>
        </view>
      </view>
    </view>
  </view>
</view>