@xtdev/xt-miniprogram-ui 1.2.87 → 1.2.89

package/libs/xt-uploader/index.js

@@ -198,6 +198,12 @@ Component({
     onCameraError(e) {
       console.log("onCameraError:", e);
     },
+    onCameraCancel(){
+      this.setData({
+        showCamera: false,
+        watermarkData: {}
+      });
+    },
     /**
      * 重新上传
      * @param {*} e

package/libs/xt-uploader/index.wxml

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

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

@@ -25,11 +25,6 @@ Component({
       type: Object,
       value: {},
     },
-    // 闪光灯模式：auto/on/off/torch
-    flash: {
-      type: String,
-      value: 'off',
-    },
   },
 
   data: {
@@ -41,6 +36,8 @@ Component({
     isLoading: false,
     systemInfo: null,
     dpr: 2,
+    devicePosition: "back", // 摄像头位置 back: 后置 front: 前置
+    flashlight: 'off', // 闪光灯 auto/on/off/torch
   },
 
   lifetimes: {
@@ -66,6 +63,29 @@ Component({
         }
       });
     },
+    /**
+     * 翻转摄像头
+     */
+    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'
+      });
+    },
     /**
      * 初始化组件
      */
@@ -118,7 +138,7 @@ Component({
      * 拍照
      */
     takePhoto() {
-      if (this.data.isLoading) return;
+      if (this.data.isLoading) {return;}
 
       this.setData({ isLoading: true });
 
@@ -188,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;
             }
 
@@ -384,9 +405,9 @@ Component({
       ctx.fill();
 
       // 时间文字
-      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.fillStyle = '#6722AB';
+      ctx.fillText(currentHours, tagX + tagWidth + tagPaddingH, tagY + tagHeight / 2 + 3);
+      ctx.fillText(currentMinutes, tagX + tagWidth + tagPaddingH + 70 * scale, tagY + tagHeight / 2 + 3);
 
       ctx.font = `bold ${nameFontSize}px "PingFang SC", sans-serif`;
       ctx.fillText(":", tagX + tagWidth + tagPaddingH + 56 * scale, tagY + tagHeight / 2);
@@ -515,7 +536,7 @@ Component({
      */
     confirmPhoto() {
       const { previewImage } = this.data;
-      if (!previewImage) return;
+      if (!previewImage) {return;}
 
       // 触发事件，将图片路径传递给父组件
       this.triggerEvent('confirm', {
@@ -541,5 +562,9 @@ Component({
         this.clockInterval = null;
       }
     },
+
+    cancel(){
+      this.triggerEvent('cancel');
+    },
   },
 });

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,10 +55,13 @@
 
     <!-- 拍照按钮 -->
     <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>
+    <image class="close-btn" bind:tap="cancel" src="https://img.tanjiu.cn/home/YC2FD8x6SB2m6HEfaZCYaFnmn8wzQdEt.png"></image>
   </view>
 
   <!-- 预览区域 -->

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

@@ -52,17 +52,21 @@
 .tag-container .tag-time {
   padding: 12rpx;
   background-color: #fff;
-  color: #333;
+  color: #6722AB;
   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;
@@ -119,13 +123,21 @@
   margin-right: 8rpx;
 }
 
+.close-btn {
+  position: absolute;
+  top: 40rpx;
+  left: 40rpx;
+  width: 48rpx;
+  height: 48rpx;
+}
+
 .shutter-area {
   position: absolute;
   bottom: 40rpx;
   left: 0;
   right: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
   pointer-events: auto;
 }
@@ -242,3 +254,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.87",
+  "version": "1.2.89",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {