haha/haha-admin-mp/src/components/WatermarkCamera.vue

<template>
  <view class="watermark-camera">
    <view class="camera-container" v-if="!previewImage">
      <view class="camera-placeholder" @click="handleTakePhoto">
        <view class="camera-icon">
          <view class="camera-body"></view>
          <view class="camera-lens"></view>
        </view>
        <text class="camera-text">点击拍照</text>
      </view>
      
      <view class="watermark-preview">
        <view class="watermark-item">
          <text class="watermark-label">时间:</text>
          <text class="watermark-value">{{ watermarkConfig.time }}</text>
        </view>
        <view class="watermark-item">
          <text class="watermark-label">位置:</text>
          <text class="watermark-value">{{ watermarkConfig.location }}</text>
        </view>
        <view class="watermark-item">
          <text class="watermark-label">人员:</text>
          <text class="watermark-value">{{ watermarkConfig.userName }} ({{ watermarkConfig.userNo }})</text>
        </view>
        <view class="watermark-item">
          <text class="watermark-label">类型:</text>
          <text class="watermark-value">{{ watermarkConfig.checkinType }}</text>
        </view>
      </view>
    </view>
    
    <view class="preview-container" v-else>
      <image 
        class="preview-image" 
        :src="previewImage" 
        mode="aspectFit"
        @click="handlePreview"
      />
      
      <view class="watermark-overlay">
        <view class="watermark-info">
          <view class="watermark-row">
            <text class="wm-label">时间:</text>
            <text class="wm-value">{{ watermarkConfig.time }}</text>
          </view>
          <view class="watermark-row">
            <text class="wm-label">位置:</text>
            <text class="wm-value">{{ watermarkConfig.location.split('\n')[0] }}</text>
          </view>
          <view class="watermark-row">
            <text class="wm-label">地址:</text>
            <text class="wm-value">{{ watermarkConfig.location.split('\n')[1] || watermarkConfig.location }}</text>
          </view>
          <view class="watermark-row">
            <text class="wm-label">人员:</text>
            <text class="wm-value">{{ watermarkConfig.userName }} ({{ watermarkConfig.userNo }})</text>
          </view>
          <view class="watermark-row">
            <text class="wm-label">类型:</text>
            <text class="wm-value">{{ watermarkConfig.checkinType }}</text>
          </view>
        </view>
      </view>
      
      <view class="preview-actions">
        <view class="action-btn retake" @click="handleRetake">
          <view class="btn-icon retake-icon"></view>
          <text class="btn-text">重拍</text>
        </view>
        <view class="action-btn confirm" @click="handleConfirm">
          <view class="btn-icon confirm-icon"></view>
          <text class="btn-text">确认</text>
        </view>
      </view>
    </view>
    
    <canvas 
      canvas-id="watermarkCanvas" 
      class="watermark-canvas"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { CheckinType } from '@/api/checkin';
import type { LocationInfo } from '@/api/checkin';
import { 
  createWatermarkConfig, 
  formatWatermarkTime, 
  formatWatermarkLocation,
  getCheckinTypeName 
} from '@/utils/checkin';
import { getUserInfo } from '@/utils/auth';

interface Props {
  checkinType: CheckinType;
  location: LocationInfo;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'confirm', photo: { path: string; watermarkPath: string }): void;
  (e: 'cancel'): void;
}>();

const previewImage = ref('');
const canvasWidth = ref(750);
const canvasHeight = ref(1000);

const watermarkConfig = computed(() => {
  const userInfo = getUserInfo() || { nickname: '未知用户', userNo: 'N/A' };
  return {
    time: formatWatermarkTime(),
    location: formatWatermarkLocation(props.location),
    userName: userInfo.nickname || userInfo.username || '未知用户',
    userNo: userInfo.userNo || 'N/A',
    checkinType: getCheckinTypeName(props.checkinType)
  };
});

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  canvasWidth.value = systemInfo.windowWidth * 2;
  canvasHeight.value = systemInfo.windowWidth * 2 * 1.33;
});

watch(() => props.location, () => {
}, { deep: true });

const handleTakePhoto = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['camera'],
    success: (res) => {
      previewImage.value = res.tempFilePaths[0];
    },
    fail: (err) => {
      console.error('拍照失败', err);
      uni.showToast({
        title: '拍照失败',
        icon: 'none'
      });
    }
  });
};

const handlePreview = () => {
  if (previewImage.value) {
    uni.previewImage({
      urls: [previewImage.value],
      current: previewImage.value
    });
  }
};

const handleRetake = () => {
  previewImage.value = '';
};

const handleConfirm = () => {
  if (!previewImage.value) {
    uni.showToast({
      title: '请先拍照',
      icon: 'none'
    });
    return;
  }
  
  emit('confirm', {
    path: previewImage.value,
    watermarkPath: previewImage.value
  });
};
</script>

<style lang="scss" scoped>
.watermark-camera {
  width: 100%;
}

.camera-container {
  width: 100%;
}

.camera-placeholder {
  width: 100%;
  height: 400rpx;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2rpx dashed #0ea5e9;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  }
}

.camera-icon {
  position: relative;
  width: 80rpx;
  height: 60rpx;
  margin-bottom: 16rpx;
  
  .camera-body {
    width: 80rpx;
    height: 50rpx;
    background: #0ea5e9;
    border-radius: 10rpx;
    position: absolute;
    bottom: 0;
  }
  
  .camera-lens {
    width: 30rpx;
    height: 30rpx;
    background: $bg-color-card;
    border: 4rpx solid #0ea5e9;
    border-radius: 50%;
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.camera-text {
  font-size: 28rpx;
  color: #0ea5e9;
  font-weight: 500;
}

.watermark-preview {
  margin-top: 24rpx;
  padding: 24rpx;
  background: #f8fafc;
  border-radius: 16rpx;
}

.watermark-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.watermark-label {
  font-size: 24rpx;
  color: #64748b;
  width: 80rpx;
  flex-shrink: 0;
}

.watermark-value {
  font-size: 24rpx;
  color: #1e293b;
  flex: 1;
  word-break: break-all;
}

.preview-container {
  width: 100%;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 500rpx;
  border-radius: 16rpx;
  background: #f1f5f9;
}

.watermark-overlay {
  position: absolute;
  bottom: 120rpx;
  left: 0;
  right: 0;
  padding: 0 24rpx;
  pointer-events: none;
}

.watermark-info {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12rpx;
  padding: 20rpx;
}

.watermark-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.wm-label {
  font-size: 22rpx;
  color: #94a3b8;
  width: 70rpx;
  flex-shrink: 0;
}

.wm-value {
  font-size: 22rpx;
  color: $bg-color-card;
  flex: 1;
}

.preview-actions {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-top: 32rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &:active {
    opacity: 0.7;
  }
}

.btn-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  
  &.retake-icon {
    background: #f1f5f9;
    position: relative;
    
    &::before {
      content: '';
      width: 24rpx;
      height: 24rpx;
      border-left: 4rpx solid #64748b;
      border-bottom: 4rpx solid #64748b;
      transform: rotate(45deg);
      margin-left: 8rpx;
    }
  }
  
  &.confirm-icon {
    background: $primary-color;
    position: relative;
    
    &::before {
      content: '';
      width: 20rpx;
      height: 12rpx;
      border-left: 4rpx solid $bg-color-card;
      border-bottom: 4rpx solid $bg-color-card;
      transform: rotate(-45deg);
      margin-top: -8rpx;
    }
  }
}

.btn-text {
  font-size: 24rpx;
  color: #475569;
  
  .confirm & {
    color: $primary-color;
    font-weight: 500;
  }
}

.watermark-canvas {
  position: fixed;
  left: -9999rpx;
  top: -9999rpx;
}
</style>