@xtdev/xt-miniprogram-ui 1.2.79 → 1.2.80

package/libs/xt-uploader/index.js

@@ -2,11 +2,11 @@
 const utils = require('./utils');
 // 节流函数
 function _throttle(fn, wait = 500, isImmediate = false) {
-  var flag = true;
+  let flag = true;
   return function () {
     if (flag == true) {
-      var context = this;
-      var args = arguments;
+      let context = this;
+      let args = arguments;
       flag = false;
       isImmediate && fn.apply(context, args);
       setTimeout(() => {
@@ -74,13 +74,25 @@ Component({
       type: Object | null,
       value: null,
     },
+    version: { // 版本控制
+      type: String,
+      value: 'v1',
+    },
+    // 每次点击拍摄时 获取水印数据
+    getWatermarkData: {
+      type: Function,
+      value: () => {},
+    },
   },
 
   /**
    * 组件的初始数据
    */
   data: {
+    showCamera: false,
     tempFileList: [], // 临时文件列表
+    // 新版本的水印
+    watermarkData: {},
   },
   /**
    * 初始化本地数据
@@ -152,6 +164,32 @@ Component({
     onUploadError(errMsg) {
       this.triggerEvent('error', { errMsg });
     },
+    onPhotoConfirm(e) {
+      // 确认照片
+      const {tempFilePath} = e.detail;
+      console.log("onPhotoConfirm:", e);
+      let {tempFileList} = this.data;
+      const tempFile = {
+        url: tempFilePath,
+        fileType: 'image',
+        updateStatus: 'uploading',
+        processText: '照片上传中',
+        id: Date.now(),
+      };
+      tempFileList = [...tempFileList, tempFile];
+      this.setData({
+        tempFileList,
+        showCamera: false,
+      });
+
+      this.startUpload({
+        url: tempFilePath,
+        updateStatus: 'uploading'
+      });
+    },
+    onCameraError(e) {
+      console.log("onCameraError:", e);
+    },
     /**
      * 重新上传
      * @param {*} e
@@ -170,14 +208,31 @@ Component({
       });
       this.startUpload(reloadItem);
     },
+    /**
+   * 关闭相机
+   */
+    closeCamera() {
+      this.setData({
+        showCamera: false,
+      });
+    },
     // 点击上传
     startTakePhoto: _throttle(
       function (e) {
         console.log('onStartTakePhoto', e);
         const _this = this;
-        const { customUpload, uploadApi, max, sourceType, fileList, fileType, tempFileList } = this.properties;
+        const { customUpload, uploadApi, max, sourceType, fileList, fileType, tempFileList, version } = this.properties;
+        if (version === 'v2') {
+          _this.properties.getWatermarkData().then(watermarkData => {
+            _this.setData({
+              showCamera: true,
+              watermarkData,
+            });
+          })
+          return  false;
+        }
         if (customUpload) {
-          this.triggerEvent('upload', {});
+          _this.triggerEvent('upload', {});
           return;
         }
         if (!uploadApi || !uploadApi.url) {

package/libs/xt-uploader/index.json

@@ -1,5 +1,7 @@
 {
     "component": true,
 	"styleIsolation": "apply-shared",
-	"usingComponents": {}
+	"usingComponents": {
+		"xt-water-camera": "../xt-water-camera/index"
+	}
 }

package/libs/xt-uploader/index.wxml

@@ -51,3 +51,7 @@
     </view>
   </view>
 </view>
+  <!-- 相机页面 -->
+<xt-water-camera wx:if="{{showCamera}}" watermarkType="banquet" watermarkData="{{watermarkData}}" bind:confirm="onPhotoConfirm" bind:error="onCameraError" />
+
+

package/libs/xt-uploader/index.wxss

@@ -136,3 +136,39 @@
     width: 100%;
   }
 }
+
+.camera-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+  display: flex;
+  flex-direction: column;
+}
+
+.camera-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx;
+  padding-top: calc(20rpx + env(safe-area-inset-top));
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+
+}
+
+.back-btn {
+  color: #fff;
+  font-size: 28rpx;
+  padding: 16rpx 24rpx;
+}
+.camera-body {
+  flex: 1;
+  position: relative;
+}

package/libs/xt-water-camera/index.js

@@ -0,0 +1,522 @@
+/**
+ * 水印相机组件
+ * 所有水印内容通过 watermarkData 传入
+ */
+
+/**
+ * watermarkData 支持的字段：
+ * - tagText: string        顶部标签文字，如 "宴席执行"、"常规陈列"
+ * - personTitle: string    人员标题，如 "潭小二"、"商小二"
+ * - personName: string     人员名称
+ * - businessInfo: string   业务信息，如 "红潭宴席：12桌｜开瓶8瓶"
+ * - highlightText: string  高亮文字（绿色）
+ * - shopName: string       店铺名称
+ * - address: string        地址（不传则自动定位）
+ * - serviceName: string    服务商名称
+ * - codeText: string       编号行完整文本，如 "宴席编号：YX2601074295"
+ * - timeWarning: boolean   时间异常标签
+ * - locationWarning: boolean 位置异常标签
+ */
+
+Component({
+  properties: {
+    // 水印数据
+    watermarkData: {
+      type: Object,
+      value: {},
+    },
+    // 闪光灯模式：auto/on/off/torch
+    flash: {
+      type: String,
+      value: 'off',
+    },
+  },
+
+  data: {
+    currentTime: '', // 当前时间 HH:mm
+    currentDateTime: '', // 完整日期时间
+    previewImage: '', // 预览图片路径
+    isLoading: false,
+    systemInfo: null,
+    dpr: 2,
+  },
+
+  lifetimes: {
+    attached() {
+      this.initComponent();
+    },
+    detached() {
+      this.cleanup();
+    },
+  },
+
+  methods: {
+    /**
+     * 初始化组件
+     */
+    initComponent() {
+      // 获取系统信息
+      const systemInfo = wx.getSystemInfoSync();
+      this.setData({
+        systemInfo,
+        dpr: systemInfo.pixelRatio || 2,
+      });
+
+      // 初始化相机
+      this.cameraContext = wx.createCameraContext();
+
+      // 启动时钟
+      this.startClock();
+    },
+
+    /**
+     * 启动时钟
+     */
+    startClock() {
+      const {watermarkData} = this.properties;
+      const {currentTime = Date.now()} = watermarkData;
+      const updateTime = () => {
+        const now = new Date(currentTime);
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const day = String(now.getDate()).padStart(2, '0');
+
+        this.setData({
+          currentTime: `${hours}:${minutes}`,
+          currentDateTime: `${year}年${month}月${day}日${hours}:${minutes}`,
+        });
+      };
+
+      updateTime();
+      this.clockInterval = setInterval(updateTime, 1000);
+    },
+
+
+    /**
+     * 拍照
+     */
+    takePhoto() {
+      if (this.data.isLoading) return;
+
+      this.setData({ isLoading: true });
+
+      this.cameraContext.takePhoto({
+        quality: 'high',
+        success: res => {
+          this.processPhoto(res.tempImagePath);
+        },
+        fail: err => {
+          console.error('拍照失败:', err);
+          this.setData({ isLoading: false });
+          wx.showToast({
+            title: '拍照失败',
+            icon: 'error',
+          });
+        },
+      });
+    },
+
+    /**
+     * 处理照片 - 合成水印
+     */
+    async processPhoto(imagePath) {
+      try {
+        // 获取图片信息
+        const imgInfo = await this.getImageInfo(imagePath);
+
+        // 创建带水印的图片
+        const finalImagePath = await this.createWatermarkedImage(imagePath, imgInfo);
+
+        this.setData({
+          previewImage: finalImagePath,
+          isLoading: false,
+        });
+      } catch (error) {
+        console.error('处理照片失败:', error);
+        this.setData({ isLoading: false });
+        wx.showToast({
+          title: '处理失败',
+          icon: 'error',
+        });
+      }
+    },
+
+    /**
+     * 获取图片信息
+     */
+    getImageInfo(imagePath) {
+      return new Promise((resolve, reject) => {
+        wx.getImageInfo({
+          src: imagePath,
+          success: resolve,
+          fail: reject,
+        });
+      });
+    },
+
+    /**
+     * 创建带水印的图片
+     */
+    createWatermarkedImage(imagePath, imgInfo) {
+      return new Promise((resolve, reject) => {
+        const query = this.createSelectorQuery();
+        query
+          .select('#watermarkCanvas')
+          .fields({ node: true, size: true })
+          .exec(res => {
+            if (!res[0] || !res[0].node) {
+              // 使用离屏Canvas
+              this.createWithOffscreenCanvas(imagePath, imgInfo).then(resolve).catch(reject);
+              return;
+            }
+
+            const canvas = res[0].node;
+            const ctx = canvas.getContext('2d');
+
+            // 设置Canvas尺寸
+            canvas.width = imgInfo.width;
+            canvas.height = imgInfo.height;
+
+            // 加载并绘制图片
+            const img = canvas.createImage();
+            img.src = imagePath;
+
+            img.onload = () => {
+              ctx.drawImage(img, 0, 0, imgInfo.width, imgInfo.height);
+              this.drawWatermark(ctx, imgInfo.width, imgInfo.height);
+
+              wx.canvasToTempFilePath({
+                canvas,
+                success: result => resolve(result.tempFilePath),
+                fail: reject,
+              });
+            };
+
+            img.onerror = reject;
+          });
+      });
+    },
+
+    /**
+     * 使用离屏Canvas创建水印图片
+     */
+    createWithOffscreenCanvas(imagePath, imgInfo) {
+      return new Promise((resolve, reject) => {
+        const canvas = wx.createOffscreenCanvas({
+          type: '2d',
+          width: imgInfo.width,
+          height: imgInfo.height,
+        });
+
+        const ctx = canvas.getContext('2d');
+        canvas.width = imgInfo.width;
+        canvas.height = imgInfo.height;
+
+        const img = canvas.createImage();
+        img.src = imagePath;
+
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, imgInfo.width, imgInfo.height);
+          this.drawWatermark(ctx, imgInfo.width, imgInfo.height);
+
+          wx.canvasToTempFilePath({
+            canvas,
+            success: result => resolve(result.tempFilePath),
+            fail: reject,
+          });
+        };
+
+        img.onerror = reject;
+      });
+    },
+
+    /**
+     * 绘制圆角矩形（兼容方法）
+     * @param {CanvasRenderingContext2D} ctx Canvas上下文
+     * @param {number} x 左上角x坐标
+     * @param {number} y 左上角y坐标
+     * @param {number} w 宽度
+     * @param {number} h 高度
+     * @param {number|number[]} r 圆角半径，可以是数字或数组 [左上, 右上, 右下, 左下]
+     */
+    drawRoundRect(ctx, x, y, w, h, r) {
+      let radiusTL, radiusTR, radiusBR, radiusBL;
+
+      if (typeof r === 'number') {
+        radiusTL = radiusTR = radiusBR = radiusBL = r;
+      } else if (Array.isArray(r)) {
+        [radiusTL = 0, radiusTR = 0, radiusBR = 0, radiusBL = 0] = r;
+      } else {
+        radiusTL = radiusTR = radiusBR = radiusBL = 0;
+      }
+
+      ctx.beginPath();
+      ctx.moveTo(x + radiusTL, y);
+      ctx.lineTo(x + w - radiusTR, y);
+      if (radiusTR > 0) {
+        ctx.arcTo(x + w, y, x + w, y + radiusTR, radiusTR);
+      }
+      ctx.lineTo(x + w, y + h - radiusBR);
+      if (radiusBR > 0) {
+        ctx.arcTo(x + w, y + h, x + w - radiusBR, y + h, radiusBR);
+      }
+      ctx.lineTo(x + radiusBL, y + h);
+      if (radiusBL > 0) {
+        ctx.arcTo(x, y + h, x, y + h - radiusBL, radiusBL);
+      }
+      ctx.lineTo(x, y + radiusTL);
+      if (radiusTL > 0) {
+        ctx.arcTo(x, y, x + radiusTL, y, radiusTL);
+      }
+      ctx.closePath();
+    },
+
+    /**
+     * 绘制水印
+     */
+    drawWatermark(ctx, width, height) {
+      // 使用短边作为参考，确保横屏和竖屏时水印大小一致
+      const shortSide = Math.min(width, height);
+      const scale = shortSide / 750; // 以750rpx为基准计算缩放比
+      const isLandscape = width > height; // 是否横屏
+
+      const { watermarkData, currentTime, currentDateTime } = this.data;
+      const tagText = watermarkData.tagText || '拍照记录';
+      const tagColor = '#7b2d8e'; // 固定紫色
+
+      // ============ 尺寸参数（与CSS保持一致）============
+      const radius = 8 * scale;
+      const tagPaddingV = 12 * scale; // 标签垂直padding
+      const tagPaddingH = 24 * scale; // 标签水平padding
+      const tagFontSize = 40 * scale; // 标签字体大小
+      const timeFontSize = 40 * scale; // 时间字体大小
+
+      const infoPaddingV = 24 * scale; // 信息区垂直padding
+      const infoPaddingH = 20 * scale; // 信息区水平padding
+      const infoX = 16 * scale; // 距离左边16rpx
+
+      // 文字尺寸
+      const nameFontSize = 40 * scale;
+      const businessFontSize = 30 * scale;
+      const infoFontSize = 24 * scale;
+
+      // 警告标签尺寸
+      const warningFontSize = 20 * scale;
+      const warningPaddingH = 12 * scale;
+      const warningPaddingV = 4 * scale;
+      const warningRadius = 4 * scale;
+      const warningMarginRight = 8 * scale;
+
+      // 行间距
+      const nameRowMargin = 16 * scale;
+      const businessRowMargin = 16 * scale;
+      const infoRowMargin = 12 * scale;
+
+      // ============ 计算信息区高度 ============
+      let infoContentHeight = infoPaddingV * 2; // 上下padding
+      infoContentHeight += nameFontSize + nameRowMargin; // 人员名称行
+      if (watermarkData.businessInfo) {
+        infoContentHeight += businessFontSize + businessRowMargin; // 业务信息行
+      }
+      if (watermarkData.shopName) {
+        infoContentHeight += infoFontSize + infoRowMargin; // 店铺名称行
+      }
+      infoContentHeight += infoFontSize + infoRowMargin; // 日期时间行
+      infoContentHeight += infoFontSize + infoRowMargin; // 地址行
+      if (watermarkData.serviceName) {
+        infoContentHeight += infoFontSize + infoRowMargin; // 服务商行
+      }
+      if (watermarkData.codeText) {
+        infoContentHeight += infoFontSize; // 编号行（最后一行不加间距）
+      }
+
+      const infoAreaHeight = infoContentHeight;
+      // 横屏时信息区宽度按短边的85%计算，避免太宽
+      const infoAreaWidth = isLandscape ? shortSide * 0.85 : width * 0.85;
+      const infoY = height - infoAreaHeight - 16 * scale; // 距离底部16rpx
+
+      // ============ 绘制标签（在info-container上方16rpx） ============
+      ctx.font = `bold ${tagFontSize}px "PingFang SC", sans-serif`;
+      const tagTextWidth = ctx.measureText(tagText).width;
+      const tagWidth = tagTextWidth + tagPaddingH * 2;
+      const tagHeight = tagFontSize + tagPaddingV * 2;
+
+      const tagX = infoX; // 与info-container左对齐
+      const tagY = infoY - tagHeight - 16 * scale; // 在info-container上方16rpx
+
+      // 标签背景（左上和左下圆角）
+      ctx.fillStyle = tagColor;
+      this.drawRoundRect(ctx, tagX, tagY, tagWidth, tagHeight, [radius, 0, 0, radius]);
+      ctx.fill();
+
+      // 标签文字
+      ctx.fillStyle = '#ffffff';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(tagText, tagX + tagPaddingH, tagY + tagHeight / 2);
+
+      // 时间背景（右上和右下圆角）
+      ctx.font = `bold ${timeFontSize}px "PingFang SC", sans-serif`;
+      const timeTextWidth = ctx.measureText(currentTime).width;
+      const timeWidth = timeTextWidth + tagPaddingH * 2;
+
+      ctx.fillStyle = '#ffffff';
+      this.drawRoundRect(ctx, tagX + tagWidth, tagY, timeWidth, tagHeight, [0, radius, radius, 0]);
+      ctx.fill();
+
+      // 时间文字
+      ctx.fillStyle = '#333333';
+      ctx.fillText(currentTime, tagX + tagWidth + tagPaddingH, tagY + tagHeight / 2);
+
+      // ============ 绘制信息区背景 ============
+      // 渐变背景（从左到右，90deg）
+      const gradient = ctx.createLinearGradient(infoX, infoY, infoX + infoAreaWidth, infoY);
+      gradient.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = gradient;
+      this.drawRoundRect(ctx, infoX, infoY, infoAreaWidth, infoAreaHeight, radius);
+      ctx.fill();
+
+      // ============ 绘制信息区文字 ============
+      let currentY = infoY + infoPaddingV;
+      const textX = infoX + infoPaddingH;
+      ctx.textBaseline = 'top';
+
+      // 人员名称（黄色）
+      ctx.font = `bold ${nameFontSize}px "PingFang SC", sans-serif`;
+      ctx.fillStyle = '#ffffff';
+      const personText = `${watermarkData.personTitle || '潭小二'}：${watermarkData.personName || '--'}`;
+      ctx.fillText(personText, textX, currentY);
+      currentY += nameFontSize + nameRowMargin;
+
+      // 业务信息行
+      if (watermarkData.businessInfo) {
+        ctx.font = `${businessFontSize}px "PingFang SC", sans-serif`;
+        ctx.fillStyle = '#ffffff';
+        ctx.fillText(watermarkData.businessInfo, textX, currentY);
+
+        // 高亮文字
+        if (watermarkData.highlightText) {
+          const businessWidth = ctx.measureText(watermarkData.businessInfo).width;
+          ctx.fillStyle = '#00ff00';
+          ctx.fillText(watermarkData.highlightText, textX + businessWidth + 8 * scale, currentY);
+        }
+        currentY += businessFontSize + businessRowMargin;
+      }
+
+      // 店铺名称
+      if (watermarkData.shopName) {
+        ctx.font = `${businessFontSize}px "PingFang SC", sans-serif`;
+        ctx.fillStyle = '#ffffff';
+        ctx.fillText(watermarkData.shopName, textX, currentY);
+        currentY += businessFontSize + infoRowMargin;
+      }
+
+      // 日期时间（可能带时间异常标签）
+      let dateTimeX = textX;
+      if (watermarkData.timeWarning) {
+        // 绘制时间异常标签
+        ctx.font = `${warningFontSize}px "PingFang SC", sans-serif`;
+        const warningText = '时间异常';
+        const warningTextWidth = ctx.measureText(warningText).width;
+        const warningTagWidth = warningTextWidth + warningPaddingH * 2;
+        const warningTagHeight = warningFontSize + warningPaddingV * 2;
+
+        ctx.fillStyle = '#ff4d4f';
+        this.drawRoundRect(ctx, textX, currentY, warningTagWidth, warningTagHeight, warningRadius);
+        ctx.fill();
+
+        ctx.fillStyle = '#ffffff';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(warningText, textX + warningPaddingH, currentY + warningTagHeight / 2);
+        ctx.textBaseline = 'top';
+
+        dateTimeX = textX + warningTagWidth + warningMarginRight;
+      }
+      ctx.font = `${infoFontSize}px "PingFang SC", sans-serif`;
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText(currentDateTime, dateTimeX, currentY);
+      currentY += infoFontSize + infoRowMargin;
+
+      // 地址（可能带位置异常标签）
+      let addressX = textX;
+      if (watermarkData.locationWarning) {
+        // 绘制位置异常标签
+        ctx.font = `${warningFontSize}px "PingFang SC", sans-serif`;
+        const warningText = '位置异常';
+        const warningTextWidth = ctx.measureText(warningText).width;
+        const warningTagWidth = warningTextWidth + warningPaddingH * 2;
+        const warningTagHeight = warningFontSize + warningPaddingV * 2;
+
+        ctx.fillStyle = '#ff4d4f';
+        this.drawRoundRect(ctx, textX, currentY, warningTagWidth, warningTagHeight, warningRadius);
+        ctx.fill();
+
+        ctx.fillStyle = '#ffffff';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(warningText, textX + warningPaddingH, currentY + warningTagHeight / 2);
+        ctx.textBaseline = 'top';
+
+        addressX = textX + warningTagWidth + warningMarginRight;
+      }
+      const address = watermarkData.address;
+      ctx.font = `${infoFontSize}px "PingFang SC", sans-serif`;
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText(address, addressX, currentY);
+      currentY += infoFontSize + infoRowMargin;
+
+      // 服务商
+      if (watermarkData.serviceName) {
+        ctx.fillText(`服务商：${watermarkData.serviceName}`, textX, currentY);
+        currentY += infoFontSize + infoRowMargin;
+      }
+
+      // 编号行（直接显示完整文本）
+      if (watermarkData.codeText) {
+        ctx.fillText(watermarkData.codeText, textX, currentY);
+      }
+    },
+
+    /**
+     * 重拍
+     */
+    retakePhoto() {
+      this.setData({
+        previewImage: '',
+      });
+    },
+
+    /**
+     * 确认使用照片
+     */
+    confirmPhoto() {
+      const { previewImage } = this.data;
+      if (!previewImage) return;
+
+      // 触发事件，将图片路径传递给父组件
+      this.triggerEvent('confirm', {
+        tempFilePath: previewImage,
+        watermarkData: this.properties.watermarkData,
+      });
+    },
+
+    /**
+     * 相机错误处理
+     */
+    onCameraError(e) {
+      console.error('相机错误:', e.detail);
+      this.triggerEvent('error', e.detail);
+    },
+
+    /**
+     * 清理资源
+     */
+    cleanup() {
+      if (this.clockInterval) {
+        clearInterval(this.clockInterval);
+        this.clockInterval = null;
+      }
+    },
+  },
+});

package/libs/xt-water-camera/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/libs/xt-water-camera/index.scss

@@ -0,0 +1,250 @@
+.watermark-camera-container {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  background-color: #000;
+}
+
+// 相机区域
+.camera-section {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .camera {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// 水印预览层
+.watermark-preview-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 120rpx;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+// 标签容器（在info-container上方）
+.tag-container {
+  display: flex;
+  align-items: center;
+  margin-left: 16rpx;
+  margin-bottom: 16rpx;
+
+  .tag-label {
+    padding: 12rpx 24rpx;
+    background-color: #7b2d8e;
+    color: #fff;
+    font-size: 40rpx;
+    font-weight: bold;
+    border-radius: 8rpx 0 0 8rpx;
+  }
+
+  .tag-time {
+    padding: 12rpx 24rpx;
+    background-color: #fff;
+    color: #333;
+    font-size: 40rpx;
+    font-weight: bold;
+    border-radius: 0 8rpx 8rpx 0;
+  }
+}
+
+// 底部信息区
+.info-container {
+  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.5;
+  padding: 24rpx 20rpx;
+  margin-left: 16rpx;
+  margin-bottom: 16rpx;
+  border-radius: 8rpx;
+  font-weight: 800;
+}
+
+.info-row {
+  margin-bottom: 8rpx;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 34rpx;
+  margin-bottom: 2rpx;
+
+  &.name-row {
+    line-height: 56rpx;
+  }
+
+  &.business-row {
+    line-height: 42rpx;
+  }
+}
+
+.name-text {
+  color: #FFFFFF;
+  font-size: 40rpx;
+  font-weight: bold;
+}
+
+.business-text {
+  color: #fff;
+  font-size: 30rpx;
+}
+
+.highlight-text {
+  color: #00ff00;
+  font-size: 28rpx;
+  margin-left: 8rpx;
+}
+
+.info-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+
+.warning-tag {
+  display: inline-block;
+  background-color: #ff4d4f;
+  color: #fff;
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+  margin-right: 8rpx;
+}
+
+// 拍照按钮
+.shutter-area {
+  position: absolute;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.shutter-btn {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 6rpx solid #fff;
+
+  .shutter-inner {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+
+  &:active {
+    transform: scale(0.95);
+
+    .shutter-inner {
+      background-color: #ddd;
+    }
+  }
+}
+
+// 预览区域
+.preview-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #000;
+
+  .preview-image {
+    flex: 1;
+    width: 100%;
+  }
+
+  .preview-buttons {
+    display: flex;
+    padding: 30rpx 40rpx;
+    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+    background-color: #000;
+
+    .btn-retake,
+    .btn-confirm {
+      flex: 1;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      font-size: 32rpx;
+      border-radius: 44rpx;
+      margin: 0 20rpx;
+    }
+
+    .btn-retake {
+      background-color: #333;
+      color: #fff;
+    }
+
+    .btn-confirm {
+      background-color: #7b2d8e;
+      color: #fff;
+    }
+  }
+}
+
+// 离屏Canvas
+.offscreen-canvas {
+  position: fixed;
+  left: -9999rpx;
+  top: -9999rpx;
+  width: 1px;
+  height: 1px;
+}
+
+// 加载提示
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+.loading-spinner {
+  width: 80rpx;
+  height: 80rpx;
+  border: 6rpx solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  color: #fff;
+  font-size: 28rpx;
+  margin-top: 20rpx;
+}

package/libs/xt-water-camera/index.wxml

@@ -0,0 +1,82 @@
+<view class="watermark-camera-container">
+  <!-- 相机区域 -->
+  <view class="camera-section" wx:if="{{!previewImage}}">
+    <camera device-position="back" flash="{{flash}}" class="camera" binderror="onCameraError" />
+
+    <!-- 实时水印预览层 -->
+    <view class="watermark-preview-layer">
+      <!-- 左上角标签 -->
+      <view class="tag-container">
+        <view class="tag-label">{{watermarkData.tagText || '拍照记录'}}</view>
+        <view class="tag-time">{{currentTime}}</view>
+      </view>
+
+      <!-- 底部信息区 -->
+      <view class="info-container">
+        <!-- 人员名称 -->
+        <view class="info-row name-row">
+          <text class="name-text">{{watermarkData.personTitle || '潭小二'}}：{{watermarkData.personName || '--'}}</text>
+        </view>
+
+        <!-- 业务信息行 -->
+        <view class="info-row business-row" wx:if="{{watermarkData.businessInfo}}">
+          <text class="business-text">{{watermarkData.businessInfo}}</text>
+          <text wx:if="{{watermarkData.highlightText}}" class="highlight-text">{{watermarkData.highlightText}}</text>
+        </view>
+
+        <!-- 店铺名称 -->
+        <view class="info-row business-row" wx:if="{{watermarkData.shopName}}">
+          <text class="business-text">{{watermarkData.shopName}}</text>
+        </view>
+
+        <!-- 日期时间 -->
+        <view class="info-row">
+          <text wx:if="{{watermarkData.timeWarning}}" class="warning-tag">时间异常</text>
+          <text class="info-text">{{currentDateTime}}</text>
+        </view>
+
+        <!-- 地址 -->
+        <view class="info-row">
+          <text wx:if="{{watermarkData.locationWarning}}" class="warning-tag">位置异常</text>
+          <text class="info-text">{{watermarkData.address || currentAddress}}</text>
+        </view>
+
+        <!-- 服务商 -->
+        <view class="info-row" wx:if="{{watermarkData.serviceName}}">
+          <text class="info-text">服务商：{{watermarkData.serviceName}}</text>
+        </view>
+
+        <!-- 编号行 -->
+        <view class="info-row" wx:if="{{watermarkData.codeText}}">
+          <text class="info-text">{{watermarkData.codeText}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 拍照按钮 -->
+    <view class="shutter-area">
+      <view class="shutter-btn" bindtap="takePhoto">
+        <view class="shutter-inner"></view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 预览区域 -->
+  <view class="preview-section" wx:if="{{previewImage}}">
+    <image src="{{previewImage}}" mode="aspectFit" class="preview-image" />
+
+    <view class="preview-buttons">
+      <view class="btn-retake" bindtap="retakePhoto">重拍</view>
+      <view class="btn-confirm" bindtap="confirmPhoto">确认使用</view>
+    </view>
+  </view>
+
+  <!-- 离屏Canvas用于合成水印 -->
+  <canvas type="2d" id="watermarkCanvas" class="offscreen-canvas" />
+
+  <!-- 加载提示 -->
+  <view wx:if="{{isLoading}}" class="loading-overlay">
+    <view class="loading-spinner"></view>
+    <text class="loading-text">正在生成水印图片...</text>
+  </view>
+</view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.2.79",
+  "version": "1.2.80",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {