@10yun/cv-mobile-ui 0.5.43 → 0.5.45

package/uview-plus/components/u-pull-refresh/u-pull-refresh.vue

@@ -0,0 +1,231 @@
+<template>
+  <view
+    class="u-pull-refresh"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <!-- 下拉刷新区域 -->
+    <view class="refresh-area" :style="{ height: refreshDistance + 'px' }" :class="{ refreshing: isRefreshing }">
+      <!-- 不同状态的插槽 -->
+      <slot v-if="refreshStatus === 'pull'" name="pull" :distance="refreshDistance" :threshold="threshold">
+        <!-- 默认下拉状态 -->
+        <view class="refresh-content">
+          <view class="refresh-indicator">
+            <up-icon name="arrow-downward" size="26px"></up-icon>
+          </view>
+          <text class="refresh-text">{{ t('up.pullRefresh.pull') }}</text>
+        </view>
+      </slot>
+      <slot v-else-if="refreshStatus === 'release'" name="release" :distance="refreshDistance" :threshold="threshold">
+        <!-- 默认释放状态 -->
+        <view class="refresh-content">
+          <view class="refresh-indicator">
+            <up-icon name="arrow-upward" size="26px"></up-icon>
+          </view>
+          <text class="refresh-text">{{ t('up.pullRefresh.release') }}</text>
+        </view>
+      </slot>
+      <slot v-else-if="refreshStatus === 'refreshing'" name="refreshing">
+        <!-- 默认刷新中状态 -->
+        <view class="refresh-content">
+          <view class="refresh-indicator">
+            <view class="spinner"></view>
+          </view>
+          <text class="refresh-text">{{ t('up.pullRefresh.refreshing') }}...</text>
+        </view>
+      </slot>
+    </view>
+    <!-- 内容区域 -->
+    <view class="refresh-content-wrapper" :style="{ transform: `translateY(${contentTranslateY}px)` }">
+      <scroll-view
+        v-if="useScrollView"
+        class="scroll-wrapper"
+        :scroll-y="true"
+        :enable-back-to-top="enableBackToTop"
+        :scroll-top="scrollTop"
+        :lower-threshold="lowerThreshold"
+        @scroll="handleScroll"
+        @scrolltolower="handleScrollToLower"
+      >
+        <slot></slot>
+        <!-- 使用 u-loadmore 组件实现上拉加载更多 -->
+        <up-loadmore v-if="showLoadmore" v-bind="loadmoreProps" />
+      </scroll-view>
+      <view v-else>
+        <slot></slot>
+        <!-- 使用 u-loadmore 组件实现上拉加载更多 -->
+        <up-loadmore v-if="showLoadmore" v-bind="loadmoreProps" />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { t } from '../../libs/i18n';
+export default {
+  name: 'u-pull-refresh',
+  props: {
+    // 是否正在刷新
+    refreshing: {
+      type: Boolean,
+      default: false
+    },
+    // 下拉刷新阈值
+    threshold: {
+      type: Number,
+      default: 80
+    },
+    // 阻尼系数
+    damping: {
+      type: Number,
+      default: 0.4
+    },
+    // 最大下拉距离
+    maxDistance: {
+      type: Number,
+      default: 120
+    },
+    // 是否显示加载更多
+    showLoadmore: {
+      type: Boolean,
+      default: false
+    },
+    // u-loadmore 组件的 props 配置
+    loadmoreProps: {
+      type: Object,
+      default: () => ({
+        status: 'loadmore'
+        // loadmoreText: '加载更多',
+        // loadingText: '正在加载...',
+        // nomoreText: '没有更多了'
+      })
+    },
+    // 是否使用 scroll-view 包装内容
+    useScrollView: {
+      type: Boolean,
+      default: true
+    },
+    // scroll-view 相关属性
+    enableBackToTop: {
+      type: Boolean,
+      default: false
+    },
+    lowerThreshold: {
+      type: [Number, String],
+      default: 50
+    },
+    scrollTop: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 下拉刷新相关
+      isRefreshing: false,
+      refreshStatus: 'pull', // pull, release, refreshing
+      refreshDistance: 0,
+      startY: 0,
+      currentY: 0,
+      touching: false,
+      // 动画相关
+      contentTranslateY: 0
+    };
+  },
+  emits: ['refresh', 'loadmore', 'scroll'],
+  watch: {
+    refreshing: {
+      handler(newVal) {
+        if (!newVal) {
+          this.finishRefresh();
+        } else {
+          this.startRefresh();
+        }
+      }
+    }
+  },
+  methods: {
+    t,
+    // 触摸开始
+    onTouchStart(e) {
+      if (this.isRefreshing) return;
+      this.touching = true;
+      this.startY = e.touches[0].pageY;
+      this.currentY = this.startY;
+      this.refreshStatus = 'pull';
+    },
+    // 触摸移动
+    onTouchMove(e) {
+      if (!this.touching || this.isRefreshing) return;
+      this.currentY = e.touches[0].pageY;
+      const diff = this.currentY - this.startY;
+      // 只有在顶部且下拉时才触发下拉刷新
+      if (diff > 0 && this.isScrollViewAtTop()) {
+        this.refreshDistance = Math.min(diff * this.damping, this.maxDistance);
+        this.contentTranslateY = this.refreshDistance;
+        // 更新状态
+        if (this.refreshDistance >= this.threshold) {
+          this.refreshStatus = 'release';
+        } else {
+          this.refreshStatus = 'pull';
+        }
+        // 阻止默认滚动行为，防止触发页面级滚动
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    // 触摸结束
+    onTouchEnd() {
+      if (!this.touching) return;
+      this.touching = false;
+      if (this.refreshDistance >= this.threshold && !this.isRefreshing) {
+        // 触发刷新
+        this.startRefresh();
+        this.$emit('refresh');
+      } else {
+        // 回弹
+        this.resetRefresh();
+      }
+    },
+    // 开始刷新
+    startRefresh() {
+      this.isRefreshing = true;
+      this.refreshStatus = 'refreshing';
+      this.refreshDistance = this.threshold;
+      this.contentTranslateY = this.threshold;
+    },
+    // 完成刷新
+    finishRefresh() {
+      this.isRefreshing = false;
+      this.refreshStatus = 'pull';
+      this.resetRefresh();
+    },
+    // 重置刷新状态
+    resetRefresh() {
+      this.refreshDistance = 0;
+      this.contentTranslateY = 0;
+    },
+    // 检查 scroll-view 是否在顶部
+    isScrollViewAtTop() {
+      // 这里可以更精确地判断，但简单起见直接返回 true
+      // 实际项目中可能需要通过 scroll 事件获取 scrollTop 判断
+      return true;
+    },
+    // 处理滚动事件
+    handleScroll(e) {
+      this.$emit('scroll', e);
+    },
+    // 处理滚动到底部事件
+    handleScrollToLower(e) {
+      // 只有当 loadmore 状态为 loadmore 时才触发
+      if (this.showLoadmore && this.loadmoreProps.status === 'loadmore') {
+        this.$emit('loadmore');
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-qrcode/qrcode.js

@@ -1031,13 +1031,15 @@ let QRCode = {};
             image: '',
             imageSize: 30,
             canvasId: opt.canvasId,
-            // TODO 改动的
             nvueContext: opt.nvueContext,
             context: opt.context,
             usingComponents: opt.usingComponents,
             showLoading: opt.showLoading,
             loadingText: opt.loadingText,
         };
+
+        let canvas = null;
+
         if (typeof opt === 'string') { // 只编码ASCII字符串
             opt = {
                 text: opt
@@ -1084,21 +1086,59 @@ let QRCode = {};
             }
             return options.foreground;
         }
+
+        let getCanvas = async (id) => {
+            return new Promise((resolve, reject)=>{
+                try {
+                    const query = uni.createSelectorQuery().in(this.options.context);
+                    query.select(`#${id}`)
+                    .fields({ node: true, size: true })
+                    .exec((res) => {
+                        resolve(res[0].node)
+                    })
+                }
+                catch (e) {
+                    console.error("createCanvasContextFail",e)
+                }
+            })
+        }
         // 创建canvas
-        let createCanvas = function (options) {
+        let createCanvas = async function (options) {
+            let isApp = false;
+            // #ifdef APP
+            isApp = true;
+            // #endif
+
             if(options.showLoading){
                 uni.showLoading({
                     title: options.loadingText,
                     mask: true
                 });
             }
-            // TODO 改动的
             var ctx = '';
             if (options.nvueContext) {
                 ctx = options.nvueContext;
-            } else {
+            }
+            else {
+                // 获取canvas node节点
+                canvas = await getCanvas(options.canvasId);
+                // #ifdef MP
+                // 不清楚是小程序的bug还是什么原因，canvas的node节点宽高和设置的宽高不一致 重新设置下
+                canvas.width = options.size;
+                canvas.height = options.size;
+                // #endif
+                // #ifdef APP
                 ctx = uni.createCanvasContext(options.canvasId, options.context);
+                // #endif
+                // #ifndef APP
+                ctx = canvas.getContext('2d');
+                // #endif
+
             }
+            // 设置组件中data里面的ctx
+            options.context.ctx = ctx;
+            options.context.canvas = canvas;
+
             var count = qrCodeAlg.getModuleCount();
             var ratioSize = options.size;
             var ratioImgSize = options.imageSize;
@@ -1109,14 +1149,18 @@ let QRCode = {};
             for (var row = 0; row < count; row++) {
                 for (var col = 0; col < count; col++) {
                     var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
-                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
+                    var h = (Math.ceil((row + 1) * tileH) - Math.floor(row * tileH));
                     var foreground = getForeGround({
                         row: row,
                         col: col,
                         count: count,
                         options: options
                     });
-                    ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
+                    if (options.nvueContext) {
+                        ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
+                    } else {
+                        ctx.fillStyle = qrCodeAlg.modules[row][col] ? foreground : options.background;
+                    }
                     ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                 }
             }
@@ -1124,18 +1168,49 @@ let QRCode = {};
                 var x = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
                 var y = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
                 drawRoundedRect(ctx, x, y, ratioImgSize, ratioImgSize, 2, 6, true, true)
-                ctx.drawImage(options.image, x, y, ratioImgSize, ratioImgSize);
+                if (options.nvueContext) {
+                    ctx.drawImage(options.image, x, y, ratioImgSize, ratioImgSize);
+                }
+                else {
+                    // #ifdef H5 || APP
+                    const img = new Image();
+                    // #endif
+
+                    // #ifndef H5 || APP
+                    const img = canvas.createImage();
+                    // #endif
+
+                    img.onload = () => {
+                        ctx.drawImage(img, x, y, ratioImgSize, ratioImgSize);
+                    };
+                    img.src = options.image;
+                }
                 // 画圆角矩形
                 function drawRoundedRect(ctxi, x, y, width, height, r, lineWidth, fill, stroke) {
-                    ctxi.setLineWidth(lineWidth);
-                    ctxi.setFillStyle(options.background);
-                    ctxi.setStrokeStyle(options.background);
-                    ctxi.beginPath(); // draw top and top right corner 
+                    if (options.nvueContext || isApp) {
+                        ctxi.setLineWidth(lineWidth);
+                        ctxi.setFillStyle(options.background);
+                        ctxi.setStrokeStyle(options.background);
+                    }
+                    else {
+                        ctxi.lineWidth = lineWidth;
+                        ctxi.fillStyle = options.background;
+                        ctxi.strokeStyle = options.background;
+                    }
+                    ctxi.beginPath(); // draw top and top right corner
                     ctxi.moveTo(x + r, y);
-                    ctxi.arcTo(x + width, y, x + width, y + r, r); // draw right side and bottom right corner 
-                    ctxi.arcTo(x + width, y + height, x + width - r, y + height, r); // draw bottom and bottom left corner 
-                    ctxi.arcTo(x, y + height, x, y + height - r, r); // draw left and top left corner 
-                    ctxi.arcTo(x, y, x + r, y, r);
+                    ctxi.lineTo(x + width, y); // move to top-right corner
+                    ctxi.arc(x + width - r, y + r, r, -Math.PI / 2, 0); // draw right side and bottom right corner
+
+                    ctxi.lineTo(x + width, y + height - r);
+                    ctxi.arc(x + width - r, y + height - r, r, 0, Math.PI / 2); // draw bottom and bottom left corner
+
+                    ctxi.lineTo(x + r, y + height);
+                    ctxi.arc(x + r, y + height - r, r, Math.PI / 2, Math.PI);// draw left and top left corner
+
+                    ctxi.lineTo(x, y + r);
+                    ctxi.arc(x + r, y + r, r, Math.PI, Math.PI * 3 / 2);
+
                     ctxi.closePath();
                     if (fill) {
                         ctxi.fill();
@@ -1146,58 +1221,64 @@ let QRCode = {};
                 }
             }
             setTimeout(() => {
-                ctx.draw(true, () => {
-                    // 保存到临时区域
-                    setTimeout(() => {
-                        // TODO 改动的
-                        if (options.nvueContext) {
-                            ctx.toTempFilePath(
-                                0,
-                                0,
-                                options.width,
-                                options.height,
-                                options.width,
-                                options.height,
-                                "",
-                                1,
-                                function(res) {
-                                    if (options.cbResult) {
-                                        options.cbResult(res.tempFilePath)
-                                    }
-                                }
-                            );
-                        } else {
-                            uni.canvasToTempFilePath({
-                                width: options.width,
-                                height: options.height,
-                                destWidth: options.width,
-                                destHeight: options.height,
-                                canvasId: options.canvasId,
-                                quality: Number(1),
-                                success: function (res) {
-                                    if (options.cbResult) {
-                                        // 由于官方还没有统一此接口的输出字段，所以先判定下  支付宝为 res.apFilePath
-                                        if (!empty(res.tempFilePath)) {
-                                            options.cbResult(res.tempFilePath)
-                                        } else if (!empty(res.apFilePath)) {
-                                            options.cbResult(res.apFilePath)
-                                        } else {
+                // canvas2 绘制是自动的不需要手动绘制
+                if(options.nvueContext || isApp){
+                    ctx.draw(true, () => {
+                        // 保存到临时区域
+                        setTimeout(() => {
+                            if (options.nvueContext) {
+                                ctx.toTempFilePath(
+                                    0,
+                                    0,
+                                    options.width,
+                                    options.height,
+                                    options.width,
+                                    options.height,
+                                    "",
+                                    1,
+                                    function(res) {
+                                        if (options.cbResult) {
                                             options.cbResult(res.tempFilePath)
                                         }
                                     }
-                                },
-                                fail: function (res) {
-                                    if (options.cbResult) {
-                                        options.cbResult(res)
-                                    }
-                                },
-                                complete: function () {
-                                    uni.hideLoading();
-                                },
-                            }, options.context);
-                        }
-                    }, options.text.length + 100);
-                });
+                                );
+                            } else {
+                                uni.canvasToTempFilePath({
+                                    width: options.width,
+                                    height: options.height,
+                                    destWidth: options.width,
+                                    destHeight: options.height,
+                                    canvasId: options.canvasId,
+                                    quality: Number(1),
+                                    success: function (res) {
+                                        if (options.cbResult) {
+                                            // 由于官方还没有统一此接口的输出字段，所以先判定下  支付宝为 res.apFilePath
+                                            if (!empty(res.tempFilePath)) {
+                                                options.cbResult(res.tempFilePath)
+                                            } else if (!empty(res.apFilePath)) {
+                                                options.cbResult(res.apFilePath)
+                                            } else {
+                                                options.cbResult(res.tempFilePath)
+                                            }
+                                        }
+                                    },
+                                    fail: function (res) {
+                                        if (options.cbResult) {
+                                            options.cbResult(res)
+                                        }
+                                    },
+                                    complete: function () {
+                                        uni.hideLoading();
+                                    },
+                                }, options.context);
+                            }
+                        }, options.text.length + 100);
+                    });
+                }
+                else{
+                    options.cbResult("")
+                }
+
             }, options.usingComponents ? 0 : 150);
         }
         createCanvas(this.options);
@@ -1220,7 +1301,6 @@ let QRCode = {};
         }
     };
     QRCode.prototype.clear = function (fn) {
-        // TODO 改动的
         var ctx = '';
         if (options.nvueContext) {
             ctx = options.nvueContext;

package/uview-plus/components/u-qrcode/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .u-qrcode__loading {
   display: flex;
   justify-content: center;
@@ -9,6 +10,18 @@
   left: 0;
   right: 0;
 }
+.u-qrcode {
+  /* #ifdef MP-TOUTIAO */
+  /**字节小程序在编译时会出现一个 [hidde]:{ display: none !important; } 这个样式
+     * 会导致canvas 隐藏掉 没有找到具体原因先这样处理
+     */
+}
+.u-qrcode__canvas {
+  display: block !important;
+}
+.u-qrcode {
+  /* #endif */
+}
 .u-qrcode__content {
   position: relative;
 }

package/uview-plus/components/u-qrcode/style.scss

@@ -10,6 +10,16 @@
     left: 0;
     right: 0;
   }
+
+  /* #ifdef MP-TOUTIAO */
+  /**字节小程序在编译时会出现一个 [hidde]:{ display: none !important; } 这个样式
+     * 会导致canvas 隐藏掉 没有找到具体原因先这样处理
+     */
+  &__canvas {
+    display: block !important;
+  }
+  /* #endif */
+
   &__content {
     position: relative;