@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -0,0 +1,157 @@
+.weda-graphic-card {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+
+.weda-graphic-card .weda-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.weda-graphic-card .weda-graphic-card__row {
+  padding: 36rpx 0;
+  box-sizing: border-box;
+  margin: 0 -11.5rpx;
+}
+
+.weda-graphic-card .weda-grid__item {
+  flex-grow: 1;
+}
+
+.weda-graphic-card .weda-graphic-card__col {
+  padding: 0 11.5rpx;
+  box-sizing: border-box;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-grid__box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-graphic-card__col-body {
+  align-items: flex-start;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-graphic-card__col-body {
+  align-items: flex-end;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__icon {
+  width: 100%;
+  height: 400rpx;
+}
+
+.weda-graphic-card .weda-graphic-card__icon .weda-graphic-card__img {
+  width: 100%;
+  height: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  font-size: 32rpx;
+  line-height: 48rpx;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  font-size: 28rpx;
+  line-height: 44rpx;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 32rpx;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 12rpx;
+}
+
+button:not([size='mini']) {
+  margin-left: 0;
+  margin-right: 0;
+  width: auto;
+}
+
+.weda-graphic-card .wedatea2td-btn {
+  outline: 0 none;
+  box-sizing: border-box;
+  font-size: 28rpx;
+  white-space: nowrap;
+  user-select: none;
+  display: inline-block;
+  text-align: center;
+  height: auto;
+  vertical-align: middle;
+  text-decoration: none;
+  background-color: transparent;
+  border: none;
+  color: #0052d9;
+  padding: 0;
+  line-height: 1.5;
+  font-weight: normal;
+  margin: 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
+  font-size: 28rpx;
+  line-height: 44rpx;
+  color: #0052d9;
+  margin-right: 16rpx;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col
+  .weda-graphic-card__btn
+  .weda-graphic-card__btn--icon {
+  width: 32rpx;
+  height: 32rpx;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: inherit;
+  font-size: 0;
+  margin-bottom: 3px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 32rpx;
+}

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

@@ -76,7 +76,6 @@ Component({
           offsetHeight,
         });
       }
-      this.triggerEvent('tap', e.detail);
     },
     onPinch: function (ev) {
       let zoom = ev.detail.zoom;

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>

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

@@ -0,0 +1,285 @@
+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,
+  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, isReLoad: false, loading: false },
+  methods: {
+    /**
+     * 列表容器拉取数据，放在 setData 的回调函数中执行
+     */
+    _fetchData: async function () {
+      const { app } = getApp();
+      const callDataSource = app?.cloud?.callDataSource;
+      const { pageNo, loading, isReLoad } = this.data;
+      const { datasource, orderBy, orderType, where, pageSize } =
+        this.properties;
+      if (loading && !isReLoad) 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结果和事件
+      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 });
+      }
+    },
+    /**
+     * 下一页
+     */
+    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
+        .relativeToViewport()
+        .observe('#weda-list-view_sign', (res) => {
+          this.setData({ isVisiableSign: res?.intersectionRatio > 0 });
+        });
+    },
+  },
+  observers: {
+    'datasource,orderBy,orderType,where,pageSize,pagination': function () {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(
+        () =>
+          this.setData({ ...DEFAULT_DATA, isReLoad: true }, () =>
+            this._fetchData()
+          ),
+        200
+      );
+    },
+    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 () {
+      clearTimeout(this._timer);
+      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="{{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 {{'weda-list-view__more-' + pagination}}">
+    <!-- 加载更多 -->
+    <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,155 @@
+/* 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__containor
+  .weda-list-view__more.weda-list-view__more-bottomLoad {
+  background: transparent;
+}
+
+.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>