@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/ui-fireui/fui-navigation-bar/fui-navigation-bar.vue

@@ -0,0 +1,180 @@
+<template>
+  <view
+    class="fui-navigation-bar"
+    :class="{ 'fui-bar-line': opcity > 0.85 && splitLine, 'fui-navbar-fixed': isFixed }"
+    :style="{ height: height + 'px', backgroundColor: `rgba(${backgroundColor},${opcity})` }"
+  >
+    <view class="fui-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
+    <view
+      class="fui-navigation_bar-title"
+      :style="{ opacity: opcity, color: color, paddingTop: top - statusBarHeight + 'px' }"
+      v-if="title && !isCustom"
+    >
+      {{ title }}
+    </view>
+    <slot />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiNavigationBar',
+  props: {
+    //NavigationBar标题
+    title: {
+      type: String,
+      default: ''
+    },
+    //NavigationBar标题颜色
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    //NavigationBar背景颜色 rgb
+    backgroundColor: {
+      type: String,
+      default: '86,119,252'
+    },
+    //是否需要分割线
+    splitLine: {
+      type: Boolean,
+      default: false
+    },
+    //是否设置不透明度
+    isOpcity: {
+      type: Boolean,
+      default: true
+    },
+    //滚动条滚动距离
+    scrollTop: {
+      type: [Number, String],
+      default: 0
+    },
+    /*
+		 isOpcity 为true时生效
+		 opcity=scrollTop /windowWidth * scrollRatio
+		*/
+    scrollRatio: {
+      type: [Number, String],
+      default: 0.3
+    },
+    //是否自定义header内容
+    isCustom: {
+      type: Boolean,
+      default: false
+    },
+    //是否沉浸式
+    isImmersive: {
+      type: Boolean,
+      default: true
+    },
+    isFixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    scrollTop(newValue, oldValue) {
+      if (this.isOpcity) {
+        this.opcityChange();
+      }
+    }
+  },
+  data() {
+    return {
+      width: 375, //header宽度
+      left: 375, //小程序端 左侧距胶囊按钮距离
+      height: 44, //header高度
+      top: 0,
+      scrollH: 1, //滚动总高度,计算opcity
+      opcity: 0, //0-1
+      statusBarHeight: 0 //状态栏高度
+    };
+  },
+  created() {
+    this.opcity = this.isOpcity ? this.opcity : 1;
+    let obj = {};
+    // #ifdef MP-WEIXIN
+    obj = wx.getMenuButtonBoundingClientRect();
+    // #endif
+    // #ifdef MP-BAIDU
+    obj = swan.getMenuButtonBoundingClientRect();
+    // #endif
+    // #ifdef MP-ALIPAY
+    my.hideAddToDesktopMenu();
+    // #endif
+
+    uni.getSystemInfo({
+      success: (res) => {
+        this.statusBarHeight = res.statusBarHeight;
+        this.width = res.windowWidth;
+        this.left = obj.left || res.windowWidth;
+        if (this.isImmersive) {
+          this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
+        }
+        this.scrollH = res.windowWidth * this.scrollRatio;
+        this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
+        this.$emit('init', {
+          width: this.width,
+          height: this.height,
+          left: obj.left,
+          top: this.top,
+          statusBarHeight: this.statusBarHeight,
+          opcity: this.opcity
+        });
+      }
+    });
+  },
+  methods: {
+    opcityChange() {
+      let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop;
+      let opcity = scroll / this.scrollH;
+      if ((this.opcity >= 1 && opcity >= 1) || (this.opcity == 0 && opcity == 0)) {
+        return;
+      }
+      this.opcity = opcity;
+      this.$emit('change', {
+        opcity: this.opcity
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-navigation-bar {
+  width: 100%;
+}
+.fui-navbar-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 9998;
+}
+.fui-status-bar {
+  width: 100%;
+}
+.fui-navigation_bar-title {
+  width: 100%;
+  font-size: 17px;
+  line-height: 17px;
+  /* #ifndef APP-PLUS */
+  font-weight: 500;
+  /* #endif */
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-bar-line::after {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+</style>

package/ui-fireui/fui-no-data/fui-no-data.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="fui-nodata-box" :class="[fixed ? 'fui-nodata-fixed' : '']">
+    <image
+      v-if="imgUrl"
+      :src="imgUrl"
+      class="fui-tips-icon"
+      :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx' }"
+    ></image>
+    <view class="fui-tips-content">
+      <slot></slot>
+    </view>
+    <button
+      class="fui-tips-btn"
+      hover-class="fui-tips-btn-hover"
+      :style="{ width: btnWidth + 'rpx' }"
+      v-if="btnText"
+      @tap="handleClick"
+    >
+      {{ btnText }}
+    </button>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiNoData',
+  props: {
+    //是否垂直居中
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    //图片地址，没有则不显示
+    imgUrl: {
+      type: String,
+      default: ''
+    },
+    //图片宽度
+    imgWidth: {
+      type: Number,
+      default: 200
+    },
+    //图片高度
+    imgHeight: {
+      type: Number,
+      default: 200
+    },
+    //按钮宽度
+    btnWidth: {
+      type: Number,
+      default: 200
+    },
+    //按钮文字，没有则不显示
+    btnText: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-nodata-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.fui-nodata-fixed {
+  width: 90%;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.fui-tips-icon {
+  display: block;
+  flex-shrink: 0;
+  width: 280rpx;
+  height: 280rpx;
+  margin-bottom: 40rpx;
+}
+
+.fui-tips-content {
+  text-align: center;
+  color: #666666;
+  font-size: 28rpx;
+  padding: 0 50rpx 24rpx 50rpx;
+  box-sizing: border-box;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.fui-tips-btn {
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 28rpx;
+  background-color: #eb0909;
+  color: #fff;
+  border-radius: 6rpx;
+  margin: 0;
+}
+
+.fui-tips-btn-hover {
+  background-color: #c80808;
+  color: #e5e5e5;
+}
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <view class="fui-nomore-class fui-loadmore-none">
+    <view :class="[isDot ? 'fui-nomore-dot' : 'fui-nomore']">
+      <view :style="{ backgroundColor: backgroundColor }" :class="[isDot ? 'fui-dot-text' : 'fui-nomore-text']">
+        {{ isDot ? dotText : text }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'fuiNomore',
+  props: {
+    //当前页面背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fafafa'
+    },
+    //是否以圆点代替 "没有更多了"
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    //isDot为false时生效
+    text: {
+      type: String,
+      default: '没有更多了'
+    }
+  },
+  data() {
+    return {
+      dotText: '●'
+    };
+  }
+};
+</script>
+
+<style scoped>
+.fui-loadmore-none {
+  width: 50%;
+  margin: 1.5em auto;
+  line-height: 1.5em;
+  font-size: 28rpx;
+  display: flex;
+  justify-content: center;
+}
+
+.fui-nomore {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-top: 10rpx;
+  padding-bottom: 6rpx;
+}
+
+.fui-nomore::before {
+  content: ' ';
+  position: absolute;
+  border-bottom: 1rpx solid #333;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  width: 100%;
+  top: 18rpx;
+  left: 0;
+}
+
+.fui-nomore-text {
+  color: #999;
+  font-size: 28rpx;
+  text-align: center;
+  padding: 0 18rpx;
+  height: 36rpx;
+  line-height: 36rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.fui-nomore-dot {
+  position: relative;
+  text-align: center;
+  -webkit-display: flex;
+  display: flex;
+  -webkit-justify-content: center;
+  justify-content: center;
+  margin-top: 10rpx;
+  padding-bottom: 6rpx;
+}
+
+.fui-nomore-dot::before {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #e5e5e5;
+  -webkit-transform: scaleY(0.5) translateX(-50%);
+  transform: scaleY(0.5) translateX(-50%);
+  width: 360rpx;
+  top: 18rpx;
+  left: 50%;
+}
+
+.fui-dot-text {
+  position: relative;
+  color: #e5e5e5;
+  font-size: 10px;
+  text-align: center;
+  width: 50rpx;
+  height: 36rpx;
+  line-height: 36rpx;
+  -webkit-transform: scale(0.8);
+  transform: scale(0.8);
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+  z-index: 1;
+}
+</style>

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

@@ -0,0 +1,234 @@
+<template>
+  <view class="fui-numberbox">
+    <view
+      class="fui-numbox-icon fui-icon-reduce"
+      :class="[disabled || min >= value ? 'fui-disabled' : '']"
+      @tap="reduce"
+      :style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
+    ></view>
+    <input
+      type="number"
+      v-model="inputValue"
+      :disabled="disabled"
+      @blur="blur"
+      class="fui-num-input"
+      :style="{
+        color: color,
+        fontSize: size + 'rpx',
+        backgroundColor: backgroundColor,
+        height: height + 'rpx',
+        minHeight: height + 'rpx',
+        width: width + 'rpx'
+      }"
+    />
+    <view
+      class="fui-numbox-icon fui-icon-plus"
+      :class="[disabled || value >= max ? 'fui-disabled' : '']"
+      @tap="plus"
+      :style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiNumberbox',
+  props: {
+    value: {
+      type: Number,
+      default: 1
+    },
+    //最小值
+    min: {
+      type: Number,
+      default: 1
+    },
+    //最大值
+    max: {
+      type: Number,
+      default: 99
+    },
+    //迈步大小 1 1.1 10...
+    step: {
+      type: Number,
+      default: 1
+    },
+    //是否禁用操作
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    //加减图标大小 rpx
+    iconSize: {
+      type: Number,
+      default: 10
+    },
+    iconColor: {
+      type: String,
+      default: '#fff'
+    },
+    //input 高度
+    height: {
+      type: Number,
+      default: 42
+    },
+    //input 宽度
+    width: {
+      type: Number,
+      default: 80
+    },
+    size: {
+      type: Number,
+      default: 28
+    },
+    //input 背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    //input 字体颜色
+    color: {
+      type: String,
+      default: '#333'
+    },
+    //索引值，列表中使用
+    index: {
+      type: [Number, String],
+      default: 0
+    },
+    //自定义参数
+    custom: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  created() {
+    this.inputValue = +this.value;
+  },
+  data() {
+    return {
+      inputValue: 0
+    };
+  },
+  watch: {
+    value(val) {
+      this.inputValue = +val;
+    }
+  },
+  methods: {
+    getScale() {
+      let scale = 1;
+      //浮点型
+      if (!Number.isInteger(this.step)) {
+        scale = Math.pow(10, (this.step + '').split('.')[1].length);
+      }
+      return scale;
+    },
+    calcNum(type) {
+      if (this.disabled) {
+        return;
+      }
+      const scale = this.getScale();
+      let num = this.value * scale;
+      let step = this.step * scale;
+      if (type === 'reduce') {
+        num -= step;
+      } else if (type === 'plus') {
+        num += step;
+      }
+      let value = num / scale;
+      if (type === 'plus' && value < this.min) {
+        value = this.min;
+      } else if (type === 'reduce' && value > this.max) {
+        value = this.max;
+      }
+      if (value < this.min || value > this.max) {
+        return;
+      }
+      this.handleChange(value, type);
+    },
+    plus() {
+      this.calcNum('plus');
+    },
+    reduce() {
+      this.calcNum('reduce');
+    },
+    blur(e) {
+      let value = e.detail.value;
+      if (value) {
+        if (~value.indexOf('.') && Number.isInteger(this.step)) {
+          value = value.split('.')[0];
+        }
+        value = Number(value);
+        if (value > this.max) {
+          value = this.max;
+        } else if (value < this.min) {
+          value = this.min;
+        }
+      } else {
+        value = this.min;
+      }
+      if ((value == this.value && value != this.inputValue) || !e.detail.value) {
+        this.inputValue = value;
+      }
+      this.handleChange(value, 'blur');
+    },
+    handleChange(value, type) {
+      if (this.disabled) return;
+      this.$emit('change', {
+        value: value,
+        type: type,
+        index: this.index,
+        custom: this.custom
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'numberbox';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABtwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAciBpnRUdERUYAAARUAAAAHgAAAB4AKQALT1MvMgAAAZwAAABDAAAAVjxzSINjbWFwAAAB9AAAAEYAAAFK5zLpOGdhc3AAAARMAAAACAAAAAj//wADZ2x5ZgAAAkgAAACHAAAAnIfIEjxoZWFkAAABMAAAAC8AAAA2FZWEOWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAARAAAAEgwAAAFsb2NhAAACPAAAAAwAAAAMADAATm1heHAAAAF8AAAAHwAAACABEAAobmFtZQAAAtAAAAFJAAACiCnmEVVwb3N0AAAEHAAAAC0AAABV/+8iFXjaY2BkYGAA4gVmC5Tj+W2+MnCzMIDATWsFOQT9v5GFgbkeyOVgYAKJAgDrogf+AHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGWQYQDRDAxMQMwFhAwM/8F8BgALpAE5AHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs9Yn01kbvjfwBDD3MDQABRmBMkBAOXpDHEAeNpjYYAAFghmZGAAAACdAA4AAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiesT6b+P8/AwOElvwnWQxVDwSMbAxwDiMTkGBiQAWMDMMeAABRZwszAAAAAAAAAAAAAAAwAE542iWKQQrCMBBF5xNpd0pQ7EIoTEnahSCTUNqdWz2A9TrieXKeXCc1qcPn/zfzh0BYv2pVH7oQgbvqdG5Yt/DTrNlPYz+wHvuuqhFSME4sFshTgKUsKfhH5lg8BSul3i5bS3mQdd0RIh2IjnvUrkXDd8zuhuFt86tY9fonIsSYgsXpB+cCGosAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMwiWZmJQJRXVQoigTgjMd9QGIsgAFDsEBsAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAEAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0TWsFORgNADPBBE4AAA==)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fui-numbox-icon {
+  font-family: 'numberbox' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 5rpx;
+  background: #9e9e9e;
+  border-radius: 100%;
+  margin: 0 5px;
+}
+
+.fui-icon-reduce:before {
+  content: '\e691';
+}
+
+.fui-icon-plus:before {
+  content: '\e605';
+}
+
+.fui-numberbox {
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  align-items: center;
+}
+
+.fui-num-input {
+  text-align: center;
+  background: #ffffff;
+  border-radius: 3px;
+  border: 1px solid #d4d4d4;
+}
+
+.fui-disabled {
+  color: #ededed !important;
+  border-color: #ededed !important;
+}
+</style>