@tplc/business 0.0.37 → 0.0.39

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.0.39](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.38...v0.0.39) (2024-10-23)
+
+
+### ✨ Features | 新功能
+
+* 优化 lcb-list 相关逻辑 ([c81aeb8](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c81aeb8e0f9b3b5931f6c227133e2b7a314fa089))
+* 优化 product-item 实现 ([40ad6c6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/40ad6c6ee4beb15a66210771b2e32972484a0341))
+* 修改返回按钮尺寸 ([7c946aa](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/7c946aa3cd4c9d02b663044618eededa8542ba8b))
+
+### [0.0.38](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.17...v0.0.38) (2024-10-22)
+
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+* husky changed ([96139b0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/96139b0e4f3fb469a62fd433f9446cfdf6a65016))
+
+
+### ✨ Features | 新功能
+
+* city 支持mode ([9686a0e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/9686a0e1f19c4b05d936e1b674933b4744c1b3ba))
+* gap支持safe-top ([d21834c](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d21834cb8b67da98667fc6216624dfa1962790e5))
+* 优化 lcb-list 过滤器吸顶逻辑；增加 unocss 插件触发文件 ([ff8d6ef](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ff8d6ef0c7703823f1a7833482d3b17bb272ae82))
+* 调整 lcb-product-item 样式与逻辑 ([22810b7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/22810b709783b44920a778d9c038e028dcce06ad))
+
 ### [0.0.37](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.36...v0.0.37) (2024-10-21)
 
 ### [0.0.36](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.35...v0.0.36) (2024-10-21)

package/components/lcb-area-picker/api/index.ts

@@ -43,3 +43,19 @@ export const getProvinceCityArea = async () => {
     }
   })
 }
+
+export const getProvinceCity = async () => {
+  const { data } = await uni.$lcb.http.post<ProvinceCityArea[]>('/provinces/provinceCityArea')
+  return data.map(({ provinceId, provinceName, cityList }) => {
+    return {
+      label: provinceName,
+      value: provinceId,
+      children: cityList.map(({ cityId, cityName }) => {
+        return {
+          label: cityName,
+          value: cityId,
+        }
+      }),
+    }
+  })
+}

package/components/lcb-area-picker/lcb-area-picker.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { LcbAreaPickerProps } from './types'
-import { AreaOptions, getProvinceCityArea } from './api'
+import { AreaOptions, getProvinceCity, getProvinceCityArea } from './api'
 import { ColPickerColumnChangeOption } from '@tplc/wot/types/components/wd-col-picker/types'
 defineOptions({
   name: 'LcbAreaPicker',
@@ -23,7 +23,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-withDefaults(defineProps<LcbAreaPickerProps>(), {})
+const props = withDefaults(defineProps<LcbAreaPickerProps>(), { mode: 'area' })
 const emits = defineEmits<{
   (event: 'confirm', payload: AreaOptions[]): void
 }>()
@@ -40,7 +40,7 @@ const columnChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOp
   }
 }
 onMounted(async () => {
-  const data = await getProvinceCityArea()
+  const data = props.mode === 'area' ? await getProvinceCityArea() : await getProvinceCity()
   area.value = [data]
 })
 const stopWatch = watch(
@@ -57,9 +57,15 @@ const stopWatch = watch(
         return acc
       }, [] as string[])
       const cityItem = areas[0].find((item) => item.value === value[0])
-      const areaItem = cityItem?.children?.find((item) => item.value === value[1])
-      if (cityItem?.children && areaItem?.children)
-        area.value = [areas[0], cityItem.children, areaItem.children]
+      if (cityItem?.children) {
+        if (props.mode === 'area') {
+          const areaItem = cityItem?.children?.find((item) => item.value === value[1])
+          if (areaItem?.children) area.value = [areas[0], cityItem.children, areaItem.children]
+        } else {
+          area.value = [areas[0], cityItem.children]
+        }
+      }
+
       stopWatch()
     }
   },

package/components/lcb-area-picker/types.ts

@@ -1,3 +1,3 @@
 export interface LcbAreaPickerProps {
-  // Define the component's prop types here
+  mode: 'city' | 'area'
 }

package/components/lcb-list/api.ts

@@ -62,6 +62,6 @@ interface BtnComponent {
 }
 
 export const getFilterDetail = (val: string) =>
-  uni.$lcb.http.post<LcbFilterResult>('/pageDecoration/list//detail', {
+  uni.$lcb.http.post<LcbFilterResult>('/pageDecoration/list/detail', {
     pageListType: val,
   })

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

@@ -7,14 +7,15 @@
     @query="queryList"
     use-page-scroll
   >
-    <lcb-product v-bind="{ ...productProps }" :items="dataList" />
+    <lcb-product v-bind="{ ...productProps }" :listType="listType" :items="normalizeDataList" />
   </z-paging>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging'
 import { LcbFilterListProps } from './type'
+import { formatJson } from '../../../../utils/utils'
 
 defineOptions({
   name: 'FilterList',
@@ -28,6 +29,26 @@ const props = defineProps<LcbFilterListProps>()
 const dataList = ref<unknown[]>([])
 const paging = ref()
 useZPaging(paging)
+
+const normalizeDataList = computed(() => {
+  const list = dataList.value?.map?.((item: any) => {
+    const imgArr = formatJson(item.coverImg, [])
+    const tags = formatJson(item.tags, [])
+    return {
+      ...item,
+      image: imgArr?.[1] ?? imgArr?.[0],
+      title: item?.productName,
+      tags,
+      price: item?.price,
+      location: item?.cityAreaName,
+      priceSuffix: item?.behindUnit,
+    }
+  })
+  // console.log('list', list)
+
+  return list
+})
+
 watch(
   () => props.url,
   async (val) => {
@@ -67,6 +88,13 @@ const queryList = async (page: number, limit: number) => {
     paging.value.complete(false)
   }
 }
+
+// watch(
+//   () => dataList.value,
+//   () => {
+//     console.log('dataList', dataList.value)
+//   },
+// )
 </script>
 <style lang="scss" scoped>
 .action-view {

package/components/lcb-list/components/FilterList/type.ts

@@ -2,8 +2,10 @@ import { LcbListInfo } from '../../api'
 import { LcbProductProps } from '../../../lcb-product/types'
 export interface PageListProps {
   emptyImage?: string
+  listType?: LcbProductProps['listType']
   productProps?: LcbProductProps
 }
 export interface LcbFilterListProps extends PageListProps, LcbListInfo {
   filter?: Record<string, any>
+  test?: any
 }

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

@@ -1,6 +1,6 @@
 <template>
-  <view v-if="info">
-    <wd-sticky @sticky="sticky = $event">
+  <view v-if="info" class="bg-gray-100">
+    <wd-sticky @sticky="sticky = $event" :offset-top="0.0001">
       <view
         :class="{
           'lcb-filter__border-top': showPlain ? false : border,
@@ -67,13 +67,13 @@
       </view>
     </wd-sticky>
 
-    <FilterList v-bind="{ ...info.listInfo, ...pageListProps, filter }" />
+    <FilterList v-bind="{ ...info.listInfo, listType, filter }" test2="11" />
   </view>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, Ref, ref, watch } from 'vue'
-import { LcbListProps } from './types'
+import { LcbListProps, defaultLcbListProps } from './types'
 import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
 import FilterSelect from './components/FilterSelect/index.vue'
 import TreeSelect from './components/TreeSelect/index.vue'
@@ -83,6 +83,7 @@ import FilterList from './components/FilterList/index.vue'
 import FilterTabs from './components/FilterTabs/index.vue'
 import './index.scss'
 import { FORM_KEY } from '../../constants'
+
 defineOptions({
   name: 'LcbList',
   options: {
@@ -93,23 +94,14 @@ defineOptions({
 })
 const form = inject<Ref<Record<string, any>>>(FORM_KEY)
 const dropMenu = ref()
-const props = withDefaults(defineProps<LcbListProps>(), {
-  pageFilterType: 'hotelTravelFilter',
-  border: true,
-  styleMode: 'default',
-  pageListProps: () => ({
-    productProps: {
-      styleGroup: 1,
-    },
-  }),
-})
+const props = withDefaults(defineProps<LcbListProps>(), defaultLcbListProps as any)
 const info = ref<LcbFilterResult>()
 const filter = ref<Record<string, any>>({})
 const titleObj = ref<Record<string, any>>({})
 /** 是否悬停 */
 const sticky = ref(false)
 const showPlain = computed(() => {
-  console.log(props.styleMode, sticky.value, 'showPlain')
+  // console.log(props.styleMode, sticky.value, 'showPlain')
   return props.styleMode === 'plain' && !sticky.value
 })
 watch(

package/components/lcb-list/types.ts

@@ -1,10 +1,12 @@
 import { PageListProps } from './components/FilterList/type'
+import { LcbProductProps } from '../lcb-product/types'
 
 export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  listType?: LcbProductProps['listType']
 }
 export interface Option {
   label: string
@@ -20,4 +22,18 @@ export interface FilterItemProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
+  test?: 1
+}
+
+export const defaultLcbListProps: LcbListProps = {
+  pageFilterType: 'hotelTravelFilter',
+  border: true,
+  styleMode: 'default',
+  listType: 'grid',
+  // @ts-ignore
+  pageListProps: () => ({
+    productProps: {
+      // listType: 'list',
+    },
+  }),
 }

package/components/lcb-nav/lcb-nav.vue

@@ -47,7 +47,13 @@
           </view>
         </view>
         <template v-else-if="back">
-          <wd-icon class-prefix="lcb" name="zuo_left" @click="toBack" :color="contentColor" />
+          <wd-icon
+            class-prefix="lcb"
+            name="zuo_left"
+            @click="toBack"
+            :color="contentColor"
+            size="44rpx"
+          />
         </template>
         <view class="ml-2" v-if="titleLocation === 'left'">
           <Search

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

@@ -1,15 +1,34 @@
 <template>
   <lcb-block v-bind="$props">
-    <template v-if="styleGroup !== 2">
-      <view v-for="(item, index) in items" :key="index">
-        <!-- <view>{{  JSON.stringify(item) }}</view> -->
-        <lcb-product-item :styleProps="styleProps" :idx="index" v-bind="item" />
+    <view class="flex flex-col gap-2 p-2" v-if="listType === 'list'">
+      <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`">
+        <lcb-product-item v-bind="item" />
       </view>
-    </template>
-    <scroll-view v-if="styleGroup == 2" scroll-x class="w-full whitespace-nowrap">
-      <view class="flex shrink-0">
-        <view v-for="(item, index) in items" :key="index">
-          <lcb-product-item :styleProps="styleProps" :idx="index" v-bind="item" />
+    </view>
+
+    <view class="flex p-1 flex-wrap" v-if="listType === 'grid'">
+      <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`" class="w-1/2">
+        <view class="p-1 overflow-hidden">
+          <view class="rounded overflow-hidden h-560rpx">
+            <lcb-product-item
+              v-bind="item"
+              layoutType="vertical"
+              class="!h-560rpx"
+              imageClass="!h-300rpx"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <scroll-view v-if="listType == 'horizontal'" scroll-x>
+      <view class="p-2 flex gap-2 whitespace-nowrap overflow-auto flex-nowrap">
+        <view
+          v-for="(item, index) in items"
+          :key="`${item?.productId}:${index}`"
+          class="!w-66vw flex-shrink-0"
+        >
+          <lcb-product-item v-bind="item" imageClass="!w-1/2" />
         </view>
       </view>
     </scroll-view>
@@ -18,7 +37,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { LcbProductProps } from './types'
+import { LcbProductProps, defaultLcbProductProps } from './types'
 defineOptions({
   name: 'LcbProduct',
   options: {
@@ -27,21 +46,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-const props = withDefaults(defineProps<LcbProductProps>(), {})
-const styleProps = computed(() => {
-  // console.log('props.items', JSON.stringify(props.items))
-  return {
-    styleGroup: props.styleGroup,
-    productStyle: props.productStyle,
-    productTitle: props.productTitle,
-    showTags: props.showTags,
-    showPrice: props.showPrice,
-    showScribePrice: props.showScribePrice,
-    showCart: props.showCart,
-    showLocation: props.showLocation,
-    showCollection: props.showCollection,
-  }
-})
+const props = withDefaults(defineProps<LcbProductProps>(), defaultLcbProductProps as any)
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-product/types.ts

@@ -1,14 +1,10 @@
 export interface LcbProductProps {
   // Define the component's prop types here
-  styleGroup?: 1 | 2 | 3 | 4 // 1列表 2 左右滑动 3一行两个 4瀑布流
-  items?: Record<string, any>
-  marginHorizontal?: number
-  productStyle?: 'image' | 'flat' | 'card' | 'border' // 图片, 扁平, 卡片, 描边
-  productTitle?: 0 | 1 | 2 // 0默认 1 1行 2 2行
-  showTags?: boolean
-  showPrice?: boolean
-  showScribePrice?: boolean
-  showCart?: boolean
-  showLocation?: boolean
-  showCollection?: boolean
+  listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
+  items?: Record<string, any>[]
+}
+
+export const defaultLcbProductProps: LcbProductProps = {
+  listType: 'list',
+  items: [],
 }

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

@@ -1,50 +1,16 @@
-<template>
-  <view
-    :style="{
-      paddingTop: `${transformValueUnit(15)}`,
-      paddingBottom: `${transformValueUnit(15)}`,
-      paddingLeft: styleProps?.styleGroup != 1 && idx > 0 ? transformValueUnit(15) : 0,
-      width: styleProps?.styleGroup != 1 ? transformValueUnit(picWidth) : 'auto',
-      // paddingHorizontal: styleProps?.styleGroup == 1 ? null : 15,
-    }"
-  >
-    <view :class="`${styleProps?.styleGroup == 1 ? 'flex' : ''}`">
-      <wd-img
-        :src="realImg"
-        :width="transformValueUnit(picWidth)"
-        :height="transformValueUnit(picHeight)"
-      />
-      <view
-        v-if="styleProps?.productStyle != 'image'"
-        :class="`${styleProps?.styleGroup == 1 ? 'flex-1 pl-20rpx' : 'pt-20rpx'} pb-20rpx${styleProps?.productTitle == 1 ? ' ellipsis ' : ''}`"
-      >
-        <view
-          :class="`${styleProps?.productTitle == 1 ? 'ellipsis' : styleProps?.productTitle == 2 ? 'mulEllipsis' : 'wordBreak'} text-32rpx color-#333`"
-        >
-          {{ productName }}
-        </view>
-        <lcb-tags v-if="!!styleProps?.showTags" :mode="2" :tagRadius="3" :items="tags" />
-        <view>{{ subTitle }}</view>
-        <view class="flex items-center mt-15rpx">
-          <view v-if="!!styleProps?.showPrice" class="text-30rpx color-red">¥</view>
-          <view v-if="!!styleProps?.showPrice" class="text-32rpx color-red">{{ price }}</view>
-          <view
-            v-if="!!styleProps?.showScribePrice"
-            class="line-through text-22rpx color-#999 ml-10rpx pt-5rpx"
-          >
-            ¥{{ scribePrice }}
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { transformValueUnit } from '../../utils/transform'
-import { LcbProductItemProps } from './types'
+import { LcbProductItemProps, defaultLcbProductItemProps } from './types'
 import { formatJson } from '../../utils/utils'
+import { createReusableTemplate } from '../../utils/createReuse'
+import { isArray } from '@tplc/wot/components/common/util'
+
+const [DefineMainContent, MainContent] = createReusableTemplate()
+const [DefineSectionWrapper, SectionWrapper] = createReusableTemplate()
+const [DefineSection, Section] = createReusableTemplate()
+const [DefineSectionGroup, SectionGroup] = createReusableTemplate()
+
 defineOptions({
   name: 'LcbProductItem',
   options: {
@@ -54,44 +20,141 @@ defineOptions({
   },
 })
 
-const props = withDefaults(defineProps<LcbProductItemProps>(), {
-  idx: 0,
-  picWidth: 300,
-  picHeight: 200,
-})
-const realImg = computed(() => {
-  console.log('props', props.styleProps)
-  const imgArr = formatJson(props.coverImg, [])
-  return imgArr[1] || imgArr[0]
-})
+const props = withDefaults(defineProps<LcbProductItemProps>(), defaultLcbProductItemProps)
+const attrs = useAttrs()
+
+// console.log('attrs', attrs)
 </script>
 
-<style lang="scss" scoped>
-.ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.noEllip {
-  white-space: normal;
-  text-overflow: clip;
-}
-
-.wordBreak {
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: normal;
-}
-
-.mulEllipsis {
-  /*! autoprefixer: off */
-  white-space: normal;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  -webkit-line-clamp: 2;
-}
-</style>
+<template>
+  <!-- 内容容器定义 -->
+  <DefineSectionWrapper v-slot="{ prop, $slots, class: className }">
+    <view
+      v-if="
+        (props?.[`${prop}Visible`] ?? true) &&
+        !!props?.[`${prop}`] &&
+        (isArray(props?.[`${prop}`]) ? props?.[`${prop}`]?.length > 0 : true)
+      "
+      :class="[className, props?.[`${prop}Class`]]"
+    >
+      <component v-if="!!$slots.default" :is="$slots.default" />
+      <view v-else>{{ props?.[`${prop}`] }}</view>
+    </view>
+  </DefineSectionWrapper>
+
+  <!-- 定义各个内容展示节点 -->
+  <DefineSection v-slot="{ prop, class: className }">
+    <!-- 图片 -->
+    <SectionWrapper v-if="prop === 'image'" prop="image" :class="className">
+      <image :src="image" class="w-full h-full" mode="aspectFill" />
+    </SectionWrapper>
+
+    <!-- 标题 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'title'"
+      prop="title"
+      class="text-ellipsis line-clamp-2"
+    />
+
+    <!-- 位置 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'location'"
+      prop="location"
+      class="text-gray-500 text-22rpx flex gap-3rpx items-center"
+    >
+      <wd-icon name="location" size="32rpx"></wd-icon>
+      <view>{{ location }}</view>
+    </SectionWrapper>
+
+    <!-- 标签 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'tags'"
+      prop="tags"
+      class="flex gap-1 whitespace-nowrap overflow-auto"
+    >
+      <wd-tag
+        v-for="tag in tags"
+        :key="tag"
+        class="!text-20rpx"
+        :class="tagsClass"
+        plain
+        type="primary"
+      >
+        {{ tag }}
+      </wd-tag>
+    </SectionWrapper>
+
+    <!-- 价格单位 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'priceUnit'"
+      prop="priceUnit"
+      class="text-red-500 font-bold text-22rpx"
+    />
+
+    <!-- 价格 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'price'"
+      prop="price"
+      class="text-red-500 font-bold text-27rpx"
+    />
+
+    <!-- 价格后缀 -->
+    <SectionWrapper
+      :class="className"
+      v-if="prop === 'priceSuffix'"
+      prop="priceSuffix"
+      class="text-22rpx"
+    />
+
+    <!-- 价格区域 -->
+  </DefineSection>
+
+  <!-- 内容组定义 -->
+  <DefineSectionGroup v-slot="{ group, class: className }">
+    <view :class="className">
+      <Section v-for="prop in group" :prop="prop" :key="prop" />
+    </view>
+  </DefineSectionGroup>
+
+  <!-- 主内容的展示节点 -->
+  <DefineMainContent v-slot="{ class: className }">
+    <view
+      :class="className"
+      class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden"
+    >
+      <SectionGroup
+        class="flex flex-col gap-2 overflow-hidden"
+        :group="['title', 'location', 'tags']"
+      />
+      <view class="flex gap-2">
+        <SectionGroup
+          class="flex gap-[4rpx] items-end"
+          :group="['priceUnit', 'price', 'priceSuffix']"
+        />
+      </view>
+    </view>
+  </DefineMainContent>
+
+  <!-- 横向布局 -->
+  <view
+    v-if="layoutType === 'horizontal'"
+    :class="attrs?.class"
+    class="flex gap-3 px-2 py-3 bg-white"
+  >
+    <Section prop="image" class="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden" />
+    <MainContent />
+  </view>
+
+  <!-- 竖向布局 -->
+  <view v-if="layoutType === 'vertical'" :class="attrs?.class" class="flex flex-col gap-2 bg-white">
+    <Section prop="image" class="overflow-hidden" />
+    <MainContent class="p-2" />
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

package/components/lcb-product-item/readme.md

@@ -0,0 +1,22 @@
+# 产品展示组件
+
+属性说明
+
+
+layoutType
+image
+title
+subTitle
+price
+priceUnit
+originPrice
+originPriceUnit
+lowestPrice
+lowestPriceUnit
+tags
+location
+distance
+
+尝试使用 grid 进行布局
+
+

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

@@ -1,14 +1,58 @@
 export interface LcbProductItemProps {
   // Define the component's prop types here
-  coverImg?: string
-  picWidth?: number
-  picHeight?: number
-  productName?: string
-  tags?: string | Record<string, any>
-  subTitle?: string
-  price?: string | number
-  priceColor?: string
-  scribePrice?: string | number
-  styleProps?: Record<string, any>
-  idx?: number
+
+  layoutType?: 'vertical' | 'horizontal'
+  image?: any
+  title?: any
+  subTitle?: any
+  price?: any
+  priceUnit?: any
+  priceSuffix?: any
+  originPrice?: any
+  originPriceUnit?: any
+  tags?: any
+  location?: any
+  distance?: any
+
+  imageVisible?: boolean
+  titleVisible?: boolean
+  subTitleVisible?: boolean
+  priceVisible?: boolean
+  priceUnitVisible?: boolean
+  priceSuffixVisible?: boolean
+  originPriceVisible?: boolean
+  originPriceUnitVisible?: boolean
+  tagsVisible?: boolean
+  locationVisible?: boolean
+  distanceVisible?: boolean
+
+  imageClass?: string
+  titleClass?: string
+  subTitleClass?: string
+  priceClass?: string
+  priceUnitClass?: string
+  priceSuffixClass?: string
+  originPriceClass?: string
+  originPriceUnitClass?: string
+  tagsClass?: string
+  tagsWrapperClass?: string
+  locationClass?: string
+  distanceClass?: string
+}
+
+export const defaultLcbProductItemProps: LcbProductItemProps = {
+  layoutType: 'horizontal',
+  priceUnit: '¥',
+  originPriceUnit: '¥',
+  imageVisible: true,
+  titleVisible: true,
+  subTitleVisible: true,
+  priceVisible: true,
+  priceUnitVisible: true,
+  priceSuffixVisible: true,
+  originPriceVisible: true,
+  originPriceUnitVisible: true,
+  tagsVisible: true,
+  locationVisible: true,
+  distanceVisible: true,
 }

package/package.json

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

package/types/components/lcb-area-picker/api/index.d.ts

@@ -35,4 +35,14 @@ export declare const getProvinceCityArea: () => Promise<
     }[]
   }[]
 >
+export declare const getProvinceCity: () => Promise<
+  {
+    label: string
+    value: string
+    children: {
+      label: string
+      value: string
+    }[]
+  }[]
+>
 export {}

package/types/components/lcb-area-picker/lcb-area-picker.vue.d.ts

@@ -8,7 +8,12 @@ declare function __VLS_template(): {
   default?(_: { text: string[] | undefined }): any
 }
 declare const __VLS_component: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {}>,
+  __VLS_WithDefaults<
+    __VLS_TypePropsToOption<__VLS_PublicProps>,
+    {
+      mode: string
+    }
+  >,
   {},
   unknown,
   {},
@@ -23,13 +28,20 @@ declare const __VLS_component: import('vue').DefineComponent<
   import('vue').PublicProps,
   Readonly<
     import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {}>
+      __VLS_WithDefaults<
+        __VLS_TypePropsToOption<__VLS_PublicProps>,
+        {
+          mode: string
+        }
+      >
     >
   > & {
     onConfirm?: ((payload: AreaOptions[]) => any) | undefined
     'onUpdate:modelValue'?: ((modelValue: string[]) => any) | undefined
   },
-  {},
+  {
+    mode: 'city' | 'area'
+  },
   {}
 >
 declare const _default: __VLS_WithTemplateSlots<

package/types/components/lcb-area-picker/types.d.ts

@@ -1 +1,3 @@
-export interface LcbAreaPickerProps {}
+export interface LcbAreaPickerProps {
+  mode: 'city' | 'area'
+}

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

@@ -2,8 +2,10 @@ import { LcbListInfo } from '../../api'
 import { LcbProductProps } from '../../../lcb-product/types'
 export interface PageListProps {
   emptyImage?: string
+  listType?: LcbProductProps['listType']
   productProps?: LcbProductProps
 }
 export interface LcbFilterListProps extends PageListProps, LcbListInfo {
   filter?: Record<string, any>
+  test?: any
 }

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

@@ -1,19 +1,7 @@
 import { LcbListProps } from './types'
 import './index.scss'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<
-    __VLS_TypePropsToOption<LcbListProps>,
-    {
-      pageFilterType: string
-      border: boolean
-      styleMode: string
-      pageListProps: () => {
-        productProps: {
-          styleGroup: number
-        }
-      }
-    }
-  >,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbListProps>, any>,
   {},
   unknown,
   {},
@@ -24,27 +12,14 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<
-        __VLS_TypePropsToOption<LcbListProps>,
-        {
-          pageFilterType: string
-          border: boolean
-          styleMode: string
-          pageListProps: () => {
-            productProps: {
-              styleGroup: number
-            }
-          }
-        }
-      >
-    >
+    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbListProps>, any>>
   >,
   {
-    border: boolean
+    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

@@ -1,9 +1,11 @@
 import { PageListProps } from './components/FilterList/type'
+import { LcbProductProps } from '../lcb-product/types'
 export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
   styleMode?: 'default' | 'plain'
+  listType?: LcbProductProps['listType']
 }
 export interface Option {
   label: string
@@ -18,4 +20,6 @@ export interface FilterItemProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
+  test?: 1
 }
+export declare const defaultLcbListProps: LcbListProps

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

@@ -1,6 +1,6 @@
 import { LcbProductProps } from './types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, {}>,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, any>,
   {},
   unknown,
   {},
@@ -11,9 +11,14 @@ declare const _default: import('vue').DefineComponent<
   string,
   import('vue').PublicProps,
   Readonly<
-    import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, {}>>
+    import('vue').ExtractPropTypes<
+      __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductProps>, any>
+    >
   >,
-  {},
+  {
+    items: Record<string, any>[]
+    listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  },
   {}
 >
 export default _default

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

@@ -1,13 +1,5 @@
 export interface LcbProductProps {
-  styleGroup?: 1 | 2 | 3 | 4
-  items?: Record<string, any>
-  marginHorizontal?: number
-  productStyle?: 'image' | 'flat' | 'card' | 'border'
-  productTitle?: 0 | 1 | 2
-  showTags?: boolean
-  showPrice?: boolean
-  showScribePrice?: boolean
-  showCart?: boolean
-  showLocation?: boolean
-  showCollection?: boolean
+  listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  items?: Record<string, any>[]
 }
+export declare const defaultLcbProductProps: LcbProductProps

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

@@ -1,13 +1,6 @@
 import { LcbProductItemProps } from './types'
 declare const _default: import('vue').DefineComponent<
-  __VLS_WithDefaults<
-    __VLS_TypePropsToOption<LcbProductItemProps>,
-    {
-      idx: number
-      picWidth: number
-      picHeight: number
-    }
-  >,
+  __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>,
   {},
   unknown,
   {},
@@ -19,20 +12,45 @@ declare const _default: import('vue').DefineComponent<
   import('vue').PublicProps,
   Readonly<
     import('vue').ExtractPropTypes<
-      __VLS_WithDefaults<
-        __VLS_TypePropsToOption<LcbProductItemProps>,
-        {
-          idx: number
-          picWidth: number
-          picHeight: number
-        }
-      >
+      __VLS_WithDefaults<__VLS_TypePropsToOption<LcbProductItemProps>, LcbProductItemProps>
     >
   >,
   {
-    idx: number
-    picWidth: number
-    picHeight: number
+    title: any
+    image: any
+    location: any
+    layoutType: 'vertical' | 'horizontal'
+    imageClass: string
+    subTitle: any
+    price: any
+    priceUnit: any
+    priceSuffix: any
+    originPrice: any
+    originPriceUnit: any
+    tags: any
+    distance: any
+    imageVisible: boolean
+    titleVisible: boolean
+    subTitleVisible: boolean
+    priceVisible: boolean
+    priceUnitVisible: boolean
+    priceSuffixVisible: boolean
+    originPriceVisible: boolean
+    originPriceUnitVisible: boolean
+    tagsVisible: boolean
+    locationVisible: boolean
+    distanceVisible: boolean
+    titleClass: string
+    subTitleClass: string
+    priceClass: string
+    priceUnitClass: string
+    priceSuffixClass: string
+    originPriceClass: string
+    originPriceUnitClass: string
+    tagsClass: string
+    tagsWrapperClass: string
+    locationClass: string
+    distanceClass: string
   },
   {}
 >

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

@@ -1,13 +1,38 @@
 export interface LcbProductItemProps {
-  coverImg?: string
-  picWidth?: number
-  picHeight?: number
-  productName?: string
-  tags?: string | Record<string, any>
-  subTitle?: string
-  price?: string | number
-  priceColor?: string
-  scribePrice?: string | number
-  styleProps?: Record<string, any>
-  idx?: number
+  layoutType?: 'vertical' | 'horizontal'
+  image?: any
+  title?: any
+  subTitle?: any
+  price?: any
+  priceUnit?: any
+  priceSuffix?: any
+  originPrice?: any
+  originPriceUnit?: any
+  tags?: any
+  location?: any
+  distance?: any
+  imageVisible?: boolean
+  titleVisible?: boolean
+  subTitleVisible?: boolean
+  priceVisible?: boolean
+  priceUnitVisible?: boolean
+  priceSuffixVisible?: boolean
+  originPriceVisible?: boolean
+  originPriceUnitVisible?: boolean
+  tagsVisible?: boolean
+  locationVisible?: boolean
+  distanceVisible?: boolean
+  imageClass?: string
+  titleClass?: string
+  subTitleClass?: string
+  priceClass?: string
+  priceUnitClass?: string
+  priceSuffixClass?: string
+  originPriceClass?: string
+  originPriceUnitClass?: string
+  tagsClass?: string
+  tagsWrapperClass?: string
+  locationClass?: string
+  distanceClass?: string
 }
+export declare const defaultLcbProductItemProps: LcbProductItemProps

package/types/utils/createReuse.d.ts

@@ -0,0 +1,59 @@
+import type { DefineComponent, Slot } from 'vue'
+type ObjectLiteralWithPotentialObjectLiterals = Record<string, Record<string, any> | undefined>
+type GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals> = {
+  [K in keyof T]: Slot<T[K]>
+}
+export type DefineTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+  new (): {
+    $slots: {
+      default: (
+        _: Bindings & {
+          $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+        },
+      ) => any
+    }
+  }
+}
+export type ReuseTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent<Bindings> & {
+  new (): {
+    $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+  }
+}
+export type ReusableTemplatePair<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+] & {
+  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+}
+export interface CreateReusableTemplateOptions {
+  /**
+   * Inherit attrs from reuse component.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean
+}
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ */
+export declare function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals = Record<
+    'default',
+    undefined
+  >,
+>(options?: CreateReusableTemplateOptions): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>
+export {}

package/utils/createReuse.tsx

@@ -0,0 +1,121 @@
+import type { DefineComponent, Slot } from 'vue'
+import { defineComponent, shallowRef } from 'vue'
+
+type ObjectLiteralWithPotentialObjectLiterals = Record<string, Record<string, any> | undefined>
+
+type GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals> = {
+  [K in keyof T]: Slot<T[K]>
+}
+
+export type DefineTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+  new (): {
+    $slots: {
+      default: (_: Bindings & { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }) => any
+    }
+  }
+}
+
+export type ReuseTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent<Bindings> & {
+  new (): { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }
+}
+
+export type ReusableTemplatePair<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+] & {
+  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+}
+
+export interface CreateReusableTemplateOptions {
+  /**
+   * Inherit attrs from reuse component.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean
+}
+
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ */
+export function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals = Record<
+    'default',
+    undefined
+  >,
+>(
+  options: CreateReusableTemplateOptions = {},
+): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps> {
+  const { inheritAttrs = true } = options
+
+  const render = shallowRef<Slot | undefined>()
+
+  const define = defineComponent({
+    setup(_, { slots }) {
+      return () => {
+        render.value = slots.default
+      }
+    },
+  }) as unknown as DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+
+  const reuse = defineComponent({
+    inheritAttrs,
+    setup(_, { attrs, slots }) {
+      return () => {
+        if (!render.value && process.env.NODE_ENV !== 'production')
+          throw new Error('[VueUse] Failed to find the definition of reusable template')
+        const vnode = render.value?.({ ...keysToCamelKebabCase(attrs), $slots: slots })
+
+        return inheritAttrs && vnode?.length === 1 ? vnode[0] : vnode
+      }
+    },
+  }) as unknown as ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+
+  return makeDestructurable({ define, reuse }, [define, reuse]) as any
+}
+
+function keysToCamelKebabCase(obj: Record<string, any>) {
+  const newObj: typeof obj = {}
+  for (const key in obj) newObj[camelize(key)] = obj[key]
+  return newObj
+}
+/**
+ * @see What the hack? https://antfu.me/posts/destructuring-with-object-or-array
+ */
+function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(
+  obj: T,
+  arr: A,
+): T & A {
+  const clone = { ...obj }
+  Object.defineProperty(clone, Symbol.iterator, {
+    enumerable: false,
+    value() {
+      let index = 0
+      return {
+        next: () => ({
+          value: arr[index++],
+          done: index > arr.length,
+        }),
+      }
+    },
+  })
+  return clone as T & A
+}
+
+function camelize(str: string) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}