@cloudbase/weda-ui 0.2.17 → 2.0.8

package/src/mp/components/lottery/index.wxss

@@ -0,0 +1,317 @@
+.weda-lottery {
+  width: 100%;
+  height: 652rpx;
+  position: relative;
+}
+
+.weda-lottery .weda-lottery__wrap {
+  position: relative;
+  width: 100%;
+  height: 652rpx;
+  background: #FF465C;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0px 0px 8rpx rgba(255, 255, 255, 0.5);
+  border-radius: 20rpx;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__dot-top {
+  position: absolute;
+  top: 8rpx;
+  left: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-bottom {
+  position: absolute;
+  bottom: 8rpx;
+  left: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-left {
+  position: absolute;
+  left: 8rpx;
+  top: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-right {
+  position: absolute;
+  right: 8rpx;
+  top: calc((100% - 434rpx) / 2);
+}
+
+.weda-lottery .weda-lottery__dot {
+  display: flex;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal {
+  flex-direction: row;
+}
+
+.weda-lottery .weda-lottery__dot-vertical {
+  flex-direction: column;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item,
+.weda-lottery .weda-lottery__dot-single {
+  width: 18rpx;
+  height: 18rpx;
+  box-shadow: 0px 0px 8rpx rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  background: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
+  background: #FFEE52;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
+  background: #FFFFFF
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
+  margin-right: 86rpx;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item:last-child {
+  margin-right: 0;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item {
+  margin-bottom: 86rpx;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item:last-child {
+  margin-bottom: 0;
+}
+
+.weda-lottery .weda-lottery__dot-left-top {
+  position: absolute;
+  top: 18rpx;
+  left: 12rpx;
+}
+
+.weda-lottery .weda-lottery__dot-right-top {
+  position: absolute;
+  top: 18rpx;
+  right: 12rpx;
+}
+
+.weda-lottery .weda-lottery__dot-left-bottom {
+  position: absolute;
+  left: 12rpx;
+  bottom: 18rpx;
+}
+
+.weda-lottery .weda-lottery__dot-right-bottom {
+  position: absolute;
+  right: 12rpx;
+  bottom: 18rpx;
+}
+
+.weda-lottery .weda-lottery__inner {
+  padding: 36rpx;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__inner-wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #DD0D00 0%, #D80027 100%);
+  border: 2rpx solid rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 0px 8rpx rgba(255, 255, 255, 0.5);
+  border-radius: 20rpx;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
+  position: absolute;
+  width: calc((100% - 64rpx) / 3);
+  height: calc((100% - 64rpx) / 3);
+  font-size: 0;
+  text-align: center;
+  background: #FFF8EE;
+  box-shadow: inset 0px -4rpx 0px #FFDDBD;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
+  background: #FFF8EE;
+  box-shadow: 0px 0px 12rpx #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
+  background: #FF6666;
+  box-shadow: inset 0px -4rpx 0px #FFA4A4;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
+  top: 16rpx;
+  left: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
+  top: 16rpx;
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
+  top: 16rpx;
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
+  top: calc((100% - 64rpx) / 3 + 32rpx);
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(5) {
+  bottom: 16rpx;
+  right: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
+  bottom: 16rpx;
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
+  bottom: 16rpx;
+  left: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
+  bottom: calc((100% - 64rpx) / 3 + 32rpx);
+  left: 16rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  border-width: 8rpx;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 5rpx 16rpx 5rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived .weda-lottery__turntable-cell {
+  border-color: #FFE05F;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-icon {
+  display: block;
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-desc {
+  margin-top: 12rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-align: center;
+  color: #BA0000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected .weda-lottery__turntable-cell-desc {
+  color: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__turntable-btn {
+  z-index: 2;
+  position: absolute;
+  width: calc((100% - 64rpx) / 3);
+  height: calc((100% - 64rpx) / 3);
+  top: calc((100% - 64rpx) / 3 + 32rpx);
+  left: calc((100% - 64rpx) / 3 + 32rpx);
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px -4rpx 0px #FF7A00;
+  border-radius: 50%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived {
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px 4rpx 0px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__btn-inner {
+  padding: 18rpx;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__btn {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 16rpx rgba(234, 27, 53, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 16rpx rgba(234, 27, 53, 0.5);
+}
+
+.weda-lottery .weda-lottery__btn-image {
+  padding: 22rpx 30rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__btn-image  .weda-lottery__btn-text {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-align: center;
+  color: #FFFFFF;
+  text-shadow: 0px 0.5px 0px #E42B27;
+  max-height: 100%;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn-image {
+  opacity: 0.6;
+}

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>