@cloudbase/weda-ui 0.2.16 → 1.0.24

package/src/mp/components/navigationBar/index.js

@@ -0,0 +1,193 @@
+import destr from '../../utils/destr';
+import { isUrl } from '../../utils/platform';
+import { getAppCustomNav } from '../../utils/tcb';
+
+Component({
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navigationbar: { type: Object, value: {} },
+  },
+  data: {
+    defaultLogoUrl:
+      'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg',
+    visible: false,
+    selectedKey: 'index',
+    menuData: [],
+    navigationStyle: {
+      isHorizontal: false,
+      showMenuIcon: true,
+      fixedTop: true,
+      menuFontSize: 14,
+      menuBackgroundColor: '#fff',
+      menuColor: '#000',
+      menuHoverColor: '#f3f3f3',
+      showTitle: true,
+      title: '标题',
+      showLogo: true,
+      logoUrl:
+        'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg  ',
+      titleFontSize: '18',
+      titleColor: '#000',
+      logoWidth: '32',
+      logoHeight: '32',
+    },
+  },
+  observers: {
+    navigationbar: function (navigationbar) {
+      this.getMenusByapi(navigationbar);
+    },
+  },
+  methods: {
+    getMenusByapi(navigationbar) {
+      getAppCustomNav()
+        .then((res) => {
+          const { Content } = res;
+          const navigationData = destr(Content);
+          if (navigationData?.navigationStyle) {
+            const {
+              menuData,
+              navigationStyle,
+              isMultiTerminal,
+              mobileMenuData,
+            } = navigationData;
+            let menus = isMultiTerminal ? mobileMenuData : menuData;
+            let selectedKey = this.defaultSelectedMenu(menus);
+            this.setData({
+              menuData: this.generateMenuData(
+                menus,
+                { key: selectedKey },
+                true
+              ),
+              navigationStyle,
+              selectedKey,
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          const { menuData, navigationStyle } = navigationbar;
+          let selectedKey = this.defaultSelectedMenu(menuData);
+
+          this.setData({
+            menuData: this.generateMenuData(
+              menuData,
+              { key: selectedKey },
+              true
+            ),
+            navigationStyle,
+            selectedKey,
+          });
+        });
+    },
+    generateMenuData(menuData, menuItem, init = false) {
+      let menus = JSON.parse(JSON.stringify(menuData));
+      return menus?.map((i) => {
+        let { iconUrl = 'td:view-module', children } = i;
+        let iconType = 'image';
+        let ticon = '';
+        if (!isUrl(iconUrl)) {
+          iconType = 'icon';
+          if (iconUrl.includes('td:')) {
+            iconType = 't-icon';
+            ticon = iconUrl?.replace('td:', '');
+          }
+        }
+        if (init) {
+          i.expand = this.hasSelectedMenu(i, menuItem.key);
+        } else if (i.key === menuItem.key) {
+          i.expand = menuItem.expand;
+        }
+        return {
+          ...i,
+          iconType,
+          iconUrl,
+          ticon,
+          children: this.generateMenuData(children || [], menuItem, init),
+        };
+      });
+    },
+    showMenu() {
+      this.setData({ visible: !this.data.visible });
+    },
+    menuClick(itemInfo) {
+      const menu = itemInfo?.currentTarget?.dataset?.menu;
+      const { path, type, key, children, expand } = menu;
+      if (children.length) {
+        this.setData({
+          menuData: this.generateMenuData(this.data.menuData, {
+            ...menu,
+            expand: !expand,
+          }),
+        });
+        return;
+      }
+      if (type === 'route') {
+        let { app } = getApp();
+        app.navigateTo({
+          pageId: path?.replace('/', ''),
+          packageName: '',
+          mode: 'weDa',
+        });
+      }
+    },
+    hasSelectedMenu(menu, selectedkey) {
+      let opened = false;
+      if (menu.key === selectedkey) {
+        return true;
+      }
+      menu?.children?.forEach((i) => {
+        if (i.key === selectedkey) {
+          opened = true;
+        }
+        if (i?.children?.length) {
+          opened = this.hasSelectedMenu(i, selectedkey);
+        }
+      });
+      return opened;
+    },
+    findMenuItemByPath(menus, targetPath) {
+      const queue = [];
+      let targetNode = null;
+      menus.forEach((node) => queue.push(node));
+
+      while (queue.length) {
+        const node = queue.shift();
+        if (!node) return null;
+
+        if (node.path === targetPath) {
+          // 添加节点
+          targetNode = node;
+          break;
+        } else {
+          node.children?.forEach((node) => queue.push(node));
+        }
+      }
+
+      return targetNode;
+    },
+    defaultSelectedMenu(menu) {
+      try {
+        // eslint-disable-next-line no-undef
+        const pages = getCurrentPages();
+        const currentpage = pages[pages.length - 1];
+        let path = currentpage.route.split('/');
+        path = path[1];
+        let selectedKey = '';
+        const targetMenu = this.findMenuItemByPath(menu, `/${path}`);
+        if (targetMenu) {
+          selectedKey = targetMenu.key;
+        }
+        return selectedKey;
+      } catch (error) {
+        return '';
+      }
+    },
+  },
+});

package/src/mp/components/navigationBar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+  }
+}

package/src/mp/components/navigationBar/index.wxml

@@ -0,0 +1,88 @@
+<view class="weda-menu weda-menu-mobile" style="display: {{menuData.length?'block':'none'}};">
+  <view class="weda-menu__wrapper" style="background:{{navigationStyle.menuBackgroundColor}}">
+    <view class="weda-menu__bar-main">
+      <view class="weda-menu__main-logo">
+        <image wx:if="{{navigationStyle.showLogo}}" class="weda-menu__main-icon"  style="width:{{navigationStyle.logoWidth}};height:{{navigationStyle.logoHeight}};" src="{{navigationStyle.logoUrl||defaultLogoUrl}}"></image>
+        <text wx:if="{{navigationStyle.showTitle}}" style="font-size:{{navigationStyle.titleFontSize}};color:{{navigationStyle.titleColor}};line-height: 2px;">
+            {{navigationStyle.title}}
+        </text>
+      </view>
+    </view>
+    <view class="weda-menu__bar-extra">
+    <view wx:if="{{!visible}}" class=".weda-menu__bar-btn weda-icon t-icon t-icon-view-list" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+    <view wx:else class="weda-menu__bar-btn--close weda-icon t-icon t-icon-close" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+    </view>
+  </view>
+  <view class="menu-solt">
+    <slot></slot>
+  </view>
+</view>
+
+
+<view  class="weda-menu-mobile__drawer"  wx-if="{{visible}}">
+
+  <view class="weda-menu weda-menu-mobile">
+    <view class="weda-menu__wrapper" style="background:{{navigationStyle.menuBackgroundColor}}">
+      <view class="weda-menu__bar-main">
+        <view class="weda-menu__main-logo">
+          <image wx:if="{{navigationStyle.showLogo}}" class="weda-menu__main-icon"  style="width:{{navigationStyle.logoWidth}};height:{{navigationStyle.logoHeight}};" src="{{navigationStyle.logoUrl||defaultLogoUrl}}"></image>
+          <text wx:if="{{navigationStyle.showTitle}}" style="font-size:{{navigationStyle.titleFontSize}};color:{{navigationStyle.titleColor}};line-height: 2px;">
+              {{navigationStyle.title}}
+          </text>
+        </view>
+      </view>
+      <view class="weda-menu__bar-extra">
+      <view wx:if="{{!visible}}" class=".weda-menu__bar-btn weda-icon t-icon t-icon-view-list" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+      <view wx:else class="weda-menu__bar-btn--close weda-icon t-icon t-icon-close" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+      </view>
+    </view>
+  </view>
+  <view class="weda-drawer-drawer__body">
+ <scroll-view  class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" scroll-y  >
+    <view class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" style="background:{{navigationStyle.menuBackgroundColor}}">
+      <view class="weda-drawer-menu__body">
+        <view class="weda-drawer-menu__list">
+          <block wx:for="{{menuData}}" wx:key="menuIndex" wx:for-item="menu">
+            <view class="{{menu.children ? 'weda-drawer-menu__submenu' : ''}} {{menu.expand?'expand':''}}" >
+              <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===menu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{menu}}">
+                <view wx:if="{{navigationStyle.showMenuIcon && menu.iconType!=='image'}}" class="weda-grid-navigation__icon">
+                    <view wx:if="{{menu.iconType === 't-icon'}}" class="weda-icon t-icon t-icon-{{menu.ticon}}" style="font-size:{{navigationStyle.menuFontSize}};color:{{navigationStyle.menuColor}}"></view>
+                    <view wx:if="{{menu.iconType !== 't-icon'}}" class="weda-icon lcap-icon-padding lcap-icon lcap-icon-{{menu.iconUrl}}" style="font-size:{{navigationStyle.menuFontSize}};color:{{navigationStyle.menuColor}}">
+                  </view>
+                </view>
+                <image wx:if="{{navigationStyle.showMenuIcon && menu.iconType==='image'}}" class="weda-drawer-menu__list-icon" src="{{menu.iconUrl}}" alt="icon"></image>
+                <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}};color:{{navigationStyle.menuColor}}">{{menu.title}}</view>
+                <view wx-if="{{menu.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+              </view>
+              <view class="weda-drawer-menu__list">
+                <block wx-if="{{menu.children}}">
+                  <block wx:for="{{menu.children}}" wx:key="secondIndex" wx:for-item="secondMenu">
+                    <view class="{{secondMenu.children ? 'weda-drawer-menu__submenu weda-menu__submenu' : ''}} {{secondMenu.expand?'expand':''}}">
+                      <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===secondMenu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{secondMenu}}">
+                        <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}};color:{{navigationStyle.menuColor}}">{{secondMenu.title}}</view>
+                        <view wx-if="{{secondMenu.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+                      </view>
+                      <view class="weda-drawer-menu__list">
+                        <block wx-if="{{secondMenu.children}}">
+                          <block wx:for="{{secondMenu.children}}" wx:key="thridIndex" wx:for-item="thridMenu">
+                            <view class="">
+                              <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===thridMenu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{thridMenu}}">
+                                <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}};color:{{navigationStyle.menuColor}}">{{thridMenu.title}}</view>
+                              </view>
+                            </view>
+                          </block>
+                        </block>
+                      </view>
+                    </view>
+                  </block>
+                </block>
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+  </view>
+
+</view>