@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -37,76 +37,77 @@ Component({
       value: false,
     },
     imgPreview: {
-        type: Boolean,
-        value: false
+      type: Boolean,
+      value: false,
     },
     maskClosable: {
-        type: Boolean,
-        value: true
-    }
+      type: Boolean,
+      value: true,
+    },
   },
   methods: {
-    load: function(e) {
+    load: function (e) {
       this.triggerEvent('error', e.detail);
       this.setData({
         realHeight: e.detail.height,
-        realWidth: e.detail.width
+        realWidth: e.detail.width,
       });
     },
-    error: function(e) {
+    error: function (e) {
       this.setData({
         isError: true,
-        clsx: this.properties.className + 'weda-image-error'
+        clsx: this.properties.className + 'weda-image-error',
       });
       this.triggerEvent('error', e.detail);
     },
-    onImgTap: function() {
-        if(this.properties.imgPreview && !this.data.isError) {
-          // 计算图片预览展示高度
-          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
-          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
-          const offsetHeight = windowHeight / 2 - (showHeight / 2);
-            this.setData({
-              showImg: true,
-              zoom: 1,
-              previewTranslateY: 0,
-              previewTranslateX: 0,
-              showHeight,
-              offsetHeight
-            });
-        }
+    onImgTap: function (e) {
+      if (this.properties.imgPreview && !this.data.isError) {
+        // 计算图片预览展示高度
+        const { windowWidth, windowHeight } = wx.getSystemInfoSync();
+        const showHeight =
+          windowWidth / (this.data.realWidth / this.data.realHeight);
+        const offsetHeight = windowHeight / 2 - showHeight / 2;
+        this.setData({
+          showImg: true,
+          zoom: 1,
+          previewTranslateY: 0,
+          previewTranslateX: 0,
+          showHeight,
+          offsetHeight,
+        });
+      }
     },
-    onPinch: function(ev) {
+    onPinch: function (ev) {
       let zoom = ev.detail.zoom;
       // zoom = this.data.zoom * zoom;
-      if(zoom > 5) {
+      if (zoom > 5) {
         zoom = 5;
       }
-      if(zoom < 0.6) {
+      if (zoom < 0.6) {
         zoom = 0.6;
       }
       this.setData({
-        zoom
+        zoom,
       });
     },
-    onPressMove: function(ev) {
+    onPressMove: function (ev) {
       this.setData({
         previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
-        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY,
       });
     },
-    onMaskClick: function() {
-        if(this.properties.maskClosable) {
-            this.setData({
-                showImg: false
-            });
-        }
-    },
-    onCloseClick: function() {
+    onMaskClick: function () {
+      if (this.properties.maskClosable) {
         this.setData({
-            showImg: false
+          showImg: false,
         });
-    }
+      }
+    },
+    onCloseClick: function () {
+      this.setData({
+        showImg: false,
+      });
+    },
   },
   data: {
     showImg: false,
@@ -118,13 +119,13 @@ Component({
     previewTranslateX: 0,
     previewTranslateY: 0,
     realHeight: 0,
-    realWidth: 0
+    realWidth: 0,
   },
   observers: {
-    className: function() {
+    className: function () {
       const className = this.properties.className;
       this.setData({
-        clsx: className
+        clsx: className,
       });
     },
     src: function () {
@@ -147,35 +148,35 @@ Component({
         });
       }
     },
-    'fit, mode': function(fit, mode) {
-      if(fit) {
-        switch(fit) {
+    'fit, mode': function (fit, mode) {
+      if (fit) {
+        switch (fit) {
           case 'cover':
             this.setData({
-              imgMode: 'aspectFill'
+              imgMode: 'aspectFill',
             });
             break;
           case 'contain':
             this.setData({
-              imgMode: 'aspectFit'
+              imgMode: 'aspectFit',
             });
             break;
           case 'fill':
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
           default:
             this.setData({
-              imgMode: 'scaleToFill'
+              imgMode: 'scaleToFill',
             });
             break;
         }
       } else {
         this.setData({
-          imgMode: mode
+          imgMode: mode,
         });
       }
-    }
+    },
   },
 });

package/src/mp/components/internals/listView/arrow-right-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1719 12.0002L8.22192 7.05023L9.63592 5.63623L15.9999 12.0002L9.63592 18.3642L8.22192 16.9502L13.1719 12.0002Z" fill="#09121F"/>
+</svg>

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

@@ -0,0 +1,286 @@
+const isNull = (val) => [undefined, null].includes(val);
+const REL_DICT = {
+  equal: 'eq', // 等于
+  unequal: 'neq', // 不等于
+  include: 'search', // 包含
+  exclude: '_exclude', // 不包含
+  begin_with: '_begin_with', // 开头是
+  greater: 'gt', // 大于
+  greater_or_equal: 'gte', // 大于等于
+  less: 'lt', // 小于
+  less_or_equal: 'lte', // 小于等于
+  in: 'in', // 多选值
+  not_in: 'nin', // 不在多选值
+};
+const ORDERTYPE = ['asc', 'desc'];
+const getWhereList = (where) => {
+  let result = [];
+  Array.isArray(where) &&
+    where.forEach((item1) => {
+      if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
+        item1?.logicData.forEach((item2) => {
+          let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
+          if ('_begin_with' === rel) {
+            rel = 'regex';
+            val = `^${val}`;
+          }
+          if ('_exclude' === rel) {
+            rel = 'regex';
+            val = `^((?!${val}).)*$`;
+          }
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+            result.push({ key: item2.key, rel, val });
+          }
+        });
+      }
+    });
+  return result;
+};
+const DEFAULT_DATA = {
+  pageNo: 1,
+  loading: false,
+  total: 0,
+  records: [],
+  pageStr: '0/0',
+  isVisiableSign: false,
+  isFirstScreen: true,
+};
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    datasource: {
+      type: Object,
+      value: {},
+    },
+    orderBy: {
+      type: String,
+    },
+    orderType: {
+      type: String,
+    },
+    where: {
+      type: Array,
+      value: [],
+    },
+    pageSize: {
+      type: Number,
+      value: 5,
+    },
+    template: {
+      type: String,
+      value: 'simpleList',
+    },
+    pagination: {
+      type: String,
+      value: 'loadMoreButton',
+    },
+    beforeDataChange: {
+      type: Function,
+      value: (v) => v,
+    },
+  },
+  data: { ...DEFAULT_DATA },
+  methods: {
+    /**
+     * 列表容器拉取数据，放在 setData 的回调函数中执行
+     */
+    _fetchData: async function () {
+      const { app } = getApp();
+      const callDataSource = app?.cloud?.callDataSource;
+      const { pageNo, loading } = this.data;
+      const { datasource, orderBy, orderType, where, pageSize } =
+        this.properties;
+      if (loading) return;
+      if (!callDataSource) {
+        console.warn(`当前环境缺少方法 app.cloud.callDataSource`);
+        return;
+      }
+      this.setData({ loading: true });
+      const { name: dataSourceName, extra } = datasource || {};
+      const methodName =
+        typeof extra?.methodName === 'string'
+          ? extra?.methodName
+          : 'wedaGetRecords';
+      const tcbParams = {};
+
+      // tcb分页参数
+      if (!isNull(pageNo) && !isNull(pageSize)) {
+        tcbParams['pageNo'] = pageNo;
+        tcbParams['pageSize'] = pageSize;
+      }
+      // tcb排序参数
+      if (orderBy && ORDERTYPE.includes(orderType)) {
+        tcbParams['orderBy'] = orderBy;
+        tcbParams['orderType'] = orderType;
+      }
+      // tcb过滤参数
+      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)
+      ) {
+        records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
+      }
+      this.setData(
+        {
+          total,
+          records,
+          loading: false,
+          pageStr: `${total > 0 ? pageNo : 0}/${
+            Math.ceil(total / pageSize) || 0
+          }`,
+        },
+        () => {
+          this._handleEvents(data);
+          setTimeout(() => this._firstScreenLoadMore(), 150);
+        }
+      );
+    },
+    /**
+     * 下一页
+     */
+    handleNext: function () {
+      if (
+        this.data.loading ||
+        !(this.properties.pageSize * this.data.pageNo < this.data.total)
+      ) {
+        return;
+      }
+      this.setData({ pageNo: this.data.pageNo + 1 }, () => this._fetchData());
+    },
+    /**
+     * 上一页
+     */
+    handlePre: function () {
+      if (this.data.loading || !(this.properties.pageNo > 1)) {
+        return;
+      }
+      this.setData({ pageNo: this.data.pageNo - 1 }, () => this._fetchData());
+    },
+    /**
+     * 向外部传递事件
+     */
+    _handleEvents: function (data) {
+      const records = this.data.records || [];
+      const total = this.data.total || records?.length || 0;
+      const beforeDataChange = this.properties.beforeDataChange || ((v) => v);
+      this.triggerEvent('onDataChange', {
+        data: beforeDataChange(records),
+      });
+      if (JSON.stringify(data) === '{}') {
+        this.triggerEvent('queryFail', {
+          datasource: this.properties.datasource,
+          data: null,
+        });
+      } else {
+        if (total === 0) {
+          this.triggerEvent('queryEmpty', {
+            datasource: this.properties.datasource,
+            data: beforeDataChange([]),
+          });
+        }
+        this.triggerEvent('querySuccess', {
+          datasource: this.properties.datasource,
+          data: beforeDataChange(records),
+        });
+      }
+    },
+    /**
+     * 首屏持续触底加载特殊处理
+     */
+    _firstScreenLoadMore: function () {
+      if (this.properties.pagination === 'bottomLoad') {
+        if (this.data.isFirstScreen) {
+          this.setData({ isFirstScreen: false });
+          this.contentObserver?.disconnect();
+          this._observerContent();
+        }
+      }
+    },
+    /**
+     * 开始监听slot
+     */
+    _observerContent: function () {
+      this.contentObserver = this.createIntersectionObserver();
+      this.contentObserver
+        .relativeToViewport()
+        .observe('#weda-list-view_content', (res) => {
+          this.setData({
+            isFirstScreen:
+              res?.boundingClientRect?.bottom <= res?.relativeRect?.bottom,
+          });
+        });
+    },
+    /**
+     * 开始监听sign
+     */
+    _observerSign: function () {
+      this.signObserver = this.createIntersectionObserver();
+      this.signObserver
+        .relativeTo('.weda-list-view__containor', { bottom: 10 })
+        .observe('#weda-list-view_sign', (res) => {
+          this.setData({ isVisiableSign: res?.intersectionRatio > 0 });
+        });
+    },
+  },
+  observers: {
+    'datasource,orderBy,orderType,where,pageSize,pagination': function (
+      dDatasource,
+      dOrderBy,
+      dOrderType,
+      dWhere,
+      dPageSize,
+      dPagination
+    ) {
+      if (
+        dDatasource !== this.properties.datasource ||
+        dOrderBy !== this.properties.orderBy ||
+        dOrderType !== this.properties.orderType ||
+        dWhere !== this.properties.where ||
+        dPageSize !== this.properties.pageSize ||
+        dPagination !== this.properties.pagination
+      ) {
+        this.setData({ ...DEFAULT_DATA }, () => this._fetchData());
+      }
+    },
+    isVisiableSign: function (dIsVisiableSign) {
+      if (dIsVisiableSign && this.properties.pagination === 'bottomLoad') {
+        this.handleNext();
+      }
+    },
+    isFirstScreen: function (dIsFirstScreen) {
+      if (dIsFirstScreen && this.properties.pagination === 'bottomLoad') {
+        this.handleNext();
+      }
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this._fetchData();
+      this._observerSign();
+    },
+    detached: function () {
+      this.contentObserver?.disconnect();
+      this.signObserver?.disconnect();
+    },
+  },
+});

package/src/mp/components/internals/listView/index.json

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

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

@@ -0,0 +1,40 @@
+<scroll-view scroll-y scroll-with-animation lower-threshold="5" style="height:97vh;{{style}}"
+  class="weda-list-view__containor weda-ui {{className}}">
+  <!-- 列表插槽 -->
+  <view class="{{template === 'cardList' ? 'weda-list-view-card' : ''}}" id="weda-list-view_content">
+    <slot></slot>
+  </view>
+
+  <view class="weda-list-view__more">
+    <!-- 加载更多 -->
+    <block wx:if="{{pagination==='loadMoreButton' && pageSize * pageNo < total}}">
+      <view class="weda-list-view__more-text" bindtap="handleNext">加载更多</view>
+    </block>
+    <!-- 触底刷新 -->
+    <block wx:elif="{{pagination==='bottomLoad'}}">
+      <view class="weda-list-view__bottom-load" id="weda-list-view_sign">
+        <view class="weda-list-view__more-symbol" wx:if="{{loading}}">
+          <view class="weda-list-view__symbol-item"></view>
+          <view class="weda-list-view__symbol-item"></view>
+          <view class="weda-list-view__symbol-item"></view>
+        </view>
+      </view>
+    </block>
+    <!-- 分页器 -->
+    <block wx:elif="{{pagination==='pagination'}}">
+      <view class="weda-list-view__more-pagination">
+        <view class="weda-list-view__pagination-pre {{pageNo > 1 ? 'active': ''}}" bindtap="handlePre">
+          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
+          上一页
+        </view>
+        <view class="weda-list-view__pagination-text">{{pageStr}}</view>
+        <view class="weda-list-view__pagination-next {{pageSize * pageNo < total ? 'active' : ''}}"
+          bindtap="handleNext">
+          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
+          下一页
+        </view>
+      </view>
+    </block>
+    <block wx:else></block>
+  </view>
+</scroll-view>

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

@@ -0,0 +1,150 @@
+/* weda_list_view */
+
+.weda-list-view__containor {
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+/* 卡片列表 */
+.weda-list-view-card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 6rpx;
+}
+
+/* 加载更多 */
+.weda-list-view__containor .weda-list-view__more {
+  width: 100%;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
+  padding-top: 20rpx;
+  padding-bottom: 28rpx;
+  font-size: 24rpx;
+  line-height: 44rpx;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* 加载更多 ... */
+.weda-list-view__containor .weda-list-view__more {
+  background: #fff;
+}
+
+.weda-list-view__bottom-load {
+  padding-top: 1px;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-symbol {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 40rpx;
+  padding-bottom: 36rpx;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__symbol-item {
+  width: 16rpx;
+  height: 16rpx;
+  background: #c4c4c4;
+  margin-left: 12rpx;
+  border-radius: 50%;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__symbol-item:first-child {
+  width: 12rpx;
+  height: 12rpx;
+  margin-left: 0;
+}
+
+/* 加载更多 分页 */
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__more-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 20rpx 36rpx 24rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next {
+  font-size: 24rpx;
+  line-height: 48rpx;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 48rpx;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre.active,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  top: 20rpx;
+  opacity: 0.2;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon,
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  opacity: 1;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon {
+  left: 32rpx;
+  transform: rotate(180deg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  right: 36rpx;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-text {
+  font-size: 24rpx;
+  line-height: 44rpx;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.split {
+  height: 40rpx;
+}

package/src/mp/components/internals/listView/more-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" fill="#09121F"/>
+</svg>

package/src/mp/components/listView/arrow-right-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1719 12.0002L8.22192 7.05023L9.63592 5.63623L15.9999 12.0002L9.63592 18.3642L8.22192 16.9502L13.1719 12.0002Z" fill="#09121F"/>
+</svg>