@tplc/business 0.1.11 → 0.1.13

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

@@ -71,18 +71,17 @@
     <FilterList v-bind="{ ...info.listInfo, listType, filter, ...attrs }">
       <template #default="{ items }">
         <slot name="list" :items="items">
-          <!-- <lcb-product v-bind="{ ...attrs }" :listType="listType" :items="items">
-            <template #item="slotContext">
-              <slot name="item" v-bind="slotContext" />
+          <lcb-product v-bind="{ ...attrs }" :listType="listType" :items="items" v-if="$slots.item">
+            <template #item="{ item }">
+              <slot name="item" :item="item"></slot>
             </template>
-            <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
-            >
-              <slot :name="slotName" v-bind="slotContext" />
-            </template>
-          </lcb-product> -->
+          </lcb-product>
+          <lcb-product
+            v-bind="{ ...attrs }"
+            :listType="listType"
+            :items="items"
+            v-else
+          ></lcb-product>
         </slot>
       </template>
     </FilterList>
@@ -91,7 +90,7 @@
 
 <script setup lang="ts">
 import { computed, inject, Ref, ref, watch, useAttrs } from 'vue'
-import { LcbListProps, defaultLcbListProps } from './types'
+import { LcbListProps } from './types'
 import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
 import FilterSelect from './components/FilterSelect/index.vue'
 import TreeSelect from './components/TreeSelect/index.vue'
@@ -99,14 +98,11 @@ import ComponentGroup from './components/ComponentGroup/index.vue'
 import TagSelect from './components/TagSelect/index.vue'
 import FilterList from './components/FilterList/index.vue'
 import FilterTabs from './components/FilterTabs/index.vue'
-import { lcbProductItemContentTypes } from '../lcb-product-item/types'
 
 import './index.scss'
 import { FORM_KEY } from '../../constants'
 const attrs = useAttrs()
 
-const slotNames = [...lcbProductItemContentTypes, 'item']
-
 defineOptions({
   name: 'LcbList',
   options: {
@@ -117,7 +113,18 @@ defineOptions({
 })
 const form = inject<Ref<Record<string, any>>>(FORM_KEY)
 const dropMenu = ref()
-const props = withDefaults(defineProps<LcbListProps>(), defaultLcbListProps as any)
+const props = withDefaults(defineProps<LcbListProps>(), {
+  pageFilterType: 'hotelTravelFilter',
+  border: true,
+  styleMode: 'default',
+  listType: 'list',
+  // @ts-ignore
+  pageListProps: () => ({
+    productProps: {
+      // listType: 'list',
+    },
+  }),
+} as LcbListProps as any)
 const info = ref<LcbFilterResult>()
 const filter = ref<Record<string, any>>({})
 const titleObj = ref<Record<string, any>>({})
@@ -191,6 +198,11 @@ watch(
     deep: true,
   },
 )
+
+defineSlots<{
+  list(props: { items: any }): any
+  item(props: { item: any }): any
+}>()
 </script>
 
 <style lang="scss" scoped>

package/components/lcb-list/types.ts

@@ -24,16 +24,3 @@ export interface FilterItemProps {
   options?: Option[]
   test?: 1
 }
-
-export const defaultLcbListProps: LcbListProps = {
-  pageFilterType: 'hotelTravelFilter',
-  border: true,
-  styleMode: 'default',
-  listType: 'list',
-  // @ts-ignore
-  pageListProps: () => ({
-    productProps: {
-      // listType: 'list',
-    },
-  }),
-}

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
 import { LcbProductProps } from './types'
-import { lcbProductItemContentTypes } from '../lcb-product-item/types'
 
 const attrs = useAttrs()
 defineOptions({
@@ -20,17 +19,7 @@ const props = withDefaults(defineProps<LcbProductProps>(), {
   itemHeight: 560,
 } as any)
 defineSlots<{
-  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
 }>()
 </script>
 
@@ -43,13 +32,31 @@ defineSlots<{
             v-bind="{ ...item, ...attrs }"
             :imageStyle="{ width: `${imageWidthPercent}%` }"
           >
-            <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
-            >
-              <slot :name="slotName" v-bind="slotContext" />
+            <!-- <template #itemTopSection>
+              <view class="min-w-10 min-h-10 bg-red-500/50"></view>
             </template>
+            <template #itemBottomSection>
+              <view class="min-w-10 min-h-10 bg-yellow-500/50"></view>
+            </template>
+            <template #itemLeftSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50"></view>
+            </template>
+            <template #itemRightSection>
+              <view class="min-w-10 min-h-10 bg-green-500/50"></view>
+            </template> -->
+
+            <!-- <template #imageSection>
+              <view class="min-w-5 min-h-5 bg-yellow-400 right-1 top-1 absolute z-10"></view>
+            </template>
+
+            <template #itemSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50 right-0 top-0 absolute z-10"></view>
+            </template>
+            <template #contentSection>
+              <view
+                class="min-w-15 min-h-15 bg-gray-500/20 right-10 top-10 absolute z-10 rounded-full"
+              ></view>
+            </template> -->
           </lcb-product-item>
         </slot>
       </view>
@@ -66,13 +73,18 @@ defineSlots<{
                 className="!h-full"
                 :imageStyle="{ height: `${imageHeightPercent}%` }"
               >
-                <template
-                  v-for="slotName in lcbProductItemContentTypes"
-                  :key="slotName"
-                  #[slotName]="slotContext"
-                >
-                  <slot :name="slotName" v-bind="slotContext" />
+                <!-- <template #itemTopSection>
+                  <view class="min-w-10 min-h-10 bg-red-500/50"></view>
+                </template>
+                <template #itemBottomSection>
+                  <view class="min-w-10 min-h-10 bg-yellow-500/50"></view>
                 </template>
+                <template #itemLeftSection>
+                  <view class="min-w-10 min-h-10 bg-blue-500/50"></view>
+                </template>
+                <template #itemRightSection>
+                  <view class="min-w-10 min-h-10 bg-green-500/50"></view>
+                </template> -->
               </lcb-product-item>
             </slot>
           </view>
@@ -88,15 +100,7 @@ defineSlots<{
           class="!w-66vw flex-shrink-0"
         >
           <slot name="item" :item="item">
-            <lcb-product-item v-bind="item" imageClass="!w-1/2">
-              <template
-                v-for="slotName in lcbProductItemContentTypes"
-                :key="slotName"
-                #[slotName]="slotContext"
-              >
-                <slot :name="slotName" v-bind="slotContext" />
-              </template>
-            </lcb-product-item>
+            <lcb-product-item v-bind="item" imageClass="!w-1/2"></lcb-product-item>
           </slot>
         </view>
       </view>

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

@@ -4,7 +4,7 @@ import { isArray } from '@tplc/wot/components/common/util'
 
 // const attrs = useAttrs()
 
-const itemProps = inject('lcb-product-item-props')
+const itemProps: any = inject('lcb-product-item-props')
 
 const props = withDefaults(
   defineProps<{
@@ -14,19 +14,20 @@ const props = withDefaults(
   {},
 )
 
-// defineSlots<{
-//   image(): any
-//   title(): any
-//   subTitle(): any
-//   price(): any
-//   priceUnit(): any
-//   priceSuffix(): any
-//   originPrice(): any
-//   originPriceUnit(): any
-//   tags(): any
-//   location(): any
-//   distance(): any
-// }>()
+defineSlots<{
+  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
+}>()
 
 const visible = computed(() => {
   return itemProps?.[`${props?.prop}Visible`] ?? true
@@ -43,17 +44,44 @@ const value = computed(() => {
 </script>
 
 <template>
-  <template v-if="visible && !!value && (isArray(value) ? value?.length > 0 : true)">
+  <template
+    v-if="visible && (prop === 'image' || (!!value && (isArray(value) ? value?.length > 0 : true)))"
+  >
     <!-- 图片 -->
     <slot :value="value" v-if="prop === 'image'" name="image">
       <view :value="value" :class="className" :style="style">
         <image :src="value" class="w-full h-full" mode="aspectFill" />
+        <slot></slot>
       </view>
     </slot>
 
     <!-- 标题 -->
     <slot :value="value" v-if="prop === 'title'" name="title">
-      <view :class="className" :style="style" :value="value" class="text-ellipsis line-clamp-1">
+      <view
+        :class="[
+          className,
+          'text-ellipsis',
+          {
+            'line-clamp-1': itemProps?.titleLineClamp === 1,
+            'line-clamp-2': itemProps?.titleLineClamp === 2,
+            'line-clamp-3': itemProps?.titleLineClamp === 3,
+          },
+        ]"
+        :style="style"
+        :value="value"
+      >
+        <view>{{ value }}</view>
+      </view>
+    </slot>
+
+    <!-- 副标题 -->
+    <slot :value="value" v-if="prop === 'subTitle'" name="subTitle">
+      <view
+        :class="className"
+        :style="style"
+        :value="value"
+        class="text-22rpx text-gray-500 text-ellipsis line-clamp-1"
+      >
         <view>{{ value }}</view>
       </view>
     </slot>
@@ -67,17 +95,35 @@ const value = computed(() => {
         class="text-gray-500 text-22rpx flex gap-3rpx items-center"
       >
         <wd-icon name="location" size="32rpx"></wd-icon>
-        <view>{{ value }}</view>
+        <view class="text-ellipsis line-clamp-1">{{ value }}</view>
       </view>
     </slot>
 
-    <!-- 标签 -->
-    <slot :value="value" v-if="prop === 'tags'" name="tags">
+    <!-- 距离 -->
+    <slot :value="value" v-if="prop === 'distance'" name="distance">
       <view
         :class="className"
         :style="style"
         :value="value"
-        class="flex gap-1 whitespace-nowrap overflow-auto"
+        class="text-gray-500 text-22rpx flex gap-3rpx items-center"
+      >
+        <wd-icon name="location" size="32rpx"></wd-icon>
+        <view class="text-ellipsis line-clamp-1">
+          距您{{ value }}{{ itemProps?.distanceUnit ?? 'km' }}
+        </view>
+      </view>
+    </slot>
+
+    <!-- 标签 -->
+    <slot :value="value" v-if="prop === 'tags'" name="tags">
+      <view
+        :class="[
+          'flex gap-1',
+          {
+            'whitespace-nowrap overflow-auto': !itemProps?.tagOverflowWrap,
+            'flex-wrap': itemProps?.tagOverflowWrap,
+          },
+        ]"
       >
         <wd-tag
           v-for="tag in value"
@@ -85,8 +131,12 @@ const value = computed(() => {
           class="!text-20rpx"
           :class="className"
           :style="style"
-          plain
-          type="primary"
+          :color="itemProps?.tagContentColor"
+          :bg-color="itemProps?.tagBgColor"
+          :plain="itemProps?.tagPlain ?? true"
+          :mark="itemProps?.tagMark ?? false"
+          :round="itemProps?.tagRound ?? false"
+          :type="itemProps?.tagType ?? 'primary'"
         >
           {{ tag }}
         </wd-tag>
@@ -123,5 +173,36 @@ const value = computed(() => {
         <view>{{ value }}</view>
       </view>
     </slot>
+
+    <!-- 原始价格单位 -->
+    <slot :value="value" v-if="prop === 'originPriceUnit'" name="originPriceUnit">
+      <view
+        :class="className"
+        :style="style"
+        :value="value"
+        class="text-gray-500 font-bold text-19rpx"
+      >
+        <view>{{ value }}</view>
+      </view>
+    </slot>
+
+    <!-- 原始价格 -->
+    <slot :value="value" v-if="prop === 'originPrice'" name="originPrice">
+      <view
+        :class="className"
+        :style="style"
+        :value="value"
+        class="text-gray-500 font-bold text-20rpx"
+      >
+        <view>{{ value }}</view>
+      </view>
+    </slot>
+
+    <!-- 原始价格后缀 -->
+    <slot :value="value" v-if="prop === 'originPriceSuffix'" name="originPriceSuffix">
+      <view :class="className" :style="style" :value="value" class="text-gray-500 text-20rpx">
+        <view>{{ value }}</view>
+      </view>
+    </slot>
   </template>
 </template>