bulade-ui 1.0.0

package/src/bld-message/index.js

@@ -0,0 +1,91 @@
+const defaults_data = {
+	visible: false,
+	content: '',
+	duration: 2000,
+	zIndex: -1,
+	top: '0px'
+}
+
+let timer = null
+
+Component({
+	externalClasses: ['custom-class'],
+
+	options: {
+		addGlobalClass: true,
+	},
+
+	data: defaults_data,
+
+	ready() {
+		if (wx.canIUse('getWindowInfo')) {
+			const windowInfo = wx.getWindowInfo()
+			this.computedBarH(windowInfo)
+		} else {
+			// 该方法为同步
+			wx.getSystemInfo({
+				success: (windowInfo) => {
+					this.computedBarH(windowInfo)
+				}
+			})
+		}
+	},
+
+	methods: {
+		computedBarH(windowInfo) {
+			const {
+				screenHeight,
+				windowHeight,
+				statusBarHeight
+			} = windowInfo;
+
+			// 自定义导航栏
+			if (screenHeight === windowHeight) {
+				let customBarH = 44;
+				let capsule = wx.getMenuButtonBoundingClientRect();
+				if (capsule) {
+					customBarH = capsule.bottom - statusBarHeight + 4;
+				}
+
+				defaults_data.top = customBarH + statusBarHeight + 'px'
+				this.setData({
+					top: customBarH + statusBarHeight + 'px'
+				})
+			}
+		},
+
+
+		open(options) {
+			const {
+				type = 'primary',
+					duration = 2000,
+					zIndex = 2000,
+					showClose = false
+			} = options
+
+			this.setData({
+				...options,
+				type,
+				duration,
+				zIndex,
+				showClose,
+				visible: true
+			})
+
+			if (timer) clearTimeout(timer)
+
+			if (duration) {
+				timer = setTimeout(() => {
+					this.close()
+					timer = null
+				}, duration)
+			}
+		},
+
+		close() {
+			this.setData({
+				...defaults_data
+			})
+		}
+	}
+})

package/src/bld-message/index.json

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

package/src/bld-message/index.scss

@@ -0,0 +1,67 @@
+.m-message {
+  display: block;
+  position: fixed;
+  margin-top: 22rpx;
+  top: 0;
+  left: 32rpx;
+  right: 32rpx;
+  padding: 15rpx 80rpx;
+  line-height: 36rpx;
+  color: #fff;
+  font-size: 28rpx;
+  text-align: center;
+  opacity: 1;
+  background: var(--color-primary);
+  transform: translate3d(0, 0, 0);
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+  border-radius: 30rpx;
+}
+.m-message.is-hidden {
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+}
+.m-message--primary {
+  background: var(--color-primary, #409EFF);
+}
+.m-message--success {
+  background: var(--color-success, #67C23A);
+}
+.m-message--warning {
+  background: var(--color-warning, #E6A23C);
+}
+.m-message--error {
+  background: var(--color-danger, #F56C6C);
+}
+.m-message .m-message__close {
+  position: absolute;
+  right: 10rpx;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+.m-message .m-message__close-btn {
+  position: relative;
+  width: 40rpx;
+  height: 40rpx;
+  color: #fff;
+  border: 10rpx;
+}
+.m-message .m-message__close-btn::before, .m-message .m-message__close-btn::after {
+  z-index: 1;
+  display: block;
+  content: "";
+  position: absolute;
+  left: -6rpx;
+  top: 50%;
+  color: #fff;
+  width: 32rpx;
+  height: 2px;
+  background: #fff;
+}
+.m-message .m-message__close-btn::before {
+  transform: rotate(45deg);
+}
+.m-message .m-message__close-btn::after {
+  transform: rotate(-45deg);
+}

package/src/bld-message/index.wxml

@@ -0,0 +1,9 @@
+<view 
+  class="m-message m-message--{{type}} {{ visible ? '' : 'is-hidden' }} custom-class"
+  style="{{ 'top:' + top  }};{{ 'z-index:' + zIndex }}" 
+>
+  {{ content }}
+  <view class="m-message__close" wx:if="{{showClose}}">
+    <view class="m-message__close-btn" bindtap="close"></view>
+  </view>
+</view>

package/src/bld-message/index.wxss

@@ -0,0 +1,77 @@
+.m-message {
+  display: block;
+  position: fixed;
+  margin-top: 22rpx;
+  top: 0;
+  left: 32rpx;
+  right: 32rpx;
+  padding: 15rpx 80rpx;
+  line-height: 36rpx;
+  color: #fff;
+  font-size: 28rpx;
+  text-align: center;
+  opacity: 1;
+  background: var(--color-primary);
+  transform: translate3d(0, 0, 0);
+  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
+  border-radius: 30rpx;
+}
+
+.m-message.is-hidden {
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+}
+
+.m-message--primary {
+  background: var(--color-primary, #409EFF);
+}
+
+.m-message--success {
+  background: var(--color-success, #67C23A);
+}
+
+.m-message--warning {
+  background: var(--color-warning, #E6A23C);
+}
+
+.m-message--error {
+  background: var(--color-danger, #F56C6C);
+}
+
+.m-message .m-message__close {
+  position: absolute;
+  right: 10rpx;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+.m-message .m-message__close-btn {
+  position: relative;
+  width: 40rpx;
+  height: 40rpx;
+  color: #fff;
+  border: 10rpx;
+}
+
+.m-message .m-message__close-btn::before, .m-message .m-message__close-btn::after {
+  z-index: 1;
+  display: block;
+  content: "";
+  position: absolute;
+  left: -6rpx;
+  top: 50%;
+  color: #fff;
+  width: 32rpx;
+  height: 2px;
+  background: #fff;
+}
+
+.m-message .m-message__close-btn::before {
+  transform: rotate(45deg);
+}
+
+.m-message .m-message__close-btn::after {
+  transform: rotate(-45deg);
+}

package/src/bld-message/message.js

@@ -0,0 +1,62 @@
+function getCtx(selector) {
+  const pages = getCurrentPages()
+  const ctx = pages[pages.length - 1]
+  const componentCtx = ctx.selectComponent(selector)
+  if (!componentCtx) {
+    console.error('无法找到对应的组件，请按文档说明使用组件')
+    return null
+  }
+  return componentCtx
+}
+
+const Message = options => {
+  const {
+    selector = '#message'
+  } = options
+  const ctx = getCtx(selector)
+  if (typeof options === "string") {
+    options = {
+      content: options
+    }
+  }
+  ctx.open(options)
+
+  return ctx
+}
+
+Message.primary = Message
+
+Message.success = options => {
+  if (typeof options === "string") {
+    options = {
+      content: options
+    }
+  }
+  Message(Object.assign({
+    type: 'success'
+  }, options))
+}
+
+Message.warning = options => {
+  if (typeof options === "string") {
+    options = {
+      content: options
+    }
+  }
+  Message(Object.assign({
+    type: 'warning'
+  }, options))
+}
+
+Message.error = options => {
+  if (typeof options === "string") {
+    options = {
+      content: options
+    }
+  }
+  Message(Object.assign({
+    type: 'error'
+  }, options))
+}
+
+export default Message

package/src/bld-nav-bar/index.js

@@ -0,0 +1,90 @@
+const app = getApp();
+
+const deviceInfo = app.globalData.deviceInfo;
+const systemInfo = app.globalData.systemInfo;
+const menuButtonInfo = app.globalData.menuButtonDistance;
+
+const screenWidth = systemInfo.screenWidth;
+
+const statusBarHeight = systemInfo.statusBarHeight;
+const gap = menuButtonInfo.top - statusBarHeight;
+const padding = screenWidth - menuButtonInfo.right;
+
+const _baseStyle = [
+  `padding-top: ${menuButtonInfo.top}px`,
+  `padding-bottom: ${gap}px`,
+  `line-height: ${menuButtonInfo.height}px`,
+  `height: ${menuButtonInfo.height}px`,
+  `padding-left: ${padding}px`,
+  `padding-right: ${padding * 2 + menuButtonInfo.width}px`,
+  `width: calc(100% - ${3 * padding + menuButtonInfo.width}px)`,
+];
+
+Component({
+  externalClasses: ["iclass"],
+  options: {
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+  },
+  properties: {
+    bgColor: {
+      type: String,
+    },
+    goBack: {
+      type: Boolean,
+      value: false,
+    },
+    showTitle: {
+      type: Boolean,
+      value: true,
+    },
+    showShare: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    style: _baseStyle.join(";"),
+  },
+  lifetimes: {
+    ready() {
+      const totalHeight = menuButtonInfo.top + menuButtonInfo.height + gap;
+
+      this.triggerEvent("height-change", totalHeight);
+    },
+  },
+  observers: {
+    bgColor: function (bgColor) {
+      if (bgColor) {
+        const _style = [..._baseStyle];
+
+        _style.push(`background-color: ${bgColor}`);
+        this.setData({
+          style: _style.join(";"),
+        });
+      } else {
+        this.setData({
+          style: _baseStyle.join(";"),
+        });
+      }
+    },
+  },
+  methods: {
+    navigateHome() {
+      wx.switchTab({
+        url: "/pages/main/index",
+      });
+    },
+
+    navigateBack() {
+      const pages = getCurrentPages();
+
+      if (pages.length > 1) {
+        wx.navigateBack();
+
+        return;
+      }
+
+      this.navigateHome();
+    },
+  },
+});

package/src/bld-nav-bar/index.json

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

package/src/bld-nav-bar/index.scss

@@ -0,0 +1,40 @@
+.nav-bar {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+}
+
+.title {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.operation {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-radius: 32rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12rpx;
+  padding: 0;
+}
+
+.operations {
+  &.right {
+    .operation {
+      margin-right: 0;
+      margin-left: 12rpx;
+    }
+  }
+}

package/src/bld-nav-bar/index.wxml

@@ -0,0 +1,24 @@
+<view
+  class="iclass nav-bar"
+  style="{{ style }}"
+>
+  <view class="operations">
+    <view
+      wx:if="{{ goBack }}"
+      class="operation"
+      bind:tap="navigateBack"
+    >
+      <bld-icon name="backward" />
+    </view>
+  </view>
+  <view class="title"> <slot wx:if="{{ showTitle }}" /> </view>
+  <view class="operations right">
+    <button
+      wx:if="{{ showShare }}"
+      class="operation"
+      open-type="share"
+    >
+      <bld-icon name="share" />
+    </button>
+  </view>
+</view>

package/src/bld-nav-bar/index.wxss

@@ -0,0 +1,36 @@
+.nav-bar {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+}
+
+.title {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.operation {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-radius: 32rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12rpx;
+  padding: 0;
+}
+
+.operations.right .operation {
+  margin-right: 0;
+  margin-left: 12rpx;
+}

package/src/bld-overlay/index.js

@@ -0,0 +1,17 @@
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    show: {
+      type: Boolean,
+    },
+    contentPosition: {
+      type: String,
+      value: "bottom",
+    },
+  },
+  methods: {
+    hide() {
+      this.setData({ show: false });
+    },
+  },
+});

package/src/bld-overlay/index.json

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

package/src/bld-overlay/index.scss

@@ -0,0 +1,11 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+}

package/src/bld-overlay/index.wxml

@@ -0,0 +1,11 @@
+<view
+  wx:if="{{ show }}"
+  class="overlay iclass"
+>
+  <view
+    wx:if="{{ contentPosition == 'bottom' }}"
+    style="flex: 1"
+    bind:tap="hide"
+  />
+  <slot />
+</view>

package/src/bld-overlay/index.wxss

@@ -0,0 +1,11 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+}

package/src/bld-page/index.js

@@ -0,0 +1,78 @@
+Component({
+  externalClasses: ["page-class", "nav-bar-class", "content-class", "footer-class"],
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    navBarMode: {
+      type: String,
+      value: "always",
+    },
+    navBarShowDistance: {
+      type: Number,
+      value: 50,
+    },
+    navBarShowShare: {
+      type: Boolean,
+      value: false,
+    },
+    navBarBgColor: {
+      type: String,
+      value: "#fff",
+    },
+    navBarGoBack: {
+      type: Boolean,
+      value: true,
+    },
+    mode: {
+      type: String,
+      value: "nav-to-bottom",
+    },
+    scrollTop: {
+      type: Number,
+      value: 0,
+    },
+  },
+  data: {
+    _navBarShowTitle: true,
+    _navBarBgColor: "",
+  },
+  lifetimes: {
+    attached() {
+      if (this.data.navBarMode == "always") {
+        this.setData({
+          _navBarShowTitle: true,
+          _navBarBgColor: this.data.navBarBgColor,
+        });
+      } else if (this.data.navBarMode == "show-after-scroll") {
+        this.setData({
+          _navBarShowTitle: false,
+          _navBarBgColor: null,
+        });
+      }
+    },
+  },
+  methods: {
+    scroll(e) {
+      this.triggerEvent("scroll", { ...e.detail });
+      this.showNavBarAfterScroll(e);
+    },
+
+    scrollToLower(e) {
+      this.triggerEvent("scrollToLower", { ...e.detail });
+    },
+
+    showNavBarAfterScroll(e) {
+      if (this.data.navBarMode != "show-after-scroll") {
+        return;
+      }
+
+      const ok = e.detail.scrollTop > this.data.navBarShowDistance;
+
+      this.setData({
+        _navBarShowTitle: ok,
+        _navBarBgColor: ok ? this.data.navBarBgColor : null,
+      });
+    },
+  },
+});

package/src/bld-page/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bld-nav-bar": "../bld-nav-bar/index",
+    "bld-wrapper": "../bld-wrapper/index"
+  }
+}

package/src/bld-page/index.scss

@@ -0,0 +1,16 @@
+page {
+  height: 100%;
+  width: 100%;
+}
+
+.page {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+  width: 100%;
+}

package/src/bld-page/index.wxml

@@ -0,0 +1,28 @@
+<view class="page page-class">
+  <bld-nav-bar
+    go-back="{{ navBarGoBack }}"
+    show-title="{{ _navBarShowTitle }}"
+    show-share="{{ navBarShowShare }}"
+    bg-color="{{ _navBarBgColor }}"
+    iclass="nav-bar-class"
+  >
+    <slot name="nav-bar" />
+  </bld-nav-bar>
+  <bld-wrapper mode="{{ mode }}">
+    <scroll-view
+      enable-passive="{{ true }}"
+      show-scrollbar="{{ false }}"
+      type="list"
+      class="content-class container"
+      scroll-y
+      scroll-top="{{ scrollTop }}"
+      bind:scroll="scroll"
+      bind:scrolltolower="scrollToLower"
+    >
+      <slot name="content" />
+    </scroll-view>
+    <view class="footer-class footer">
+      <slot name="footer" />
+    </view>
+  </bld-wrapper>
+</view>