@tplc/business 0.2.64 → 0.2.66

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.66](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.65...v0.2.66) (2025-01-05)
+
+
+### ✨ Features | 新功能
+
+* slider 改造 ([d472ee7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d472ee7a24b8539ec93defd27ab94cef14938d1f))
+* 新增切换模式 ([a8849df](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/a8849df2d7ee55127f0b40c2c47f9e5c75cccab0))
+
+### [0.2.65](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.52...v0.2.65) (2025-01-05)
+
 ### [0.2.64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.63...v0.2.64) (2025-01-05)
 
 

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

@@ -1,18 +1,21 @@
 <template>
   <view class="filter-slider">
     <wd-slider
-      hide-label
+      :hide-label="!showLabel"
       :max="max"
       :min="min"
       :minText="`${unit}${min}`"
       :maxText="`${unit}${max}+`"
       v-model="innerValue"
       @dragend="onDragend"
+      @dragstart="onDragStart"
       ref="slider"
       custom-class="px-4"
       custom-min-class="left-0  slider-text"
       custom-max-class="right--2 slider-text"
       :active-color="themeColor"
+      :step="50"
+      unit="¥"
     />
     <view class="grid grid-cols-4 gap-4 mt-2" v-if="options.length">
       <SelectTagView
@@ -41,6 +44,7 @@ defineOptions({
   },
 })
 const themeColor = inject('theme-color', '#3875FF')
+const showLabel = ref(false)
 const slider = ref<SliderInstance>()
 const props = defineProps<FilterSliderProps>()
 const model = defineModel<number[]>()
@@ -59,6 +63,9 @@ const onItemClick = (value) => {
 const onDropOpened = () => {
   slider.value?.initSlider()
 }
+const onDragStart = () => {
+  showLabel.value = true
+}
 
 onMounted(() => {
   uni.$on('drop-opened', onDropOpened)
@@ -78,6 +85,7 @@ watch(
   { immediate: true },
 )
 const onDragend = () => {
+  showLabel.value = false
   if (innerValue.value?.[0] === props.max && innerValue.value?.[1] === props.max) {
     model.value = [innerValue.value?.[0]]
   } else {
@@ -96,14 +104,44 @@ const getChecked = (value) => {
 }
 </script>
 <style lang="scss">
+@import '@tplc/wot/components/common/abstracts/variable';
 .filter-slider {
   position: relative;
   padding-top: 24rpx;
+
   :deep(.slider-text) {
     color: #999 !important;
     font-size: 24rpx !important;
     position: absolute;
     margin-bottom: 100rpx;
   }
+
+  :deep(.wd-slider__has-label) {
+    padding-top: 0rpx;
+
+    .wd-slider__label {
+      background: $-color-theme;
+      padding: 8rpx 16rpx;
+      border-radius: 48rpx;
+      color: #fff;
+      width: fit-content;
+      min-width: 30rpx;
+      font-size: 24rpx !important;
+      transform: translate3d(-25%, 0%, 0);
+      /** 底部中间一个三角 */
+      &:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: -6rpx;
+        width: 0;
+        height: 0;
+        border-left: 8rpx solid transparent;
+        border-right: 8rpx solid transparent;
+        border-top: 8rpx solid $-color-theme;
+        transform: translateX(-50%);
+      }
+    }
+  }
 }
 </style>

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

@@ -35,14 +35,27 @@
         <lcb-product
           v-bind="{ ...attrs, form }"
           :listType="listType"
+          :imageWidth="imageWidth"
+          :imageHeight="imageHeight"
           :items="items"
+          :titleLineClamp="titleLineClamp"
+          :layoutType="layoutType"
           v-if="$slots.item"
         >
           <template #item="{ item }">
             <slot name="item" :item="item"></slot>
           </template>
         </lcb-product>
-        <lcb-product v-bind="{ ...attrs, form }" :listType="listType" :items="items" v-else />
+        <lcb-product
+          v-bind="{ ...attrs, form }"
+          :imageWidth="imageWidth"
+          :listType="listType"
+          :items="items"
+          :imageHeight="imageHeight"
+          :layoutType="layoutType"
+          :titleLineClamp="titleLineClamp"
+          v-else
+        />
       </template>
     </FilterList>
     <lcb-map v-else-if="mode === 'map'" v-bind="{ ...info.listInfo, ...attrs }" />
@@ -56,7 +69,6 @@ import { getFilterDetail, LcbFilterResult } from './api'
 import FilterList from './components/FilterList/index.vue'
 import FilterView from './components/FilterView/index.vue'
 import { LcbListProps } from './types'
-import mockData from './components/FilterList/mockData'
 import { FORM_KEY } from '../../constants'
 import './index.scss'
 const attrs = useAttrs()
@@ -80,6 +92,8 @@ const props = withDefaults(defineProps<LcbListProps>(), {
   listType: 'list',
   isSticky: true,
   mode: 'list',
+  imageWidth: 250,
+  titleLineClamp: 2,
   // @ts-ignore
   pageListProps: () => ({
     productProps: {

package/components/lcb-list/types.ts

@@ -6,9 +6,13 @@ export interface LcbListProps {
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  imageWidth?: number
+  imageHeight?: number
+  titleLineClamp?: number
   listType?: LcbProductProps['listType']
   isSticky?: boolean
   mode?: 'map' | 'list'
+  layoutType?: 'vertical' | 'horizontal'
 }
 export interface Option {
   label: string

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

@@ -2,6 +2,7 @@
 import { ref, useAttrs, watch } from 'vue'
 import UWaterfall from 'uview-plus/components/u-waterfall/u-waterfall.vue'
 import { LcbProductProps } from './types'
+import { transformValueUnit } from '../../utils/transform'
 
 const attrs = useAttrs()
 const uWaterfallRef = ref()
@@ -10,15 +11,16 @@ defineOptions({
   options: {
     addGlobalClass: true,
     virtualHost: true,
+    layoutType: 'vertical',
     styleIsolation: 'shared',
   },
 })
 const props = withDefaults(defineProps<LcbProductProps>(), {
   listType: 'list',
   items: [],
-  imageWidthPercent: (1 / 3) * 100,
-  imageHeightPercent: (260 / 670) * 100,
-  itemHeight: 670,
+  imageWidth: 200,
+  imageHeight: 250,
+  titleLineClamp: 2,
 } as any)
 defineSlots<{
   item(props: { item: any }): any
@@ -34,6 +36,7 @@ watch(
 
 <template>
   <lcb-block v-bind="$props">
+    <!-- 单列 -->
     <view class="flex flex-col gap-2 p-3" v-if="listType === 'list'">
       <lcb-action-view
         v-for="(item, index) in items"
@@ -53,24 +56,27 @@ watch(
           <lcb-product-item
             v-else
             v-bind="{ ...item, ...attrs }"
+            :layoutType="layoutType"
             :coverImgStyle="{
-              width: imageWidth ?? `${imageWidthPercent}%`,
-              height: imageHeight ? `${imageHeight}rpx` : undefined,
-              borderRadius: imageRadius ? `${imageRadius}rpx` : undefined,
+              width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
+              height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
+              minHeight: layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
+              borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
               ...(attrs?.coverImgStyle ?? {}),
             }"
+            :titleLineClamp="titleLineClamp"
           ></lcb-product-item>
         </slot>
       </lcb-action-view>
     </view>
-
+    <!-- 双列 -->
     <view class="grid p-3 grid-cols-2 gap-2 box-border" v-if="listType === 'grid'">
       <lcb-action-view
         v-for="(item, index) in items"
         :key="`${item?.productId}:${index}`"
         v-bind="item.link"
       >
-        <view class="rounded-md overflow-hidden" :style="{ height: `${itemHeight}rpx` }">
+        <view class="rounded-md overflow-hidden">
           <slot name="item" :item="item">
             <lcb-absolute-config-layout
               v-if="renderItemAbsoluteConfigLayout"
@@ -85,11 +91,13 @@ watch(
               v-else
               v-bind="{ ...item, ...attrs }"
               layoutType="vertical"
-              className="!h-full"
               :coverImgStyle="{
-                height: `${imageHeightPercent}%`,
+                width: '100%',
+                height: transformValueUnit(imageHeight),
+                borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
                 ...(attrs?.coverImgStyle ?? {}),
               }"
+              :titleLineClamp="titleLineClamp"
             ></lcb-product-item>
           </slot>
         </view>
@@ -121,7 +129,7 @@ watch(
                   v-bind="{ ...item, ...attrs }"
                   layoutType="vertical"
                   tag-overflow-wrap
-                  :title-line-clamp="2"
+                  :titleLineClamp="titleLineClamp"
                 >
                   <template #coverImg="{ value }">
                     <image :src="value" class="w-full" mode="widthFix" />
@@ -154,7 +162,7 @@ watch(
                   v-bind="{ ...item, ...attrs }"
                   layoutType="vertical"
                   tag-overflow-wrap
-                  :title-line-clamp="2"
+                  :titleLineClamp="titleLineClamp"
                 >
                   <template #coverImg="{ value }">
                     <image :src="value" class="w-full" mode="widthFix" />
@@ -168,11 +176,12 @@ watch(
     </view>
 
     <scroll-view v-if="listType == 'horizontal'" scroll-x>
-      <view class="p-2 flex gap-2 whitespace-nowrap overflow-auto flex-nowrap">
+      <view class="p-3 whitespace-nowrap overflow-x-auto">
         <view
           v-for="(item, index) in items"
           :key="`${item?.productId}:${index}`"
-          class="!w-66vw flex-shrink-0"
+          class="inline-block"
+          :style="{ width: `${itemWidth}rpx`, marginLeft: index === 0 ? 0 : '24rpx' }"
         >
           <slot name="item" :item="item">
             <lcb-absolute-config-layout
@@ -184,7 +193,19 @@ watch(
                 ...item,
               }"
             />
-            <lcb-product-item v-else v-bind="item" imageClass="!w-1/2"></lcb-product-item>
+            <lcb-product-item
+              v-else
+              v-bind="item"
+              :layoutType="layoutType"
+              :coverImgStyle="{
+                width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
+                height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
+                minHeight: layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
+                borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
+                ...(attrs?.coverImgStyle ?? {}),
+              }"
+              :titleLineClamp="titleLineClamp"
+            ></lcb-product-item>
           </slot>
         </view>
       </view>

package/components/lcb-product/types.ts

@@ -1,14 +1,14 @@
 export interface LcbProductProps {
   // Define the component's prop types here
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
-  imageWidthPercent?: number
-  imageHeightPercent?: number
   imageWidth?: number
   imageHeight?: number
   imageRadius?: number
-  itemHeight?: number // 列表项高度
+  itemWidth?: number // 列表项宽度
   items?: Record<string, any>[]
   form?: Record<string, any>
+  layoutType?: 'vertical' | 'horizontal' // 布局方式
+  titleLineClamp?: number
   renderItemAbsoluteConfigLayout?: {
     dataset?: Record<string, any>
     blocks: any[]

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, computed, useAttrs } from 'vue'
+import { inject, computed } from 'vue'
 import { isArray } from '@tplc/wot/components/common/util'
 import { formatJson } from '../../../utils/utils'
 defineOptions({
@@ -10,13 +10,10 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-// const attrs = useAttrs()
 
 const itemProps: any = inject('lcb-product-item-props')
 const itemAttrs: any = inject('lcb-product-item-attrs')
 
-// console.log('itemAttrs', itemAttrs)
-
 const props = withDefaults(
   defineProps<{
     prop: string
@@ -143,7 +140,13 @@ const value = computed(() => {
 
     <slot :value="value" v-if="prop === 'level'" name="level">
       <view :class="className" :style="style" class="inline pl-1 relative top-[-3px]">
-        <wd-rate :model-value="Number(value)" :num="value" readonly size="12px" space="2px" />
+        <wd-rate
+          :model-value="Number(value)"
+          :num="Number(value)"
+          readonly
+          size="12px"
+          space="2px"
+        />
       </view>
     </slot>
     <slot :value="value" v-if="prop === 'titleIcon'" name="titleIcon">
@@ -333,17 +336,20 @@ const value = computed(() => {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
+  white-space: normal;
 }
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
+  white-space: normal;
 }
 .line-clamp-3 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
+  white-space: normal;
 }
 </style>

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

@@ -102,7 +102,7 @@ defineSlots<{
       <ItemValue
         v-if="!!$slots?.['coverImg']"
         prop="coverImg"
-        customClass="w-1/3 h-[360rpx] bg-gray-100 rounded-sm overflow-hidden relative"
+        customClass=" bg-gray-100 rounded-sm overflow-hidden relative"
       >
         <template #default>
           <slot name="coverImgSection" />
@@ -114,7 +114,7 @@ defineSlots<{
       <ItemValue
         v-else
         prop="coverImg"
-        customClass="w-1/3 h-[360rpx] bg-gray-100 rounded-sm overflow-hidden relative"
+        customClass=" bg-gray-100 rounded-sm overflow-hidden relative"
       >
         <template #default>
           <slot name="coverImgSection" />
@@ -282,33 +282,6 @@ defineSlots<{
       <view class="p-2 flex flex-col flex-1 text-26rpx overflow-hidden relative">
         <slot name="contentSection" />
         <view class="flex flex-col gap-[5px] overflow-hidden">
-          <!-- <template
-            v-for="propName in ['productName', 'subTitle', 'addressIntro', 'distance', 'tags']"
-            :key="propName"
-          >
-            <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
-              <template #coverImg="{ value }"><slot name="coverImg" :value="value" /></template>
-              <template #productName="{ value }"><slot name="productName" :value="value" /></template>
-              <template #subTitle="{ value }"><slot name="subTitle" :value="value" /></template>
-              <template #price="{ value }"><slot name="price" :value="value" /></template>
-              <template #priceUnit="{ value }"><slot name="priceUnit" :value="value" /></template>
-              <template #priceSuffix="{ value }">
-                <slot name="priceSuffix" :value="value" />
-              </template>
-              <template #scribePrice="{ value }">
-                <slot name="scribePrice" :value="value" />
-              </template>
-              <template #scribePriceUnit="{ value }">
-                <slot name="scribePriceUnit" :value="value" />
-              </template>
-              <template #tags="{ value }"><slot name="tags" :value="value" /></template>
-              <template #addressIntro="{ value }">
-                <slot name="addressIntro" :value="value" />
-              </template>
-              <template #distance="{ value }"><slot name="distance" :value="value" /></template>
-            </ItemValue>
-            <ItemValue :prop="propName" v-else />
-          </template> -->
           <view class="text-ellipsis line-clamp-2">
             <ItemValue prop="productName">
               <!-- <template #productName="{ value }"><slot name="productName" :value="value" /></template> -->

package/package.json

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

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

@@ -20,12 +20,16 @@ declare const __VLS_component: import('vue').DefineComponent<
   >,
   {
     mode: 'map' | 'list'
+    imageWidth: number
+    imageHeight: number
     listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
     pageFilterType: string
     pageListProps: import('./components/FilterList/type').PageListProps
     border: boolean
     styleMode: 'default' | 'plain'
+    titleLineClamp: number
     isSticky: boolean
+    layoutType: 'vertical' | 'horizontal'
   },
   {}
 >

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

@@ -5,9 +5,13 @@ export interface LcbListProps {
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  imageWidth?: number
+  imageHeight?: number
+  titleLineClamp?: number
   listType?: LcbProductProps['listType']
   isSticky?: boolean
   mode?: 'map' | 'list'
+  layoutType?: 'vertical' | 'horizontal'
 }
 export interface Option {
   label: string

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

@@ -27,9 +27,9 @@ declare const __VLS_component: import('vue').DefineComponent<
     imageWidth: number
     imageHeight: number
     listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
-    imageWidthPercent: number
-    imageHeightPercent: number
-    itemHeight: number
+    titleLineClamp: number
+    layoutType: 'vertical' | 'horizontal'
+    itemWidth: number
     renderItemAbsoluteConfigLayout: {
       dataset?: Record<string, any>
       blocks: any[]

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

@@ -1,13 +1,13 @@
 export interface LcbProductProps {
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
-  imageWidthPercent?: number
-  imageHeightPercent?: number
   imageWidth?: number
   imageHeight?: number
   imageRadius?: number
-  itemHeight?: number
+  itemWidth?: number
   items?: Record<string, any>[]
   form?: Record<string, any>
+  layoutType?: 'vertical' | 'horizontal'
+  titleLineClamp?: number
   renderItemAbsoluteConfigLayout?: {
     dataset?: Record<string, any>
     blocks: any[]

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

@@ -153,9 +153,9 @@ declare const __VLS_component: import('vue').DefineComponent<
     >
   >,
   {
+    titleLineClamp: number
     layoutType: 'vertical' | 'horizontal'
     tagOverflowWrap: boolean
-    titleLineClamp: number
     priceUnit: any
     scribePriceUnit: any
     tagType: import('@tplc/wot/components/wd-tag/types').TagType

package/types/components/lcb-list/components/FilterList/mockData.d.ts

@@ -1,70 +0,0 @@
-declare const _default: {
-  code: string
-  count: number
-  data: {
-    address: string
-    agentId: string
-    areaId: string
-    areaName: string
-    auditDateTime: string
-    auditRemark: string
-    auditStatus: number
-    behindUnit: string
-    bigIcon: boolean
-    businessStatus: number
-    cityAreaName: string
-    cityId: string
-    cityName: string
-    clickCount: number
-    collectCount: number
-    collectFlag: boolean
-    commentCount: number
-    coverImg: string
-    createDate: string
-    distance: string
-    hideTags: string
-    hierarchy: number
-    lastModifyDate: string
-    latitude: string
-    level: string
-    longitude: string
-    mapShowFlag: boolean
-    marketingType: number
-    merchantHeadId: string
-    merchantId: string
-    orderCount: number
-    orderSkuCount: number
-    peopleNumScope: string
-    phone: string
-    poiId: string
-    poiName: string
-    poiNameI18n: string
-    poiType: string
-    praiseCount: number
-    praiseFlag: boolean
-    price: number
-    productId: string
-    productName: string
-    productNameI18n: string
-    productType: string
-    provinceId: string
-    provinceName: string
-    scribePrice: number
-    showDateFlag: boolean
-    startDateStr: string
-    startTime: string
-    status: number
-    tags: string
-    weightSort: string
-    subTitle: string
-    scoreAvg: number
-    scoreTips: string
-    titleIcon: string
-    userInteractionInfo: string
-    orderTips: string
-    priceTips: string
-  }[]
-  dataClass: string
-  traceId: string
-}
-export default _default