@tplc/business 0.2.73 → 0.2.75

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.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)
+
+
+### ✨ Features | 新功能
+
+* 加载更多 ([ae2ba8b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ae2ba8b24334aa2f1bb82c6a702cc72bb16beee1))
+* 新增types ([b4ceffd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b4ceffdb507c04888370ca4ca0a523d528429a49))
+
 ### [0.2.73](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.72...v0.2.73) (2025-01-06)
 
 

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

@@ -9,6 +9,8 @@
     :fixed="false"
     :use-page-scroll="false"
     :height="height"
+    @onRefresh="onRefresh"
+    :loading-more-enabled="!refreshed"
   >
     <slot />
   </z-paging>
@@ -30,11 +32,13 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const emits = defineEmits(['refresh'])
 const props = defineProps<LcbFilterListProps>()
 const dataList = ref<unknown[]>([])
 const paging = ref()
 const height = useAutoHeight()
 const form = inject<Ref<Record<string, any>>>(FORM_KEY)
+const refreshed = ref(false)
 useZPaging(paging)
 const modelValue = defineModel<unknown[]>({
   default: [],
@@ -72,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,
@@ -82,6 +87,11 @@ const queryList = async (page: number, limit: number) => {
   } catch (error) {
     paging.value.complete(false)
   }
+  refreshed.value = false
+}
+const onRefresh = async () => {
+  refreshed.value = true
+  emits('refresh')
 }
 </script>
 <style lang="scss" scoped>

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

@@ -28,6 +28,7 @@
       v-bind="{ ...info.listInfo, listType, ...props }"
       :autoHeight="!isSticky"
       v-model="items"
+      @refresh="productRef?.clear?.()"
       v-if="mode === 'list'"
     >
       <slot name="list" :items="items" v-if="$slots.list" />
@@ -36,13 +37,20 @@
           v-bind="{ ...$props, ...attrs, form }"
           :items="items"
           filterList
+          ref="productRef"
           v-if="$slots.item"
         >
           <template #item="{ item }">
             <slot name="item" :item="item"></slot>
           </template>
         </lcb-product>
-        <lcb-product v-bind="{ ...$props, ...attrs, form }" filterList :items="items" v-else />
+        <lcb-product
+          v-bind="{ ...$props, ...attrs, form }"
+          filterList
+          :items="items"
+          ref="productRef"
+          v-else
+        />
       </template>
     </FilterList>
     <lcb-map v-else-if="mode === 'map'" v-bind="{ ...info.listInfo, ...$props, ...attrs }" />
@@ -61,6 +69,7 @@ const attrs = useAttrs()
 /** 是否悬停 */
 const sticky = ref(false)
 const items = ref([])
+const productRef = ref()
 defineOptions({
   name: 'LcbList',
   options: {

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch, computed } 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'
 
 const uWaterfallRef = ref()
 defineOptions({
@@ -17,12 +16,18 @@ defineOptions({
   },
 })
 const attrs = useAttrs()
-const list = ref<Record<string, any>[]>([])
 const props = withDefaults(defineProps<LcbProductProps>(), {
   listType: 'list',
   imageWidth: 200,
   imageHeight: 250,
   titleLineClamp: 2,
+  column: 2,
+})
+const renderList = ref<Record<string, any>[]>([])
+const screenWidth = uni.getSystemInfoSync().screenWidth
+watchEffect(() => {
+  if (!props.filterList) return
+  renderList.value = props.items as Record<string, any>[]
 })
 defineSlots<{
   item(props: { item: any }): any
@@ -30,7 +35,10 @@ defineSlots<{
 watch(
   () => props.form,
   () => {
-    uWaterfallRef.value?.clear?.()
+    if (props.listType === 'waterfall') {
+      renderList.value = []
+      uWaterfallRef.value?.clear?.()
+    }
   },
   { deep: true },
 )
@@ -40,15 +48,21 @@ const getData = async () => {
     const { data } = await uni.$lcb.http.post('/productInfo/filteredPage', {
       productIdList: props.items.map((item) => item.productId),
     })
-    list.value = data as Record<string, any>[]
+    renderList.value = data as Record<string, any>[]
   } else {
-    list.value = []
+    renderList.value = []
   }
 }
 
 watch(() => props.items, getData, { immediate: true, deep: true })
-const renderList = computed(() => {
-  return props.filterList ? props.items : list.value
+const columnWidth = (screenWidth - 12 * (1 + props.column)) / 2
+defineExpose({
+  clear: () => {
+    if (props.listType === 'waterfall') {
+      renderList.value = []
+      uWaterfallRef.value?.clear?.()
+    }
+  },
 })
 </script>
 
@@ -87,7 +101,7 @@ const renderList = computed(() => {
       </lcb-action-view>
     </view>
     <!-- 双列 -->
-    <view class="grid p-3 grid-cols-2 gap-2 box-border" v-if="listType === 'grid'">
+    <view class="grid p-3 grid-cols-2 gap-2 box-border" v-else-if="listType === 'grid'">
       <lcb-action-view
         v-for="(item, index) in renderList"
         :key="`${item?.productId}:${index}`"
@@ -120,10 +134,10 @@ const renderList = computed(() => {
       </lcb-action-view>
     </view>
 
-    <view class="lcb-product-waterfall">
-      <u-waterfall :modelValue="renderList" v-if="listType === 'waterfall'" ref="uWaterfallRef">
+    <view class="lcb-product-waterfall" v-else-if="listType === 'waterfall'">
+      <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}`"
@@ -148,15 +162,19 @@ const renderList = computed(() => {
                   v-else
                 >
                   <template #coverImg="{ value }">
-                    <u-lazy-load
-                      threshold="-800"
-                      :border-radius="imageRadius"
-                      :image="value"
-                      :is-effect="false"
-                      :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>
@@ -188,13 +206,18 @@ const renderList = computed(() => {
                   tag-overflow-wrap
                 >
                   <template #coverImg="{ value }">
-                    <u-lazy-load
-                      threshold="-800"
-                      :border-radius="imageRadius"
-                      :image="value"
-                      :index="index"
-                      :is-effect="false"
-                      :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>
@@ -205,7 +228,7 @@ const renderList = computed(() => {
       </u-waterfall>
     </view>
 
-    <scroll-view v-if="listType == 'horizontal'" scroll-x>
+    <scroll-view v-else-if="listType == 'horizontal'" scroll-x>
       <view class="p-3 whitespace-nowrap overflow-x-auto">
         <view
           v-for="(item, index) in renderList"
@@ -250,8 +273,8 @@ const renderList = computed(() => {
 .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.73",
+  "version": "0.2.75",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-list/components/FilterList/index.vue.d.ts

@@ -16,11 +16,13 @@ declare const __VLS_component: import('vue').DefineComponent<
   import('vue').ComponentOptionsMixin,
   {
     'update:modelValue': (modelValue: unknown[]) => void
+    refresh: (...args: any[]) => void
   },
   string,
   import('vue').PublicProps,
   Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
     'onUpdate:modelValue'?: ((modelValue: unknown[]) => any) | undefined
+    onRefresh?: ((...args: any[]) => any) | undefined
   },
   {},
   {}

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

@@ -12,9 +12,12 @@ declare const __VLS_component: import('vue').DefineComponent<
       imageWidth: number
       imageHeight: number
       titleLineClamp: number
+      column: number
     }
   >,
-  {},
+  {
+    clear: () => void
+  },
   unknown,
   {},
   {},
@@ -32,6 +35,7 @@ declare const __VLS_component: import('vue').DefineComponent<
           imageWidth: number
           imageHeight: number
           titleLineClamp: number
+          column: number
         }
       >
     >
@@ -39,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)
+}