@tplc/business 0.2.74 → 0.2.76

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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.76](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.74...v0.2.76) (2025-01-07)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.1.53 ([3f2435c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3f2435c86a660da4c1f1a926ca95728f12cc0d1b))
+* **release:** 0.2.75 ([51ad472](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/51ad472341b6f3b0a9025f65646696e16ffe4fa7))
+
+
+### ✨ Features | 新功能
+
+* img block ([abbbb87](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/abbbb871b340d33e071dc78cc67e313aa3f4932b))
+* 兼容引擎 ([7b6fc3c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7b6fc3cfe4ecba868c3fb095b1f9b103b724d9f7))
+* 处理瀑布流刷新 ([d76fb08](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d76fb088eb287f0a88dfc029f7b9bb287a2b5cd8))
+* 瀑布流调整策略 ([a7988e0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a7988e037342c211e45369ae4c324566b4b50f4a))
+
+### [0.2.75](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.69...v0.2.75) (2025-01-06)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* **release:** 0.2.70 ([25208a1](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/25208a1b7c62cf86be34fc10284f8bcbf53fa660))
+* **release:** 0.2.71 ([6e5b105](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6e5b105c4781e0fabbdae76fcfc1a45afc8e8e58))
+* **release:** 0.2.72 ([01d5635](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/01d5635a74cb249bf9224d5e2f87f1b696976454))
+* **release:** 0.2.73 ([fe1c4d4](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/fe1c4d436f577a5e6d476c1d72968bfd7e6d5b05))
+* **release:** 0.2.74 ([4685a29](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/4685a2978cfc39f834ad286c3a6fd19a943ca828))
+
+
+### ✨ Features | 新功能
+
+* product组件切换为接口 ([520f1ca](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/520f1cad1ce517ee9de12845a513678396039e43))
+* 兼容地图 ([b189928](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b18992884c5e1a6dce947c5f7dbbb6750f5dfb5f))
+* 加载更多 ([ae2ba8b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ae2ba8b24334aa2f1bb82c6a702cc72bb16beee1))
+* 处理瀑布流刷新 ([d76fb08](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d76fb088eb287f0a88dfc029f7b9bb287a2b5cd8))
+* 新增types ([b4ceffd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b4ceffdb507c04888370ca4ca0a523d528429a49))
+* 瀑布流 ([a5334a0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a5334a02c4cc3cbecf5822534fabfb899d166f35))
+
 ### [0.2.74](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.73...v0.2.74) (2025-01-06)
 
 

package/components/lcb-list/components/FilterList/index.vue

@@ -76,6 +76,7 @@ const queryList = async (page: number, limit: number) => {
     const { data } = await uni.$lcb.http.post(props.url, {
       ...props.baseParam,
       ...form?.value,
+      listType: props.listType,
       ...getPageOptions(),
       pageSearch: {
         limit,

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch, computed, watchEffect } from 'vue'
+import { ref, useAttrs, watch, watchEffect } from 'vue'
 import UWaterfall from 'uview-plus/components/u-waterfall/u-waterfall.vue'
-import ULazyLoad from 'uview-plus/components/u-lazy-load/u-lazy-load.vue'
 import { LcbProductProps } from './types'
 import { transformValueUnit } from '../../utils/transform'
-import { getPreviewImageUrl } from '../../utils/utils'
+import { calculateImageHeight } from '../../utils/utils'
+import { isH5 } from '@tplc/wot/components/common/util'
 
 const uWaterfallRef = ref()
 defineOptions({
@@ -22,8 +22,10 @@ const props = withDefaults(defineProps<LcbProductProps>(), {
   imageWidth: 200,
   imageHeight: 250,
   titleLineClamp: 2,
+  column: 2,
 })
 const renderList = ref<Record<string, any>[]>([])
+const screenWidth = isH5 ? window.innerWidth : uni.getWindowInfo().screenWidth
 watchEffect(() => {
   if (!props.filterList) return
   renderList.value = props.items as Record<string, any>[]
@@ -34,8 +36,10 @@ defineSlots<{
 watch(
   () => props.form,
   () => {
-    renderList.value = []
-    uWaterfallRef.value?.clear()
+    if (props.listType === 'waterfall') {
+      renderList.value = []
+      uWaterfallRef.value?.clear?.()
+    }
   },
   { deep: true },
 )
@@ -52,11 +56,13 @@ const getData = async () => {
 }
 
 watch(() => props.items, getData, { immediate: true, deep: true })
-
+const columnWidth = (screenWidth - 12 * (1 + props.column)) / 2
 defineExpose({
   clear: () => {
-    renderList.value = []
-    uWaterfallRef.value?.clear()
+    if (props.listType === 'waterfall') {
+      renderList.value = []
+      uWaterfallRef.value?.clear?.()
+    }
   },
 })
 </script>
@@ -130,9 +136,9 @@ defineExpose({
     </view>
 
     <view class="lcb-product-waterfall" v-else-if="listType === 'waterfall'">
-      <u-waterfall :modelValue="renderList" ref="uWaterfallRef">
+      <u-waterfall :addTime="0" :modelValue="renderList" ref="uWaterfallRef">
         <template #left="{ leftList: list }">
-          <view class="flex flex-col gap-3">
+          <view class="flex flex-col gap-12px">
             <lcb-action-view
               v-for="(item, index) in list"
               :key="`${item?.productId}:${index}`"
@@ -157,14 +163,19 @@ defineExpose({
                   v-else
                 >
                   <template #coverImg="{ value }">
-                    <u-lazy-load
-                      threshold="-800"
-                      :border-radius="imageRadius"
-                      :image="value"
-                      :loading-img="getPreviewImageUrl(value)"
-                      :index="index"
+                    <wd-img
+                      :src="value"
+                      width="100%"
+                      mode="aspectFill"
+                      :lazyPlaceWidth="columnWidth"
+                      :height="
+                        calculateImageHeight(
+                          screenWidth,
+                          item.coverImgProps?.[0]?.height,
+                          item.coverImgProps?.[0]?.width,
+                        )
+                      "
                     />
-                    <!-- <wd-img :src="value" width="100%" lazyPlaceWidth="250" height="auto" mode="widthFix" /> -->
                   </template>
                 </lcb-product-item>
               </slot>
@@ -196,12 +207,18 @@ defineExpose({
                   tag-overflow-wrap
                 >
                   <template #coverImg="{ value }">
-                    <u-lazy-load
-                      threshold="-800"
-                      :border-radius="imageRadius"
-                      :image="value"
-                      :index="index"
-                      :loading-img="getPreviewImageUrl(value)"
+                    <wd-img
+                      :src="value"
+                      width="100%"
+                      :lazyPlaceWidth="columnWidth"
+                      mode="aspectFill"
+                      :height="
+                        calculateImageHeight(
+                          screenWidth,
+                          item.coverImgProps?.[0]?.height,
+                          item.coverImgProps?.[0]?.width,
+                        )
+                      "
                     />
                   </template>
                 </lcb-product-item>
@@ -235,8 +252,7 @@ defineExpose({
             />
             <lcb-product-item
               v-else
-              v-bind="item"
-              :layoutType="layoutType"
+              v-bind="{ ...item, ...$props, ...attrs }"
               :coverImgStyle="{
                 width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
                 height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
@@ -244,7 +260,6 @@ defineExpose({
                 borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
                 ...(attrs?.coverImgStyle ?? {}),
               }"
-              :titleLineClamp="titleLineClamp"
             ></lcb-product-item>
           </slot>
         </view>
@@ -257,8 +272,8 @@ defineExpose({
 .lcb-product-waterfall {
   :deep(.u-waterfall) {
     display: flex;
-    gap: 24rpx;
-    padding: 24rpx;
+    gap: 12px;
+    padding: 12px;
   }
 }
 </style>

package/components/lcb-product/types.ts

@@ -5,6 +5,7 @@ export interface LcbProductProps {
   imageHeight?: number
   imageRadius?: number
   borderRadius?: number
+  column?: number
   itemWidth?: number // 列表项宽度
   items?: {
     productId: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.2.74",
+  "version": "0.2.76",
   "keywords": [
     "业务组件"
   ],
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "vue": ">=3.2.47",
-    "@tplc/wot": "0.1.52"
+    "@tplc/wot": "0.1.53"
   },
   "engines": {
     "node": ">=18",

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

@@ -12,6 +12,7 @@ declare const __VLS_component: import('vue').DefineComponent<
       imageWidth: number
       imageHeight: number
       titleLineClamp: number
+      column: number
     }
   >,
   {
@@ -34,6 +35,7 @@ declare const __VLS_component: import('vue').DefineComponent<
           imageWidth: number
           imageHeight: number
           titleLineClamp: number
+          column: number
         }
       >
     >
@@ -41,6 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<
   {
     imageWidth: number
     imageHeight: number
+    column: number
     listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
     titleLineClamp: number
   },

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

@@ -4,6 +4,7 @@ export interface LcbProductProps {
   imageHeight?: number
   imageRadius?: number
   borderRadius?: number
+  column?: number
   itemWidth?: number
   items?: {
     productId: string

package/types/utils/utils.d.ts

@@ -6,3 +6,11 @@ export declare const getPageOptions: () => Record<string, any>
 export declare const getFinalUrl: (url: string, urlParams?: string) => string
 export declare const onPageScrollSelector: (selector: string) => void
 export declare const getPreviewImageUrl: (url: string, width?: number) => string
+/** 根据屏幕宽度  图片高度宽度比例 列数与 间隙宽度 计算图片高度 */
+export declare const calculateImageHeight: (
+  screenWidth: number,
+  imageHeight?: number,
+  imageWidth?: number,
+  column?: number,
+  gap?: number,
+) => number

package/utils/utils.ts

@@ -51,3 +51,14 @@ export const getPreviewImageUrl = (url: string, width = 200) => {
     : `${sym}x-oss-process=image/resize,m_mfit,w_${width}&imageView2/2/w/${width}`
   return `${url}${width > 0 ? suffix : ''}`
 }
+
+/** 根据屏幕宽度  图片高度宽度比例 列数与 间隙宽度 计算图片高度 */
+export const calculateImageHeight = (
+  screenWidth: number,
+  imageHeight = 176,
+  imageWidth = 240,
+  column = 2,
+  gap = 12,
+) => {
+  return ((screenWidth - gap * (2 + column - 1)) / 2) * (imageHeight / imageWidth)
+}