@tplc/business 0.1.11 → 0.1.13

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, useAttrs } from 'vue'
-import { lcbProductItemContentTypes, LcbProductItemProps } from './types'
+import { LcbProductItemProps } from './types'
 import ItemValue from './components/ItemValue.vue'
 
+const isNumber = (value: any) => typeof value === 'number'
+
 defineOptions({
   name: 'LcbProductItem',
   options: {
@@ -14,36 +16,54 @@ defineOptions({
 
 const props = withDefaults(defineProps<LcbProductItemProps>(), {
   layoutType: 'horizontal',
+  titleLineClamp: 1,
+  tagOverflowWrap: false,
+  tagType: 'primary',
+  tagPlain: true,
+  tagMark: false,
+  tagRound: false,
+  distanceUnit: 'km',
+
   priceUnit: '¥',
   originPriceUnit: '¥',
   imageVisible: true,
   titleVisible: true,
-  subTitleVisible: true,
+  subTitleVisible: false,
   priceVisible: true,
   priceUnitVisible: true,
   priceSuffixVisible: true,
   originPriceVisible: true,
   originPriceUnitVisible: true,
+  originPriceSuffixVisible: true,
   tagsVisible: true,
   locationVisible: true,
-  distanceVisible: true,
+  distanceVisible: false,
 })
 const attrs = useAttrs()
 
 provide('lcb-product-item-props', props)
 
 defineSlots<{
-  image(): any
-  title(): any
-  subTitle(): any
-  price(): any
-  priceUnit(): any
-  priceSuffix(): any
-  originPrice(): any
-  originPriceUnit(): any
-  tags(): any
-  location(): any
-  distance(): any
+  image(props: { value: any }): any
+  title(props: { value: any }): any
+  subTitle(props: { value: any }): any
+  price(props: { value: any }): any
+  priceUnit(props: { value: any }): any
+  priceSuffix(props: { value: any }): any
+  originPrice(props: { value: any }): any
+  originPriceUnit(props: { value: any }): any
+  originPriceSuffix(props: { value: any }): any
+  tags(props: { value: any }): any
+  location(props: { value: any }): any
+  distance(props: { value: any }): any
+
+  itemSection(): any
+  itemTopSection(): any
+  itemBottomSection(): any
+  itemLeftSection(): any
+  itemRightSection(): any
+  imageSection(): any
+  contentSection(): any
 }>()
 
 // console.log('attrs', attrs)
@@ -51,87 +71,246 @@ defineSlots<{
 
 <template>
   <!-- 横向布局 -->
-  <view v-if="layoutType === 'horizontal'" :class="className" class="flex gap-3 px-2 py-3 bg-white">
-    <ItemValue prop="image" className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden">
-      <template
-        v-for="slotName in lcbProductItemContentTypes"
-        :key="slotName"
-        #[slotName]="slotContext"
+  <view
+    v-if="layoutType === 'horizontal'"
+    :class="className"
+    class="flex flex-col gap-1 px-2 py-3 bg-white relative"
+  >
+    <slot name="itemSection" />
+    <slot name="itemTopSection" />
+    <view class="flex gap-2">
+      <slot name="itemLeftSection" />
+      <ItemValue
+        v-if="!!$slots?.['image']"
+        prop="image"
+        className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden relative"
       >
-        <slot :name="slotName" v-bind="slotContext" />
-      </template>
-    </ItemValue>
-    <view class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden">
-      <view class="flex flex-col gap-2 overflow-hidden">
-        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+        <template #image="{ value }">
+          <slot name="image" :value="value" />
+        </template>
+      </ItemValue>
+      <ItemValue
+        v-else
+        prop="image"
+        className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden relative"
+      >
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+      </ItemValue>
+      <view class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden relative">
+        <slot name="contentSection" />
+        <view class="flex flex-col gap-2 overflow-hidden">
           <template
-            v-for="slotName in lcbProductItemContentTypes"
-            :key="slotName"
-            #[slotName]="slotContext"
+            v-for="propName in ['title', 'subTitle', 'location', 'distance', 'tags']"
+            :key="propName"
           >
-            <slot :name="slotName" v-bind="slotContext" />
+            <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+              <template #image="{ value }"><slot name="image" :value="value" /></template>
+              <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                <slot name="originPrice" :value="value" />
+              </template>
+              <template #originPriceUnit="{ value }">
+                <slot name="originPriceUnit" :value="value" />
+              </template>
+              <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+              <template #location="{ value }"><slot name="location" :value="value" /></template>
+              <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+            </ItemValue>
+            <ItemValue :prop="propName" v-else />
           </template>
-        </ItemValue>
-      </view>
+        </view>
 
-      <view class="flex gap-2">
-        <view class="flex gap-[4rpx] items-end">
-          <ItemValue v-for="prop in ['priceUnit', 'price', 'priceSuffix']" :prop="prop" :key="prop">
+        <view class="flex gap-2">
+          <view class="flex gap-[4rpx] items-end" v-if="priceVisible && isNumber(price)">
+            <template v-for="propName in ['priceUnit', 'price', 'priceSuffix']" :key="propName">
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
+            </template>
+          </view>
+          <view
+            class="flex gap-[2rpx] items-end line-through"
+            v-if="originPriceVisible && isNumber(originPrice)"
+          >
             <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
+              v-for="propName in ['originPriceUnit', 'originPrice', 'originPriceSuffix']"
+              :key="propName"
             >
-              <slot :name="slotName" v-bind="slotContext" />
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #originPriceSuffix="{ value }">
+                  <slot name="originPriceSuffix" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
             </template>
-          </ItemValue>
+          </view>
         </view>
       </view>
+      <slot name="itemRightSection" />
     </view>
+    <slot name="itemBottomSection" />
   </view>
 
   <!-- 竖向布局 -->
-  <view v-if="layoutType === 'vertical'" :class="className" class="flex flex-col gap-2 bg-white">
-    <ItemValue prop="image" className="overflow-hidden">
-      <template
-        v-for="slotName in lcbProductItemContentTypes"
-        :key="slotName"
-        #[slotName]="slotContext"
+  <view v-if="layoutType === 'vertical'" class="flex bg-white relative" :class="className">
+    <slot name="itemSection" />
+    <slot name="itemLeftSection" />
+    <view class="flex-1 flex flex-col w-full overflow-hidden">
+      <slot name="itemTopSection" />
+      <ItemValue v-if="!!$slots?.['image']" prop="image" className="overflow-hidden relative">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+        <template #image="{ value }">
+          <slot name="image" :value="value" />
+        </template>
+      </ItemValue>
+      <ItemValue v-else prop="image" className="overflow-hidden relative">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+      </ItemValue>
+      <view
+        :class="'p-2'"
+        class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden relative"
       >
-        <slot :name="slotName" v-bind="slotContext" />
-      </template>
-    </ItemValue>
-    <view
-      :class="'p-2'"
-      class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden"
-    >
-      <view class="flex flex-col gap-2 overflow-hidden">
-        <!-- <ItemValue prop="title"></ItemValue> -->
-        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop">
+        <slot name="contentSection" />
+        <view class="flex flex-col gap-2 overflow-hidden">
           <template
-            v-for="slotName in lcbProductItemContentTypes"
-            :key="slotName"
-            #[slotName]="slotContext"
+            v-for="propName in ['title', 'subTitle', 'location', 'distance', 'tags']"
+            :key="propName"
           >
-            <slot :name="slotName" v-bind="slotContext" />
+            <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+              <template #image="{ value }"><slot name="image" :value="value" /></template>
+              <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                <slot name="originPrice" :value="value" />
+              </template>
+              <template #originPriceUnit="{ value }">
+                <slot name="originPriceUnit" :value="value" />
+              </template>
+              <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+              <template #location="{ value }"><slot name="location" :value="value" /></template>
+              <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+            </ItemValue>
+            <ItemValue :prop="propName" v-else />
           </template>
-        </ItemValue>
-      </view>
+        </view>
 
-      <view class="flex gap-2">
-        <view class="flex gap-[4rpx] items-end">
-          <ItemValue v-for="prop in ['priceUnit', 'price', 'priceSuffix']" :prop="prop" :key="prop">
+        <view class="flex gap-2">
+          <view class="flex gap-[4rpx] items-end" v-if="priceVisible && isNumber(price)">
+            <template v-for="propName in ['priceUnit', 'price', 'priceSuffix']" :key="propName">
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
+            </template>
+          </view>
+          <view
+            class="flex gap-[2rpx] items-end line-through"
+            v-if="originPriceVisible && isNumber(originPrice)"
+          >
             <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
+              v-for="propName in ['originPriceUnit', 'originPrice', 'originPriceSuffix']"
+              :key="propName"
             >
-              <slot :name="slotName" v-bind="slotContext" />
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <template #title="{ value }"><slot name="title" :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 #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #originPriceSuffix="{ value }">
+                  <slot name="originPriceSuffix" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
             </template>
-          </ItemValue>
+          </view>
         </view>
       </view>
+      <slot name="itemBottomSection" />
     </view>
+    <slot name="itemRightSection" />
   </view>
 </template>
 

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

@@ -1,23 +1,20 @@
 import { CSSProperties } from 'vue'
-
-export const lcbProductItemContentTypes = [
-  'image',
-  'title',
-  'subTitle',
-  'price',
-  'priceUnit',
-  'priceSuffix',
-  'originPrice',
-  'originPriceUnit',
-  'tags',
-  'location',
-  'distance',
-] as const
+import { TagType } from '@tplc/wot/components/wd-tag/types'
 
 export interface LcbProductItemProps {
   // Define the component's prop types here
   className?: string
   layoutType?: 'vertical' | 'horizontal'
+  titleLineClamp?: number
+  tagOverflowWrap?: boolean
+  tagType?: TagType
+  tagContentColor?: string
+  tagBgColor?: string
+  tagPlain?: boolean
+  tagMark?: boolean
+  tagRound?: boolean
+  distanceUnit?: string
+
   image?: any
   title?: any
   subTitle?: any
@@ -26,6 +23,7 @@ export interface LcbProductItemProps {
   priceSuffix?: any
   originPrice?: any
   originPriceUnit?: any
+  originPriceSuffix?: any
   tags?: any
   location?: any
   distance?: any
@@ -38,6 +36,7 @@ export interface LcbProductItemProps {
   priceSuffixVisible?: boolean
   originPriceVisible?: boolean
   originPriceUnitVisible?: boolean
+  originPriceSuffixVisible?: boolean
   tagsVisible?: boolean
   locationVisible?: boolean
   distanceVisible?: boolean
@@ -50,6 +49,7 @@ export interface LcbProductItemProps {
   priceSuffixClass?: string
   originPriceClass?: string
   originPriceUnitClass?: string
+  originPriceSuffixClass?: string
   tagsClass?: string
   tagsWrapperClass?: string
   locationClass?: string
@@ -63,6 +63,7 @@ export interface LcbProductItemProps {
   priceSuffixStyle?: CSSProperties
   originPriceStyle?: CSSProperties
   originPriceUnitStyle?: CSSProperties
+  originPriceSuffixStyle?: CSSProperties
   tagsStyle?: CSSProperties
   tagsWrapperStyle?: CSSProperties
   locationStyle?: CSSProperties

package/package.json

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

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

@@ -0,0 +1,63 @@
+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
+  }[]
+  dataClass: string
+  traceId: string
+}
+export default _default

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

@@ -1,7 +1,11 @@
 import { LcbListProps } from './types'
 import './index.scss'
-declare function __VLS_template(): {
-  list?(_: { items: any[] }): any
+declare function __VLS_template(): Readonly<{
+  list(props: { items: any }): any
+  item(props: { item: any }): any
+}> & {
+  list(props: { items: any }): any
+  item(props: { item: any }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<__VLS_TypePropsToOption<LcbListProps>, any>,
@@ -20,9 +24,9 @@ declare const __VLS_component: import('vue').DefineComponent<
   {
     listType: 'horizontal' | 'list' | 'grid' | 'waterfall'
     pageFilterType: string
+    pageListProps: import('./components/FilterList/type').PageListProps
     border: boolean
     styleMode: 'default' | 'plain'
-    pageListProps: import('./components/FilterList/type').PageListProps
   },
   {}
 >

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

@@ -22,4 +22,3 @@ export interface FilterItemProps {
   options?: Option[]
   test?: 1
 }
-export declare const defaultLcbListProps: LcbListProps

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

@@ -1,28 +1,8 @@
 import { LcbProductProps } from './types'
 declare function __VLS_template(): Readonly<{
-  image(): any
-  title(): any
-  subTitle(): any
-  price(): any
-  priceUnit(): any
-  priceSuffix(): any
-  originPrice(): any
-  originPriceUnit(): any
-  tags(): any
-  location(): any
-  distance(): any
+  item(props: { item: any }): any
 }> & {
-  image(): any
-  title(): any
-  subTitle(): any
-  price(): any
-  priceUnit(): any
-  priceSuffix(): any
-  originPrice(): any
-  originPriceUnit(): any
-  tags(): any
-  location(): any
-  distance(): any
+  item(props: { item: any }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, any>,

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

@@ -1,11 +1,29 @@
-declare function __VLS_template(): {
-  image?(_: { value: any }): any
-  title?(_: { value: any }): any
-  location?(_: { value: any }): any
-  tags?(_: { value: any }): any
-  priceUnit?(_: { value: any }): any
-  price?(_: { value: any }): any
-  priceSuffix?(_: { value: any }): any
+declare function __VLS_template(): Readonly<{
+  image(props: { value: any }): any
+  title(props: { value: any }): any
+  subTitle(props: { value: any }): any
+  price(props: { value: any }): any
+  priceUnit(props: { value: any }): any
+  priceSuffix(props: { value: any }): any
+  originPrice(props: { value: any }): any
+  originPriceUnit(props: { value: any }): any
+  originPriceSuffix(props: { value: any }): any
+  tags(props: { value: any }): any
+  location(props: { value: any }): any
+  distance(props: { value: any }): any
+}> & {
+  image(props: { value: any }): any
+  title(props: { value: any }): any
+  subTitle(props: { value: any }): any
+  price(props: { value: any }): any
+  priceUnit(props: { value: any }): any
+  priceSuffix(props: { value: any }): any
+  originPrice(props: { value: any }): any
+  originPriceUnit(props: { value: any }): any
+  originPriceSuffix(props: { value: any }): any
+  tags(props: { value: any }): any
+  location(props: { value: any }): any
+  distance(props: { value: any }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
   __VLS_WithDefaults<