findme-miniprogram-frontend/subpackages/media/camera/camera.wxml

<view class="camera-page">
  <!-- 拍摄模式视图 -->
  <view class="shoot-mode" wx:if="{{!hasTakenPhoto}}">
    <view class="top-controls">
      <view class="flash-btn" bindtap="toggleFlash">
        <image src="{{flashState === 'off' ? '/images/cross.svg' : '/images/lightning.svg'}}" mode="aspectFit" style="width: 100%; height: 100%;"></image>
      </view>
    </view>
    <view class="camera-container">
      <camera 
        device-position="{{cameraPosition}}" 
        flash="{{flashState}}" 
        binderror="handleCameraError"
        class="camera-preview"
      ></camera>
      <!-- 双击检测覆盖层 -->
      <view class="camera-tap-overlay" catchtap="onCameraDoubleTap"></view>
    </view>
    <view class="shoot-tip">轻触拍照</view>
    <view class="shoot-controls">
      <view class="close-btn" bindtap="navigateBack">取消</view>
      <view class="shoot-button" bindtap="takePhoto"></view>
      <view class="switch-camera-btn" bindtap="switchCamera">
        <image src="/images/refresh.svg" mode="aspectFit" style="width: 100%; height: 100%;"></image>
      </view>
    </view>
  </view>

  <!-- 编辑模式视图 -->
  <view class="edit-mode" wx:if="{{hasTakenPhoto}}">
    
    <view class="edit-container">
      <!-- 图片容器 -->
      <view class="image-container" style="position: relative; transform: rotate({{rotateAngle}}deg)scale({{imageScale}});">
        <image 
          src="{{currentPhotoPath}}" 
          mode="widthFix" 
          class="edit-image" 
          bindload="onImageLoaded"
        ></image>
      <canvas 
        id="mosaicCanvas"
        type="2d"
        hidden="{{!(currentTool ==='mosaic' || currentTool === 'eraser')}}"
        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; pointer-events: auto;"
        bindtouchstart="onCanvasTouchStart"
        bindtouchmove="onCanvasTouchMove"
        bindtouchend="onCanvasTouchEnd"
      ></canvas>
      <canvas 
        id="mergeCanvas" 
        type="2d" 
        style="position: absolute; left: -9999rpx; top: -9999rpx; width: {{canvasWidth}}px; height: {{canvasHeight}}px;"
      ></canvas>
      
      <!-- 裁剪框 -->
      <view wx:if="{{isCropping}}" class="crop-overlay" 
        catchtouchstart="startCropMove"
        catchtouchmove="onCropTouchMove"
        catchtouchend="onCropTouchEnd">
        <!-- 遮罩层 -->
        <view class="crop-mask">
          <!-- 上遮罩 -->
          <view class="crop-mask-top" style="height: {{cropBox.top}}px;"></view>
          <!-- 中间区域 -->
          <view class="crop-mask-middle" style="height: {{cropBox.height}}px;">
            <!-- 左遮罩 -->
            <view class="crop-mask-left" style="width: {{cropBox.left}}px;"></view>
            <!-- 裁剪区域（透明，不可触摸） -->
            <view class="crop-area" style="width: {{cropBox.width}}px; height: 100%;"></view>
            <!-- 右遮罩 -->
            <view class="crop-mask-right"></view>
          </view>
          <!-- 下遮罩 -->
          <view class="crop-mask-bottom"></view>
        </view>
        <!-- 裁剪框（可拖动和调整） -->
        <view class="crop-box" 
          style="left: {{cropBox.left}}px; top: {{cropBox.top}}px; width: {{cropBox.width}}px; height: {{cropBox.height}}px;">
          <!-- 裁剪框边框 -->
          <view class="crop-border">
            <!-- 四个角的控制点 -->
            <view class="crop-handle crop-handle-tl" data-handle="top-left" catchtouchstart="startCropDrag" catchtouchmove="onCropTouchMove" catchtouchend="onCropTouchEnd"></view>
            <view class="crop-handle crop-handle-tr" data-handle="top-right" catchtouchstart="startCropDrag" catchtouchmove="onCropTouchMove" catchtouchend="onCropTouchEnd"></view>
            <view class="crop-handle crop-handle-bl" data-handle="bottom-left" catchtouchstart="startCropDrag" catchtouchmove="onCropTouchMove" catchtouchend="onCropTouchEnd"></view>
            <view class="crop-handle crop-handle-br" data-handle="bottom-right" catchtouchstart="startCropDrag" catchtouchmove="onCropTouchMove" catchtouchend="onCropTouchEnd"></view>
          </view>
        </view>
      </view>
      </view>
    </view>

  <!-- 工具按钮栏 -->
  <view class="edit-toolbar">
    <view class="edit-tool-group">
      <!-- 旋转按钮 -->
      <view class="tool-btn {{isRotated ? 'active' : ''}}" bindtap="rotateImage" title="旋转">
        <text>🔄</text>
      </view>
      <!-- 还原按钮 -->
      <view class="tool-btn restore-btn {{hasEdits ? 'active' : ''}}" bindtap="restoreOriginal" title="还原">
        <text>↩️</text>
      </view>
      <!-- 裁剪按钮 -->
      <view class="tool-btn {{isCropping ? 'active' : ''}}" bindtap="selectTool" data-tool="crop" title="裁剪">
        <text>✂️</text>
      </view>
      <!-- 马赛克按钮 -->
      <view class="tool-btn {{currentTool === 'mosaic' ? 'active' : ''}}" bindtap="selectTool" data-tool="mosaic" title="马赛克">
        <text>░</text>
      </view>
      <!-- 橡皮按钮 -->
      <view class="tool-btn {{currentTool === 'eraser' ? 'active' : ''}}" bindtap="selectTool" data-tool="eraser" title="橡皮">
        <text>🧽</text>
      </view>
    </view>
  </view>

  <!-- 底部控制栏-->
  <view class="edit-controls">
    <view class="close-btn" bindtap="goBackToShoot">重拍</view>
    <!-- 裁剪模式下的确认/取消按钮 -->
    <view wx:if="{{isCropping}}" class="crop-controls">
      <button 
        type="text" 
        class="edit-control-btn cancel"
        bindtap="cancelCrop"
      >取消</button>
      <button 
        type="text" 
        class="edit-control-btn confirm"
        bindtap="applyCrop"
      >确定</button>
    </view>
    <!-- 非裁剪模式下的使用照片按钮 -->
    <button 
      wx:else
      type="text" 
      class="edit-control-btn confirm"
      bindtap="confirmPhoto"
    >使用照片</button>
  </view>
  </view>
</view>