@tplc/business 0.0.28 → 0.0.29

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.29](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.14...v0.0.29) (2024-10-19)
+
+
+### ✨ Features | 新功能
+
+* notice 修改 ([274090d](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/274090dbf6697e1e8059e83005ea0df1dbc679a5))
+* 完成列表首页 ([d00b2e0](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/d00b2e0d3e8c397fe8723675ee311bd93a463908))
+* 新增tabs todo 自定义颜色 ([4a71d82](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/4a71d82f3c300695e0004426f31a46f0d86cebe4))
+
 ### [0.0.28](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.13...v0.0.28) (2024-10-19)
 
 

package/components/lcb-image/lcb-image.vue

@@ -1,18 +1,27 @@
 <template>
+  <view
+    v-if="!items?.length"
+    class="flex justify-center items-center bg-light color-gray overflow-hidden"
+    :style="{
+      height: transformValueUnit(400),
+      borderRadius: transformValueUnit(imageRadius),
+      marginTop: transformValueUnit(-(floatUp || 0)),
+    }"
+  >
+    <wd-icon name="image" size="50px"></wd-icon>
+  </view>
 
-  <view v-if="!items?.length" class="flex justify-center items-center bg-light color-gray overflow-hidden" :style="{
-    height: transformValueUnit(400),
-    borderRadius: transformValueUnit(imageRadius),
-    marginTop: transformValueUnit(-(floatUp || 0)),
-  }"><wd-icon name="image" size="50px"></wd-icon></view>
-
-  <view v-if="styleGroup != 3" :class="styleGroup == 2 ? 'flex' : ''" :style="{
-    marginLeft: transformValueUnit(marginHorizontal),
-    marginRight: transformValueUnit(marginHorizontal),
-    marginTop: transformValueUnit(-(floatUp || 0)),
-    // marginTop: transformValueUnit(marginTop),
-    // marginBottom: transformValueUnit(marginBottom),
-  }">
+  <view
+    v-if="styleGroup != 3"
+    :class="styleGroup == 2 ? 'flex' : ''"
+    :style="{
+      marginLeft: transformValueUnit(marginHorizontal),
+      marginRight: transformValueUnit(marginHorizontal),
+      marginTop: transformValueUnit(-(floatUp || 0)),
+      // marginTop: transformValueUnit(marginTop),
+      // marginBottom: transformValueUnit(marginBottom),
+    }"
+  >
     <!-- <view v-for="(item, index) in items" :key="index" :class="styleGroup == 2 ? 'flex-1 relative' : 'relative'" :style="{
       marginTop: transformValueUnit(styleGroup == 1 && index > 0 ? imageMargin : 0),
       marginLeft: transformValueUnit(styleGroup == 2 && index > 0 ? imageMargin : 0),
@@ -32,24 +41,28 @@
     <Image v-bind="imageProps" />
   </view>
 
-  <scroll-view v-if="styleGroup == 3" scroll-x class="w-full whitespace-nowrap" :style="{
-    marginLeft: transformValueUnit(marginHorizontal),
-    marginRight: transformValueUnit(marginHorizontal),
-    marginTop: transformValueUnit(-(floatUp || 0)),
-    // marginTop: transformValueUnit(marginTop),
-    // marginBottom: transformValueUnit(marginBottom),
-  }">
+  <scroll-view
+    v-if="styleGroup == 3"
+    scroll-x
+    class="w-full whitespace-nowrap"
+    :style="{
+      marginLeft: transformValueUnit(marginHorizontal),
+      marginRight: transformValueUnit(marginHorizontal),
+      marginTop: transformValueUnit(-(floatUp || 0)),
+      // marginTop: transformValueUnit(marginTop),
+      // marginBottom: transformValueUnit(marginBottom),
+    }"
+  >
     <view class="flex shrink-0">
       <Image v-bind="imageProps" />
     </view>
   </scroll-view>
 
   <!-- <view class="pl-20px pr-20px break-all">{{  JSON.stringify(iconItems)  }}</view> -->
-
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { transformValueUnit } from '../../utils/transform'
 import Image from './Image/index.vue'
 import { LcbImageProps } from './types'
@@ -86,7 +99,6 @@ const imageProps = computed(() => {
 //   console.log('props.items', props.items)
 //   return props.items;
 // })
-
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-image/types.ts

@@ -2,7 +2,7 @@ import { ActionView } from 'action'
 export interface LcbImageProps {
   // Define the component's prop types here
   items?: Partial<ActionView>[]
-  styleGroup?: number   //1 纵向 2 横向 3 横向滚动
+  styleGroup?: number // 1 纵向 2 横向 3 横向滚动
 
   imageRadius?: number
   itemPadding?: number

package/components/lcb-list/api.ts

@@ -1,3 +1,4 @@
+import { FilterTabsProps } from './components/FilterTabs/type'
 import { Option } from './types'
 export interface LcbListInfo {
   url: string
@@ -8,18 +9,23 @@ export interface LcbFilterResult {
   filterTags: FilterTags
   filterComponent: FilterComponent[]
   listInfo: LcbListInfo
+  filterTabs?: {
+    componentProps: FilterTabsProps
+    valueName: string
+    defaultValue?: string
+  }
 }
 
 export interface FilterComponent {
-  fitlerName?: string
+  filterName?: string
   component: string
   defaultValue?: string
   defaultName?: string
   valueName: string
-  componentProps: ComponentProps3
+  componentProps: FilterComponentProps
 }
 
-interface ComponentProps3 {
+interface FilterComponentProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
@@ -27,11 +33,11 @@ interface ComponentProps3 {
 }
 
 export interface ComponentList {
-  fitlerName: string
+  filterName: string
   component: string
   valueName: string
   defaultValue?: string | string[] | number[]
-  componentProps: ComponentProps
+  componentProps: FilterTagsProps
 }
 
 export interface FilterTags {
@@ -39,10 +45,10 @@ export interface FilterTags {
   valueName: string
   defaultValue?: string
   defaultName?: string
-  componentProps: ComponentProps
+  componentProps: FilterTagsProps
 }
 
-export interface ComponentProps {
+export interface FilterTagsProps {
   mode?: 'multiple' | 'single'
   max: number
   min: number

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

@@ -2,7 +2,7 @@
   <view class="px-5 pt-2 pb-4 bg-#fafafa max-h-70vh overflow-y-auto box-border">
     <view v-for="child in componentList" :key="child.valueName" class="mb-12rpx">
       <view class="lcb-filter__group-title mt2">
-        {{ child.fitlerName }}
+        {{ child.filterName }}
         <view v-if="child.componentProps.mode === 'multiple'" class="!text-22rpx">可多选</view>
         <view v-if="child.component === 'slider'" class="!text-26rpx slider-title">
           {{

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

@@ -1,5 +1,12 @@
 <template>
-  <z-paging ref="paging" :auto="true" v-model="dataList" @query="queryList" use-page-scroll>
+  <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>

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

@@ -1,3 +1,3 @@
-import { ComponentProps } from '../../api'
+import { FilterTagsProps } from '../../api'
 
-export interface FilterSliderProps extends ComponentProps {}
+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-list/index.scss

@@ -13,6 +13,26 @@
     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;
+    }
+  }
+
 }
 
 .opacity-primary {

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

@@ -1,16 +1,23 @@
 <template>
   <view v-if="info">
-    <view style="z-index: 1; position: sticky; top: 0">
+    <wd-sticky @sticky="sticky = $event">
       <view
         :class="{
-          'lcb-filter__border-top': border,
+          '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.fitlerName"
+            :title="titleObj[item.valueName] || item.filterName"
             icon="caret-down-small"
             icon-size="26px"
             :selected="getSelect(item)"
@@ -58,7 +65,8 @@
           </wd-button>
         </view>
       </view>
-    </view>
+    </wd-sticky>
+
     <FilterList v-bind="{ ...info.listInfo, ...pageListProps, filter }" />
   </view>
 </template>
@@ -72,6 +80,7 @@ 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({
@@ -87,6 +96,7 @@ const dropMenu = ref()
 const props = withDefaults(defineProps<LcbListProps>(), {
   pageFilterType: 'hotelTravelFilter',
   border: true,
+  styleMode: 'default',
   pageListProps: () => ({
     productProps: {
       styleGroup: 1,
@@ -96,6 +106,8 @@ const props = withDefaults(defineProps<LcbListProps>(), {
 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) => {
@@ -103,7 +115,7 @@ watch(
       const { data } = await getFilterDetail(val)
       data.filterComponent.forEach((item) => {
         filter.value[item.valueName] = item.defaultValue
-        titleObj.value[item.valueName] = item.fitlerName
+        titleObj.value[item.valueName] = item.filterName
         if (item.componentProps?.componentList) {
           item.componentProps.componentList.forEach((data) => {
             filter.value[data.valueName] = data.defaultValue
@@ -114,6 +126,10 @@ watch(
         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
     }
   },

package/components/lcb-list/types.ts

@@ -4,6 +4,7 @@ export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
+  styleMode?: 'default' | 'plain'
 }
 export interface Option {
   label: string

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

@@ -67,7 +67,6 @@
       <!-- 中间布局 -->
       <view
         class="navbar-center"
-        v-if="topStyle === 1"
         :style="{
           paddingTop,
         }"
@@ -86,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: {
@@ -105,7 +104,7 @@ const iconMap = {
   setting: 'peizhi_config',
   home: 'shouye_home1',
 }
-const scrollTop = ref(0)
+const [scrollTop] = usePageScroll()
 const props = withDefaults(defineProps<NavProps>(), {
   styleGroup: 1,
   titleLocation: 'center',
@@ -207,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,7 +6,6 @@
       :style="{
         height: transformValueUnit(40),
         width: transformValueUnit(40),
-        // color: textColor,
         backgroundImage: `url('${item?.icon}')`,
       }"
     />
@@ -16,21 +15,22 @@
         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/hooks/usePageScroll.ts

@@ -0,0 +1,10 @@
+import { onPageScroll } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+const usePageScroll = () => {
+  const scrollTop = ref(0)
+  onPageScroll(({ scrollTop: top }) => {
+    scrollTop.value = top
+  })
+  return [scrollTop]
+}
+export default usePageScroll

package/package.json

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

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

@@ -1,3 +1,4 @@
+import { FilterTabsProps } from './components/FilterTabs/type'
 import { Option } from './types'
 export interface LcbListInfo {
   url: string
@@ -8,36 +9,41 @@ export interface LcbFilterResult {
   filterTags: FilterTags
   filterComponent: FilterComponent[]
   listInfo: LcbListInfo
+  filterTabs?: {
+    componentProps: FilterTabsProps
+    valueName: string
+    defaultValue?: string
+  }
 }
 export interface FilterComponent {
-  fitlerName?: string
+  filterName?: string
   component: string
   defaultValue?: string
   defaultName?: string
   valueName: string
-  componentProps: ComponentProps3
+  componentProps: FilterComponentProps
 }
-interface ComponentProps3 {
+interface FilterComponentProps {
   mode?: 'multiple' | 'single'
   apiPath?: string
   options?: Option[]
   componentList?: ComponentList[]
 }
 export interface ComponentList {
-  fitlerName: string
+  filterName: string
   component: string
   valueName: string
   defaultValue?: string | string[] | number[]
-  componentProps: ComponentProps
+  componentProps: FilterTagsProps
 }
 export interface FilterTags {
   component: string
   valueName: string
   defaultValue?: string
   defaultName?: string
-  componentProps: ComponentProps
+  componentProps: FilterTagsProps
 }
-export interface ComponentProps {
+export interface FilterTagsProps {
   mode?: 'multiple' | 'single'
   max: number
   min: number

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

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

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

@@ -0,0 +1,36 @@
+import { FilterTabsProps } from './type'
+declare let __VLS_typeProps: FilterTabsProps
+type __VLS_PublicProps = {
+  modelValue?: string
+} & typeof __VLS_typeProps
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<__VLS_PublicProps>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    'update:modelValue': (modelValue: string) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
+    'onUpdate:modelValue'?: ((modelValue: string) => any) | undefined
+  },
+  {},
+  {}
+>
+export default _default
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
+type __VLS_TypePropsToOption<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}

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

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

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

@@ -6,6 +6,7 @@ declare const _default: import('vue').DefineComponent<
     {
       pageFilterType: string
       border: boolean
+      styleMode: string
       pageListProps: () => {
         productProps: {
           styleGroup: number
@@ -29,6 +30,7 @@ declare const _default: import('vue').DefineComponent<
         {
           pageFilterType: string
           border: boolean
+          styleMode: string
           pageListProps: () => {
             productProps: {
               styleGroup: number
@@ -42,6 +44,7 @@ declare const _default: import('vue').DefineComponent<
     border: boolean
     pageFilterType: string
     pageListProps: import('./components/FilterList/type').PageListProps
+    styleMode: 'default' | 'plain'
   },
   {}
 >

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

@@ -3,6 +3,7 @@ export interface LcbListProps {
   pageFilterType?: string
   pageListProps?: PageListProps
   border?: boolean
+  styleMode?: 'default' | 'plain'
 }
 export interface Option {
   label: string

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

@@ -10,6 +10,7 @@ declare const _default: import('vue').DefineComponent<
     __VLS_TypePropsToOption<__VLS_PublicProps>,
     {
       textSpeed: number
+      borderColor: string
     }
   >,
   {},
@@ -30,6 +31,7 @@ declare const _default: import('vue').DefineComponent<
         __VLS_TypePropsToOption<__VLS_PublicProps>,
         {
           textSpeed: number
+          borderColor: string
         }
       >
     >
@@ -39,6 +41,7 @@ declare const _default: import('vue').DefineComponent<
   },
   {
     textSpeed: number
+    borderColor: string
   },
   {}
 >

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

@@ -11,6 +11,8 @@ export interface LcbNoticeBarProps {
   iconType?: number
   direction?: string
   textSpeed?: number
+  textColor?: string
+  borderColor?: string
 }
 export interface NoticeBarItemProps {
   idx?: number
@@ -20,5 +22,6 @@ export interface NoticeBarItemProps {
   iconType?: number
   item?: NoticeItem
   textSpeed?: number
+  textColor?: string
 }
 export {}

package/types/hooks/usePageScroll.d.ts

@@ -0,0 +1,2 @@
+declare const usePageScroll: () => import('vue').Ref<number>[]
+export default usePageScroll