@tplc/business 0.2.38 → 0.2.39

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.39](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.46...v0.2.39) (2024-12-27)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.1.47 ([b785621](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b78562141021c6b4ed0568765004f6e4bc55fa32))
+* **release:** 0.2.37 ([19d81b9](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/19d81b9d3f6022e1c8523b258bf7793a6d3b133a))
+* **release:** 0.2.38 ([5acc214](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/5acc214f80be26f5f80bdfe282918019b43315ae))
+
+
+### ✨ Features | 新功能
+
+* calendar 尺寸 ([5670ca5](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/5670ca5fa482d9d0e57d32f15b9f7ab369210c3d))
+* 图片支持渐进式 ([08523e0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/08523e0eb244da1da3b46dca4d999360600edcf5))
+* 增加 lcb-product-item 图片展示类型选择 ([24706b3](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/24706b3e87aee2fc6d02961e35a82147974199c4))
+* 支持头像昵称 ([a1061f0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a1061f0646637c797cdd2f5d9dbadd0862256398))
+* 更新product ([3fb575b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3fb575b7be9ec92b10c3cd36d19ee9593999bb4a))
+
 ### [0.2.38](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.47...v0.2.38) (2024-12-26)
 
 

package/components/lcb-product-item/components/ItemValue.vue

@@ -23,6 +23,8 @@ const props = withDefaults(
 )
 defineSlots<{
   coverImg(props: { value: any }): any
+  headImg(props: { value: any }): any
+  userName(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any
@@ -76,7 +78,7 @@ const value = computed(() => {
 </script>
 
 <template>
-  <template
+  <block
     v-if="
       visible && (prop === 'coverImg' || (!!value && (isArray(value) ? value?.length > 0 : true)))
     "
@@ -274,5 +276,15 @@ const value = computed(() => {
         <view>{{ value }}</view>
       </view>
     </slot>
-  </template>
+    <slot :value="value" v-if="prop === 'headImg'" name="headImg">
+      <view :class="className" :style="style" class="w-4 h-4">
+        <wd-img :src="value" width="100%" height="100%" radius="50%" mode="aspectFill" />
+      </view>
+    </slot>
+    <slot :value="value" v-if="prop === 'userName'" name="userName">
+      <view :class="className" :style="style" class="text-20rpx text-#333 truncate">
+        <view>{{ value }}</view>
+      </view>
+    </slot>
+  </block>
 </template>

package/components/lcb-product-item/lcb-product-item.vue

@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<LcbProductItemProps>(), {
   titleVisible: true,
   subTitleVisible: true,
   priceVisible: true,
+  userInfoVisible: false,
   priceTipsVisible: true,
   priceUnitVisible: true,
   priceSuffixVisible: true,
@@ -47,11 +48,12 @@ const props = withDefaults(defineProps<LcbProductItemProps>(), {
   distanceVisible: true,
 })
 const attrs = useAttrs()
-
 provide('lcb-product-item-props', props)
 
 defineSlots<{
   coverImg(props: { value: any }): any
+  userName(props: { value: any }): any
+  headImg(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any
@@ -238,11 +240,15 @@ defineSlots<{
             </view>
           </view>
           <ItemValue prop="priceTips">
-            <template #priceTips="{ value }">
+            <!-- <template #priceTips="{ value }">
               <slot name="priceTips" :value="value" />
-            </template>
+            </template> -->
           </ItemValue>
         </view>
+        <view class="flex gap-2 items-center" v-if="userInfoVisible">
+          <ItemValue prop="headImg"></ItemValue>
+          <ItemValue prop="userName"></ItemValue>
+        </view>
       </view>
       <slot name="itemRightSection" />
     </view>
@@ -398,7 +404,12 @@ defineSlots<{
             </template>
           </ItemValue>
         </view>
+        <view class="flex gap-2 items-center" v-if="userInfoVisible">
+          <ItemValue prop="headImg"></ItemValue>
+          <ItemValue prop="userName"></ItemValue>
+        </view>
       </view>
+
       <slot name="itemBottomSection" />
     </view>
     <slot name="itemRightSection" />

package/components/lcb-product-item/types.ts

@@ -18,6 +18,8 @@ export interface LcbProductItemProps {
 
   coverImg?: any
   productName?: any
+  headImg?: string
+  userName?: string
   subTitle?: any
   price?: any
   priceUnit?: any
@@ -41,6 +43,7 @@ export interface LcbProductItemProps {
   coverImgVisible?: boolean
   titleVisible?: boolean
   subTitleVisible?: boolean
+  userInfoVisible?: boolean
   priceVisible?: boolean
   priceUnitVisible?: boolean
   priceSuffixVisible?: boolean

package/components/lcb-waterfall/lcb-waterfall-item.vue

@@ -0,0 +1,191 @@
+<template>
+  <view
+    class="waterfall-item__box"
+    :class="{ animation: animation }"
+    :style="{ 'margin-bottom': gutter + 'rpx' }"
+  >
+    <view class="waterfall-item radius mr-bg-card">
+      <view
+        class="skeleton-box radius"
+        :style="{ height: skeletonHeight + 'px' }"
+        v-if="!hideSkeleton"
+      >
+        <view class="skeletons">
+          <view
+            class="skeleton__item"
+            style="width: 100%; height: 130px; border-radius: 5px 5px 0px 0px"
+          ></view>
+          <view
+            class="skeleton__item"
+            style="width: 50%; height: 18px; margin-top: 10px; border-radius: 0rpx 5px 5px 0px"
+          ></view>
+          <view
+            class="skeleton__item"
+            style="width: 80%; height: 18px; margin-top: 10px; border-radius: 0rpx 5px 5px 0px"
+          ></view>
+          <view
+            class="skeleton__item"
+            style="width: 50%; height: 18px; margin-top: 10px; border-radius: 0rpx 5px 5px 0px"
+          ></view>
+        </view>
+      </view>
+      <view class="content-box" :class="{ loading: !hideSkeleton }">
+        <view class="content-box__image">
+          <slot name="image">
+            <image
+              :src="imageUrl"
+              @load="onImageLoad"
+              @error="onImageError"
+              mode="widthFix"
+              @tap="clickItem(item)"
+            />
+          </slot>
+        </view>
+        <view class="content-box__extra">
+          <slot name="extra">
+            <view class="padding-sm" v-if="item.title || item.subtitle">
+              <view class="content-box__title text-df mr-text-color">{{ item.title }}</view>
+              <view class="content-box__subtitle text-sm mr-text-color-sub">
+                {{ item.subtitle }}
+              </view>
+            </view>
+          </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'waterfallItem',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+    animation: {
+      type: Boolean,
+      default: true,
+    },
+    skeletonHeight: {
+      type: Number,
+      default: 240,
+    },
+    showSkeleton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      imageUrl: '',
+      hideSkeleton: false,
+    }
+  },
+  created() {
+    this.hideSkeleton = !this.showSkeleton
+    this.imageUrl = `${this.item.imageUrl}?x-oss-process=image/resize,w_350,m_lfit`
+  },
+  methods: {
+    onImageLoad() {
+      setTimeout(() => {
+        this.hideSkeleton = true
+      }, 100)
+    },
+    onImageError() {
+      this.imageUrl =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAAAXNSR0IArs4c6QAAHC9JREFUeF7t3Q2QpHldH/D/v+d2PXeRkxcPzAEWQS0IGGIoKL34ghJAoyBQgBS+JPhy4uZmnn/vnXeKL3hRA17u5vn3bXGE8wUsFEQ0iqggGnw3iSaEJJoyipYEjsPcnXoge3CzM3/rmXRP9Q6zuzO/ndmZqfp01dTsdD/f//PMp3913+vp7qdzciFAgAABAgGBHMiIECBAgACBpEAMAQECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQmxABAgQIKBAzQIAAAQIhAQUSYhMiQIAAAQViBggQIEAgJKBAQmxCBAgQIKBAzAABAgQIhAQUSIhNiAABAgQUiBkgQIAAgZCAAgmxCREgQICAAjEDBAgQIBASUCAhNiECBAgQUCBmgAABAgRCAgokxCZEgAABAgrEDBAgQIBASECBhNiECBAgQECBmAECBAgQCAkokBCbEAECBAgoEDNAgAABAiEBBRJiEyJAgAABBWIGCBAgQCAkoEBCbEIECBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQmxABAgQIKBAzQIAAAQIhAQUSYhMiQIAAAQViBggQIEAgJKBAQmxCBAgQIKBAzAABAgQIhAQUSIhNiAABAgQUiBkgQIAAgZCAAgmxCREgQICAAjEDBAgQIBASUCAhNiECBAgQUCBmgAABAgRCAgokxCZEgAABAgrEDBAgQIBASECBhNiECBAgQECBmAECBAgQCAkokBCbEAECBAgoEDNAgAABAiEBBRJiEyJAgAABBWIGCBAgQCAkoEBCbEIECBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQmxABAgQIKBAzQIAAAQIhAQUSYhMiQIAAAQViBggQIEAgJKBAQmxCBAgQIKBAzAABAgQIhAQUSIhNiAABAgQUiBkgQIAAgZCAAgmxCREgQICAAjEDBAgQIBASUCAhNiECBAgQUCBmgAABAgRCAgokxCZEgAABAgrEDBAgQIBASECBhNiECBAgQECBmAECBAgQCAkokBCbEAECBAgoEDNAgAABAiEBBRJiEyJAgAABBWIGCBAgQCAkoEBCbEIECBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQ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CBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQmxABAgQIKBAzQIAAAQIhAQUSYhMiQIAAAQViBggQIEAgJKBAQmxCBAgQIKBAzAABAgQIhAQUSIhNiAABAgQUiBkgQIAAgZCAAgmxCREgQICAAjEDBAgQIBASUCAhNiECBAgQUCBmgAABAgRCAgokxCZEgAABAgrEDBAgQIBASECBhNiECBAgQECBmAECBAgQCAkokBCbEAECBAgoEDNAgAABAiEBBRJiEyJAgAABBWIGCBAgQCAkoEBCbEIECBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICCiTEJkSAAAECCsQMECBAgEBIQIGE2IQIECBAQIGYAQIECBAICSiQEJsQAQIECCgQM0CAAAECIQEFEmITIkCAAAEFYgYIECBAICSgQEJsQgQIECCgQMwAAQIECIQEFEiITYgAAQIEFIgZIECAAIGQgAIJsQkRIECAgAIxAwQIECAQElAgITYhAgQIEFAgZoAAAQIEQgIKJMQmRIAAAQIKxAwQIECAQEhAgYTYhAgQIEBAgZgBAgQIEAgJKJAQmxABAgQIKBAzQIAAAQIhAQUSYhMiQIAAAQViBggQIEAgJKBAQmxCBAgQIKBAzAABAgQIhAQUSIhNiAABAgQUiBkgQIAAgZCAAgmxCREgQICAAjEDBAgQIBASUCAhNiECBAgQUCBmgAABAgRCAgokxCZEgAABAgrEDBAgQIBASECBhNiECBAgQECBmAECBAgQCAkokBCbEAECBAgoEDNAgAABAiEBBRJiEyJAgAABBWIGCBAgQCAkoEBCbEIECBAgoEDMAAECBAiEBBRIiE2IAAECBBSIGSBAgACBkIACCbEJESBAgIACMQMECBAgEBJQICE2IQIECBBQIGaAAAECBEICfw/SotDNxtksnAAAAABJRU5ErkJggg=='
+      setTimeout(() => {
+        this.hideSkeleton = true
+      }, 100)
+    },
+    clickItem(item) {
+      this.$emit('onclick', item)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.waterfall-item__box {
+  &.animation {
+    transition: all 0.3s linear;
+  }
+}
+
+.waterfall-item {
+  width: 100%;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.skeleton-box {
+  box-sizing: border-box;
+  background-color: #ffffff;
+
+  .skeletons {
+    .skeleton__item {
+      /* #ifdef APP-NVUE */
+      background-color: #f1f2f4;
+      /* #endif */
+      /* #ifndef APP-NVUE */
+      background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
+      background-size: 400% 100%;
+      /* #endif */
+      animation: skeleton 1.8s ease infinite;
+    }
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.content-box {
+  position: static;
+
+  &.loading {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .content-box__image {
+    position: relative;
+    overflow: hidden;
+
+    &__hide {
+      display: none !important;
+    }
+  }
+
+  .content-box__extra {
+    .content-box__title {
+      font-weight: bold;
+    }
+
+    .content-box__subtitle {
+      margin-top: 10rpx;
+    }
+  }
+}
+</style>

package/components/lcb-waterfall/lcb-waterfall.vue

@@ -0,0 +1,550 @@
+<template>
+  <view class="miran-waterfall">
+    <!-- #ifndef APP-NVUE -->
+    <view class="miran-waterfall__gap_left" :style="[gapLeftStyle]"></view>
+    <template v-if="columnNum >= 1">
+      <view id="miran-waterfall-1" class="miran-waterfall__column">
+        <slot name="list1"></slot>
+      </view>
+    </template>
+    <template v-if="columnNum >= 2">
+      <view class="miran-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+      <view id="miran-waterfall-2" class="miran-waterfall__column">
+        <slot name="list2"></slot>
+      </view>
+    </template>
+    <template v-if="columnNum >= 3">
+      <view class="miran-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+      <view id="miran-waterfall-3" class="miran-waterfall__column">
+        <slot name="list3"></slot>
+      </view>
+    </template>
+    <template v-if="columnNum >= 4">
+      <view class="miran-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+      <view id="miran-waterfall-4" class="miran-waterfall__column">
+        <slot name="list4"></slot>
+      </view>
+    </template>
+    <template v-if="columnNum >= 5">
+      <view class="miran-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+      <view id="miran-waterfall-5" class="miran-waterfall__column">
+        <slot name="list5"></slot>
+      </view>
+    </template>
+    <view class="miran-waterfall__gap_right" :style="[gapRightStyle]"></view>
+    <!-- #endif -->
+    <!-- #ifdef APP-NVUE -->
+    <view class="waterfall-warapper">
+      <waterfall
+        :column-count="columnNum"
+        :show-scrollbar="false"
+        column-width="auto"
+        :column-gap="columnGap"
+        :left-gap="leftGap"
+        :right-gap="rightGap"
+        :always-scrollable-vertical="true"
+        :style="[nvueWaterfallStyle]"
+        @loadmore="scrollToBottom"
+      >
+        <slot></slot>
+      </waterfall>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script>
+/**
+ * 瀑布流
+ * @description
+ * @tutorial
+ * @property {Array}	value/modelValue	瀑布流数组数据，非nvue生效 （默认 [] ）
+ * @property {String}	idKey	  数据的id值，根据id值对数据执行删除操作，如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id，非nvue有效 （默认 '' ）
+ * @property {String ｜ Number}	addTime		每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms，非nvue生效（默认 200 ）
+ * @property {String ｜ Number}	columnCount		瀑布流的列数（默认 2 ）
+ * @property {String ｜ Number}			columnGap		列与列的间隙（默认 0 ）
+ * @property {String ｜ Number}			leftGap		左边和列表的间隙（默认 0 ）
+ * @property {String ｜ Number}			rightGap	右边和列表的间隙（默认 0 ）
+ * @property {Boolean}	showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
+ * @property {String ｜ Number}	  width	  瀑布流的宽度，nvue生效 （默认 屏幕宽 ）
+ * @property {String ｜ Number}		height	 瀑布流的高度，nvue生效 （默认 屏幕高 ）
+ * @property {Object}	customStyle		定义需要用到的外部样式
+ *
+ * @example <miran-waterfall v-model="list"></miran-waterfall>
+ */
+export default {
+  name: 'miran-waterfall',
+  props: {
+    // 瀑布流数据
+    // #ifdef VUE2
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    // #endif
+    // 数据的id值，根据id值对数据执行删除操作
+    // 如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id
+    idKey: {
+      type: String,
+      default: 'id',
+    },
+    // 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms
+    addTime: {
+      type: Number,
+      default: 200,
+    },
+    // 瀑布流的列数，默认2，最高为5
+    columnCount: {
+      type: [Number, String],
+      default: 2,
+    },
+    // 列与列的间隙，默认20
+    columnGap: {
+      type: [Number, String],
+      default: 10,
+    },
+    // 左边和列表的间隙
+    leftGap: {
+      type: [Number, String],
+      default: 15,
+    },
+    // 右边和列表的间隙
+    rightGap: {
+      type: [Number, String],
+      default: 15,
+    },
+    // 是否显示滚动条，仅nvue生效
+    showScrollbar: {
+      type: [Boolean],
+      default: false,
+    },
+    // 瀑布流的宽度，nvue生效
+    width: {
+      type: [Number, String],
+      default: '',
+    },
+    // 瀑布流的高度，nvue生效
+    height: {
+      type: [Number, String],
+      default: '',
+    },
+  },
+
+  computed: {
+    // 破坏value变量引用，否则数据会保持不变
+    valueCom() {
+      // #ifdef VUE2
+      return this.value
+      // #endif
+    },
+    copyValue() {
+      return uni.$g.obj.deepClone(this.valueCom)
+    },
+    columnNum() {
+      return this.columnCount <= 0 ? 0 : this.columnCount >= 5 ? 5 : this.columnCount
+    },
+    gapLeftStyle() {
+      const style = {}
+      style.width = this.addUnit(this.leftGap)
+      return style
+    },
+    gapRightStyle() {
+      const style = {}
+      style.width = this.addUnit(this.rightGap)
+      return style
+    },
+    gapCenterStyle() {
+      const style = {}
+      style.width = this.addUnit(this.columnGap)
+      return style
+    },
+    nvueWaterfallStyle() {
+      const style = {}
+      if (this.width !== 0) style.width = this.addUnit(this.width)
+      if (this.height !== 0) style.height = this.addUnit(this.height)
+      // 如果没有定义列表高度，则默认使用屏幕高度
+      const sysInfo = uni.getSystemInfoSync()
+      if (!style.width) style.width = this.addUnit(sysInfo.windowWidth, 'px')
+      if (!style.height) style.height = this.addUnit(sysInfo.windowHeight, 'px')
+      return uni.$g.obj.deepMerge(style, this.$uv.addStyle(this.customStyle))
+    },
+  },
+  watch: {
+    copyValue: {
+      // #ifndef APP-NVUE
+      handler(nVal, oVal) {
+        if (nVal.length !== 0) {
+          // 取出数组发生变化的部分
+          const startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
+          // 拼接原有数据
+          this.tempList = this.tempList.concat(uni.$g.obj.deepClone(nVal.slice(startIndex)))
+          this.splitData()
+        }
+      },
+      immediate: true,
+      deep: true,
+      // #endif
+    },
+  },
+  data() {
+    return {
+      list1: [],
+      list2: [],
+      list3: [],
+      list4: [],
+      list5: [],
+      // 临时列表
+      tempList: [],
+      columnWidth: 0,
+      columnHeights: [],
+    }
+  },
+  created() {
+    this.columnHeights = new Array(this.columnNum).fill(0)
+    this.columnWidth =
+      (uni.upx2px(750) - this.leftGap - this.rightGap - (this.columnNum - 1) * this.columnGap) /
+      this.columnNum
+  },
+  methods: {
+    /**
+     * 添加单位
+     */
+    addUnit: function (value = 'auto', unit = 'px') {
+      value = String(value)
+      // 用uvui内置验证规则中的number判断是否为数值
+      return uni.$g.valid.number(value) ? `${value}${unit}` : value
+    },
+    /**
+     * 进行延时
+     */
+    sleep: function (value = 30) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve()
+        }, value)
+      })
+    },
+    /**
+     * 媒体查询
+     * @param {Object} selector
+     * @param {Object} context
+     */
+    getRect: function (selector, context) {
+      return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(context)
+        query
+          .select(selector)
+          .boundingClientRect((rect) => {
+            rect ? resolve(rect) : resolve(false)
+          })
+          .exec()
+      })
+    },
+    /**
+     * 去除空格
+     */
+    trim: function (str, pos = 'both') {
+      str = String(str)
+      if (pos === 'both') {
+        return str.replace(/^\s+|\s+$/g, '')
+      }
+      if (pos === 'left') {
+        return str.replace(/^\s*/, '')
+      }
+      if (pos === 'right') {
+        return str.replace(/(\s*$)/g, '')
+      }
+      if (pos === 'all') {
+        return str.replace(/\s+/g, '')
+      }
+      return str
+    },
+    /**
+     * 样式转换
+     */
+    addStyle: function (customStyle, target = 'object') {
+      // 字符串转字符串，对象转对象情形，直接返回
+      if (
+        uni.$g.valid.empty(customStyle) ||
+        (typeof customStyle === 'object' && target === 'object') ||
+        (target === 'string' && typeof customStyle === 'string')
+      ) {
+        return customStyle
+      }
+      // 字符串转对象
+      if (target === 'object') {
+        // 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
+        customStyle = this.trim(customStyle)
+        // 根据";"将字符串转为数组形式
+        const styleArray = customStyle.split(';')
+        const style = {}
+        // 历遍数组，拼接成对象
+        for (let i = 0; i < styleArray.length; i++) {
+          // 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
+          if (styleArray[i]) {
+            const item = styleArray[i].split(':')
+            style[this.trim(item[0])] = this.trim(item[1])
+          }
+        }
+        return style
+      }
+      // 这里为对象转字符串形式
+      let string = ''
+      for (const i in customStyle) {
+        // 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
+        const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
+        string += `${key}:${customStyle[i]};`
+      }
+      // 去除两端空格
+      return this.trim(string)
+    },
+    /**
+     * 滚动到底部触发事件
+     * @param {Object} e
+     */
+    scrollToBottom: function () {
+      this.sleep(30).then(() => {
+        this.$emit('scrollToBottom')
+      })
+    },
+    /**
+     * 媒体查询
+     */
+    startObserver(selector) {
+      return new Promise((resolve) => {
+        this.intersectionObserver = uniselector.createIntersectionObserver(this, {
+          thresholds: [0, 1],
+          initialRatio: 0,
+          observeAll: false,
+        })
+        this.intersectionObserver.relativeToViewport()
+        this.intersectionObserver.observe(selector, (res) => {
+          const rect = res.boundingClientRect
+          this.intersectionObserver.disconnect()
+          this.intersectionObserver = null
+          rect ? resolve(rect) : resolve(false)
+        })
+      })
+    },
+    /**
+     * 拆分数据
+     */
+    splitData: async function () {
+      if (!this.tempList.length) return
+
+      for (let i = 1; i <= this.columnNum; i++) {
+        const rect = await this.getRect(`#miran-waterfall-${i}`, this)
+        if (!rect) return this.splitData()
+        this.columnHeights[i - 1] = rect.height
+      }
+
+      let index = 999
+
+      // 判断数据是不是处理第一行
+      for (let i = 0; i < this.columnNum; i++) {
+        if (this.columnHeights[i] === 0) {
+          index = i
+          break
+        }
+      }
+
+      const emitList = {}
+
+      // 设置项的位置属性并更新列高
+      if (index < this.columnNum) {
+        // 设置列名称
+        emitList.name = `list${index + 1}`
+      } else {
+        // 获取列高数组中最低高度
+        const minHeight = Math.min(...this.columnHeights)
+        // 查找最低高度所在列序
+        const minIndex = this.columnHeights.indexOf(minHeight)
+        // 设置列名称
+        emitList.name = `list${minIndex + 1}`
+      }
+
+      const item = this.tempList[0]
+
+      if (!item) return this.splitData()
+
+      emitList.value = {
+        ...item,
+        width: this.columnWidth,
+      }
+
+      this.$emit('changeList', emitList)
+
+      // 移除临时数组中已处理的数据
+      this.tempList.splice(0, 1)
+
+      // 如果还有数据则继续执行
+      if (this.tempList.length) {
+        let _timeout = this.addTime
+        // 部分平台在延时较短的情况会出现BUG
+        // #ifdef MP-BAIDU
+        _timeout = _timeout < 200 ? 200 : _timeout
+        // #endif
+        await this.sleep(_timeout)
+
+        this.splitData()
+      } else {
+        this.$emit('finish')
+      }
+    },
+    /**
+     * 暂存未用
+     */
+    renderData() {
+      const {
+        // 列数量
+        columnCount,
+        // 列宽
+        columnWidth,
+        // 骨架高度
+        skeletonHeight,
+        // 间隙宽高
+        gutter,
+        // 左右宽度
+        lrPading,
+        // 唯一标识关键词
+        keyId,
+        // 缓存项
+        cache = {},
+      } = this
+
+      // 标识关键词为空
+      if (!keyId) return
+
+      // 临时数据集为空
+      if (!this.tempList.length) return
+
+      if (!this.columnHeights) {
+        this.columnHeights = new Array(columnCount).fill(0)
+      }
+
+      const item = this.tempList[0]
+
+      // 唯一标识
+      const itemKey = item[keyId]
+
+      // 缓存为空，初始化数据
+      if (!cache[itemKey]) {
+        cache[itemKey] = {
+          top: 0,
+          left: 0,
+          width: columnWidth,
+          height: skeletonHeight,
+        }
+      }
+
+      let index = 999
+      // 判断数据是不是处理第一行
+      for (let i = 0; i < columnCount; i++) {
+        if (this.columnHeights[i] === 0) {
+          index = i
+          break
+        }
+      }
+
+      // 设置项的位置属性并更新列高
+      if (index < columnCount) {
+        // 第一行数据处理
+        // 设置第一行项上边距为0
+        cache[itemKey].top = 0
+        // 设置第一行项左边距为左间隙+列序号*(列宽+间隙)
+        cache[itemKey].left = lrPading + index * (columnWidth + gutter)
+        // 设置列高数组中列序号为index的值为列高+项高度
+        this.columnHeights[index] += cache[itemKey].height
+      } else {
+        // 其它行数据处理
+        // 获取列高数组中最低高度
+        const minHeight = Math.min(...this.columnHeights)
+        // 查找最低高度所在列序
+        const minIndex = this.columnHeights.indexOf(minHeight)
+        // 设置项上边距为最小高度+间隙
+        cache[itemKey].top = minHeight + gutter
+        // 设置项左边距为左间隙+列序号*(列宽+间隙)
+        cache[itemKey].left = lrPading + minIndex * (columnWidth + gutter)
+        // 设置列高数组中列序号为minIndex的值为列高+项高度+间隙
+        this.columnHeights[minIndex] += cache[itemKey].height + gutter
+      }
+
+      // 获取列高数组中最大高度
+      this.waterfallBoxHeight = Math.max(...this.columnHeights)
+
+      // 添加项数据到数组中
+      this.$emit('changeList', {
+        ...item,
+        _layoutRect: cache[itemKey],
+        _renderKey: itemKey,
+      })
+
+      // 移除临时数组中已处理的数据
+      this.tempList.splice(0, 1)
+
+      // 如果还有数据则继续执行
+      if (this.tempList.length) {
+        this.renderData()
+      } else {
+        this.$emit('finish')
+      }
+    },
+    /**
+     * 清空数据列表
+     */
+    async clear() {
+      // #ifdef VUE2
+      this.$emit('input', [])
+      // #endif
+      // #ifdef VUE3
+      this.$emit('update:modelValue', [])
+      // #endif
+      this.tempList = []
+      await this.sleep(300)
+      this.$emit('clear')
+    },
+    /**
+     * 移除某条数据
+     * @param {Object} id
+     */
+    remove(id) {
+      let index = -1
+      // 同时删除父组件对应的数据
+      // #ifdef VUE2
+      index = this.value.findIndex((item) => item[this.idKey] === id)
+      if (index !== -1) this.$emit('input', this.value.splice(index, 1))
+      // #endif
+      // #ifdef VUE3
+      index = this.modelValue.findIndex((item) => item[this.idKey] === id)
+      if (index !== -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1))
+      // #endif
+      this.$emit('remove', id)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.miran-waterfall {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: flex-start;
+
+  &__column {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    flex: 1;
+    // #ifndef APP-NVUE
+    height: auto;
+    // #endif
+  }
+}
+</style>

package/components/lcb-waterfall/types.ts

@@ -0,0 +1,3 @@
+export interface LcbWaterfallProps {
+  // Define the component's prop types here
+}

package/global.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     'lcb-user-top': (typeof import('./types/components/lcb-user-top/lcb-user-top.vue'))['default']
     'lcb-video': (typeof import('./types/components/lcb-video/lcb-video.vue'))['default']
     'lcb-vip': (typeof import('./types/components/lcb-vip/lcb-vip.vue'))['default']
+    'lcb-waterfall': (typeof import('./types/components/lcb-waterfall/lcb-waterfall.vue'))['default']
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-product-item/components/ItemValue.vue.d.ts

@@ -1,5 +1,7 @@
 declare function __VLS_template(): Readonly<{
   coverImg(props: { value: any }): any
+  headImg(props: { value: any }): any
+  userName(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any
@@ -21,6 +23,8 @@ declare function __VLS_template(): Readonly<{
   orderTips(props: { value: any }): any
 }> & {
   coverImg(props: { value: any }): any
+  headImg(props: { value: any }): any
+  userName(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any

package/types/components/lcb-product-item/lcb-product-item.vue.d.ts

@@ -1,6 +1,8 @@
 import { LcbProductItemProps } from './types'
 declare function __VLS_template(): Readonly<{
   coverImg(props: { value: any }): any
+  userName(props: { value: any }): any
+  headImg(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any
@@ -30,6 +32,8 @@ declare function __VLS_template(): Readonly<{
   contentSection(): any
 }> & {
   coverImg(props: { value: any }): any
+  userName(props: { value: any }): any
+  headImg(props: { value: any }): any
   productName(props: { value: any }): any
   subTitle(props: { value: any }): any
   price(props: { value: any }): any
@@ -77,6 +81,7 @@ declare const __VLS_component: import('vue').DefineComponent<
       titleVisible: boolean
       subTitleVisible: boolean
       priceVisible: boolean
+      userInfoVisible: boolean
       priceTipsVisible: boolean
       priceUnitVisible: boolean
       priceSuffixVisible: boolean
@@ -125,6 +130,7 @@ declare const __VLS_component: import('vue').DefineComponent<
           titleVisible: boolean
           subTitleVisible: boolean
           priceVisible: boolean
+          userInfoVisible: boolean
           priceTipsVisible: boolean
           priceUnitVisible: boolean
           priceSuffixVisible: boolean
@@ -161,6 +167,7 @@ declare const __VLS_component: import('vue').DefineComponent<
     coverImgVisible: boolean
     titleVisible: boolean
     subTitleVisible: boolean
+    userInfoVisible: boolean
     priceVisible: boolean
     priceUnitVisible: boolean
     priceSuffixVisible: boolean

package/types/components/lcb-product-item/types.d.ts

@@ -15,6 +15,8 @@ export interface LcbProductItemProps {
   imageType?: 'square' | 'vertical' | 'horizontal'
   coverImg?: any
   productName?: any
+  headImg?: string
+  userName?: string
   subTitle?: any
   price?: any
   priceUnit?: any
@@ -37,6 +39,7 @@ export interface LcbProductItemProps {
   coverImgVisible?: boolean
   titleVisible?: boolean
   subTitleVisible?: boolean
+  userInfoVisible?: boolean
   priceVisible?: boolean
   priceUnitVisible?: boolean
   priceSuffixVisible?: boolean

package/types/components/lcb-waterfall/lcb-waterfall-item.vue.d.ts

@@ -0,0 +1,73 @@
+declare const _default: import('vue').DefineComponent<
+  {
+    item: {
+      type: ObjectConstructor
+      default(): {}
+    }
+    gutter: {
+      type: NumberConstructor
+      default: number
+    }
+    animation: {
+      type: BooleanConstructor
+      default: boolean
+    }
+    skeletonHeight: {
+      type: NumberConstructor
+      default: number
+    }
+    showSkeleton: {
+      type: BooleanConstructor
+      default: boolean
+    }
+  },
+  any,
+  {
+    imageUrl: string
+    hideSkeleton: boolean
+  },
+  {},
+  {
+    onImageLoad(): void
+    onImageError(): void
+    clickItem(item: any): void
+  },
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<{
+      item: {
+        type: ObjectConstructor
+        default(): {}
+      }
+      gutter: {
+        type: NumberConstructor
+        default: number
+      }
+      animation: {
+        type: BooleanConstructor
+        default: boolean
+      }
+      skeletonHeight: {
+        type: NumberConstructor
+        default: number
+      }
+      showSkeleton: {
+        type: BooleanConstructor
+        default: boolean
+      }
+    }>
+  >,
+  {
+    item: Record<string, any>
+    gutter: number
+    animation: boolean
+    skeletonHeight: number
+    showSkeleton: boolean
+  },
+  {}
+>
+export default _default

package/types/components/lcb-waterfall/lcb-waterfall.vue.d.ts

@@ -0,0 +1,192 @@
+declare const _default: import('vue').DefineComponent<
+  {
+    value: {
+      type: ArrayConstructor
+      default: () => never[]
+    }
+    modelValue: {
+      type: ArrayConstructor
+      default: () => never[]
+    }
+    idKey: {
+      type: StringConstructor
+      default: string
+    }
+    addTime: {
+      type: NumberConstructor
+      default: number
+    }
+    columnCount: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: number
+    }
+    columnGap: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: number
+    }
+    leftGap: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: number
+    }
+    rightGap: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: number
+    }
+    showScrollbar: {
+      type: BooleanConstructor[]
+      default: boolean
+    }
+    width: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: string
+    }
+    height: {
+      type: (StringConstructor | NumberConstructor)[]
+      default: string
+    }
+  },
+  any,
+  {
+    list1: never[]
+    list2: never[]
+    list3: never[]
+    list4: never[]
+    list5: never[]
+    tempList: never[]
+    columnWidth: number
+    columnHeights: never[]
+  },
+  {
+    valueCom(): any
+    copyValue(): any
+    columnNum(): any
+    gapLeftStyle(): {
+      width: string
+    }
+    gapRightStyle(): {
+      width: string
+    }
+    gapCenterStyle(): {
+      width: string
+    }
+    nvueWaterfallStyle(): any
+  },
+  {
+    /**
+     * 添加单位
+     */
+    addUnit: (value?: string, unit?: string) => string
+    /**
+     * 进行延时
+     */
+    sleep: (value?: number) => Promise<any>
+    /**
+     * 媒体查询
+     * @param {Object} selector
+     * @param {Object} context
+     */
+    getRect: (selector: any, context: any) => Promise<any>
+    /**
+     * 去除空格
+     */
+    trim: (str: any, pos?: string) => any
+    /**
+     * 样式转换
+     */
+    addStyle: (customStyle: any, target?: string) => any
+    /**
+     * 滚动到底部触发事件
+     * @param {Object} e
+     */
+    scrollToBottom: () => void
+    /**
+     * 媒体查询
+     */
+    startObserver(selector: any): Promise<any>
+    /**
+     * 拆分数据
+     */
+    splitData: () => any
+    /**
+     * 暂存未用
+     */
+    renderData(): void
+    /**
+     * 清空数据列表
+     */
+    clear(): Promise<void>
+    /**
+     * 移除某条数据
+     * @param {Object} id
+     */
+    remove(id: any): void
+  },
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<{
+      value: {
+        type: ArrayConstructor
+        default: () => never[]
+      }
+      modelValue: {
+        type: ArrayConstructor
+        default: () => never[]
+      }
+      idKey: {
+        type: StringConstructor
+        default: string
+      }
+      addTime: {
+        type: NumberConstructor
+        default: number
+      }
+      columnCount: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: number
+      }
+      columnGap: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: number
+      }
+      leftGap: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: number
+      }
+      rightGap: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: number
+      }
+      showScrollbar: {
+        type: BooleanConstructor[]
+        default: boolean
+      }
+      width: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: string
+      }
+      height: {
+        type: (StringConstructor | NumberConstructor)[]
+        default: string
+      }
+    }>
+  >,
+  {
+    value: unknown[]
+    modelValue: unknown[]
+    width: string | number
+    height: string | number
+    idKey: string
+    addTime: number
+    columnCount: string | number
+    columnGap: string | number
+    leftGap: string | number
+    rightGap: string | number
+    showScrollbar: boolean
+  },
+  {}
+>
+export default _default