@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-circular-progress/u-circular-progress.vue

@@ -0,0 +1,324 @@
+<template>
+  <view class="up-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+    <!-- #ifndef MP-ALIPAY -->
+    <canvas
+      class="up-circular-default"
+      :canvas-id="defaultCanvasId"
+      :id="defaultCanvasId"
+      :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+      v-if="defaultShow && defaultCanvasId"
+    ></canvas>
+    <canvas
+      class="up-circular-progress"
+      :canvas-id="progressCanvasId"
+      :id="progressCanvasId"
+      :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+      v-if="progressCanvasId"
+    ></canvas>
+    <!-- #endif -->
+
+    <!-- #ifdef MP-ALIPAY -->
+    <canvas
+      class="up-circular-default"
+      :canvas-id="defaultCanvasId"
+      :id="defaultCanvasId"
+      :style="{ width: diam * 4 + 'px', height: (height || diam) * 4 + 'px' }"
+      v-if="defaultShow"
+    ></canvas>
+    <canvas
+      class="up-circular-progress"
+      :canvas-id="progressCanvasId"
+      :id="progressCanvasId"
+      :style="{ width: diam * 4 + 'px', height: (height || diam) * 4 + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tuiCircularProgress',
+  emits: ['change', 'end'],
+  props: {
+    /*
+				  传值需使用rpx进行转换保证各终端兼容
+				  px = rpx / 750 * wx.getSystemInfoSync().windowWidth
+				  圆形进度条(画布)宽度，直径 [px]
+				*/
+    diam: {
+      type: Number,
+      default: 60
+    },
+    //圆形进度条(画布)高度，默认取diam值[当画半弧时传值，height有值时则取height]
+    height: {
+      type: Number,
+      default: 0
+    },
+    //进度条线条宽度[px]
+    lineWidth: {
+      type: Number,
+      default: 4
+    },
+    /*
+				 线条的端点样式
+				 butt：向线条的每个末端添加平直的边缘
+				 round	向线条的每个末端添加圆形线帽
+				 square	向线条的每个末端添加正方形线帽
+				*/
+    lineCap: {
+      type: String,
+      default: 'round'
+    },
+    //圆环进度字体大小 [px]
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    //圆环进度字体颜色
+    fontColor: {
+      type: String,
+      default: ''
+    },
+    //是否显示进度文字
+    fontShow: {
+      type: Boolean,
+      default: true
+    },
+    /*
+				 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+				 可以使用 slot自定义显示内容
+				*/
+    percentText: {
+      type: String,
+      default: ''
+    },
+    //是否显示默认(背景)进度条
+    defaultShow: {
+      type: Boolean,
+      default: true
+    },
+    //默认进度条颜色
+    defaultColor: {
+      type: String,
+      default: '#CCCCCC'
+    },
+    //进度条颜色
+    progressColor: {
+      type: String,
+      default: ''
+    },
+    //进度条渐变颜色[结合progressColor使用，默认为空]
+    gradualColor: {
+      type: String,
+      default: ''
+    },
+    //起始弧度，单位弧度
+    sAngle: {
+      type: Number,
+      default: -Math.PI / 2
+    },
+    //指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
+    counterclockwise: {
+      type: Boolean,
+      default: false
+    },
+    //进度百分比 [10% 传值 10]
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    //进度百分比缩放倍数[使用半弧为100%时，则可传2]
+    multiple: {
+      type: Number,
+      default: 1
+    },
+    //动画执行时间[单位毫秒，低于50无动画]
+    duration: {
+      type: Number,
+      default: 800
+    },
+    //backwards: 动画从头播；forwards：动画从上次结束点接着播
+    activeMode: {
+      type: String,
+      default: 'backwards'
+    }
+  },
+  watch: {
+    percentage(val) {
+      this.initDraw();
+    }
+  },
+  data() {
+    // #ifndef MP-WEIXIN || MP-QQ
+    let cid = `id01_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+    let did = `id02_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+    // #endif
+    return {
+      // #ifdef MP-WEIXIN || MP-QQ
+      progressCanvasId: 'progressCanvasId',
+      defaultCanvasId: 'defaultCanvasId',
+      // #endif
+      // #ifndef MP-WEIXIN || MP-QQ
+      progressCanvasId: cid,
+      defaultCanvasId: did,
+      // #endif
+      progressContext: null,
+      linearGradient: null,
+      //起始百分比
+      startPercentage: 0
+      // dpi
+      //pixelRatio: uni.getSystemInfoSync().pixelRatio
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.initDraw(true);
+      }, 50);
+    });
+  },
+  methods: {
+    //初始化绘制
+    initDraw(init) {
+      let start = this.activeMode === 'backwards' ? 0 : this.startPercentage;
+      start = start > this.percentage ? 0 : start;
+      if (this.defaultShow && init) {
+        this.drawDefaultCircular();
+      }
+      this.drawProgressCircular(start);
+    },
+    //默认(背景)圆环
+    drawDefaultCircular() {
+      let ctx = uni.createCanvasContext(this.defaultCanvasId, this);
+      let lineWidth = Number(this.lineWidth);
+      // #ifdef MP-ALIPAY
+      lineWidth = lineWidth * 4;
+      // #endif
+      ctx.setLineWidth(lineWidth);
+      ctx.setStrokeStyle(this.defaultColor);
+      //终止弧度
+      let eAngle = Math.PI * (this.height ? 1 : 2) + this.sAngle;
+      this.drawArc(ctx, eAngle);
+    },
+    //进度圆环
+    drawProgressCircular(startPercentage) {
+      let ctx = this.progressContext;
+      let gradient = this.linearGradient;
+      if (!ctx) {
+        ctx = uni.createCanvasContext(this.progressCanvasId, this);
+        //创建一个线性的渐变颜色 CanvasGradient对象
+        let diam = Number(this.diam);
+        // #ifdef MP-ALIPAY
+        diam = diam * 4;
+        // #endif
+        const progressColor = this.progressColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+        gradient = ctx.createLinearGradient(0, 0, diam, 0);
+        gradient.addColorStop('0', progressColor);
+        if (this.gradualColor) {
+          gradient.addColorStop('1', this.gradualColor);
+        }
+        // #ifdef APP-PLUS || MP
+        const res = uni.getSystemInfoSync();
+        if (!this.gradualColor && res.platform.toLocaleLowerCase() == 'android') {
+          gradient.addColorStop('1', progressColor);
+        }
+        // #endif
+        this.progressContext = ctx;
+        this.linearGradient = gradient;
+      }
+      let lineWidth = Number(this.lineWidth);
+      // #ifdef MP-ALIPAY
+      lineWidth = lineWidth * 4;
+      // #endif
+      ctx.setLineWidth(lineWidth);
+      ctx.setStrokeStyle(gradient);
+      let time = this.percentage == 0 || this.duration < 50 ? 0 : this.duration / this.percentage;
+      if (this.percentage > 0) {
+        startPercentage = this.duration < 50 ? this.percentage - 1 : startPercentage;
+        startPercentage++;
+      }
+      if (this.fontShow) {
+        let fontSize = Number(this.fontSize);
+        // #ifdef MP-ALIPAY
+        fontSize = fontSize * 4;
+        // #endif
+        ctx.setFontSize(fontSize);
+        const fontColor = this.fontColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+        ctx.setFillStyle(fontColor);
+        ctx.setTextAlign('center');
+        ctx.setTextBaseline('middle');
+        let percentage = this.percentText;
+        if (!percentage) {
+          percentage = this.counterclockwise ? 100 - startPercentage * this.multiple : startPercentage * this.multiple;
+          percentage = `${percentage}%`;
+        }
+        let radius = this.diam / 2;
+        // #ifdef MP-ALIPAY
+        radius = radius * 4;
+        // #endif
+        ctx.fillText(percentage, radius, radius);
+      }
+      if (this.percentage == 0 || (this.counterclockwise && startPercentage == 100)) {
+        ctx.draw();
+      } else {
+        let eAngle = ((2 * Math.PI) / 100) * startPercentage + this.sAngle;
+        this.drawArc(ctx, eAngle);
+      }
+      setTimeout(() => {
+        this.startPercentage = startPercentage;
+        if (startPercentage >= this.percentage) {
+          this.$emit('end', {
+            canvasId: this.progressCanvasId,
+            percentage: startPercentage
+          });
+        } else {
+          this.drawProgressCircular(startPercentage);
+        }
+        this.$emit('change', {
+          percentage: startPercentage
+        });
+      }, time);
+      // #ifdef H5
+      // requestAnimationFrame(()=>{})
+      // #endif
+    },
+    //创建弧线
+    drawArc(ctx, eAngle) {
+      ctx.setLineCap(this.lineCap);
+      ctx.beginPath();
+      let radius = this.diam / 2; //x=y
+      let lineWidth = Number(this.lineWidth);
+      // #ifdef MP-ALIPAY
+      radius = radius * 4;
+      lineWidth = lineWidth * 4;
+      // #endif
+      ctx.arc(radius, radius, radius - lineWidth, this.sAngle, eAngle, this.counterclockwise);
+      ctx.stroke();
+      ctx.draw();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.up-circular-container,
+.up-circular-default {
+  position: relative;
+}
+
+/* #ifdef MP-ALIPAY */
+.up-circular-default,
+.up-circular-progress {
+  zoom: 0.25;
+}
+
+/* #endif */
+
+.up-circular-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+}
+</style>

package/ui-fireui/components/u-clipboard2/tui-clipboard.js

@@ -0,0 +1,53 @@
+/**
+ * 复制文本 兼容H5
+ * 来自 ThorUI  www.thorui.cn | 文档地址： www.donarui.com
+ * @author echo.
+ * @version 1.0.0
+ **/
+// #ifdef H5
+import ClipboardJS from '../js-sdk/clipboard.min.js';
+// #endif
+const thorui = {
+  /**
+   * data 需要复制的数据
+   * callback 回调
+   * e 当用户点击后需要先请求接口再进行复制时，需要传入此参数，或者将异步请求转为同步 （H5端）
+   * **/
+  getClipboardData: function (data, callback, e) {
+    // #ifdef APP-PLUS || MP
+    uni.setClipboardData({
+      data: data,
+      success(res) {
+        'function' == typeof callback && callback(true);
+      },
+      fail(res) {
+        'function' == typeof callback && callback(false);
+      }
+    });
+    // #endif
+
+    // #ifdef H5
+    let event = window.event || e || {};
+    let clipboard = new ClipboardJS('', {
+      text: () => data
+    });
+    clipboard.on('success', (e) => {
+      'function' == typeof callback && callback(true);
+      clipboard.off('success');
+      clipboard.off('error');
+      clipboard.destroy();
+    });
+    clipboard.on('error', (e) => {
+      'function' == typeof callback && callback(false);
+      clipboard.off('success');
+      clipboard.off('error');
+      clipboard.destroy();
+    });
+    clipboard.onClick(event);
+    // #endif
+  }
+};
+
+export default {
+  getClipboardData: thorui.getClipboardData
+};

package/ui-fireui/components/u-collapse/u-collapse.vue

@@ -1,9 +1,5 @@
 <template>
-  <view
-    class="up-collapse"
-    style="margin-left: 20upx; margin-right: 20upx; border-radius: 11upx"
-    :style="{ backgroundColor: bgColor }"
-  >
+  <view class="up-collapse" :style="{ backgroundColor: bgColor }">
     <view class="up-collapse-head" :style="{ backgroundColor: hdBgColor }" @tap.stop="handleClick">
       <view class="up-header" :class="{ 'up-opacity': disabled }">
         <slot name="title"></slot>
@@ -28,7 +24,8 @@
 
 <script>
 export default {
-  name: 'fuiCollapse',
+  name: 'tuiCollapse',
+  emits: ['click'],
   props: {
     //collapse背景颜色
     bgColor: {
@@ -105,15 +102,18 @@ export default {
 
 <style scoped>
 @font-face {
-  font-family: 'fuiCollapse';
+  font-family: 'tuiCollapse';
   src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AA0AAAAABlgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEHAAAABoAAAAciRx3B0dERUYAAAP8AAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjxuR/JjbWFwAAAB9AAAAD4AAAFCAA/pq2dhc3AAAAP0AAAACAAAAAj//wADZ2x5ZgAAAkAAAABEAAAARCs1U/toZWFkAAABMAAAADAAAAA2FpaT+mhoZWEAAAFgAAAAHQAAACQHngOFaG10eAAAAeQAAAAPAAAAEAwAAEBsb2NhAAACNAAAAAoAAAAKACIAAG1heHAAAAGAAAAAHwAAACABDwAdbmFtZQAAAoQAAAFJAAACiCnmEVVwb3N0AAAD0AAAACMAAAA1DunpUnjaY2BkYGAAYja/oO54fpuvDNwsDCBwc4/6fzjtwNDNfICpBMjlYGACiQIAGVAKZnjaY2BkYGBu+N/AEMPCAALMBxgYGVABCwBVNgMsAAAAeNpjYGRgYGBhEGQA0QwMTEDMBYQMDP/BfAYACnYBLQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ4xMDf8b2CIYW5gaAAKM4LkANq9C9sAAHjaY2GAABYIdgAAAMAATQB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jOG//8hpBQzVCUDIxsDjMnAyAQkmBhQASPDsAcAMCAGoQAAAAAAAAAAAAAAIgAAAAEAQACLA8ACdAAQAAAlASYiBhQXARYyNwE2NCYiBwIA/oYNIBkMAZcNIA0BlwwZIA3uAXoMGSAN/mkMDAGXDSAZDAB42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwKJMjExciUVF+eW6KfnleQAZ0wQyAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNPer/YTQAQ+0HIAAA)
     format('woff');
   font-weight: normal;
   font-style: normal;
 }
+.up-collapse{
+margin-left: 20upx; margin-right: 20upx; border-radius: 11upx
+}
 
 .up-collapse-icon {
-  font-family: 'fuiCollapse' !important;
+  font-family: 'tuiCollapse' !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/ui-fireui/components/u-config/index.js

@@ -0,0 +1,129 @@
+/*
+  基础组件props属性全局配置文件。优先级：全局配置文件props < 单独设置组件props
+  温馨提示：未设置则使用组件内默认值，避免出错，请勿删减以下配置
+  组件属性介绍请查看文档
+*/
+
+//组件内主色配置
+const color = {
+  primary: '#5677fc',
+  success: '#07c160',
+  warning: '#ff7900',
+  danger: '#EB0909',
+  pink: '#f74d54',
+  blue: '#007AFF',
+  link: '#586c94'
+};
+
+const propsConfig = {
+  //组件内主色配置
+  color,
+  //组件名称，字体图标组件 up-icon
+  tuiIcon: {
+    //组件属性值
+    size: 32,
+    unit: 'px',
+    color: '#999'
+  },
+  //按钮组件 up-button
+  tuiButton: {
+    height: '96rpx',
+    size: 32
+  },
+  //列表项组件 up-list-cell
+  tuiListCell: {
+    arrowColor: '#c0c0c0',
+    lineColor: '#eaeef1',
+    lineLeft: 44,
+    padding: '26rpx 44rpx',
+    color: '#333',
+    size: 28
+  },
+  //按钮组件 up-form-button
+  tuiFormButton: {
+    background: color.primary,
+    color: '#fff',
+    height: '96rpx',
+    size: 32,
+    radius: '6rpx'
+  },
+  //文本组件 up-text
+  tuiText: {
+    size: 32,
+    unit: 'rpx',
+    color: ''
+  },
+  //输入框组件 up-input
+  tuiInput: {
+    requiredColor: color.danger,
+    labelSize: 32,
+    labelColor: '#333',
+    size: 32,
+    color: '#333',
+    padding: '26rpx 30rpx',
+    backgroundColor: '#FFFFFF',
+    radius: 0
+  },
+  //表单项组件 up-form-item
+  tuiFormItem: {
+    padding: '28rpx 30rpx',
+    labelSize: 32,
+    labelColor: '#333',
+    labelFontWeight: 400,
+    asteriskColor: color.danger,
+    background: '#fff',
+    arrowColor: '#c0c0c0',
+    borderColor: '#eaeef1',
+    radius: '0rpx',
+    position: 2
+  },
+  //表单校验组件 up-form
+  tuiForm: {
+    tipBackgroundColor: color.pink,
+    duration: 2000
+  },
+  //全局方法,调用 uni.$tui.toast
+  toast(text, duration, success) {
+    uni.showToast({
+      // #ifndef MP-ALIPAY
+      duration: duration || 2000,
+      // #endif
+      title: text || '出错啦~',
+      icon: success ? 'success' : 'none'
+    });
+  },
+  modal(title, content, showCancel, callback, confirmColor, confirmText) {
+    uni.showModal({
+      title: title || '提示',
+      content: content,
+      showCancel: showCancel,
+      cancelColor: '#555',
+      confirmColor: confirmColor || color.primary,
+      confirmText: confirmText || '确定',
+      success(res) {
+        if (res.confirm) {
+          callback && callback(true);
+        } else {
+          callback && callback(false);
+        }
+      }
+    });
+  },
+  //跳转页面
+  href(url, isMain) {
+    if (isMain) {
+      uni.switchTab({
+        url: url
+      });
+    } else {
+      uni.navigateTo({
+        url: url
+      });
+    }
+  },
+  rpx2px(value) {
+    return uni.upx2px(value);
+  }
+};
+
+export default propsConfig;