bulade-ui 1.0.3 → 1.0.5

package/src/bld-navbar-group/index.js

@@ -0,0 +1,139 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../bld-navbar/index': {
+      type: 'child',
+      linked() {
+        this._updateChildren()
+      },
+      unlinked() {
+        this._updateChildren()
+      }
+    }
+  },
+
+  properties: {
+    activeName: {
+      type: String,
+      optionalTypes: [Number, String],
+      value: ''
+    },
+
+    activeColor: {
+      type: String,
+      value: ''
+    },
+
+    lineWidth: {
+      type: Number,
+      optionalTypes: [Number, String],
+      value: 0
+    },
+
+    lineColor: {
+      type: String,
+      value: ''
+    },
+
+    lineHeight: {
+      type: Number,
+      value: 6
+    }
+  },
+
+  data: {
+    baseLeft: 0,
+    scrollLeft: 0,
+    lineLeft: 0,
+    activeLineWidth: 0,
+    tabWidth: 0,
+  },
+
+  methods: {
+    _updateChildren() {
+      // 防抖减少重复触发
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+
+      this.timer = setTimeout(() => {
+        let children = this.getRelationNodes('../navbar/index')
+        this.children = children
+        const len = children.length
+
+        // 渲染完成后更新内容区域宽度
+        if (len) {
+          this._updateWrapInfo(children)
+        }
+      }, 60)
+    },
+
+
+    // 渲染完成后更新内容区域宽度
+    _updateWrapInfo(children) {
+      wx.nextTick(() => {
+        const query = this.createSelectorQuery()
+        query.select('.m-tabs').boundingClientRect()
+        query.select('.m-tabs__scroll').scrollOffset()
+        query.exec(res => {
+          this.data.baseLeft = res[0].left
+
+          const tabWidth = res[0].width     // 选项卡总宽度 
+          this.data.tabWidth = tabWidth
+
+          const { activeName } = this.data
+
+          if (activeName) {
+            children.forEach((child, index) => {
+              if (child.data.name === activeName) {
+                child.onClick()
+              }
+            })
+          } else {
+            children[0].onClick()
+          }
+
+        })
+      })
+    },
+
+
+    updateScrollPositon(left, domWidth, lineWidth, name) {
+
+      // 设置选中标签的字体颜色
+      const { activeColor } = this.data
+
+      if (activeColor) {
+        this.children.forEach((child, index) => {
+          let color = child.data.name === name ? activeColor : ''
+          child.setData({
+            activeName: name,
+            activeColor: color
+          })
+        })
+      }
+
+      const scrollLeft = left - this.data.tabWidth / 2 + domWidth / 2
+
+      const custonLineWidth = Math.floor(parseInt(this.data.lineWidth) * (this.data.tabWidth / 750))
+
+      const activeLineWidth = custonLineWidth ? custonLineWidth <= domWidth ? custonLineWidth : domWidth : lineWidth
+
+      const lineLeft = left + domWidth / 2 - activeLineWidth / 2
+
+      this.setData({
+        scrollLeft,
+        lineLeft,
+        activeLineWidth
+      }, () => {
+        this.triggerEvent('change', name)
+      })
+    }
+  }
+})

package/src/bld-navbar-group/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/bld-navbar-group/index.scss

@@ -0,0 +1,33 @@
+.m-tabs {
+  position: relative;
+  justify-content: center;
+  height: 88rpx;
+  overflow: hidden;
+
+  .m-tabs__scroll {
+    margin-bottom: 10rpx;
+    height: 88rpx;
+
+    .m-tabs__nav {
+      position: relative;
+      display: flex;
+
+      .m-tabs__line {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        height: 6rpx;
+        border-radius: 12rpx;
+        background-color: var(--color-primary, #409EFF);
+        transition-duration: 0.3s;
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}

package/src/bld-navbar-group/index.wxml

@@ -0,0 +1,37 @@
+<view class="m-tabs custom-class">
+  <scroll-view
+    scroll-x="{{ true }}"
+    scroll-with-animation
+    scroll-left="{{ -130 }}"
+    class="m-tabs__scroll"
+  >
+    <view class="m-tabs__nav">
+      <view class="m-tabs__line" wx:if="{{ true }}" style="{{ tabs.getLineStyle(lineLeft, activeLineWidth, lineHeight, lineColor) }}"></view>
+      <slot />
+    </view>
+  </scroll-view>
+</view>
+
+
+<wxs module="tabs">
+  function getLineStyle(lineLeft, lineWidth, lineHeight, lineColor) {
+    var styles = [
+      'transform: translateX(' + lineLeft + 'px)',
+      'width:' + lineWidth + 'px'
+    ];
+
+    if(lineHeight) {
+      styles.push('height:' + lineHeight + 'rpx')
+    }
+
+    if(lineColor) {
+      styles.push('background-color:' + lineColor)
+    }
+
+    return styles.join(';');
+  }
+
+  module.exports = {
+    getLineStyle: getLineStyle
+  }
+</wxs>

package/src/bld-navbar-group/index.wxss

@@ -0,0 +1,30 @@
+.m-tabs {
+  position: relative;
+  justify-content: center;
+  height: 88rpx;
+  overflow: hidden;
+}
+.m-tabs .m-tabs__scroll {
+  margin-bottom: 10rpx;
+  height: 88rpx;
+}
+.m-tabs .m-tabs__scroll .m-tabs__nav {
+  position: relative;
+  display: flex;
+}
+.m-tabs .m-tabs__scroll .m-tabs__nav .m-tabs__line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  height: 6rpx;
+  border-radius: 12rpx;
+  background-color: var(--color-primary, #409EFF);
+  transition-duration: 0.3s;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}

package/src/bld-pop-up/index.js

@@ -0,0 +1,29 @@
+Component({
+  properties: {
+    cfgInfo: {
+      type: Object,
+      value: {
+        hideBtn: false,
+        bgIsClose: false,
+      },
+    },
+    show:{
+      type:Boolean,
+      value:false
+    }
+  },
+  
+  methods: {
+    closeBj() {
+      if (this.data.cfgInfo.bgIsClose) {
+        this.closePopUp();
+      }
+    },
+    closePopUp() {
+      this.setData({
+        show: false,
+      });
+      this.triggerEvent("closePopUp", {});
+    },
+  },
+});

package/src/bld-pop-up/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bld-cloud-image": "../bld-cloud-image/index"
+  }
+}

package/src/bld-pop-up/index.scss

@@ -0,0 +1,27 @@
+.pop-up-box {
+  background: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  .pop-up-bj {
+    width: 100%;
+    height: 100%;
+  }
+  .pop-up-cont {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .pop-close {
+      width: 60rpx;
+      height: 60rpx;
+      position: absolute;
+      bottom: -100rpx;
+      left: 50%;
+      transform: translate(-50%, 0);
+    }
+  }
+}

package/src/bld-pop-up/index.wxml

@@ -0,0 +1,18 @@
+<view
+  class="pop-up-box"
+  style=" display:  {{ show ? 'block' : 'none' }};"
+>
+  <view
+    class="pop-up-bj"
+    bindtap="closeBj"
+  ></view>
+  <view class="pop-up-cont">
+    <slot />
+    <bld-cloud-image
+      wx:if="{{ !cfgInfo.hideBtn }}"
+      iclass="pop-close"
+      src="activity/sleeves/pop-close.png"
+      bindtap="closePopUp"
+    />
+  </view>
+</view>

package/src/bld-pop-up/index.wxss

@@ -0,0 +1,27 @@
+.pop-up-box {
+  background: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+.pop-up-box .pop-up-bj {
+  width: 100%;
+  height: 100%;
+}
+.pop-up-box .pop-up-cont {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.pop-up-box .pop-up-cont .pop-close {
+  width: 60rpx;
+  height: 60rpx;
+  position: absolute;
+  bottom: -100rpx;
+  left: 50%;
+  transform: translate(-50%, 0);
+}

package/src/bld-tag/index.js

@@ -0,0 +1,34 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  properties: {
+    // 胶囊样式
+    capsule: {
+      type: Boolean,
+      value: false
+    },
+    size: {
+      type: String,
+      value: 'small'
+    },
+    type: {
+      type: String,
+      value: ''
+    },
+    plain: {
+      type: Boolean,
+      value: false
+    },
+    color: {
+      type: String
+    },
+    round: {
+      type: Boolean,
+      value: false
+    }
+  }
+});

package/src/bld-tag/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/bld-tag/index.scss

@@ -0,0 +1,127 @@
+.m-tag {
+  position: relative;
+  display: inline-block;
+  height: 38rpx;
+  line-height: 38rpx;
+  padding: 0 12rpx;
+  border-radius: 4rpx;
+  background: #f3f4f5;
+  font-size: 24rpx;
+  vertical-align: middle;
+  letter-spacing: 2rpx;
+  text-align: center;
+  color: #ffffff;
+
+
+  &.m-tag--large {
+    height: 64rpx;
+    line-height: 64rpx;
+    padding: 0 24rpx;
+    font-size: 36rpx;
+    border-radius: 6rpx;
+  }
+
+  &.m-tag--medium {
+    height: 56rpx;
+    line-height: 56rpx;
+    padding: 0 16rpx;
+    font-size: 28rpx;
+    border-radius: 6rpx;
+  }
+
+  &.m-tag--small {
+    height: 42rpx;
+    line-height: 42rpx;
+    padding: 0 12rpx;
+    font-size: 20rpx;
+  }
+
+  &.m-tag--mini {
+    height: 32rpx;
+    line-height: 32rpx;
+    padding: 0 8rpx;
+    font-size: 18rpx;
+  }
+
+  /* 类型 type */
+  &.m-tag--primary {
+    color: #fff;
+    background: var(--color-primary, #409EFF);
+  }
+
+  &.m-tag--success {
+    color: #fff;
+    background: var(--color-success, #67C23A);
+  }
+
+  &.m-tag--info {
+    color: #fff;
+    background: var(--color-info, #909399);
+  }
+
+  &.m-tag--warning {
+    color: #fff;
+    background: var(--color-warning, #E6A23C);
+  }
+
+  &.m-tag--danger {
+    color: #fff;
+    background: var(--color-danger, #F56C6C);
+  }
+
+  /* plain */
+  &.is-plain {
+    background: #fff;
+
+    &::after {
+      content: " ";
+      display: block;
+      width: 200%;
+      height: 200%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: 1px solid;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      box-sizing: border-box;
+      border-radius: 8rpx;
+      z-index: 1;
+      pointer-events: none;
+      opacity: .85;
+    }
+
+    &.is-round::after {
+      border-radius: 100rpx;
+    }
+  }
+
+  &.m-tag--primary.is-plain {
+    color: var(--color-primary, #409EFF);
+  }
+
+  &.m-tag--success.is-plain {
+    color: var(--color-success, #67C23A);
+  }
+
+  &.m-tag--warning.is-plain {
+    color: var(--color-warning, #E6A23C);
+  }
+
+  &.m-tag--info.is-plain {
+    color: var(--color-info, #909399);
+  }
+
+  &.m-tag--danger.is-plain {
+    color: var(--color-danger, #F56C6C);
+  }
+
+  /* 自定义颜色 */
+  &:not(.is-plain) {
+    color: #fff important;
+  }
+
+  &.is-round {
+    border-radius: 100rpx;
+  }
+}

package/src/bld-tag/index.wxml

@@ -0,0 +1,3 @@
+<view class="m-tag custom-class {{ 'm-tag--' + size }} {{ round ? 'is-round' : '' }} {{ type ? 'm-tag--' + type : '' }} {{ plain ? 'is-plain' : '' }}" style="{{ plain ? 'color: ' + color : 'background-color: ' + color }}">
+  <slot />
+</view>

package/src/bld-tag/index.wxss

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+.m-tag {
+  position: relative;
+  display: inline-block;
+  height: 38rpx;
+  line-height: 38rpx;
+  padding: 0 12rpx;
+  border-radius: 4rpx;
+  background: #f3f4f5;
+  font-size: 24rpx;
+  vertical-align: middle;
+  letter-spacing: 2rpx;
+  text-align: center;
+  color: #ffffff;
+  /* 类型 type */
+  /* plain */
+  /* 自定义颜色 */
+}
+.m-tag.m-tag--large {
+  height: 64rpx;
+  line-height: 64rpx;
+  padding: 0 24rpx;
+  font-size: 36rpx;
+  border-radius: 6rpx;
+}
+.m-tag.m-tag--medium {
+  height: 56rpx;
+  line-height: 56rpx;
+  padding: 0 16rpx;
+  font-size: 28rpx;
+  border-radius: 6rpx;
+}
+.m-tag.m-tag--small {
+  height: 42rpx;
+  line-height: 42rpx;
+  padding: 0 12rpx;
+  font-size: 20rpx;
+}
+.m-tag.m-tag--mini {
+  height: 32rpx;
+  line-height: 32rpx;
+  padding: 0 8rpx;
+  font-size: 18rpx;
+}
+.m-tag.m-tag--primary {
+  color: #fff;
+  background: var(--color-primary, #409EFF);
+}
+.m-tag.m-tag--success {
+  color: #fff;
+  background: var(--color-success, #67C23A);
+}
+.m-tag.m-tag--info {
+  color: #fff;
+  background: var(--color-info, #909399);
+}
+.m-tag.m-tag--warning {
+  color: #fff;
+  background: var(--color-warning, #E6A23C);
+}
+.m-tag.m-tag--danger {
+  color: #fff;
+  background: var(--color-danger, #F56C6C);
+}
+.m-tag.is-plain {
+  background: #fff;
+}
+.m-tag.is-plain::after {
+  content: " ";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.85;
+}
+.m-tag.is-plain.is-round::after {
+  border-radius: 100rpx;
+}
+.m-tag.m-tag--primary.is-plain {
+  color: var(--color-primary, #409EFF);
+}
+.m-tag.m-tag--success.is-plain {
+  color: var(--color-success, #67C23A);
+}
+.m-tag.m-tag--warning.is-plain {
+  color: var(--color-warning, #E6A23C);
+}
+.m-tag.m-tag--info.is-plain {
+  color: var(--color-info, #909399);
+}
+.m-tag.m-tag--danger.is-plain {
+  color: var(--color-danger, #F56C6C);
+}
+.m-tag:not(.is-plain) {
+  color: #fff important;
+}
+.m-tag.is-round {
+  border-radius: 100rpx;
+}