@cloudbase/weda-ui 0.2.17 → 1.0.21

package/src/mp/components/form/uploader/index.js

@@ -40,30 +40,39 @@ Component({
     cloudFile: [],
     files: [],
     urls: [],
+    singleFlag: false,
     uploadFile: async function (files) {
-      // 文件上传的函数，返回一个promise
-      const uploadPath = 'weda-uploader';
-      const tcb = await getCloudInstance();
-      const uploadPromise = files.tempFilePaths.map(
-        async (tempFilePath, index) => {
-          var spark = new SparkMD5.ArrayBuffer();
-          spark.append(files.contents[index]);
-          var md5Path = spark.end(false);
-          const fileType = tempFilePath.split('.')[1];
-          const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
-          const uploadRes = await tcb.uploadFile({
-            cloudPath,
-            filePath: tempFilePath,
-          });
-          return { fileID: uploadRes.fileID };
-        }
-      );
-      const uploadFileList = await Promise.all(uploadPromise);
-      const cloudUrls = uploadFileList.map((file) => file.fileID);
-      // 这里返回的东西会在uploadSuccess回调函数中获取到
-      // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
-      // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
-      return { urls: files.tempFilePaths, cloudUrls };
+      try {
+        // 文件上传的函数，返回一个promise
+        const uploadPath = 'weda-uploader';
+        const tcb = await getCloudInstance();
+        const uploadPromise = files.tempFilePaths.map(
+          async (tempFilePath, index) => {
+            var spark = new SparkMD5.ArrayBuffer();
+            spark.append(files.contents[index]);
+            var md5Path = spark.end(false);
+            const fileType = tempFilePath.split('.')[1];
+            const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
+            const uploadRes = await tcb.uploadFile({
+              cloudPath,
+              filePath: tempFilePath,
+            });
+            return { fileID: uploadRes.fileID };
+          }
+        );
+        const uploadFileList = await Promise.all(uploadPromise);
+        const cloudUrls = uploadFileList.map((file) => file.fileID);
+        // 这里返回的东西会在uploadSuccess回调函数中获取到
+        // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+        // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+        return { urls: files.tempFilePaths, cloudUrls };
+      } catch (e) {
+        wx.showToast({
+          title: `${e}` || '上传失败',
+          icon: 'none',
+          duration: 2000,
+        });
+      }
     },
   },
   methods: {
@@ -103,10 +112,13 @@ Component({
   },
   observers: {
     defaultValue: async function (value) {
-      // if (!Array.isArray(value)) {
-      //   value = [value].filter((v) => v.length > 0);
-      //  //value = [value]
-      // }
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
+      }
       if (value) {
         let httpFiles = [];
         for (let f of value) {

package/src/mp/components/form/uploaderFile/index.js

@@ -60,6 +60,7 @@ Component({
     urls: [],
     cloudFile: [],
     strogeUrls: [],
+    singleFlag: false
   },
   methods: {
     // 批量上传文件前置事件
@@ -133,9 +134,8 @@ Component({
       if (!this.handleBefore(files?.tempFiles)) return;
       const uploadPath = 'weda-uploader';
       const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${
-          tempFile.name
-        }`;
+        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${tempFile.name
+          }`;
         tempFile.percent = '0';
         tempFile.cloudPath = null;
         tempFile.filePath = tempFile?.path || null;
@@ -257,9 +257,13 @@ Component({
   },
   observers: {
     defaultValue: async function (value) {
-      // if (!Array.isArray(value)) {
-      //   value = [value].filter((v) => v.length > 0);
-      // }
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
+      }
       let httpFiles = [];
       if (value && JSON.stringify(value) != '[]') {
         for (let f of value) {

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

@@ -127,34 +127,40 @@ Component({
       const whereEffected = [].concat(getWhereList(where));
       whereEffected.length > 0 && (tcbParams['where'] = whereEffected);
       // tcb结果和事件
-      const data = await callDataSource({
-        dataSourceName,
-        methodName,
-        params: tcbParams,
-      });
-      let records = data?.records || [];
-      let total = data?.total || 0;
-      if (
-        ['loadMoreButton', 'bottomLoad'].includes(this.properties.pagination) &&
-        !isReLoad
-      ) {
-        records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
-      }
-      this.setData(
-        {
-          total,
-          records,
-          loading: false,
-          isReLoad: false,
-          pageStr: `${total > 0 ? pageNo : 0}/${
-            Math.ceil(total / pageSize) || 0
-          }`,
-        },
-        () => {
-          this._handleEvents(data);
-          setTimeout(() => this._firstScreenLoadMore(), 150);
+      try {
+        const data = await callDataSource({
+          dataSourceName,
+          methodName,
+          params: tcbParams,
+        });
+        let records = data?.records || [];
+        let total = data?.total || 0;
+        if (
+          ['loadMoreButton', 'bottomLoad'].includes(
+            this.properties.pagination
+          ) &&
+          !isReLoad
+        ) {
+          records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
         }
-      );
+        this.setData(
+          {
+            total,
+            records,
+            loading: false,
+            isReLoad: false,
+            pageStr: `${total > 0 ? pageNo : 0}/${
+              Math.ceil(total / pageSize) || 0
+            }`,
+          },
+          () => {
+            this._handleEvents(data);
+            setTimeout(() => this._firstScreenLoadMore(), 150);
+          }
+        );
+      } catch (e) {
+        this.setData({ loading: false });
+      }
     },
     /**
      * 下一页

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

@@ -5,7 +5,7 @@
     <slot></slot>
   </view>
 
-  <view class="weda-list-view__more">
+  <view class="weda-list-view__more {{'weda-list-view__more-' + pagination}}">
     <!-- 加载更多 -->
     <block wx:if="{{pagination==='loadMoreButton' && pageSize * pageNo < total}}">
       <view class="weda-list-view__more-text" bindtap="handleNext">加载更多</view>

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

@@ -34,6 +34,11 @@
   background: #fff;
 }
 
+.weda-list-view__containor
+  .weda-list-view__more.weda-list-view__more-bottomLoad {
+  background: transparent;
+}
+
 .weda-list-view__bottom-load {
   padding-top: 1px;
 }

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>