@tplc/business 0.2.37 → 0.2.39

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.37",
+  "version": "0.2.39",
   "keywords": [
     "业务组件"
   ],
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "vue": ">=3.2.47",
-    "@tplc/wot": "0.1.46"
+    "@tplc/wot": "0.1.47"
   },
   "engines": {
     "node": ">=18",

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

@@ -21,6 +21,7 @@ declare const __VLS_component: import('vue').DefineComponent<
     >
   >,
   {
+    form: Record<string, any>
     imageRadius: number
     items: Record<string, any>[]
     imageWidth: number

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

@@ -7,6 +7,7 @@ export interface LcbProductProps {
   imageRadius?: number
   itemHeight?: number
   items?: Record<string, any>[]
+  form?: Record<string, any>
   renderItemAbsoluteConfigLayout?: {
     dataset?: Record<string, any>
     blocks: any[]

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