@cloudbase/weda-ui 0.2.15 → 0.2.16

package/src/mp/components/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/listView/index.json

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

package/src/mp/components/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/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/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/navLayout/index.js

@@ -0,0 +1,123 @@
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navOption: { type: Array, value: [] },
+    mobileCol: {
+      type: Number,
+      value: 4,
+    },
+    pcCol: {
+      type: Number,
+      value: 4,
+    },
+    iconSize: {
+      type: String,
+      value: 'default',
+    },
+    textColor: {
+      type: String,
+      value: 'rgb(0, 0, 0)"',
+    },
+    fontWeight: {
+      type: String,
+      value: 'normal',
+    },
+    lineHeight: {
+      type: String,
+      value: 'auto',
+    },
+    maxLines: {
+      type: Number,
+      value: 2,
+    },
+    fontSize: {
+      type: Number,
+      value: 14,
+    },
+  },
+  data: {
+    cls: '',
+    optionList: [],
+    titleStyle: '',
+  },
+
+  methods: {
+    navigaTo: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.tapStatus == 'inside') {
+        const paramObj = [];
+        if (item.withParams && item?.params) {
+          for (let info of item.params) {
+            paramObj.push(info.key + '=' + info.value);
+          }
+        }
+        item.paramObj = paramObj;
+        if (item.withParams && item.params.length > 0) {
+          wx.navigateTo({
+            url:
+              '/pages/' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
+          });
+        } else {
+          wx.navigateTo({
+            url: '/pages/' + item?.insideUrl + '/index',
+          });
+        }
+      }
+    },
+  },
+  observers: {
+    'navOption,mobileCol': function (navOption, mobileCol) {
+      let list = [];
+      list.length = Math.floor(navOption.length / mobileCol);
+      list.forEach((item, index) => {
+        list[index] = [];
+      });
+      navOption.forEach((item, index) => {
+        if (item.icon.includes('td:')) {
+          item['tdicon'] = item.icon.split(':')[1];
+        }
+        const _index = Math.floor(index / mobileCol);
+        if (!list[_index] || list[_index].length <= 0) {
+          // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+          list[_index] = Array.apply(null, Array(mobileCol));
+        }
+        list[_index][index - _index * mobileCol] = item;
+      });
+      const optionList = list;
+      this.setData({
+        optionList,
+      });
+    },
+    'textColor,fontWeight,fontSize,lineHeight': function (
+      textColor,
+      fontWeight,
+      fontSize,
+      lineHeight
+    ) {
+      let titleStyle;
+      // 添加文本颜色属性
+      if (textColor !== '') {
+        titleStyle = `color:${textColor}`;
+      }
+
+      // 添加对齐属性
+      if (fontWeight !== '') {
+        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize};line-height:${
+          lineHeight == 'auto' ? 'normal' : lineHeight
+        }`;
+      }
+      this.setData({ titleStyle });
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-cells": "weui-miniprogram/cells/cells"
+  }
+}

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

@@ -0,0 +1,25 @@
+<view class="weda-grid-navigation" style="{{style}}">
+  <view class="weda-grid-navigation__wrapper">
+    <block wx:for="{{optionList}}" wx:key="colIndex" wx:for-item="row">
+      <view class="weda-grid weda-grid-navigation__row">
+        <block wx:for="{{row}}" wx:key="colIndex" wx:for-item="col">
+          <view class="weda-col weda-grid__item weda-grid-navigation__col weda-grid-navigation__col--{{iconSize}}" style="width: {{(1 / mobileCol)*100}}%" data-item="{{col}}" bindtap="navigaTo">
+            <view class="weda-grid__box">
+              <view class="weda-grid-navigation__col">
+                <view wx:if="{{col.icon!='自定义图片'}}" class="weda-grid-navigation__icon">
+
+                    <view wx:if="{{col.tdicon}}" class="weda-icon t-icon t-icon-{{col.tdicon}}"></view>
+
+                  <view wx:if="{{!col.tdicon}}" class="weda-icon lcap-icon-padding lcap-icon lcap-icon-{{col.icon}}">
+                  </view>
+                </view>
+                <image wx:if="{{col.icon=='自定义图片'&&col.iconSrc}}" src="{{col.iconSrc}}" class="weda-grid-navigation__img"></image>
+              </view>
+              <view class="weda-grid-navigation__text" wx-if="{{col.title}}" style="-webkit-line-clamp:{{maxLines?maxLines:'revert'}};{{titleStyle}}">{{col.title}}</view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>