@xtdev/xt-miniprogram-ui 1.2.86 → 1.2.88

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

@@ -25,24 +25,24 @@ Component({
       type: Object,
       value: {},
     },
-    // 闪光灯模式：auto/on/off/torch
-    flash: {
-      type: String,
-      value: 'off',
-    },
   },
 
   data: {
-    currentTime: '', // 当前时间 HH:mm
+    currentTime: "", // 当前时间
+    currentHours: '', // 当前时间 HH
+    currentMinutes: '', // 当前时间 mm
     currentDateTime: '', // 完整日期时间
     previewImage: '', // 预览图片路径
     isLoading: false,
     systemInfo: null,
     dpr: 2,
+    devicePosition: "back", // 摄像头位置 back: 后置 front: 前置
+    flashlight: 'off', // 闪光灯 auto/on/off/torch
   },
 
   lifetimes: {
     attached() {
+      this.initFont();
       this.initComponent();
     },
     detached() {
@@ -51,6 +51,41 @@ Component({
   },
 
   methods: {
+    initFont() {
+      wx.loadFontFace({
+        family: 'FengTan-Regular', // 注意：这里的名称要和下面使用时完全一致
+        source: 'url("https://img.tanjiu.cn/home/C706753403526887.ttf")',
+        success: () => {
+          console.log('字体加载成功');
+        },
+        fail: (err) => {
+          console.error('字体加载失败', err);
+        }
+      });
+    },
+    /**
+     * 翻转摄像头
+     */
+    switchCamera() {
+      const { devicePosition } = this.data;
+      this.setData({
+        devicePosition: devicePosition === 'back' ? 'front' : 'back'
+      });
+    },
+    /**
+     * 开关闪光灯
+     */
+    switchFlashLight() {
+      let { flashlight } = this.data;
+      flashlight = flashlight === 'off' ? 'on' : 'off';
+      this.setData({
+        flashlight
+      });
+      wx.showToast({
+        title: flashlight === 'off' ? '闪光灯已关闭' : '闪光灯已开启',
+        icon: 'none'
+      });
+    },
     /**
      * 初始化组件
      */
@@ -89,6 +124,8 @@ Component({
 
         this.setData({
           currentTime: `${hours}:${minutes}`,
+          currentHours: hours,
+          currentMinutes: minutes,
           currentDateTime: `${year}年${month}月${day}日${hours}:${minutes}`,
         });
       };
@@ -101,7 +138,7 @@ Component({
      * 拍照
      */
     takePhoto() {
-      if (this.data.isLoading) return;
+      if (this.data.isLoading) {return;}
 
       this.setData({ isLoading: true });
 
@@ -171,7 +208,8 @@ Component({
           .exec(res => {
             if (!res[0] || !res[0].node) {
               // 使用离屏Canvas
-              this.createWithOffscreenCanvas(imagePath, imgInfo).then(resolve).catch(reject);
+              this.createWithOffscreenCanvas(imagePath, imgInfo).then(resolve)
+                .catch(reject);
               return;
             }
 
@@ -284,19 +322,19 @@ Component({
       const shortSide = Math.min(width, height);
       const scale = shortSide / 750; // 以750rpx为基准计算缩放比
 
-      const { watermarkData, currentTime, currentDateTime } = this.data;
+      const { watermarkData, currentHours, currentMinutes, 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 tagPaddingH = 12 * scale; // 标签水平padding
       const tagFontSize = 40 * scale; // 标签字体大小
-      const timeFontSize = 40 * scale; // 时间字体大小
+      const timeFontSize = 48 * scale; // 时间字体大小
 
-      const infoPaddingV = 24 * scale; // 信息区垂直padding
-      const infoPaddingH = 20 * scale; // 信息区水平padding
+      const infoPaddingV = 16 * scale; // 信息区垂直padding
+      const infoPaddingH = 16 * scale; // 信息区水平padding
       const infoX = 16 * scale; // 距离左边16rpx
 
       // 文字尺寸
@@ -306,7 +344,7 @@ Component({
 
       // 警告标签尺寸
       const warningFontSize = 20 * scale;
-      const warningPaddingH = 12 * scale;
+      const warningPaddingH = 8 * scale;
       const warningPaddingV = 4 * scale;
       const warningRadius = 4 * scale;
       const warningMarginRight = 8 * scale;
@@ -345,7 +383,7 @@ Component({
       const tagHeight = tagFontSize + tagPaddingV * 2;
 
       const tagX = infoX; // 与info-container左对齐
-      const tagY = infoY - tagHeight - 16 * scale; // 在info-container上方16rpx
+      const tagY = infoY - tagHeight - 12 * scale; // 在info-container上方16rpx
 
       // 标签背景（左上和左下圆角）
       ctx.fillStyle = tagColor;
@@ -358,8 +396,8 @@ Component({
       ctx.fillText(tagText, tagX + tagPaddingH, tagY + tagHeight / 2);
 
       // 时间背景（右上和右下圆角）
-      ctx.font = `bold ${timeFontSize}px "PingFang SC", sans-serif`;
-      const timeTextWidth = ctx.measureText(currentTime).width;
+      ctx.font = `bold ${timeFontSize}px "FengTan-Regular"`;
+      const timeTextWidth = ctx.measureText("00:00").width;
       const timeWidth = timeTextWidth + tagPaddingH * 2;
 
       ctx.fillStyle = '#ffffff';
@@ -367,8 +405,13 @@ Component({
       ctx.fill();
 
       // 时间文字
-      ctx.fillStyle = '#333333';
-      ctx.fillText(currentTime, tagX + tagWidth + tagPaddingH, tagY + tagHeight / 2);
+      ctx.fillStyle = '#000000';
+      ctx.fillText(currentHours, tagX + tagWidth + tagPaddingH, tagY + tagHeight / 2 + 2);
+      ctx.fillText(currentMinutes, tagX + tagWidth + tagPaddingH + 70 * scale, tagY + tagHeight / 2 + 2);
+
+      ctx.font = `bold ${nameFontSize}px "PingFang SC", sans-serif`;
+      ctx.fillText(":", tagX + tagWidth + tagPaddingH + 56 * scale, tagY + tagHeight / 2);
+
 
       // ============ 绘制信息区背景 ============
       // 渐变背景（从左到右，90deg）
@@ -393,7 +436,7 @@ Component({
 
       // 业务信息行
       if (watermarkData.businessInfo) {
-        ctx.font = `${businessFontSize}px "PingFang SC", sans-serif`;
+        ctx.font = `bold ${businessFontSize}px "PingFang SC", sans-serif`;
         ctx.fillStyle = '#ffffff';
         ctx.fillText(watermarkData.businessInfo, textX, currentY);
 
@@ -408,7 +451,7 @@ Component({
 
       // 店铺名称
       if (watermarkData.shopName) {
-        ctx.font = `${businessFontSize}px "PingFang SC", sans-serif`;
+        ctx.font = `bold ${businessFontSize}px "PingFang SC", sans-serif`;
         ctx.fillStyle = '#ffffff';
         ctx.fillText(watermarkData.shopName, textX, currentY);
         currentY += businessFontSize + infoRowMargin;
@@ -418,13 +461,13 @@ Component({
       let dateTimeX = textX;
       if (watermarkData.timeWarning) {
         // 绘制时间异常标签
-        ctx.font = `${warningFontSize}px "PingFang SC", sans-serif`;
+        ctx.font = `bold ${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';
+        ctx.fillStyle = '#DB1C1C';
         this.drawRoundRect(ctx, textX, currentY, warningTagWidth, warningTagHeight, warningRadius);
         ctx.fill();
 
@@ -435,7 +478,7 @@ Component({
 
         dateTimeX = textX + warningTagWidth + warningMarginRight;
       }
-      ctx.font = `${infoFontSize}px "PingFang SC", sans-serif`;
+      ctx.font = `bold ${infoFontSize}px "PingFang SC", sans-serif`;
       ctx.fillStyle = '#ffffff';
       ctx.fillText(currentDateTime, dateTimeX, currentY);
       currentY += infoFontSize + infoRowMargin;
@@ -444,13 +487,13 @@ Component({
       let addressX = textX;
       if (watermarkData.locationWarning) {
         // 绘制位置异常标签
-        ctx.font = `${warningFontSize}px "PingFang SC", sans-serif`;
+        ctx.font = `bold ${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';
+        ctx.fillStyle = '#DB1C1C';
         this.drawRoundRect(ctx, textX, currentY, warningTagWidth, warningTagHeight, warningRadius);
         ctx.fill();
 
@@ -462,7 +505,7 @@ Component({
         addressX = textX + warningTagWidth + warningMarginRight;
       }
       const address = watermarkData.address;
-      ctx.font = `${infoFontSize}px "PingFang SC", sans-serif`;
+      ctx.font = `bold ${infoFontSize}px "PingFang SC", sans-serif`;
       ctx.fillStyle = '#ffffff';
       ctx.fillText(address, addressX, currentY);
       currentY += infoFontSize + infoRowMargin;
@@ -493,7 +536,7 @@ Component({
      */
     confirmPhoto() {
       const { previewImage } = this.data;
-      if (!previewImage) return;
+      if (!previewImage) {return;}
 
       // 触发事件，将图片路径传递给父组件
       this.triggerEvent('confirm', {

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

@@ -1,14 +1,14 @@
 <view class="watermark-camera-container">
   <!-- 相机区域 -->
   <view class="camera-section" wx:if="{{!previewImage}}">
-    <camera device-position="back" flash="{{flash}}" class="camera" binderror="onCameraError" />
+    <camera device-position="{{devicePosition}}" flash="{{flashlight}}" 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 class="tag-time">{{currentHours}}<text class="pingfang">:</text>{{currentMinutes}}</view>
       </view>
 
       <!-- 底部信息区 -->
@@ -55,9 +55,11 @@
 
     <!-- 拍照按钮 -->
     <view class="shutter-area">
+      <image class="shutter-icon" bind:tap="switchFlashLight" src="{{flashlight == 'on'? 'https://img.tanjiu.cn/home/hXyjajQeyx7nF4dSiFrFM2Ws7Hhbw3fj.png': 'https://img.tanjiu.cn/home/ijXc7GwrFSPi5ttEEJzA7n4Hd3zpGDNE.png'}}" mode="aspectFit" binderror="" bindload=""></image>
       <view class="shutter-btn" bindtap="takePhoto">
         <view class="shutter-inner"></view>
       </view>
+      <image class="shutter-icon" bind:tap="switchCamera" src="https://img.tanjiu.cn/home/Jmiyy8h2SiZ8YaMWrNTzcHS3C5XGap3c.png" mode="aspectFit" binderror="" bindload=""></image>
     </view>
   </view>
 

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

@@ -41,7 +41,7 @@
 }
 
 .tag-container .tag-label {
-  padding: 12rpx 24rpx;
+  padding: 16rpx 12rpx;
   background-color: #7b2d8e;
   color: #fff;
   font-size: 40rpx;
@@ -50,18 +50,23 @@
 }
 
 .tag-container .tag-time {
-  padding: 12rpx 24rpx;
+  padding: 12rpx;
   background-color: #fff;
   color: #333;
-  font-size: 40rpx;
+  font-size: 48rpx;
   font-weight: bold;
+  font-family: FengTan-Regular;
   border-radius: 0 8rpx 8rpx 0;
 }
 
+.pingfang{
+  font-family: PingFang SC-Regular, PingFang SC !important;
+}
+
 .info-container {
   background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
   opacity: 0.5;
-  padding: 24rpx 20rpx;
+  padding: 16rpx;
   margin-left: 16rpx;
   margin-bottom: 16rpx;
   border-radius: 8rpx;
@@ -109,8 +114,9 @@
 
 .warning-tag {
   display: inline-block;
-  background-color: #ff4d4f;
+  background-color: #DB1C1C;
   color: #fff;
+  font-weight: 800;
   font-size: 20rpx;
   padding: 4rpx 12rpx;
   border-radius: 4rpx;
@@ -123,7 +129,7 @@
   left: 0;
   right: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
   pointer-events: auto;
 }
@@ -199,8 +205,8 @@
   position: fixed;
   left: -9999rpx;
   top: -9999rpx;
-  width: 100vw;
-  height: 100vh;
+  width: 1px;
+  height: 1px;
 }
 
 .loading-overlay {
@@ -240,3 +246,8 @@
   font-size: 28rpx;
   margin-top: 20rpx;
 }
+
+.shutter-icon{
+  width: 48rpx;
+  height: 48rpx;
+}

package/package.json

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