@tplc/business 0.0.27 → 0.0.29

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

@@ -0,0 +1,85 @@
+<template>
+  <z-paging
+    ref="paging"
+    :empty-view-z-index="0"
+    :auto="true"
+    v-model="dataList"
+    @query="queryList"
+    use-page-scroll
+  >
+    <lcb-product v-bind="{ ...productProps }" :items="dataList" />
+  </z-paging>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging'
+import { LcbFilterListProps } from './type'
+
+defineOptions({
+  name: 'FilterList',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<LcbFilterListProps>()
+const dataList = ref<unknown[]>([])
+const paging = ref()
+useZPaging(paging)
+watch(
+  () => props.url,
+  async (val) => {
+    if (val) {
+      paging.value?.reload()
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+watch(
+  () => props.filter,
+  async (val) => {
+    if (val) {
+      paging.value?.reload()
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+const queryList = async (pageNo: number, pageSize: number) => {
+  try {
+    const { data } = await uni.$lcb.http.post(props.url, {
+      ...props.baseParam,
+      ...props.filter,
+      pageNo,
+      pageSize,
+    })
+    paging.value.complete(data)
+  } catch (error) {
+    paging.value.complete(false)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.action-view {
+  width: 100%;
+  height: 118rpx;
+  background: #ffffff;
+  box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
+  gap: 50rpx;
+  padding: 20rpx 52rpx;
+  box-sizing: border-box;
+  :deep(.wd-button) {
+    height: 100%;
+    line-height: 100%;
+    font-size: 30rpx;
+    border-radius: 40rpx;
+  }
+}
+</style>

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

@@ -0,0 +1,9 @@
+import { LcbListInfo } from '../../api'
+import { LcbProductProps } from '../../../lcb-product/types'
+export interface PageListProps {
+  emptyImage?: string
+  productProps?: LcbProductProps
+}
+export interface LcbFilterListProps extends PageListProps, LcbListInfo {
+  filter?: Record<string, any>
+}

package/components/{lcb-filter → lcb-list}/components/FilterSlider/index.vue

@@ -13,7 +13,7 @@
       custom-min-class="left-0  slider-text"
       custom-max-class="right--2 slider-text"
     />
-    <view class="grid grid-cols-4 gap-4 mt-2">
+    <view class="grid grid-cols-4 gap-4 mt-2" v-if="options.length">
       <SelectTagView
         v-for="item in options"
         :key="item.label"
@@ -51,6 +51,7 @@ const onItemClick = (value) => {
       innerValue.value = [value[0], value[0]]
     }
   }
+  model.value = innerValue.value
 }
 
 const onDropOpened = () => {

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

@@ -0,0 +1,3 @@
+import { FilterTagsProps } from '../../api'
+
+export interface FilterSliderProps extends FilterTagsProps {}

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

@@ -0,0 +1,27 @@
+<template>
+  <wd-tabs
+    :mode="mode"
+    custom-class="!bg-transparent"
+    v-model="modelValue"
+    :slidable-num="slidableNum"
+  >
+    <block v-for="item in options" :key="item.value">
+      <wd-tab :title="item.label" :name="`${item.value}`" />
+    </block>
+  </wd-tabs>
+</template>
+
+<script setup lang="ts">
+import { FilterTabsProps } from './type'
+defineOptions({
+  name: 'FilterTabs',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+defineProps<FilterTabsProps>()
+const modelValue = defineModel<string>()
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,6 @@
+import { FilterItemProps } from '../../types'
+
+export interface FilterTabsProps extends Omit<FilterItemProps, 'mode'> {
+  mode?: 'semicircle'
+  slidableNum?: number
+}

package/components/{lcb-filter → lcb-list}/index.scss

@@ -9,6 +9,29 @@
     color: $-color-theme !important;
   }
 
+  &__border-top {
+    border-top: 1px solid #F3F5F9;
+  }
+
+  &__plain {
+    :deep(.wd-drop-menu__list) {
+      background-color: transparent;
+      margin-top: 20rpx;
+      gap: 20rpx;
+      padding: 0 24rpx;
+
+      .wd-drop-menu__item {
+        height: 48rpx;
+        line-height: 48rpx;
+        background: #fff;
+        border-radius: 8rpx;
+      }
+    }
+
+    :deep(.wd-tabs__nav) {
+      background-color: transparent;
+    }
+  }
 
 }
 

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

@@ -0,0 +1,179 @@
+<template>
+  <view v-if="info">
+    <wd-sticky @sticky="sticky = $event">
+      <view
+        :class="{
+          'lcb-filter__border-top': styleMode === 'plain' && !sticky ? false : border,
+          'lcb-filter__plain': styleMode === 'plain' && !sticky,
+        }"
+        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>
+    </wd-sticky>
+
+    <FilterList v-bind="{ ...info.listInfo, ...pageListProps, filter }" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref, ref, watch } 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 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: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+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 info = ref<LcbFilterResult>()
+const filter = ref<Record<string, any>>({})
+const titleObj = ref<Record<string, any>>({})
+/** 是否悬停 */
+const sticky = ref(false)
+watch(
+  () => props.pageFilterType,
+  async (val) => {
+    if (val) {
+      const { data } = await getFilterDetail(val)
+      data.filterComponent.forEach((item) => {
+        filter.value[item.valueName] = item.defaultValue
+        titleObj.value[item.valueName] = item.filterName
+        if (item.componentProps?.componentList) {
+          item.componentProps.componentList.forEach((data) => {
+            filter.value[data.valueName] = data.defaultValue
+          })
+        }
+      })
+      if (data.filterTags) {
+        filter.value[data.filterTags.valueName] = data.filterTags.defaultValue
+        titleObj.value[data.filterTags.valueName] = data.filterTags.defaultName
+      }
+      if (data.filterTabs) {
+        filter.value[data.filterTabs.valueName] =
+          data.filterTabs.defaultValue || data.filterTabs.componentProps.options?.[0]?.value
+      }
+      info.value = data
+    }
+  },
+  {
+    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,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/{lcb-filter → lcb-list}/types.ts

@@ -1,5 +1,10 @@
-export interface LcbFilterProps {
+import { PageListProps } from './components/FilterList/type'
+
+export interface LcbListProps {
   pageFilterType?: string
+  pageListProps?: PageListProps
+  border?: boolean
+  styleMode?: 'default' | 'plain'
 }
 export interface Option {
   label: string

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

@@ -42,7 +42,7 @@
             :class="[capsuleList.length === 1 ? 'px-2' : 'px-2.5']"
           >
             <wd-icon
-              class-prefix="iconfont"
+              class-prefix="lcb"
               :name="iconMap[item.action]"
               size="36rpx"
               :color="contentColor"
@@ -50,12 +50,7 @@
           </view>
         </view>
         <template v-else-if="back">
-          <wd-icon
-            class-prefix="iconfont"
-            name="dingdanliebiao"
-            @click="toBack"
-            :color="contentColor"
-          />
+          <wd-icon class-prefix="lcb" name="zuo_left" @click="toBack" :color="contentColor" />
         </template>
         <view class="ml-2" v-if="titleLocation === 'left'">
           <Search
@@ -72,7 +67,6 @@
       <!-- 中间布局 -->
       <view
         class="navbar-center"
-        v-if="topStyle === 1"
         :style="{
           paddingTop,
         }"
@@ -91,8 +85,8 @@ import { computed, ref } from 'vue'
 import { ICapsule, NavProps } from './types'
 import Title from './Title/index.vue'
 import Search from './Search/index.vue'
-import { onPageScroll } from '@dcloudio/uni-app'
 import { Locale } from '@tplc/wot'
+import usePageScroll from '../../hooks/usePageScroll'
 defineOptions({
   name: 'LcbNav',
   options: {
@@ -103,14 +97,14 @@ defineOptions({
 })
 const { statusBarHeight } = uni.getSystemInfoSync()
 const iconMap = {
-  back: 'dingdanliebiao',
-  search: 'a-xingzhuang23kaobei',
-  scanCode: 'a-xingzhuang106',
-  translate: 'a-xingzhuang22',
-  setting: 'shezhi',
-  home: 'tingshi',
+  back: 'zuo_left',
+  search: 'sousuo_search',
+  scanCode: 'gengduo_more-app',
+  translate: 'fanyi_translate',
+  setting: 'peizhi_config',
+  home: 'shouye_home1',
 }
-const scrollTop = ref(0)
+const [scrollTop] = usePageScroll()
 const props = withDefaults(defineProps<NavProps>(), {
   styleGroup: 1,
   titleLocation: 'center',
@@ -212,12 +206,6 @@ const onCapsule = ({ action }: ICapsule) => {
 const toBack = () => {
   uni.navigateBack()
 }
-
-onPageScroll(({ scrollTop: top }) => {
-  if (props.immersionMode === 1) {
-    scrollTop.value = top
-  }
-})
 </script>
 <style lang="scss" scoped>
 .customNavigation {

package/components/lcb-notice/Item/index.vue

@@ -6,31 +6,31 @@
       :style="{
         height: transformValueUnit(40),
         width: transformValueUnit(40),
-        // color: textColor,
         backgroundImage: `url('${item?.icon}')`,
       }"
     />
     <view v-if="iconType === 0" class="mr-12rpx">
       <wd-icon
-        class-prefix="iconfont"
+        class-prefix="lcb"
         v-bind="{
           name: item?.icon || '',
           size: transformValueUnit(40),
-          // color: textColor,
         }"
       />
     </view>
     <view class="flex-1 noticeBar relative overflow-hidden">
       <view
-        :class="`text-28rpx absolute left-0 top-0 noticeItem flex overflow-hidden${lens == 1 ? ' infinite' : ''}${showAni ? ' animation' : ''}`"
+        :class="`text-24rpx absolute left-0 top-0 noticeItem flex overflow-hidden${lens == 1 ? ' infinite' : ''}${showAni ? ' animation' : ''}`"
         :style="{
           animationDuration: getTime(item?.noticeContent),
+          color: textColor,
         }"
       >
         {{ item?.noticeContent }}
         <lcb-action-view v-bind="item?.link" customClass="absolute top-0 left-0 right-0 bottom-0" />
       </view>
     </view>
+    <wd-icon name="arrow-right" size="32rpx" :color="textColor" />
   </view>
 </template>
 

package/components/lcb-notice/lcb-notice.vue

@@ -1,5 +1,11 @@
 <template>
-  <lcb-block v-bind="$props">
+  <lcb-block
+    v-bind="$props"
+    custom-class="border-solid border-1"
+    :style="{
+      'border-color': borderColor,
+    }"
+  >
     <swiper
       class="swiper"
       circular
@@ -17,20 +23,14 @@
           :iconType="iconType"
           :item="item"
           :textSpeed="textSpeed"
+          :textColor="textColor"
         />
       </swiper-item>
-      <!-- <swiper-item>
-        <Item :idx="1" :current="current" text="请填写公告111" @setInterval="onSetInterval" />
-      </swiper-item>
-      <swiper-item>
-        <Item :idx="2" :current="current" text="请填写公告222" @setInterval="onSetInterval" />
-      </swiper-item> -->
     </swiper>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { LcbNoticeBarProps } from './types'
 import Item from './Item/index.vue'
 
@@ -45,7 +45,9 @@ defineOptions({
 
 const props = withDefaults(defineProps<LcbNoticeBarProps>(), {
   textSpeed: 1,
+  borderColor: 'transparent',
 })
+console.log(props, 'props')
 
 function getTime(text: string | undefined) {
   const len = text?.length || 0

package/components/lcb-notice/types.ts

@@ -13,6 +13,8 @@ export interface LcbNoticeBarProps {
   iconType?: number
   direction?: string
   textSpeed?: number
+  textColor?: string
+  borderColor?: string
 }
 
 export interface NoticeBarItemProps {
@@ -21,7 +23,8 @@ export interface NoticeBarItemProps {
   text?: string
   lens?: number
   iconType?: number
-  item?: NoticeItem,
+  item?: NoticeItem
   textSpeed?: number
+  textColor?: string
   // setInterval?: Function
 }

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

@@ -1,9 +1,11 @@
 <template>
   <lcb-block v-bind="$props">
-    <view v-if="styleGroup != 2" v-for="(item, index) in items" :key="index">
-      <!-- <view>{{  JSON.stringify(item) }}</view> -->
-      <lcb-product-item :styleProps="styleProps" :idx="index" v-bind="item" />
-    </view>
+    <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>
+    </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">
@@ -15,9 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { LcbProductProps } from './types'
-import { transformValueUnit } from '../../utils/transform'
 defineOptions({
   name: 'LcbProduct',
   options: {
@@ -41,7 +42,6 @@ const styleProps = computed(() => {
     showCollection: props.showCollection,
   }
 })
-
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-product/types.ts

@@ -1,10 +1,10 @@
 export interface LcbProductProps {
   // Define the component's prop types here
-  styleGroup?: 1 | 2 | 3 | 4   //1列表 2 左右滑动 3一行两个 4瀑布流
+  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行
+  productStyle?: 'image' | 'flat' | 'card' | 'border' // 图片, 扁平, 卡片, 描边
+  productTitle?: 0 | 1 | 2 // 0默认 1 1行 2 2行
   showTags?: boolean
   showPrice?: boolean
   showScribePrice?: boolean

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

@@ -1,17 +1,26 @@
 <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
+    :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 ' : ''}`">
+      <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`">
+          :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" />
@@ -19,7 +28,10 @@
         <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">
+          <view
+            v-if="!!styleProps?.showScribePrice"
+            class="line-through text-22rpx color-#999 ml-10rpx pt-5rpx"
+          >
             ¥{{ scribePrice }}
           </view>
         </view>