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

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

@@ -0,0 +1,167 @@
+<template>
+  <view class="fui-rate-class fui-rate-box" @touchmove="touchMove">
+    <block v-for="(item, index) in quantity" :key="index">
+      <view
+        class="fui-icon fui-relative"
+        :class="['fui-icon-collection' + (hollow && (current <= index || (disabled && current <= index + 1)) ? '' : '-fill')]"
+        :data-index="index"
+        @tap="handleTap"
+        :style="{ fontSize: size + 'px', color: current > index + 1 || (!disabled && current > index) ? active : normal }"
+      >
+        <view
+          class="fui-icon fui-icon-main fui-icon-collection-fill"
+          v-if="disabled && current == index + 1"
+          :style="{ fontSize: size + 'px', color: active, width: percent + '%' }"
+        ></view>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiRate',
+  props: {
+    //数量
+    quantity: {
+      type: Number,
+      default: 5
+    },
+    //当前选中
+    current: {
+      type: Number,
+      default: 0
+    },
+    //当前选中星星分数(大于0，小于等于1的数)
+    score: {
+      type: [Number, String],
+      default: 1
+    },
+    //禁用点击
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    //大小
+    size: {
+      type: Number,
+      default: 20
+    },
+    //未选中颜色
+    normal: {
+      type: String,
+      default: '#b2b2b2'
+    },
+    //选中颜色
+    active: {
+      type: String,
+      default: '#e41f19'
+    },
+    //未选中是否为空心
+    hollow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      pageX: 0,
+      percent: 0
+    };
+  },
+  created() {
+    this.percent = Number(this.score || 0) * 100;
+  },
+  watch: {
+    score(newVal, oldVal) {
+      this.percent = Number(newVal || 0) * 100;
+    }
+  },
+  methods: {
+    handleTap(e) {
+      if (this.disabled) {
+        return;
+      }
+      const index = e.currentTarget.dataset.index;
+      this.$emit('change', {
+        index: Number(index) + 1
+      });
+    },
+    touchMove(e) {
+      if (this.disabled) {
+        return;
+      }
+      if (!e.changedTouches[0]) {
+        return;
+      }
+      const movePageX = e.changedTouches[0].pageX;
+      const distance = movePageX - this.pageX;
+
+      if (distance <= 0) {
+        return;
+      }
+      let index = Math.ceil(distance / this.size);
+      index = index > this.count ? this.count : index;
+      this.$emit('change', {
+        index: index
+      });
+    }
+  },
+  mounted() {
+    const className = '.fui-rate-box';
+    let query = uni.createSelectorQuery().in(this);
+    query
+      .select(className)
+      .boundingClientRect((res) => {
+        this.pageX = res.left || 0;
+      })
+      .exec();
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'rateFont';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT4AA0AAAAAB4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE3AAAABoAAAAciBprQUdERUYAAAS8AAAAHgAAAB4AKQALT1MvMgAAAaAAAABDAAAAVj1YSN1jbWFwAAAB+AAAAEIAAAFCAA/qlmdhc3AAAAS0AAAACAAAAAj//wADZ2x5ZgAAAkgAAADwAAABZLMTdXtoZWFkAAABMAAAADAAAAA2FZKISmhoZWEAAAFgAAAAHQAAACQHYgOFaG10eAAAAeQAAAARAAAAEgx6AHpsb2NhAAACPAAAAAwAAAAMAEYAsm1heHAAAAGAAAAAHgAAACABEQBPbmFtZQAAAzgAAAFJAAACiCnmEVVwb3N0AAAEhAAAAC0AAABHLO3vkXjaY2BkYGAA4t2/VF7G89t8ZeBmYQCBm9ZKMnC6ikGMuYXpP5DLwcAEEgUAHPQJOXjaY2BkYGBu+N/AEMPCAALMLQyMDKiABQBQwgLwAAAAeNpjYGRgYGBlcGZgYgABEMkFhAwM/8F8BgAPigFhAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PXj17zdzwv4EhhrmBoQEozAiSAwD/YA2wAHjaY2GAABYIrmKoAgACggEBAAAAeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP6z1///A8lX//9LSkJVMjCyMcCYDIxMQIKJARUwMgx7AAA/9QiLAAAAAAAAAAAAAABGALJ42mNgZKhiEGNuYfrPoMnAwGimps+ox6jPqKbEz8jHCMLyjHJAmk1czMie0cxInlHMDChrZs6cJyaosI+NlzmU34I/lImPdb+CoHgXCyujIosYtzTfKlYBtlWyuqwKjKwsjNvFTdlkGDnZ1srKrmXjZJRhMxVvZxFgA+rgYI9iYoriV1TYzybAwsDABHeLBIMT0DUg29VBTjEHucvcjtGeUVyOUZ6JaFcybefnZ5HuFdEX6ZVm5uMvniemxuXmzqUmNs+FeOfHCeiKzfPi4vKaJ6YrUCDOIiM8YYKwDIu4OMRbrOtkZdex4vMWACzGM5B42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwaJMjEyMzPzJ+Tk5qcklmfl58WmZOTlcCD4Ak9QKlAAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAQAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPRNayUZGA0AM8UETgAA)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fui-icon {
+  font-family: 'rateFont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: block;
+}
+
+.fui-relative {
+  position: relative;
+}
+
+.fui-icon-main {
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.fui-icon-collection-fill:before {
+  content: '\e6ea';
+}
+
+.fui-icon-collection:before {
+  content: '\e6eb';
+}
+
+.fui-rate-box {
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,306 @@
+<template>
+  <view class="fui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+    <canvas
+      :start="percent"
+      :change:start="parse.initDraw"
+      :data-width="diam"
+      :data-height="height"
+      :data-lineWidth="lineWidth"
+      :data-lineCap="lineCap"
+      :data-fontSize="fontSize"
+      :data-fontColor="fontColor"
+      :data-fontShow="fontShow"
+      :data-percentText="percentText"
+      :data-defaultShow="defaultShow"
+      :data-defaultColor="defaultColor"
+      :data-progressColor="progressColor"
+      :data-gradualColor="gradualColor"
+      :data-sAngle="sAngle"
+      :data-counterclockwise="counterclockwise"
+      :data-multiple="multiple"
+      :data-speed="speed"
+      :data-activeMode="activeMode"
+      :data-cid="progressCanvasId"
+      :canvas-id="progressCanvasId"
+      :class="[progressCanvasId]"
+      :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
+    ></canvas>
+    <slot></slot>
+  </view>
+</template>
+<script module="parse" lang="renderjs">
+export default {
+  methods: {
+    formatStr(str) {
+      if (!str) return str;
+      return str.replace(/\"/g, '');
+    },
+    bool(str) {
+      return str === 'true' || str == true ? true : false;
+    },
+    //初始化绘制
+    initDraw(percentage, oldPercentage, owner, ins) {
+      let state = ins.getState();
+      let res = ins.getDataset();
+      const activeMode = this.formatStr(res.activemode);
+      let start = activeMode === 'backwards' ? 0 : state.startPercentage || 0;
+      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 ctx = canvas.getContext('2d');
+        // const dpr =uni.getSystemInfoSync().pixelRatio;
+        // canvas.style.width=width+'px';
+        // canvas.style.height=height+'px';
+        // canvas.width = width * dpr;
+        // canvas.height = height * dpr;
+        // ctx.scale(dpr, dpr);
+        state.progressContext = ctx;
+        state.canvas = canvas;
+        this.drawProgressCircular(start, ctx, canvas, percentage, res, state, owner);
+      } else {
+        this.drawProgressCircular(start, state.progressContext, state.canvas, percentage, res, state, owner);
+      }
+    },
+    //默认(背景)圆环
+    drawDefaultCircular(ctx, canvas, res) {
+      //终止弧度
+      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);
+    },
+    drawPercentage(ctx, percentage, res) {
+      ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素
+      ctx.beginPath();
+      ctx.fillStyle = this.formatStr(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);
+      if (!percenttext) {
+        let multiple = Number(res.multiple);
+        percentage = this.bool(res.counterclockwise) ? 100 - percentage * multiple : percentage * multiple;
+        percentage = percentage.toFixed(0) + '%';
+      } else {
+        percentage = percenttext;
+      }
+      ctx.fillText(percentage, radius, radius);
+      ctx.stroke();
+      ctx.restore();
+    },
+    //进度圆环
+    drawProgressCircular(startPercentage, ctx, canvas, percentage, res, state, owner) {
+      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);
+      if (gradualColor) {
+        gradient.addColorStop('1', gradualColor);
+      }
+      let requestId = null;
+      let renderLoop = () => {
+        drawFrame((res) => {
+          if (res) {
+            requestId = requestAnimationFrame(renderLoop);
+          } else {
+            cancelAnimationFrame(requestId);
+            requestId = null;
+            renderLoop = null;
+          }
+        });
+      };
+      requestId = requestAnimationFrame(renderLoop);
+
+      function drawFrame(callback) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (that.bool(res.defaultshow)) {
+          that.drawDefaultCircular(ctx, canvas, res);
+        }
+        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);
+        owner.callMethod('change', {
+          percentage: startPercentage
+        });
+        if (startPercentage >= percentage) {
+          state.startPercentage = startPercentage;
+          owner.callMethod('end', {
+            canvasId: that.formatStr(res.canvasid)
+          });
+          cancelAnimationFrame(requestId);
+          callback && callback(false);
+          return;
+        }
+        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.lineWidth = Number(res.linewidth);
+      ctx.strokeStyle = strokeStyle;
+      let radius = res.width / 2; //x=y
+      let sangle = Number(res.sangle) * Math.PI;
+      ctx.arc(radius, radius, radius - res.linewidth, sangle, eAngle, this.bool(res.counterclockwise));
+      ctx.stroke();
+      ctx.closePath();
+      ctx.restore();
+    }
+  }
+};
+</script>
+<script>
+export default {
+  name: 'fuiRoundProgress',
+  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: ''
+    },
+    //起始弧度，单位弧度 实际  Math.PI * sAngle
+    sAngle: {
+      type: Number,
+      default: -0.5
+    },
+    //指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
+    counterclockwise: {
+      type: Boolean,
+      default: false
+    },
+    //进度百分比 [10% 传值 10]
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    //进度百分比缩放倍数[使用半弧为100%时，则可传2]
+    multiple: {
+      type: Number,
+      default: 1
+    },
+    //动画执行速度，值越大动画越快（0.1~100）
+    speed: {
+      type: [Number, String],
+      default: 1
+    },
+    //backwards: 动画从头播；forwards：动画从上次结束点接着播
+    activeMode: {
+      type: String,
+      default: 'backwards'
+    }
+  },
+  watch: {
+    percentage(val) {
+      this.percent = val;
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.percent = this.percentage;
+    }, 50);
+  },
+  data() {
+    return {
+      percent: -1,
+      progressCanvasId: this.getCanvasId()
+    };
+  },
+  methods: {
+    getCanvasId() {
+      return 'fui' + new Date().getTime() + (Math.random() * 100000).toFixed(0);
+    },
+    change(e) {
+      //绘制进度
+      this.$emit('change', e);
+    },
+    end(e) {
+      //绘制完成
+      this.$emit('end', e);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-circular-container {
+  position: relative;
+}
+</style>

package/ui-fireui/fui-scroll-top/fui-scroll-top.vue

@@ -0,0 +1,189 @@
+<template>
+  <view
+    class="fui-scroll-top_box"
+    v-show="isIndex || isShare || (visible && toggle)"
+    :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }"
+  >
+    <view class="fui-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
+      <image class="fui-scroll-top_img" :src="indexIcon"></image>
+      <view class="fui-scroll-top_text">首页</view>
+    </view>
+    <button open-type="share" class="fui-share-btn" v-if="isShare && !customShare">
+      <view class="fui-scroll-top_item" :class="{ 'fui-scroll-item_top': isIndex }">
+        <image class="fui-scroll-top_img" :src="shareIcon"></image>
+      </view>
+    </button>
+    <view class="fui-scroll-top_item" :class="{ 'fui-scroll-item_top': isIndex }" v-if="isShare && customShare" @tap.stop="share">
+      <image class="fui-scroll-top_img" :src="shareIcon"></image>
+    </view>
+    <view
+      class="fui-scroll-top_item"
+      :class="{ 'fui-scroll-item_top': isIndex || isShare }"
+      v-show="visible && toggle"
+      @tap.stop="goTop"
+    >
+      <image class="fui-scroll-top_img" :src="topIcon"></image>
+      <view class="fui-scroll-top_text fui-color-white">顶部</view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * 注意：组件中使用的图片地址，将文件复制到自己项目中
+ * 如果图片位置与组件同级，编译成小程序时图片会丢失
+ * 拷贝static下整个components文件夹
+ * 也可直接转成base64（不建议）
+ * */
+export default {
+  name: 'fuiScrollTop',
+  props: {
+    //回顶部按钮距离底部距离 rpx
+    bottom: {
+      type: Number,
+      default: 180
+    },
+    //回顶部按钮距离右侧距离 rpx
+    right: {
+      type: Number,
+      default: 25
+    },
+    //距离顶部多少距离显示 px
+    top: {
+      type: Number,
+      default: 200
+    },
+    //滚动距离
+    scrollTop: {
+      type: Number
+    },
+    //回顶部滚动时间
+    duration: {
+      type: Number,
+      default: 120
+    },
+    //是否显示返回首页按钮
+    isIndex: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示分享图标
+    isShare: {
+      type: Boolean,
+      default: false
+    },
+    //自定义分享(小程序可使用button=>open-type="share")
+    customShare: {
+      type: Boolean,
+      default: false
+    },
+    //回顶部icon
+    topIcon: {
+      type: String,
+      default: '/static/components/scroll-top/icon_top_3x.png'
+    },
+    //回首页icon
+    indexIcon: {
+      type: String,
+      default: '/static/components/scroll-top/icon_index_3x.png'
+    },
+    //分享icon
+    shareIcon: {
+      type: String,
+      default: '/static/components/scroll-top/icon_share_3x.png'
+    }
+  },
+  watch: {
+    scrollTop(newValue, oldValue) {
+      this.change();
+    }
+  },
+  data() {
+    return {
+      //判断是否显示
+      visible: false,
+      //控制显示，主要解决调用api滚到顶部fixed元素抖动的问题
+      toggle: true
+    };
+  },
+  methods: {
+    goTop() {
+      this.toggle = false;
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: this.duration
+      });
+      setTimeout(() => {
+        this.toggle = true;
+      }, 220);
+    },
+    goIndex() {
+      this.$emit('index', {});
+    },
+    share() {
+      this.$emit('share', {});
+    },
+    change() {
+      let show = this.scrollTop > this.top;
+      if ((show && this.visible) || (!show && !this.visible)) {
+        return;
+      }
+      this.visible = show;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-scroll-top_box {
+  width: 80rpx;
+  height: 270rpx;
+  position: fixed;
+  z-index: 9999;
+  right: 30rpx;
+  bottom: 30rpx;
+  font-weight: 400;
+}
+
+.fui-scroll-top_item {
+  width: 80rpx;
+  height: 80rpx;
+  position: relative;
+}
+
+.fui-scroll-item_top {
+  margin-top: 30rpx;
+}
+
+.fui-scroll-top_img {
+  width: 80rpx;
+  height: 80rpx;
+  display: block;
+}
+
+.fui-scroll-top_text {
+  width: 80rpx;
+  text-align: center;
+  font-size: 24rpx;
+  line-height: 24rpx;
+  transform: scale(0.92);
+  transform-origin: center center;
+  position: absolute;
+  left: 0;
+  bottom: 15rpx;
+}
+
+.fui-color-white {
+  color: #fff;
+}
+.fui-share-btn {
+  background: transparent !important;
+  padding: 0;
+  margin: 0;
+  display: inline;
+  border: 0;
+}
+.fui-share-btn::after {
+  border: 0;
+}
+</style>