@10yun/cv-mobile-ui 0.5.29 → 0.5.31

package/ui-fireui/fui-circular-progress/fui-circular-progress.vue

@@ -0,0 +1,261 @@
+<template>
+  <view class="fui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+    <canvas
+      class="fui-circular-default"
+      :canvas-id="defaultCanvasId"
+      :id="defaultCanvasId"
+      :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+      v-if="defaultShow"
+    ></canvas>
+    <canvas
+      class="fui-circular-progress"
+      :canvas-id="progressCanvasId"
+      :id="progressCanvasId"
+      :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+    ></canvas>
+    <slot />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiCircularProgress',
+  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: '#5677fc'
+    },
+    //是否显示进度文字
+    fontShow: {
+      type: Boolean,
+      default: true
+    },
+    /*
+			 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+			 可以使用 slot自定义显示内容
+			*/
+    percentText: {
+      type: String,
+      default: ''
+    },
+    //是否显示默认(背景)进度条
+    defaultShow: {
+      type: Boolean,
+      default: true
+    },
+    //默认进度条颜色
+    defaultColor: {
+      type: String,
+      default: '#CCC'
+    },
+    //进度条颜色
+    progressColor: {
+      type: String,
+      default: '#5677fc'
+    },
+    //进度条渐变颜色[结合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() {
+    return {
+      // #ifdef MP-WEIXIN
+      progressCanvasId: 'progressCanvasId',
+      defaultCanvasId: 'defaultCanvasId',
+      // #endif
+      // #ifndef MP-WEIXIN
+      progressCanvasId: this.getCanvasId(),
+      defaultCanvasId: this.getCanvasId(),
+      // #endif
+      progressContext: null,
+      linearGradient: null,
+      //起始百分比
+      startPercentage: 0
+      // dpi
+      //pixelRatio: uni.getSystemInfoSync().pixelRatio
+    };
+  },
+  mounted() {
+    this.initDraw(true);
+  },
+  methods: {
+    //初始化绘制
+    initDraw(init) {
+      let start = this.activeMode === 'backwards' ? 0 : this.startPercentage;
+      if (this.defaultShow && init) {
+        this.drawDefaultCircular();
+      }
+      this.drawProgressCircular(start);
+    },
+    //默认(背景)圆环
+    drawDefaultCircular() {
+      let ctx = uni.createCanvasContext(this.defaultCanvasId, this);
+      ctx.setLineWidth(this.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对象
+        gradient = ctx.createLinearGradient(0, 0, this.diam, 0);
+        gradient.addColorStop('0', this.progressColor);
+        if (this.gradualColor) {
+          gradient.addColorStop('1', this.gradualColor);
+        }
+        this.progressContext = ctx;
+        this.linearGradient = gradient;
+      }
+      ctx.setLineWidth(this.lineWidth);
+      ctx.setStrokeStyle(gradient);
+      let time = this.duration / this.percentage;
+      if (this.percentage > 0 || !this.fontShow) {
+        startPercentage = this.duration < 50 ? this.percentage - 1 : startPercentage;
+        startPercentage++;
+        if (startPercentage > this.percentage) {
+          this.$emit('end', {
+            canvasId: this.progressCanvasId
+          });
+          return;
+        }
+      }
+      if (this.fontShow) {
+        ctx.setFontSize(this.fontSize);
+        ctx.setFillStyle(this.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;
+        ctx.fillText(percentage, radius, radius);
+        if (this.percentage === 0 || (this.counterclockwise && startPercentage === 100)) {
+          ctx.draw();
+          return;
+        }
+      }
+      let eAngle = ((2 * Math.PI) / 100) * startPercentage + this.sAngle;
+      this.drawArc(ctx, eAngle);
+      setTimeout(() => {
+        this.startPercentage = startPercentage;
+        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
+      ctx.arc(radius, radius, radius - this.lineWidth, this.sAngle, eAngle, this.counterclockwise);
+      ctx.stroke();
+      ctx.draw();
+    },
+    //生成canvasId
+    getCanvasId() {
+      let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16);
+      });
+      return uuid;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-circular-container,
+.fui-circular-default {
+  position: relative;
+}
+
+.fui-circular-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+}
+</style>

package/ui-fireui/fui-collapse/fui-collapse.vue

@@ -0,0 +1,179 @@
+<template>
+  <view
+    class="fui-collapse"
+    style="margin-left: 20upx; margin-right: 20upx; border-radius: 11upx"
+    :style="{ backgroundColor: bgColor }"
+  >
+    <view class="fui-collapse-head" :style="{ backgroundColor: hdBgColor }" @tap.stop="handleClick">
+      <view class="fui-header" :class="{ 'fui-opacity': disabled }">
+        <slot name="title"></slot>
+        <view
+          class="fui-collapse-icon fui-icon-arrow"
+          :class="{ 'fui-icon-active': isOpen }"
+          :style="{ color: arrowColor }"
+          v-if="arrow"
+        ></view>
+      </view>
+    </view>
+    <view class="fui-collapse-body_box" :style="{ backgroundColor: bdBgColor, height: isOpen ? height : '0rpx' }">
+      <view
+        class="fui-collapse-body"
+        :class="{ 'fui-collapse-transform': height == 'auto', 'fui-collapse-body_show': isOpen && height == 'auto' }"
+      >
+        <slot name="content"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiCollapse',
+  props: {
+    //collapse背景颜色
+    bgColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //collapse-head 背景颜色
+    hdBgColor: {
+      type: String,
+      default: '#fff'
+    },
+    //collapse-body 背景颜色
+    bdBgColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //collapse-body实际高度 open时使用
+    height: {
+      type: String,
+      default: 'auto'
+    },
+    //索引
+    index: {
+      type: Number,
+      default: 0
+    },
+    //当前索引，index==current时展开
+    current: {
+      type: Number,
+      default: -1
+    },
+    // 是否禁用
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    //是否带箭头
+    arrow: {
+      type: [Boolean, String],
+      default: true
+    },
+    //箭头颜色
+    arrowColor: {
+      type: String,
+      default: '#333'
+    }
+  },
+  watch: {
+    current() {
+      this.updateCurrentChange();
+    }
+  },
+  created() {
+    this.updateCurrentChange();
+  },
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+  methods: {
+    updateCurrentChange() {
+      this.isOpen = this.index == this.current;
+    },
+    handleClick() {
+      if (this.disabled) return;
+      this.$emit('click', {
+        index: Number(this.index)
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'fuiCollapse';
+  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;
+}
+
+.fui-collapse-icon {
+  font-family: 'fuiCollapse' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fui-icon-arrow:before {
+  content: '\e600';
+}
+
+.fui-icon-arrow {
+  font-size: 32rpx;
+  transform: rotate(0);
+  transform-origin: center center;
+  transition: all 0.3s;
+  position: absolute;
+  top: 50%;
+  margin-top: -8px;
+  right: 30rpx;
+}
+
+.fui-arrow-padding {
+  padding-right: 62rpx;
+  box-sizing: border-box;
+}
+
+.fui-icon-active {
+  transform: rotate(180deg);
+  transform-origin: center center;
+}
+
+.fui-header {
+  position: relative;
+  z-index: 2;
+}
+.fui-collapse-body_box {
+  transition: all 0.25s;
+  overflow: hidden;
+}
+.fui-collapse-body {
+  transition: all 0.25s;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.fui-collapse-transform {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transform: translateY(-40%);
+  transform: translateY(-40%);
+}
+
+.fui-collapse-body_show {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+}
+
+.fui-opacity {
+  opacity: 0.6;
+}
+</style>