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

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

@@ -8,12 +8,12 @@
       :data-lineWidth="lineWidth"
       :data-lineCap="lineCap"
       :data-fontSize="fontSize"
-      :data-fontColor="fontColor"
+      :data-fontColor="getFontColor"
       :data-fontShow="fontShow"
       :data-percentText="percentText"
       :data-defaultShow="defaultShow"
       :data-defaultColor="defaultColor"
-      :data-progressColor="progressColor"
+      :data-progressColor="getProgressColor"
       :data-gradualColor="gradualColor"
       :data-sAngle="sAngle"
       :data-counterclockwise="counterclockwise"
@@ -31,7 +31,7 @@
 <script module="parse" lang="renderjs">
 export default {
   methods: {
-    formatStr(str) {
+    format(str) {
       if (!str) return str;
       return str.replace(/\"/g, '');
     },
@@ -42,13 +42,16 @@ export default {
     initDraw(percentage, oldPercentage, owner, ins) {
       let state = ins.getState();
       let res = ins.getDataset();
-      const activeMode = this.formatStr(res.activemode);
+      const activeMode = this.format(res.activemode);
       let start = activeMode === 'backwards' ? 0 : state.startPercentage || 0;
+      //当start大于当前percentage时，start设置为0
+      start = start > percentage ? 0 : start;
       if (!state.progressContext || !state.canvas) {
         const width = res.width;
         const height = res.height == 0 ? res.width : res.height;
         let ele = `.${res.cid}>canvas`;
-        const canvas = document.querySelectorAll(this.formatStr(ele))[0];
+        const canvas = document.querySelectorAll(this.format(ele))[0];
+        if (!canvas) return;
         const ctx = canvas.getContext('2d');
         // const dpr =uni.getSystemInfoSync().pixelRatio;
         // canvas.style.width=width+'px';
@@ -68,17 +71,17 @@ export default {
       //终止弧度
       let sangle = Number(res.sangle) * Math.PI;
       let eAngle = Math.PI * (res.height != 0 ? 1 : 2) + sangle;
-      this.drawArc(ctx, eAngle, this.formatStr(res.defaultcolor), res);
+      this.drawArc(ctx, eAngle, this.format(res.defaultcolor), res);
     },
     drawPercentage(ctx, percentage, res) {
       ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素
       ctx.beginPath();
-      ctx.fillStyle = this.formatStr(res.fontcolor);
+      ctx.fillStyle = this.format(res.fontcolor);
       ctx.font = res.fontsize + 'px Arial'; //设置字体大小和字体
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       let radius = res.width / 2;
-      let percenttext = this.formatStr(res.percenttext);
+      let percenttext = this.format(res.percenttext);
       if (!percenttext) {
         let multiple = Number(res.multiple);
         percentage = this.bool(res.counterclockwise) ? 100 - percentage * multiple : percentage * multiple;
@@ -95,8 +98,8 @@ export default {
       if (!ctx || !canvas) return;
       let that = this;
       let gradient = ctx.createLinearGradient(0, 0, Number(res.width), 0);
-      gradient.addColorStop(0, this.formatStr(res.progresscolor));
-      let gradualColor = this.formatStr(res.gradualcolor);
+      gradient.addColorStop(0, this.format(res.progresscolor));
+      let gradualColor = this.format(res.gradualcolor);
       if (gradualColor) {
         gradient.addColorStop('1', gradualColor);
       }
@@ -106,13 +109,16 @@ export default {
           if (res) {
             requestId = requestAnimationFrame(renderLoop);
           } else {
-            cancelAnimationFrame(requestId);
-            requestId = null;
-            renderLoop = null;
+            setTimeout(() => {
+              cancelAnimationFrame(requestId);
+              requestId = null;
+              renderLoop = null;
+            }, 20);
           }
         });
       };
-      requestId = requestAnimationFrame(renderLoop);
+      renderLoop();
+      // requestId = requestAnimationFrame(renderLoop)
 
       function drawFrame(callback) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -122,32 +128,33 @@ export default {
         if (that.bool(res.fontshow)) {
           that.drawPercentage(ctx, startPercentage, res);
         }
-        if (percentage === 0 || (that.bool(res.counterclockwise) && startPercentage === 100)) return;
-        let sangle = Number(res.sangle) * Math.PI;
-        let eAngle = ((2 * Math.PI) / 100) * startPercentage + sangle;
-        that.drawArc(ctx, eAngle, gradient, res);
+        let isEnd = percentage === 0 || (that.bool(res.counterclockwise) && startPercentage === 100);
+        if (!isEnd) {
+          let sangle = Number(res.sangle) * Math.PI;
+          let eAngle = ((2 * Math.PI) / 100) * startPercentage + sangle;
+          that.drawArc(ctx, eAngle, gradient, res);
+        }
         owner.callMethod('change', {
           percentage: startPercentage
         });
         if (startPercentage >= percentage) {
           state.startPercentage = startPercentage;
           owner.callMethod('end', {
-            canvasId: that.formatStr(res.canvasid)
+            canvasId: that.format(res.canvasid)
           });
-          cancelAnimationFrame(requestId);
           callback && callback(false);
-          return;
+        } else {
+          let num = startPercentage + Number(res.speed);
+          startPercentage = num > percentage ? percentage : num;
+          callback && callback(true);
         }
-        let num = startPercentage + Number(res.speed);
-        startPercentage = num > percentage ? percentage : num;
-        callback && callback(true);
       }
     },
     //创建弧线
     drawArc(ctx, eAngle, strokeStyle, res) {
       ctx.save();
       ctx.beginPath();
-      ctx.lineCap = this.formatStr(res.linecap);
+      ctx.lineCap = this.format(res.linecap);
       ctx.lineWidth = Number(res.linewidth);
       ctx.strokeStyle = strokeStyle;
       let radius = res.width / 2; //x=y
@@ -162,13 +169,14 @@ export default {
 </script>
 <script>
 export default {
-  name: 'fuiRoundProgress',
+  name: 'tuiRoundProgress',
+  emits: ['change', 'end'],
   props: {
     /*
-		  传值需使用rpx进行转换保证各终端兼容
-		  px = rpx / 750 * wx.getSystemInfoSync().windowWidth
-		  圆形进度条(画布)宽度，直径 [px]
-		*/
+			  传值需使用rpx进行转换保证各终端兼容
+			  px = rpx / 750 * wx.getSystemInfoSync().windowWidth
+			  圆形进度条(画布)宽度，直径 [px]
+			*/
     diam: {
       type: Number,
       default: 60
@@ -184,11 +192,11 @@ export default {
       default: 4
     },
     /*
-			 线条的端点样式
-			 butt：向线条的每个末端添加平直的边缘
-			 round	向线条的每个末端添加圆形线帽
-			 square	向线条的每个末端添加正方形线帽
-			*/
+				 线条的端点样式
+				 butt：向线条的每个末端添加平直的边缘
+				 round	向线条的每个末端添加圆形线帽
+				 square	向线条的每个末端添加正方形线帽
+				*/
     lineCap: {
       type: String,
       default: 'round'
@@ -201,7 +209,7 @@ export default {
     //圆环进度字体颜色
     fontColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //是否显示进度文字
     fontShow: {
@@ -209,9 +217,9 @@ export default {
       default: true
     },
     /*
-			 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
-			 可以使用 slot自定义显示内容
-			*/
+				 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+				 可以使用 slot自定义显示内容
+				*/
     percentText: {
       type: String,
       default: ''
@@ -229,7 +237,7 @@ export default {
     //进度条颜色
     progressColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //进度条渐变颜色[结合progressColor使用，默认为空]
     gradualColor: {
@@ -267,25 +275,37 @@ export default {
       default: 'backwards'
     }
   },
+  computed: {
+    getFontColor() {
+      return this.fontColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getProgressColor() {
+      return this.progressColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    }
+  },
   watch: {
     percentage(val) {
-      this.percent = val;
+      if (this.isInit) {
+        this.percent = val;
+      }
     }
   },
   mounted() {
     setTimeout(() => {
       this.percent = this.percentage;
+      this.isInit = true;
     }, 50);
   },
   data() {
     return {
+      isInit: false,
       percent: -1,
       progressCanvasId: this.getCanvasId()
     };
   },
   methods: {
     getCanvasId() {
-      return 'fui' + new Date().getTime() + (Math.random() * 100000).toFixed(0);
+      return 'tui' + new Date().getTime() + (Math.random() * 100000).toFixed(0);
     },
     change(e) {
       //绘制进度

package/ui-fireui/components/u-scroll-top/u-scroll-top.vue

@@ -36,7 +36,8 @@
  * 也可直接转成base64（不建议）
  * */
 export default {
-  name: 'fuiScrollTop',
+  name: 'tuiScrollTop',
+  emits: ['index', 'share'],
   props: {
     //回顶部按钮距离底部距离 rpx
     bottom: {
@@ -107,7 +108,7 @@ export default {
     };
   },
   methods: {
-    goTop() {
+    goTop: function () {
       this.toggle = false;
       uni.pageScrollTo({
         scrollTop: 0,
@@ -117,7 +118,7 @@ export default {
         this.toggle = true;
       }, 220);
     },
-    goIndex() {
+    goIndex: function () {
       this.$emit('index', {});
     },
     share() {

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

@@ -0,0 +1,149 @@
+<template>
+  <view class="up-section" :style="{ margin: margin, background: background, padding: padding }">
+    <view class="up-section__title" @tap="handleClick">
+      <view
+        class="up-section__decorate"
+        v-if="isLine"
+        :style="{
+          background: getLineColor,
+          width: lineWidth + 'rpx',
+          left: `-${lineRight}rpx`,
+          top: lineGap + 'rpx',
+          bottom: lineGap + 'rpx',
+          borderRadius: lineCap === 'circle' ? `${lineWidth}rpx` : 0
+        }"
+      ></view>
+      <slot name="left"></slot>
+      <text :style="{ fontSize: size + 'rpx', color: color, fontWeight: fontWeight }" v-if="title">{{ title }}</text>
+      <slot></slot>
+    </view>
+    <view class="up-section__sub" :style="{ paddingTop: descrTop + 'rpx' }" v-if="descr">
+      <text class="up-section__descr" :style="{ fontSize: descrSize + 'rpx', color: descrColor }">{{ descr }}</text>
+    </view>
+    <slot name="descr"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tuiSection',
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [Number, String],
+      default: 32
+    },
+    color: {
+      type: String,
+      default: '#333'
+    },
+    fontWeight: {
+      type: [Number, String],
+      default: 400
+    },
+    descr: {
+      type: String,
+      default: ''
+    },
+    descrSize: {
+      type: [Number, String],
+      default: 24
+    },
+    descrColor: {
+      type: String,
+      default: '#7a7a7a'
+    },
+    descrTop: {
+      type: [Number, String],
+      default: 16
+    },
+    isLine: {
+      type: Boolean,
+      default: false
+    },
+    lineWidth: {
+      type: [Number, String],
+      default: 8
+    },
+    lineColor: {
+      type: String,
+      default: ''
+    },
+    //square、circle
+    lineCap: {
+      type: String,
+      default: 'circle'
+    },
+    lineRight: {
+      type: [Number, String],
+      default: 16
+    },
+    lineGap: {
+      type: [Number, String],
+      default: 4
+    },
+    background: {
+      type: String,
+      default: 'transparent'
+    },
+    padding: {
+      type: String,
+      default: '20rpx 30rpx'
+    },
+    margin: {
+      type: String,
+      default: '0'
+    }
+  },
+  computed: {
+    getLineColor() {
+      return this.lineColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', {
+        title: this.title
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.up-section {
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+}
+
+.up-section__title {
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  word-break: break-all;
+  flex-shrink: 0;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+}
+
+.up-section__decorate {
+  position: absolute;
+}
+
+.up-section__sub {
+  /* #ifndef APP-NVUE */
+  word-break: break-all;
+  /* #endif */
+}
+
+.up-section__descr {
+  font-weight: 400;
+}
+</style>

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

@@ -5,6 +5,7 @@
   >
     <view
       class="up-skeleton-cmomon"
+      :class="{ 'up-skeleton__active': active }"
       v-for="(item, index) in skeletonElements"
       :key="index"
       :style="{
@@ -22,7 +23,7 @@
 
 <script>
 export default {
-  name: 'fuiSkeleton',
+  name: 'tuiSkeleton',
   props: {
     //选择器(外层容器)
     selector: {
@@ -64,12 +65,17 @@ export default {
     //是否需要loading
     isLoading: {
       type: Boolean,
-      default: true
+      default: false
     },
     //loading类型[1-10]
     loadingType: {
       type: Number,
       default: 1
+    },
+    //是否展示动画效果
+    active: {
+      type: Boolean,
+      default: true
     }
   },
   created() {
@@ -97,14 +103,14 @@ export default {
     };
   },
   methods: {
-    getLoadingType(type) {
+    getLoadingType: function (type) {
       let value = 1;
       if (type && type > 0 && type < 11) {
         value = type;
       }
       return 'up-loading-' + value;
     },
-    getRadius(type, val) {
+    getRadius: function (type, val) {
       let radius = '0';
       if (type == 'circular') {
         radius = '50%';
@@ -125,10 +131,20 @@ export default {
       let skeletonType = this.skeletonType || [];
       let nodes = [];
       for (let item of skeletonType) {
-        let className = `.${item}`;
+        let className = '';
+        // #ifndef MP-WEIXIN
+        className = `.${item}`;
         if (~'rect_circular_fillet'.indexOf(item)) {
           className = `.${this.selector}-${item}`;
         }
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        className = `.${this.selector} >>> .${item}`;
+        if (~'rect_circular_fillet'.indexOf(item)) {
+          className = `.${this.selector} >>> .${this.selector}-${item}`;
+        }
+        // #endif
         await this.nodesRef(className).then((res) => {
           res.map((d) => {
             d.skeletonType = item;
@@ -161,7 +177,6 @@ export default {
 .up-skeleton-cmomon {
   position: absolute;
   z-index: 99999;
-  overflow: hidden;
 }
 
 .up-skeleton-box {
@@ -245,4 +260,20 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+.up-skeleton__active {
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  animation: up-active 1.4s ease infinite;
+  background-size: 400% 100%;
+}
+
+@keyframes up-active {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
 </style>