@tplc/business 0.0.14 → 0.0.16

package/components/lcb-filter/components/TreeSelect/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <view>
+    <view class="flex">
+      <view class="scroll-view w-25">
+        <view
+          v-for="(item, index) in options"
+          :key="item.label"
+          @click="currentCategory = index"
+          class="filter-select flex justify-between items-center"
+          :class="currentCategory === index ? 'filter-select__choose' : ''"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+      <view class="scroll-view flex-1 w-0 bg-#FAFAFA pl-4" v-if="mode === 'single'">
+        <view
+          v-for="item in options[currentCategory].children"
+          :key="item.label"
+          @click="onItemClick(item)"
+          class="filter-select flex justify-between items-center !px-36rpx !py-30rpx"
+          :class="getChecked(item) ? 'filter-select__choose' : ''"
+        >
+          {{ item.label }}
+          <wd-icon name="check" custom-class="choose_icon" v-if="innerValue === item.value" />
+        </view>
+      </view>
+      <view class="flex-1 w-0 bg-#FAFAFA pl-4 scroll-view" v-else>
+        <view v-for="item in options" :key="item.label">
+          <view class="filter-select__title">
+            {{ item.label }}
+          </view>
+
+          <view class="grid grid-cols-3 gap-20rpx">
+            <SelectTagView
+              v-for="child in item.children"
+              :key="child.label"
+              :title="child.label"
+              :checked="getChecked(child)"
+              @click="onItemClick(child)"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    <ActionView
+      :disabled="!Boolean(innerValue)"
+      @cancel="innerValue = undefined"
+      @submit="onSubmit"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+import { TreeSelectProps } from './type'
+import useSelect from '../../hooks/useSelect'
+import SelectTagView from '../SelectTagView/index.vue'
+import ActionView from '../ActionView/index.vue'
+defineOptions({
+  name: 'TreeSelect',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<TreeSelectProps>()
+const model = defineModel<string | string[]>()
+const modelTitle = defineModel<string>('title')
+const innerValue = ref(model.value)
+const emits = defineEmits(['submit'])
+const { onItemClick, options, getChecked } = useSelect(props, { model: innerValue })
+const currentCategory = ref(0)
+const treeObj = computed(() => {
+  return options.value.reduce(
+    (prev, next) => {
+      next?.children?.forEach((item) => {
+        prev[item.value as string] = item.label
+      })
+      return prev
+    },
+    {} as Record<string, string>,
+  )
+})
+const onSubmit = () => {
+  if (props.mode !== 'multiple') {
+    modelTitle.value = treeObj.value[innerValue.value as string]
+  }
+  model.value = innerValue.value
+  nextTick(() => {
+    emits('submit')
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.scroll-view {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.choose_icon {
+  color: $-color-theme;
+  font-size: $-cell-arrow-size;
+}
+.filter-select {
+  padding: 30rpx 40rpx;
+  font-size: $-cell-title-fs;
+  position: relative;
+  &__title {
+    margin-top: 34rpx;
+    font-weight: 500;
+    font-size: 30rpx;
+    color: $-color-theme;
+    margin-bottom: 30rpx;
+  }
+  &__choose {
+    color: $-color-theme;
+    // 透明背景颜色
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.05;
+      background-color: $-color-theme;
+    }
+  }
+}
+</style>

package/components/lcb-filter/components/TreeSelect/type.ts

@@ -0,0 +1,3 @@
+import { FilterItemProps } from '../../types'
+
+export interface TreeSelectProps extends FilterItemProps {}

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

@@ -0,0 +1,45 @@
+import { onMounted, ref, Ref } from 'vue'
+import { FilterItemProps, Option } from '../types'
+const useSelect = (
+  props: FilterItemProps,
+  {
+    model,
+  }: {
+    model: Ref<string | string[] | undefined>
+  },
+) => {
+  const options = ref<Option[]>(props.options || [])
+  const onItemClick = (item: Option) => {
+    if (props.mode === 'multiple') {
+      if (typeof model.value === 'object' && model.value.includes(item.value as string)) {
+        model.value = model.value.filter((v) => v !== item.value)
+      } else {
+        model.value = [...(model.value || []), item.value as string]
+      }
+    } else {
+      model.value = item.value
+    }
+  }
+
+  onMounted(async () => {
+    if (props.apiPath) {
+      // 调用接口获取数据
+      const { data } = await uni.$lcb.http.get<Option[]>(props.apiPath)
+      options.value = data
+    }
+  })
+  const getChecked = (item: Option) => {
+    if (Array.isArray(model.value)) {
+      return model.value.includes(`${item.value}`)
+    } else {
+      return Boolean(model.value && model.value === item.value)
+    }
+  }
+  return {
+    options,
+    getChecked,
+    onItemClick,
+  }
+}
+
+export default useSelect

package/components/lcb-filter/index.scss

@@ -0,0 +1,30 @@
+@import '@tplc/wot/components/common/abstracts/variable';
+
+.lcb-filter {
+  &__popup {
+    background: #F5F5F7;
+  }
+
+  &-menu__choose {
+    color: $-color-theme !important;
+  }
+
+
+}
+
+.opacity-primary {
+  position: relative;
+  color: $-color-theme !important;
+  background-color: transparent !important;
+  font-weight: 500;
+  font-size: 24rpx !important;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.14;
+    background-color: $-color-theme;
+  }
+}

package/components/lcb-filter/lcb-filter.vue

@@ -0,0 +1,125 @@
+<template>
+  <view v-if="info">
+    <wd-drop-menu>
+      <wd-drop-menu-item
+        v-for="(item, index) in info?.filterComponent"
+        :key="item.valueName"
+        :title="titleObj[item.valueName] || item.fitlerName"
+        icon="caret-down-small"
+        icon-size="26px"
+        :selected="getSelect(item)"
+        ref="dropMenu"
+      >
+        <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>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { LcbFilterProps } 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 './index.scss'
+defineOptions({
+  name: 'LcbFilter',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const dropMenu = ref()
+const props = withDefaults(defineProps<LcbFilterProps>(), {
+  pageFilterType: 'hotelTravelFilter',
+})
+const info = ref<LcbFilterResult>()
+const filter = ref<Record<string, any>>({})
+const titleObj = ref<Record<string, any>>({})
+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.fitlerName
+        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
+      }
+      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])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/lcb-filter/types.ts

@@ -0,0 +1,18 @@
+export interface LcbFilterProps {
+  pageFilterType?: string
+}
+export interface Option {
+  label: string
+  value: string | string[]
+  custom?: boolean
+  max?: number
+  min?: number
+  children?: Option[]
+  unit?: string
+}
+
+export interface FilterItemProps {
+  mode?: 'multiple' | 'single'
+  apiPath?: string
+  options?: Option[]
+}

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

@@ -148,12 +148,12 @@ const capsuleList = computed(() => {
 
   return [...list, ...(props.capsules || [])] as ICapsule[]
 })
-const onCapsule = (item: ICapsule) => {
-  switch (item.action) {
+const onCapsule = ({ action = 'link', link }: ICapsule) => {
+  switch (action) {
     case 'link':
-      if (item.linkUrl) {
+      if (link) {
         uni.navigateTo({
-          url: item.linkUrl,
+          url: link,
         })
       } else {
         toBack()
@@ -161,7 +161,7 @@ const onCapsule = (item: ICapsule) => {
       break
     case 'home':
       uni.switchTab({
-        url: '/pages/index/index',
+        url: '/pages/home/index',
       })
       break
   }

package/components/lcb-nav/types.ts

@@ -1,7 +1,7 @@
 export interface ICapsule {
   icon: string
-  action: 'translate' | 'scanCode' | 'link' | 'home'
-  linkUrl?: string
+  action?: 'translate' | 'scanCode' | 'link' | 'home'
+  link?: string
 }
 
 export interface NavTitleProps {

package/global.d.ts

@@ -4,6 +4,7 @@ declare module 'vue' {
     'lcb-banner': (typeof import('./types/components/lcb-banner/lcb-banner.vue'))['default']
     'lcb-banner-block': (typeof import('./types/components/lcb-banner-block/lcb-banner-block.vue'))['default']
     'lcb-block': (typeof import('./types/components/lcb-block/lcb-block.vue'))['default']
+    'lcb-filter': (typeof import('./types/components/lcb-filter/lcb-filter.vue'))['default']
     'lcb-grid': (typeof import('./types/components/lcb-grid/lcb-grid.vue'))['default']
     'lcb-home-search': (typeof import('./types/components/lcb-home-search/lcb-home-search.vue'))['default']
     'lcb-img-nav': (typeof import('./types/components/lcb-img-nav/lcb-img-nav.vue'))['default']

package/index.ts

@@ -1,3 +1,7 @@
+import { LcbGlobal } from 'action'
+
+export const $lcb: LcbGlobal = {} as LcbGlobal
+uni.$lcb = $lcb
 // #ifdef H5
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -16,13 +20,15 @@ for (const key in importFn) {
   }
 }
 // #endif
-
 const install = (Vue) => {
   // #ifdef H5
   components.forEach(function (component) {
     Vue.component(component.name, component)
   })
   // #endif
+  // #ifndef APP-NVUE
+  Vue.config.globalProperties.$lcb = $lcb
+  // #endif
 }
 
 export default {

package/package.json

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

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

@@ -0,0 +1,49 @@
+import { Option } from './types'
+export interface LcbFilterResult {
+  btnComponent: BtnComponent
+  filterTags: FilterTags
+  filterComponent: FilterComponent[]
+}
+export interface FilterComponent {
+  fitlerName?: string
+  component: string
+  defaultValue?: string
+  defaultName?: string
+  valueName: string
+  componentProps: ComponentProps3
+}
+interface ComponentProps3 {
+  mode?: 'multiple' | 'single'
+  apiPath?: string
+  options?: Option[]
+  componentList?: ComponentList[]
+}
+export interface ComponentList {
+  fitlerName: string
+  component: string
+  valueName: string
+  defaultValue?: string | string[] | number[]
+  componentProps: ComponentProps
+}
+export interface FilterTags {
+  component: string
+  valueName: string
+  defaultValue?: string
+  defaultName?: string
+  componentProps: ComponentProps
+}
+export interface ComponentProps {
+  mode?: 'multiple' | 'single'
+  max: number
+  min: number
+  apiPath: string
+  options: Option[]
+  unit?: string
+}
+interface BtnComponent {
+  postRequest: string
+}
+export declare const getFilterDetail: (
+  val: string,
+) => Promise<import('../../action').IResData<LcbFilterResult>>
+export {}

package/types/components/lcb-filter/components/ActionView/index.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: import('vue').DefineComponent<
+  {
+    disabled: {
+      type: BooleanConstructor
+    }
+  },
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    submit: (...args: any[]) => void
+    cancel: (...args: any[]) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<
+    import('vue').ExtractPropTypes<{
+      disabled: {
+        type: BooleanConstructor
+      }
+    }>
+  > & {
+    onSubmit?: ((...args: any[]) => any) | undefined
+    onCancel?: ((...args: any[]) => any) | undefined
+  },
+  {
+    disabled: boolean
+  },
+  {}
+>
+export default _default

package/types/components/lcb-filter/components/ComponentGroup/index.vue.d.ts

@@ -0,0 +1,32 @@
+import { ComponentGroupProps } from './type'
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<ComponentGroupProps>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    submit: (...args: any[]) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<ComponentGroupProps>>> & {
+    onSubmit?: ((...args: any[]) => 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-filter/components/ComponentGroup/type.d.ts

@@ -0,0 +1,5 @@
+import { ComponentList } from '../../api'
+export interface ComponentGroupProps {
+  componentList?: ComponentList[]
+  filter?: Record<string, string>
+}

package/types/components/lcb-filter/components/FilterSelect/index.vue.d.ts

@@ -0,0 +1,41 @@
+import { FilterSelectProps } from './type'
+declare let __VLS_typeProps: FilterSelectProps
+type __VLS_PublicProps = {
+  modelValue?: string | string[]
+  title?: 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 | string[]) => void
+    'update:title': (title: string) => void
+    submit: (...args: any[]) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined
+    'onUpdate:modelValue'?: ((modelValue: string | string[]) => any) | undefined
+    'onUpdate:title'?: ((title: 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-filter/components/FilterSelect/type.d.ts

@@ -0,0 +1,2 @@
+import { FilterItemProps } from '../../types'
+export interface FilterSelectProps extends FilterItemProps {}

package/types/components/lcb-filter/components/FilterSlider/index.vue.d.ts

@@ -0,0 +1,36 @@
+import { FilterSliderProps } from './types'
+declare let __VLS_typeProps: FilterSliderProps
+type __VLS_PublicProps = {
+  modelValue?: number[]
+} & typeof __VLS_typeProps
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToOption<__VLS_PublicProps>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    'update:modelValue': (modelValue: number[]) => void
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
+    'onUpdate:modelValue'?: ((modelValue: number[]) => 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-filter/components/FilterSlider/types.d.ts

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