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

package/ui-fireui/components/u-navigation-bar/u-navigation-bar.vue

@@ -1,24 +1,38 @@
 <template>
   <view
     class="up-navigation-bar"
-    :class="{ 'up-bar-line': opcity > 0.85 && splitLine, 'up-navbar-fixed': isFixed }"
-    :style="{ height: height + 'px', backgroundColor: `rgba(${backgroundColor},${opcity})` }"
+    :class="{
+      'up-bar-line': opacity > 0.85 && splitLine,
+      'up-navbar-fixed': isFixed,
+      'up-backdrop__filter': backdropFilter && dropDownOpacity > 0
+    }"
+    :style="{
+      height: height + 'px',
+      background: isOpacity ? `rgba(${background},${opacity})` : background,
+      opacity: dropDownOpacity,
+      zIndex: isFixed ? zIndex : 'auto'
+    }"
   >
     <view class="up-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
     <view
       class="up-navigation_bar-title"
-      :style="{ opacity: opcity, color: color, paddingTop: top - statusBarHeight + 'px' }"
+      :style="{
+        opacity: transparent || opacity >= maxOpacity ? 1 : opacity,
+        color: color,
+        paddingTop: top - statusBarHeight + 'px'
+      }"
       v-if="title && !isCustom"
     >
       {{ title }}
     </view>
-    <slot />
+    <slot></slot>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiNavigationBar',
+  name: 'tuiNavigationBar',
+  emits: ['init', 'change'],
   props: {
     //NavigationBar标题
     title: {
@@ -28,12 +42,12 @@ export default {
     //NavigationBar标题颜色
     color: {
       type: String,
-      default: '#fff'
+      default: '#333'
     },
-    //NavigationBar背景颜色 rgb
+    //NavigationBar背景颜色,不支持rgb
     backgroundColor: {
       type: String,
-      default: '86,119,252'
+      default: '#fff'
     },
     //是否需要分割线
     splitLine: {
@@ -41,19 +55,29 @@ export default {
       default: false
     },
     //是否设置不透明度
-    isOpcity: {
+    isOpacity: {
       type: Boolean,
       default: true
     },
+    //不透明度最大值 0-1
+    maxOpacity: {
+      type: [Number, String],
+      default: 1
+    },
+    //背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
+    transparent: {
+      type: Boolean,
+      default: false
+    },
     //滚动条滚动距离
     scrollTop: {
       type: [Number, String],
       default: 0
     },
     /*
-		 isOpcity 为true时生效
-		 opcity=scrollTop /windowWidth * scrollRatio
-		*/
+				 isOpacity 为true时生效
+				 opacity=scrollTop /windowWidth * scrollRatio
+				*/
     scrollRatio: {
       type: [Number, String],
       default: 0.3
@@ -71,12 +95,36 @@ export default {
     isFixed: {
       type: Boolean,
       default: true
+    },
+    //是否开启高斯模糊效果[仅在支持的浏览器有效果]
+    backdropFilter: {
+      type: Boolean,
+      default: false
+    },
+    //下拉隐藏NavigationBar，主要针对有回弹效果ios端
+    dropDownHide: {
+      type: Boolean,
+      default: false
+    },
+    //z-index设置
+    zIndex: {
+      type: [Number, String],
+      default: 996
     }
   },
   watch: {
     scrollTop(newValue, oldValue) {
-      if (this.isOpcity) {
-        this.opcityChange();
+      if (this.isOpacity && !this.transparent) {
+        this.opacityChange();
+      }
+    },
+    backgroundColor(val) {
+      if (val) {
+        if (this.isOpacity) {
+          this.background = this.hexToRgb(val);
+        } else {
+          this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : val;
+        }
       }
     }
   },
@@ -86,13 +134,21 @@ export default {
       left: 375, //小程序端 左侧距胶囊按钮距离
       height: 44, //header高度
       top: 0,
-      scrollH: 1,//0 //滚动总高度,计算opcity
-      opcity: 0, //0-1
-      statusBarHeight: 0 //状态栏高度
+      scrollH: 1, //滚动总高度,计算opacity
+      opacity: 1, //0-1
+      statusBarHeight: 0, //状态栏高度
+      background: '255,255,255', //header背景色
+      dropDownOpacity: 1
     };
   },
   created() {
-    this.opcity = this.isOpcity ? this.opcity : 1;
+    this.dropDownOpacity = this.backdropFilter && 0;
+    this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity;
+    if (this.isOpacity) {
+      this.background = this.hexToRgb(this.backgroundColor);
+    } else {
+      this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : this.backgroundColor;
+    }
     let obj = {};
     // #ifdef MP-WEIXIN
     obj = wx.getMenuButtonBoundingClientRect();
@@ -103,7 +159,6 @@ export default {
     // #ifdef MP-ALIPAY
     my.hideAddToDesktopMenu();
     // #endif
-
     uni.getSystemInfo({
       success: (res) => {
         this.statusBarHeight = res.statusBarHeight;
@@ -117,25 +172,52 @@ export default {
         this.$emit('init', {
           width: this.width,
           height: this.height,
-          left: obj.left,
+          left: this.left,
           top: this.top,
           statusBarHeight: this.statusBarHeight,
-          opcity: this.opcity
+          opacity: this.opacity,
+          windowHeight: res.windowHeight
         });
       }
     });
   },
   methods: {
-    opcityChange() {
+    hexToRgb(hex) {
+      let rgb = '255,255,255';
+      if (hex && ~hex.indexOf('#')) {
+        if (hex.length === 4) {
+          let text = hex.substring(1, 4);
+          hex = '#' + text + text;
+        }
+        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+          rgb = `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`;
+        }
+      }
+      return rgb;
+    },
+    opacityChange() {
+      if (this.dropDownHide) {
+        if (this.scrollTop < 0) {
+          if (this.dropDownOpacity > 0) {
+            this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30;
+          }
+        } else {
+          this.dropDownOpacity = 1;
+        }
+      }
+
       let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop;
-      //  let scroll = this.scrollTop <= 0 ? 0 : this.scrollTop;
-      let opcity = scroll / this.scrollH;
-      if ((this.opcity >= 1 && opcity >= 1) || (this.opcity == 0 && opcity == 0)) {
+      let opacity = scroll / this.scrollH;
+      if ((this.opacity >= this.maxOpacity && opacity >= this.maxOpacity) || (this.opacity == 0 && opacity == 0)) {
         return;
       }
-      this.opcity = opcity;
+      this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity;
+      if (this.backdropFilter) {
+        this.dropDownOpacity = this.opacity >= this.maxOpacity ? 1 : this.opacity;
+      }
       this.$emit('change', {
-        opcity: this.opcity
+        opacity: this.opacity
       });
     }
   }
@@ -145,16 +227,27 @@ export default {
 <style scoped>
 .up-navigation-bar {
   width: 100%;
+  transition: opacity 0.4s;
+}
+
+.up-backdrop__filter {
+  /* Safari for macOS & iOS */
+  -webkit-backdrop-filter: blur(15px);
+  /* Google Chrome */
+  backdrop-filter: blur(15px);
 }
+
 .up-navbar-fixed {
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 9998;
+  transform: translateZ(0);
 }
+
 .up-status-bar {
   width: 100%;
 }
+
 .up-navigation_bar-title {
   width: 100%;
   font-size: 17px;

package/ui-fireui/components/u-no-data/u-no-data.vue

@@ -1,29 +1,36 @@
 <template>
-  <view class="up-nodata-box" :class="[fixed ? 'up-nodata-fixed' : '']">
+  <view class="up-nodata-box" :class="[fixed ? 'up-nodata-fixed' : '']" :style="{ marginTop: marginTop + 'rpx' }">
     <image
       v-if="imgUrl"
       :src="imgUrl"
       class="up-tips-icon"
-      :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx' }"
+      :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx', marginBottom: imgBottom + 'rpx' }"
+      mode="widthFix"
     ></image>
     <view class="up-tips-content">
       <slot></slot>
     </view>
-    <button
+    <view
       class="up-tips-btn"
-      hover-class="up-tips-btn-hover"
-      :style="{ width: btnWidth + 'rpx' }"
+      :style="{
+        width: btnWidth + 'rpx',
+        height: btnHeight + 'rpx',
+        background: getBgColor,
+        borderRadius: radius,
+        fontSize: size + 'rpx'
+      }"
       v-if="btnText"
       @tap="handleClick"
     >
       {{ btnText }}
-    </button>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiNoData',
+  name: 'tuiNoData',
+  emits: ['click'],
   props: {
     //是否垂直居中
     fixed: {
@@ -37,23 +44,55 @@ export default {
     },
     //图片宽度
     imgWidth: {
-      type: Number,
+      type: [Number, String],
       default: 200
     },
     //图片高度
     imgHeight: {
-      type: Number,
+      type: [Number, String],
       default: 200
     },
+    //V2.3.0+
+    imgBottom: {
+      type: [Number, String],
+      default: 30
+    },
     //按钮宽度
     btnWidth: {
-      type: Number,
+      type: [Number, String],
       default: 200
     },
+    btnHeight: {
+      type: [Number, String],
+      default: 60
+    },
     //按钮文字，没有则不显示
     btnText: {
       type: String,
       default: ''
+    },
+    //按钮背景色
+    backgroundColor: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    radius: {
+      type: String,
+      default: '8rpx'
+    },
+    //2.3.0+
+    marginTop: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  computed: {
+    getBgColor() {
+      return this.backgroundColor || (uni && uni.$tui && uni.$tui.color.danger) || '#EB0909';
     }
   },
   methods: {
@@ -86,31 +125,30 @@ export default {
   flex-shrink: 0;
   width: 280rpx;
   height: 280rpx;
-  margin-bottom: 40rpx;
 }
 
 .up-tips-content {
   text-align: center;
   color: #666666;
   font-size: 28rpx;
-  padding: 0 50rpx 24rpx 50rpx;
+  padding: 0 50rpx 28rpx 50rpx;
   box-sizing: border-box;
   word-break: break-all;
   word-wrap: break-word;
 }
 
 .up-tips-btn {
-  height: 60rpx;
-  line-height: 60rpx;
-  font-size: 28rpx;
-  background-color: #eb0909;
   color: #fff;
-  border-radius: 6rpx;
   margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
 }
 
-.up-tips-btn-hover {
-  background-color: #c80808;
-  color: #e5e5e5;
+.up-tips-btn:active {
+  opacity: 0.5;
 }
 </style>

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

@@ -7,9 +7,10 @@
     </view>
   </view>
 </template>
+
 <script>
 export default {
-  name: 'fuiNomore',
+  name: 'tuiNomore',
   props: {
     //当前页面背景颜色
     backgroundColor: {
@@ -40,7 +41,7 @@ export default {
   width: 50%;
   margin: 1.5em auto;
   line-height: 1.5em;
-  font-size: 28rpx;
+  font-size: 24rpx;
   display: flex;
   justify-content: center;
 }
@@ -58,7 +59,7 @@ export default {
 .up-nomore::before {
   content: ' ';
   position: absolute;
-  border-bottom: 1rpx solid #333;
+  border-bottom: 1rpx solid #e5e5e5;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   width: 100%;
@@ -68,7 +69,7 @@ export default {
 
 .up-nomore-text {
   color: #999;
-  font-size: 28rpx;
+  font-size: 24rpx;
   text-align: center;
   padding: 0 18rpx;
   height: 36rpx;

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

@@ -1,11 +1,16 @@
 <template>
   <view class="up-numberbox">
     <view
-      class="up-numbox-icon up-icon-reduce"
-      :class="[disabled || min >= value ? 'up-disabled' : '']"
+      class="up-num__icon__box"
+      :style="{ background: iconBgColor, borderRadius: radius }"
       @tap="reduce"
-      :style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
-    ></view>
+      :class="[disabled || min >= inputValue ? 'up-disabled' : '']"
+    >
+      <text
+        class="up-numbox-icon up-num__icon-reduce"
+        :style="{ color: iconColor, fontSize: iconSize + 'rpx', lineHeight: iconSize + 'rpx' }"
+      ></text>
+    </view>
     <input
       type="number"
       v-model="inputValue"
@@ -15,27 +20,33 @@
       :style="{
         color: color,
         fontSize: size + 'rpx',
-        backgroundColor: backgroundColor,
+        background: backgroundColor,
         height: height + 'rpx',
         minHeight: height + 'rpx',
         width: width + 'rpx'
       }"
     />
     <view
-      class="up-numbox-icon up-icon-plus"
-      :class="[disabled || value >= max ? 'up-disabled' : '']"
+      class="up-num__icon__box"
+      :style="{ background: iconBgColor, borderRadius: radius }"
       @tap="plus"
-      :style="{ color: iconColor, fontSize: iconSize + 'rpx' }"
-    ></view>
+      :class="[disabled || inputValue >= max ? 'up-disabled' : '']"
+    >
+      <text
+        class="up-numbox-icon up-num__icon-plus"
+        :style="{ color: iconColor, fontSize: iconSize + 'rpx', lineHeight: iconSize + 'rpx' }"
+      ></text>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiNumberbox',
+  name: 'tuiNumberbox',
+  emits: ['change'],
   props: {
     value: {
-      type: Number,
+      type: [Number, String],
       default: 1
     },
     //最小值
@@ -58,14 +69,22 @@ export default {
       type: Boolean,
       default: false
     },
+    iconBgColor: {
+      type: String,
+      default: 'transparent'
+    },
+    radius: {
+      type: String,
+      default: '50%'
+    },
     //加减图标大小 rpx
     iconSize: {
       type: Number,
-      default: 10
+      default: 22
     },
     iconColor: {
       type: String,
-      default: '#fff'
+      default: '#666666'
     },
     //input 高度
     height: {
@@ -84,7 +103,7 @@ export default {
     //input 背景颜色
     backgroundColor: {
       type: String,
-      default: '#fff'
+      default: '#F5F5F5'
     },
     //input 字体颜色
     color: {
@@ -116,47 +135,53 @@ export default {
     }
   },
   methods: {
-    getScale() {
+    getScale(val, step) {
       let scale = 1;
+      let scaleVal = 1;
+      //浮点型
+      if (!Number.isInteger(step)) {
+        scale = Math.pow(10, (step + '').split('.')[1].length);
+      }
       //浮点型
-      if (!Number.isInteger(this.step)) {
-        scale = Math.pow(10, (this.step + '').split('.')[1].length);
+      if (!Number.isInteger(val)) {
+        scaleVal = Math.pow(10, (val + '').split('.')[1].length);
       }
-      return scale;
+      return Math.max(scale, scaleVal);
     },
-    calcNum(type) {
-      if (this.disabled) {
+    calcNum: function (type) {
+      if (
+        this.disabled ||
+        (this.inputValue == this.min && type === 'reduce') ||
+        (this.inputValue == this.max && type === 'plus')
+      ) {
         return;
       }
-      const scale = this.getScale();
-      let num = this.value * scale;
+      const scale = this.getScale(Number(this.inputValue), Number(this.step));
+      let num = Number(this.inputValue) * 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) {
+      let value = Number((num / scale).toFixed(String(scale).length - 1));
+      if (value < this.min) {
         value = this.min;
-      } else if (type === 'reduce' && value > this.max) {
+      } else if (value > this.max) {
         value = this.max;
       }
-      if (value < this.min || value > this.max) {
-        return;
-      }
       this.handleChange(value, type);
     },
-    plus() {
+    plus: function () {
       this.calcNum('plus');
     },
-    reduce() {
+    reduce: function () {
       this.calcNum('reduce');
     },
-    blur(e) {
+    blur: function (e) {
       let value = e.detail.value;
       if (value) {
-        if (~value.indexOf('.') && Number.isInteger(this.step)) {
+        if (~value.indexOf('.') && Number.isInteger(this.step) && Number.isInteger(Number(value))) {
           value = value.split('.')[0];
         }
         value = Number(value);
@@ -176,7 +201,7 @@ export default {
     handleChange(value, type) {
       if (this.disabled) return;
       this.$emit('change', {
-        value: value,
+        value: Number(value),
         type: type,
         index: this.index,
         custom: this.custom
@@ -195,40 +220,58 @@ export default {
   font-style: normal;
 }
 
+.up-num__icon__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 12rpx;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
 .up-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;
 }
 
-.up-icon-reduce:before {
+.up-num__icon-reduce:before {
   content: '\e691';
 }
 
-.up-icon-plus:before {
+.up-num__icon-plus:before {
   content: '\e605';
 }
 
 .up-numberbox {
-  display: -webkit-inline-flex;
+  /* #ifndef APP-NVUE */
   display: inline-flex;
+  /* #endif */
   align-items: center;
 }
 
 .up-num-input {
   text-align: center;
-  background: #ffffff;
-  border-radius: 3px;
-  border: 1px solid #d4d4d4;
+  margin: 0 6rpx;
+  font-weight: 400;
+  padding: 0;
+  border-width: 0;
+}
+/* #ifdef H5 */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
+/* #endif */
 
 .up-disabled {
-  color: #ededed !important;
-  border-color: #ededed !important;
+  opacity: 0.5;
+  /* #ifdef H5 */
+  cursor: not-allowed;
+  /* #endif */
 }
 </style>