stellar-ui-plus 1.23.7 → 1.23.9

package/components/ste-goods-info/props.ts

@@ -165,4 +165,9 @@ export default {
         type: Boolean,
         default: () => false,
     },
+    /** 划线价格是否添加符号 */
+    showOriginalUnit: {
+        type: Boolean,
+        default: () => false
+    }
 };

package/components/ste-goods-info/ste-goods-info.easycom.json

@@ -185,6 +185,12 @@
             "description": "建议右侧申请输入框只读（mode='more'时有效）",
             "type": "boolean"
         },
+        {
+            "name": "showOriginalUnit",
+            "description": "划线价格是否显示￥符号",
+            "type": "boolean",
+            "version": "1.23.8"
+        },
 
         {
             "name": "[event]change",

package/components/ste-goods-info/ste-goods-info.vue

@@ -151,7 +151,7 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
         showSuggestList.value = !showSuggestList.value;
     }
     if (type === 'back' && applyForNumberHistory.value.length > 0) {
-        backText.value = applyForNumberHistory.value.pop();
+        backText.value = applyForNumberHistory.value.length > 1 ? applyForNumberHistory.value.pop() : applyForNumberHistory.value[0];
         suggesData.value.applyForNumber = backText.value;
     }
     emits('click-suggest', type, item);
@@ -219,7 +219,7 @@ const cmpMore = computed(() => props.mode === 'more');
                                             line-price-color="#666666"
                                             :marginLeft="cmpMore ? 16 : 10"
                                             :fontSize="cmpMore ? 20 : 24"
-                                            :showUnit="false"
+                                            :showUnit="showOriginalUnit"
                                         />
                                     </view>
                                 </block>

package/components/ste-select/datetime.vue

@@ -54,7 +54,7 @@ const initOptions = (values = selectedValue.value) => {
 
 const viewloading = ref(false);
 
-const initSelectIndex = (values = selectedValue.value) => {
+const initSelectIndex = (values = selectedValue.value, callback?: () => void) => {
     viewloading.value = true;
     nextTick(() => {
         const indexs: number[] = [];
@@ -71,6 +71,7 @@ const initSelectIndex = (values = selectedValue.value) => {
         emits('change', selectedValue.value);
         emits('update:modelValue', selectedValue.value);
         viewloading.value = false;
+        if (callback) callback();
     });
 };
 
@@ -80,7 +81,10 @@ const onChange = (e: any) => {
     changeTimeout = setTimeout(() => {
         const indexs: number[] = e.detail.value;
         const newValues = indexs.map((i, index) => dataOptions.value[index][i].value);
-        initSelectIndex(newValues);
+        initSelectIndex(newValues, () => {
+            initOptions();
+            initSelectIndex();
+        });
     }, 100);
 };
 

package/components/ste-step/ste-step.scss

@@ -1,37 +1,39 @@
-.ste-step-row {
-    display: block;
+.ste-step {
+    flex: 1;
+    font-size: 0;
+    text-align: center;
+    &.ste-step-row {
+        display: block;
 
-    &.reverse {
-        .ste-step-line {
-            left: -50% !important;
-            right: 50% !important;
+        &.reverse {
+            .ste-step-head .ste-step-line {
+                left: -50% !important;
+                right: 50% !important;
+            }
         }
     }
-}
 
-.ste-step-column {
-    display: flex;
+    &.ste-step-column {
+        display: flex;
 
-    &.reverse {
-        .ste-step-line {
-            top: -100% !important;
+        &.reverse {
+            .ste-step-head .ste-step-line {
+                top: -100% !important;
+            }
         }
-    }
 
-    .ste-step-line {
-        height: calc(4rpx + 100%) !important;
-        width: 2rpx !important;
-    }
+        .ste-step-head .ste-step-line {
+            height: calc(4rpx + 100%) !important;
+            width: 2rpx !important;
+            border-top: none;
+            border-left-width: 2rpx;
+        }
 
-    .ste-step-content {
-        padding-left: 6% !important;
-        text-align: left !important;
+        .ste-step-content {
+            padding-left: 6% !important;
+            text-align: left !important;
+        }
     }
-}
-.ste-step {
-    flex: 1;
-    font-size: 0;
-    text-align: center;
 
     .head-is-dot {
         top: 12rpx;
@@ -62,16 +64,16 @@
         position: relative;
 
         .ste-step-line {
-            // background: var(---line-color);
             display: inline-block;
             position: absolute;
             height: 2rpx;
             left: 50%;
             right: -50%;
             top: 20rpx;
+            border-width: 0;
             border-top-width: 2rpx;
-            border-top-color: var(---line-color);
-            border-top-style: solid;
+            border-color: var(---line-color);
+            border-style: solid;
             box-sizing: border-box;
         }
         .ste-step-icon.is-icon {

package/components/ste-watermark/ste-watermark.vue

@@ -1,13 +1,19 @@
 <template>
-    <view :style="styles" :class="fullPage ? 'ste-watermark-root full-page' : 'ste-watermark-root'" />
+    <view :style="styles" :class="fullPage ? 'ste-watermark-root full-page' : 'ste-watermark-root'">
+        <!-- #ifdef APP -->
+        <canvas :id="canvasId" :canvas-id="canvasId" style="width: 100%; height: 100%; opacity: 0"></canvas>
+        <!-- #endif -->
+    </view>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, nextTick, reactive, watch } from 'vue';
 import { watermarkProps, defaultWatermarkFont } from './props';
 
 import utils from '../../utils/utils';
 
+const canvasId = `ste-watermark-canvas-${Math.floor(Math.random() * 10000).toString(36)}`;
+
 const componentName = `ste-watermark`;
 defineOptions({
     name: componentName,
@@ -27,14 +33,84 @@ const { fontStyle, fontWeight, color, fontSize, fontFamily, textAlign } = {
     ...defaultWatermarkFont,
     ...props.font,
 };
+let timeout: any;
+function debounce<T extends Function>(fn: T, time: number = 100): void {
+    clearTimeout(timeout);
+    if (!fn) return;
+    timeout = setTimeout(() => {
+        fn();
+    }, time);
+}
+
+const dealWithImage = (ctx: any, img: HTMLImageElement, ratio: number, canvas: HTMLCanvasElement, markWidth: number, markHeight: number) => {
+    ctx.translate(markWidth / 2, markHeight / 2);
+    ctx.rotate((Math.PI / 180) * Number(rotate));
+    img.crossOrigin = 'anonymous';
+    img.referrerPolicy = 'no-referrer';
+    img.src = image!; // 要加载的图片 url, 可以是base64
+    img.onload = () => {
+        ctx.drawImage(img, (-imageWidth * ratio) / 2, (-imageHeight * ratio) / 2, imageWidth * ratio, imageHeight * ratio);
+        ctx.restore();
+        state.base64Url = canvas.toDataURL();
+    };
+};
+const dealWithText = (ctx: any, ratio: number, canvas: HTMLCanvasElement, markWidth: number, markHeight: number) => {
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+    // 文字绕中间旋转
+    ctx.translate(markWidth / 2, markHeight / 2);
+    ctx.rotate((Math.PI / 180) * Number(rotate));
+    const markSize = Number(fontSize) * ratio;
+    ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = textAlign;
+    if (Array.isArray(content)) {
+        content?.forEach((item, index) => {
+            ctx.fillText(item, 0, (index - 1) * markSize);
+        });
+    } else {
+        ctx.fillText(content, 0, 0);
+    }
+    ctx.restore();
+
+    state.base64Url = canvas.toDataURL();
+};
+// #ifdef H5
+const initH5 = () => {
+    const ratio = utils.System.getWindowInfo().pixelRatio;
+    const canvasWidth = `${(gapX + width) * ratio}px`;
+    const canvasHeight = `${(gapY + height) * ratio}px`;
+    const markWidth = width * ratio;
+    const markHeight = height * ratio;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+
+    if (ctx) {
+        if (image) {
+            const img = new Image();
+            dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight);
+        } else if (content) {
+            dealWithText(ctx, ratio, canvas, markWidth, markHeight);
+        }
+    } else {
+        throw new Error('当前环境不支持Canvas');
+    }
+};
+debounce(initH5);
+// #endif
 
-const init = async () => {
+// #ifdef MP
+const initMP = async () => {
     let ratio = utils.System.getWindowInfo().pixelRatio;
 
     const canvasWidth = `${(gapX + width) * ratio}`;
     const canvasHeight = `${(gapY + height) * ratio}`;
     const markWidth = width * ratio;
     const markHeight = height * ratio;
+
     const canvas: any = uni.createOffscreenCanvas({
         type: '2d',
         width: Number(canvasWidth),
@@ -55,79 +131,99 @@ const init = async () => {
         throw new Error('当前环境不支持Canvas');
     }
 };
-const initH5 = () => {
-    const canvas = document.createElement('canvas');
+debounce(initMP);
+// #endif
+// #ifdef APP-PLUS
+// #ifdef APP-PLUS
+const initAPP = () => {
     const ratio = utils.System.getWindowInfo().pixelRatio;
-
-    const ctx = canvas.getContext('2d');
-    const canvasWidth = `${(gapX + width) * ratio}px`;
-    const canvasHeight = `${(gapY + height) * ratio}px`;
+    const canvasWidth = (gapX + width) * ratio;
+    const canvasHeight = (gapY + height) * ratio;
     const markWidth = width * ratio;
     const markHeight = height * ratio;
-    canvas.setAttribute('width', canvasWidth);
-    canvas.setAttribute('height', canvasHeight);
+
+    // 创建 Canvas 上下文
+    const ctx: any = uni.createCanvasContext(canvasId);
 
     if (ctx) {
+        // 完全重置画布
+        ctx.clearRect(0, 0, canvasWidth * 2, canvasHeight * 2);
+
+        // 填充透明背景确保清空
+        ctx.setFillStyle('rgba(255, 255, 255, 0)');
+        ctx.fillRect(0, 0, canvasWidth * 2, canvasHeight * 2);
+
+        // 开始新的绘制路径
+        ctx.beginPath();
+
         if (image) {
-            const img = new Image();
-            dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight);
+            // 处理图片水印
+            ctx.save();
+            ctx.translate(markWidth / 2, markHeight / 2);
+            ctx.rotate((Math.PI / 180) * Number(rotate));
+
+            // 绘制图片
+            ctx.drawImage(image, (-imageWidth * ratio) / 2, (-imageHeight * ratio) / 2, imageWidth * ratio, imageHeight * ratio);
+            ctx.restore();
         } else if (content) {
-            dealWithText(ctx, ratio, canvas, markWidth, markHeight);
+            // 处理文字水印
+            ctx.save();
+            ctx.setTextBaseline('middle');
+            ctx.setTextAlign('center');
+
+            // 文字绕中间旋转
+            ctx.translate(markWidth / 2, markHeight / 2);
+            ctx.rotate((Math.PI / 180) * Number(rotate));
+
+            const markSize = Number(fontSize) * ratio;
+            ctx.setFontSize(markSize); // 使用专用方法设置字体大小
+            if (color) ctx.setFillStyle(color);
+            if (textAlign) ctx.setTextAlign(textAlign as any);
+
+            if (Array.isArray(content)) {
+                content.forEach((item: any, index) => {
+                    ctx.fillText(item, 0, (index - 1) * markSize);
+                });
+            } else {
+                ctx.fillText(content, 0, 0);
+            }
+            ctx.restore();
         }
-    } else {
-        throw new Error('当前环境不支持Canvas');
-    }
-};
-const dealWithImage = (ctx: any, img: HTMLImageElement, ratio: number, canvas: HTMLCanvasElement, markWidth: number, markHeight: number) => {
-    ctx.translate(markWidth / 2, markHeight / 2);
-    ctx.rotate((Math.PI / 180) * Number(rotate));
-    img.crossOrigin = 'anonymous';
-    img.referrerPolicy = 'no-referrer';
-    img.src = image!; // 要加载的图片 url, 可以是base64
-    img.onload = () => {
-        ctx.drawImage(img, (-imageWidth * ratio) / 2, (-imageHeight * ratio) / 2, imageWidth * ratio, imageHeight * ratio);
-        ctx.restore();
-        state.base64Url = canvas.toDataURL();
-    };
-};
-const dealWithText = (ctx: any, ratio: number, canvas: HTMLCanvasElement, markWidth: number, markHeight: number) => {
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    // 文字绕中间旋转
-    ctx.translate(markWidth / 2, markHeight / 2);
-    ctx.rotate((Math.PI / 180) * Number(rotate));
-    const markSize = Number(fontSize) * ratio;
-    ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
-    ctx.fillStyle = color;
-    ctx.textAlign = textAlign;
-    if (Array.isArray(content)) {
-        content?.forEach((item, index) => {
-            ctx.fillText(item, 0, (index - 1) * markSize);
+
+        // 导出为 base64 图片
+        ctx.draw(true, () => {
+            // 使用 true 参数清空画布后再绘制
+            uni.canvasToTempFilePath({
+                canvasId: canvasId,
+                success: res => {
+                    state.base64Url = res.tempFilePath;
+                },
+                fail: err => {
+                    console.error('导出图片失败:', err);
+                },
+            });
         });
     } else {
-        ctx.fillText(content, 0, 0);
+        throw new Error('当前环境不支持Canvas');
     }
-    ctx.restore();
-
-    state.base64Url = canvas.toDataURL();
 };
-// #ifdef H5
-initH5();
 // #endif
-
-// #ifndef H5
-init();
+debounce(initAPP);
 // #endif
 
 watch(
     () => props,
     () => {
         // #ifdef H5
-        initH5();
+        debounce(initH5);
+        // #endif
+
+        // #ifdef MP
+        debounce(initMP);
         // #endif
 
-        // #ifndef H5
-        init();
+        // #ifdef APP-PLUS
+        debounce(initAPP);
         // #endif
     }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.23.7",
+    "version": "1.23.9",
     "description": "",
     "author": "",
     "license": "MIT",