@tplc/business 0.1.13 → 0.1.15

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

@@ -15,6 +15,7 @@
     <view
       :style="{
         gridTemplateColumns: `repeat(${pictureDistribution}, minmax(0, 1fr))`,
+        gap: transformValueUnit(itemGap),
       }"
       :class="[
         {
@@ -28,42 +29,65 @@
         v-for="item in items"
         :key="item.title"
         v-bind="item.link"
-        custom-class="!flex flex-col justify-center items-center item"
+        @click="onItemClick(item)"
       >
         <view
-          class="overflow-hidden"
+          class="!flex justify-center items-center item"
           :style="{
-            marginBottom: iconTextMargin + 'rpx',
+            backgroundColor: itemBgColor,
+            borderRadius: transformValueUnit(itemRadius),
+            padding: `${transformValueUnit(itemVerticalPadding)} ${transformValueUnit(itemHorizontalPadding)}`,
+            flexDirection: itemFlexMode,
+            gap: transformValueUnit(iconTextMargin),
+            boxShadow:
+              itemShadowColor && itemShadowSize
+                ? `0px 0px ${itemBlurSize}px ${itemShadowSize}px ${itemShadowColor}`
+                : '',
+            marginRight: styleGroup === 1 ? transformValueUnit(itemGap) : 0,
           }"
         >
-          <wd-icon
-            v-if="iconType === 0"
-            class-prefix="lcb"
-            :name="item.icon!"
-            :size="iconSize + 'rpx'"
-            :color="iconColor"
-          />
-          <img
-            v-else
-            class="block"
+          <view class="overflow-hidden">
+            <wd-icon
+              v-if="iconType === 0"
+              class-prefix="lcb"
+              :name="item.icon!"
+              :size="iconSize + 'rpx'"
+              :color="iconColor"
+            />
+            <img
+              v-else
+              class="block"
+              :style="{
+                borderRadius: iconRadius + 'rpx',
+                height: iconSize + 'rpx',
+                width: iconSize + 'rpx',
+              }"
+              :src="item[urlKey]"
+            />
+          </view>
+          <view
+            class="title"
             :style="{
-              borderRadius: iconRadius + 'rpx',
-              height: iconSize + 'rpx',
-              width: iconSize + 'rpx',
+              fontSize: transformValueUnit(textSize),
             }"
-            :src="item.url"
-          />
+          >
+            {{ item[titleKey] }}
+          </view>
+          <wd-icon v-if="styleGroup === 3" name="chevron-right" size="22"></wd-icon>
         </view>
-        <view class="title">{{ item.title }}</view>
-        <wd-icon v-if="styleGroup === 3" name="chevron-right" size="22"></wd-icon>
       </lcb-action-view>
     </view>
   </lcb-block>
 </template>
 
 <script lang="ts" setup>
+import { ActionView } from '../../action'
+import { transformValueUnit } from '../../utils/transform'
 import { LcbImgNavProps } from './types'
-
+const emits = defineEmits(['click'])
+const onItemClick = (item: ActionView) => {
+  emits('click', item)
+}
 defineOptions({
   name: 'LcbImgNav',
   options: {
@@ -82,20 +106,19 @@ withDefaults(defineProps<LcbImgNavProps>(), {
   paddingHorizontal: 0,
   iconTextMargin: 4,
   pictureDistribution: 4,
+  textSize: 28,
+  urlKey: 'url',
+  titleKey: 'title',
+  itemFlexMode: 'column',
+  itemGap: 24,
 })
 </script>
 
 <style lang="scss" scoped>
 .single {
-  display: flex;
-  gap: 24rpx;
-  width: 100%;
   overflow-x: auto;
   white-space: nowrap;
-
-  > view {
-    display: inline-flex;
-  }
+  width: 100%;
 }
 
 .mutil {
@@ -116,9 +139,7 @@ withDefaults(defineProps<LcbImgNavProps>(), {
   }
 }
 .title {
-  width: 68px;
   overflow: hidden;
-  font-size: 28rpx;
   line-height: 1;
   text-align: center;
   letter-spacing: 0;

package/components/lcb-img-nav/types.ts

@@ -30,4 +30,20 @@ export interface LcbImgNavProps extends LcbBlockProps {
   fontSize?: number
   color?: string
   titlePadding?: number
+  textSize?: number
+  urlKey?: string
+  titleKey?: string
+
+  itemBgColor?: string
+  itemRadius?: number
+  itemVerticalPadding?: number
+  itemHorizontalPadding?: number
+  itemGap?: number
+  itemFlexMode?: 'row' | 'column'
+  /** 阴影颜色 */
+  itemShadowColor?: string
+  /** 阴影大小 */
+  itemShadowSize?: number
+  /** 模糊大小 */
+  itemBlurSize?: number
 }

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

@@ -1,23 +1,25 @@
 <template>
+  <view id="pagingTop"></view>
   <z-paging
     ref="paging"
     :empty-view-z-index="0"
     :auto="true"
     v-model="dataList"
     @query="queryList"
-    use-page-scroll
+    :fixed="false"
+    :use-page-scroll="!autoHeight"
+    :height="autoHeight ? height : ''"
   >
-    <slot :items="normalizeDataList"></slot>
+    <slot />
   </z-paging>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, useAttrs } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, watchEffect } from 'vue'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging'
 import { LcbFilterListProps } from './type'
 import { formatJson } from '../../../../utils/utils'
-import mockData from './mockData'
-const attrs = useAttrs()
+import { getRect, isH5 } from '@tplc/wot/components/common/util'
 
 defineOptions({
   name: 'FilterList',
@@ -30,28 +32,27 @@ defineOptions({
 const props = defineProps<LcbFilterListProps>()
 const dataList = ref<unknown[]>([])
 const paging = ref()
+const viewPageHeight = uni.getSystemInfoSync().windowHeight
+const height = ref('')
 useZPaging(paging)
-
-const normalizeDataList = computed(() => {
+const modelValue = defineModel<unknown[]>({
+  default: [],
+})
+watchEffect(() => {
   const list = dataList.value?.map?.((item: any) => {
     const imgArr = formatJson(item.coverImg, [])
     const tags = formatJson(item.tags, [])
     return {
       image: imgArr?.[1] || imgArr?.[0],
       title: item?.productName,
-      // subTitle: item?.poiName,
       location: item?.address,
       price: item?.price,
       priceSuffix: item?.behindUnit,
-      // originPrice: item?.price,
-      // originPriceSuffix: item?.behindUnit,
       ...item,
       tags,
     }
   })
-  // console.log('list', list)
-
-  return list
+  modelValue.value = list
 })
 
 watch(
@@ -80,7 +81,6 @@ watch(
 )
 const queryList = async (page: number, limit: number) => {
   try {
-    // const { data } = mockData
     const { data } = await uni.$lcb.http.post(props.url, {
       ...props.baseParam,
       ...props.filter,
@@ -94,13 +94,17 @@ const queryList = async (page: number, limit: number) => {
     paging.value.complete(false)
   }
 }
-
-// watch(
-//   () => dataList.value,
-//   () => {
-//     console.log('dataList', dataList.value)
-//   },
-// )
+const { proxy } = getCurrentInstance() as any
+const isTabBar = uni.$lcb.getIsTabbar()
+onMounted(() => {
+  getRect(`#pagingTop`, false, proxy).then((res) => {
+    if (!isTabBar || isH5) {
+      height.value = `${viewPageHeight - (res.top || 0)}px`
+    } else {
+      height.value = `calc(${viewPageHeight - (res.top || 0)}px - var(--window-bottom) - env(safe-area-inset-bottom))`
+    }
+  })
+})
 </script>
 <style lang="scss" scoped>
 .action-view {
@@ -111,6 +115,7 @@ const queryList = async (page: number, limit: number) => {
   gap: 50rpx;
   padding: 20rpx 52rpx;
   box-sizing: border-box;
+
   :deep(.wd-button) {
     height: 100%;
     line-height: 100%;

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

@@ -7,5 +7,5 @@ export interface PageListProps {
 }
 export interface LcbFilterListProps extends PageListProps, LcbListInfo {
   filter?: Record<string, any>
-  test?: any
+  autoHeight?: boolean
 }

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

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :class="{
+      'lcb-filter__border-top': showPlain ? false : border,
+      'lcb-filter__plain': showPlain,
+      'lcb-filter__view': !showPlain,
+    }"
+    class="w-100vw"
+  >
+    <FilterTabs
+      v-model="filter[info?.filterTabs?.valueName]"
+      v-bind="info?.filterTabs?.componentProps"
+      v-if="info?.filterTabs"
+    />
+    <wd-drop-menu>
+      <wd-drop-menu-item
+        v-for="(item, index) in info?.filterComponent"
+        :key="item.valueName"
+        :title="titleObj[item.valueName] || item.filterName"
+        icon="caret-down-small"
+        icon-size="26rpx"
+        :selected="getSelect(item)"
+        ref="dropMenu"
+        @opened="handleOpened"
+      >
+        <view class="lcb-filter__popup">
+          <FilterSelect
+            v-if="item.component === 'select'"
+            v-bind="item.componentProps"
+            v-model="filter[item.valueName]"
+            v-model:title="titleObj[item.valueName]"
+            @submit="onSubmit(index)"
+          />
+          <TreeSelect
+            v-else-if="item.component === 'treeSelect'"
+            v-bind="item.componentProps"
+            v-model="filter[item.valueName]"
+            v-model:title="titleObj[item.valueName]"
+            @submit="onSubmit(index)"
+          />
+          <ComponentGroup
+            v-else-if="item.component === 'componentGroup'"
+            v-bind="item.componentProps"
+            :filter="filter"
+            @submit="onSubmit(index, $event)"
+          />
+        </view>
+      </wd-drop-menu-item>
+    </wd-drop-menu>
+    <view
+      v-if="info?.filterTags || info.btnComponent"
+      class="px-3 pb-2 box-border flex items-center"
+      :class="{
+        'mt-2': showPlain,
+      }"
+    >
+      <view class="flex gap-3.5 flex-1">
+        <TagSelect
+          v-if="info.filterTags"
+          size="small"
+          v-bind="info.filterTags.componentProps"
+          v-model="filter[info.filterTags.valueName]"
+        />
+      </view>
+      <wd-button v-if="info?.btnComponent" custom-class="!h-60rpx opacity-primary">
+        {{ info?.btnComponent?.postRequest }}
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { FilterComponent } from '../../../lcb-list/api'
+import ComponentGroup from '../ComponentGroup/index.vue'
+import FilterSelect from '../FilterSelect/index.vue'
+import FilterTabs from '../FilterTabs/index.vue'
+import TagSelect from '../TagSelect/index.vue'
+import TreeSelect from '../TreeSelect/index.vue'
+import { FilterViewProps } from './type'
+
+defineOptions({
+  name: 'FilterView',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const dropMenu = ref()
+const props = defineProps<FilterViewProps>()
+
+const filter = defineModel<Record<string, any>>({
+  default: {},
+})
+const showPlain = computed(() => {
+  return props.styleMode === 'plain' && !props.sticky
+})
+
+const onSubmit = (index: number, filterObj?: Record<string, any>) => {
+  dropMenu.value?.[index]?.close()
+  if (filterObj) {
+    filter.value = {
+      ...filter.value,
+      ...filterObj,
+    }
+  }
+}
+const getSelect = (item: FilterComponent) => {
+  if (item.component === 'componentGroup') {
+    return item.componentProps.componentList?.some((v) => filter.value[v.valueName])
+  } else {
+    return Boolean(filter.value[item.valueName])
+  }
+}
+
+const handleOpened = () => {
+  uni.$emit('drop-opened')
+}
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,8 @@
+import { LcbFilterResult } from '../../../lcb-list/api'
+import { LcbListProps } from '../../types'
+
+export interface FilterViewProps extends LcbListProps {
+  info: LcbFilterResult
+  titleObj: Record<string, any>
+  sticky: boolean
+}

package/components/lcb-list/hooks/useSelect.ts

@@ -16,6 +16,8 @@ const useSelect = (
       } else {
         model.value = [...(model.value || []), item.value as string]
       }
+    } else if (model.value === item.value) {
+      model.value = undefined
     } else {
       model.value = item.value
     }

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

@@ -1,108 +1,54 @@
 <template>
-  <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,
-          'lcb-filter__plain': showPlain,
-          'lcb-filter__view': !showPlain,
-        }"
-        class="w-100vw"
-      >
-        <FilterTabs
-          v-model="filter[info?.filterTabs?.valueName]"
-          v-bind="info?.filterTabs?.componentProps"
-          v-if="info?.filterTabs"
-        />
-        <wd-drop-menu>
-          <wd-drop-menu-item
-            v-for="(item, index) in info?.filterComponent"
-            :key="item.valueName"
-            :title="titleObj[item.valueName] || item.filterName"
-            icon="caret-down-small"
-            icon-size="26px"
-            :selected="getSelect(item)"
-            ref="dropMenu"
-            @opened="handleOpened"
-          >
-            <view class="lcb-filter__popup">
-              <FilterSelect
-                v-if="item.component === 'select'"
-                v-bind="item.componentProps"
-                v-model="filter[item.valueName]"
-                v-model:title="titleObj[item.valueName]"
-                @submit="onSubmit(index)"
-              />
-              <TreeSelect
-                v-else-if="item.component === 'treeSelect'"
-                v-bind="item.componentProps"
-                v-model="filter[item.valueName]"
-                v-model:title="titleObj[item.valueName]"
-                @submit="onSubmit(index)"
-              />
-              <ComponentGroup
-                v-else-if="item.component === 'componentGroup'"
-                v-bind="item.componentProps"
-                :filter="filter"
-                @submit="onSubmit(index, $event)"
-              />
-            </view>
-          </wd-drop-menu-item>
-        </wd-drop-menu>
-        <view
-          v-if="info?.filterTags || info.btnComponent"
-          class="bg-white px-3 pb-2 box-border flex items-center"
-        >
-          <view class="flex gap-3.5 flex-1">
-            <TagSelect
-              v-if="info.filterTags"
-              size="small"
-              v-bind="info.filterTags.componentProps"
-              v-model="filter[info.filterTags.valueName]"
-            />
-          </view>
-          <wd-button v-if="info.btnComponent" custom-class="!h-60rpx opacity-primary">
-            {{ info.btnComponent?.postRequest }}
-          </wd-button>
-        </view>
-      </view>
+  <template v-if="info">
+    <wd-sticky @sticky="sticky = $event" :offset-top="0.0001" v-if="isSticky">
+      <FilterView
+        v-bind="$props"
+        :info="info"
+        v-model="filter"
+        :titleObj="titleObj"
+        :sticky="sticky"
+      />
     </wd-sticky>
+    <FilterView
+      v-else
+      v-bind="$props"
+      :info="info"
+      v-model="filter"
+      :titleObj="titleObj"
+      :sticky="sticky"
+    />
 
-    <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" v-if="$slots.item">
-            <template #item="{ item }">
-              <slot name="item" :item="item"></slot>
-            </template>
-          </lcb-product>
-          <lcb-product
-            v-bind="{ ...attrs }"
-            :listType="listType"
-            :items="items"
-            v-else
-          ></lcb-product>
-        </slot>
+    <FilterList
+      v-bind="{ ...info.listInfo, listType, filter, ...attrs }"
+      :autoHeight="!isSticky"
+      v-model="items"
+    >
+      <slot name="list" :items="items" v-if="$slots.list" />
+      <template v-else>
+        <lcb-product v-bind="{ ...attrs }" :listType="listType" :items="items" v-if="$slots.item">
+          <template #item="{ item }">
+            <slot name="item" :item="item"></slot>
+          </template>
+        </lcb-product>
+        <lcb-product v-bind="{ ...attrs }" :listType="listType" :items="items" v-else></lcb-product>
       </template>
     </FilterList>
-  </view>
+  </template>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, Ref, ref, watch, useAttrs } from 'vue'
-import { LcbListProps } from './types'
-import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
-import FilterSelect from './components/FilterSelect/index.vue'
-import TreeSelect from './components/TreeSelect/index.vue'
-import ComponentGroup from './components/ComponentGroup/index.vue'
-import TagSelect from './components/TagSelect/index.vue'
+import { inject, Ref, ref, useAttrs, watch } from 'vue'
+import { getFilterDetail, LcbFilterResult } from './api'
 import FilterList from './components/FilterList/index.vue'
-import FilterTabs from './components/FilterTabs/index.vue'
+import FilterView from './components/FilterView/index.vue'
+import { LcbListProps } from './types'
 
-import './index.scss'
 import { FORM_KEY } from '../../constants'
+import './index.scss'
 const attrs = useAttrs()
-
+/** 是否悬停 */
+const sticky = ref(false)
+const items = ref([])
 defineOptions({
   name: 'LcbList',
   options: {
@@ -111,13 +57,15 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const titleObj = ref<Record<string, any>>({})
 const form = inject<Ref<Record<string, any>>>(FORM_KEY)
-const dropMenu = ref()
+const filter = ref<Record<string, any>>({})
 const props = withDefaults(defineProps<LcbListProps>(), {
   pageFilterType: 'hotelTravelFilter',
   border: true,
   styleMode: 'default',
   listType: 'list',
+  isSticky: true,
   // @ts-ignore
   pageListProps: () => ({
     productProps: {
@@ -126,14 +74,21 @@ const props = withDefaults(defineProps<LcbListProps>(), {
   }),
 } as LcbListProps 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')
-  return props.styleMode === 'plain' && !sticky.value
-})
+watch(
+  () => filter.value,
+  async (val) => {
+    if (form && Object.keys(val).length) {
+      form.value = {
+        ...form.value,
+        ...val,
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 watch(
   () => props.pageFilterType,
   async (val) => {
@@ -163,42 +118,6 @@ watch(
     immediate: true,
   },
 )
-const onSubmit = (index: number, filterObj?: Record<string, any>) => {
-  dropMenu.value?.[index]?.close()
-  if (filterObj) {
-    filter.value = {
-      ...filter.value,
-      ...filterObj,
-    }
-  }
-}
-const getSelect = (item: FilterComponent) => {
-  if (item.component === 'componentGroup') {
-    return item.componentProps.componentList?.some((v) => filter.value[v.valueName])
-  } else {
-    return Boolean(filter.value[item.valueName])
-  }
-}
-const handleOpened = () => {
-  uni.$emit('drop-opened')
-}
-
-watch(
-  () => filter.value,
-  async (val) => {
-    if (form && Object.keys(val).length) {
-      form.value = {
-        ...form.value,
-        ...val,
-      }
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-)
-
 defineSlots<{
   list(props: { items: any }): any
   item(props: { item: any }): any

package/components/lcb-list/types.ts

@@ -7,6 +7,7 @@ export interface LcbListProps {
   border?: boolean
   styleMode?: 'default' | 'plain'
   listType?: LcbProductProps['listType']
+  isSticky?: boolean
 }
 export interface Option {
   label: string