@tplc/business 0.0.14 → 0.0.16

package/action.d.ts

@@ -4,3 +4,25 @@ export interface ActionView {
   link: string
   url?: string
 }
+export type IResData<T> = {
+  code: number
+  msg: string
+  data: T
+}
+
+export interface LcbGlobal {
+  http: {
+    get<T>(url: string, query?: Record<string, any> | undefined): Promise<IResData<T>>
+    post<T>(
+      url: string,
+      data?: Record<string, any> | undefined,
+      query?: Record<string, any> | undefined,
+    ): Promise<IResData<T>>
+  }
+}
+
+global {
+  interface Uni {
+    $lcb: LcbGlobal
+  }
+}

package/components/lcb-filter/api.ts

@@ -0,0 +1,56 @@
+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 const getFilterDetail = (val: string) =>
+  uni.$lcb.http.post<LcbFilterResult>('/pageDecoration/filter/detail', {
+    pageFilterType: val,
+  })

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

@@ -0,0 +1,40 @@
+<template>
+  <view class="action-view flex justify-center items-center">
+    <wd-button type="info" @click="emits('cancel')" :disabled="disabled">清空</wd-button>
+    <wd-button type="primary" custom-class="flex-1" @click="emits('submit')">查看房屋</wd-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'ActionView',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+defineProps({
+  disabled: {
+    type: Boolean,
+  },
+})
+const emits = defineEmits(['cancel', 'submit'])
+</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-filter/components/ComponentGroup/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <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 }}
+        <view v-if="child.componentProps.mode === 'multiple'" class="!text-22rpx">可多选</view>
+      </view>
+      <view class="grid grid-cols-4 gap-22rpx" v-if="child.component === 'tagSelect'">
+        <TagSelect v-bind="child.componentProps" v-model="innerFilter[child.valueName]" />
+      </view>
+      <FilterSlider
+        v-if="child.component === 'slider'"
+        v-bind="child.componentProps"
+        v-model="innerFilter[child.valueName]"
+      />
+    </view>
+  </view>
+  <ActionView :disabled="disabled" @cancel="onCancel" @submit="onSubmit" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ComponentGroupProps } from './type'
+import FilterSlider from '../FilterSlider/index.vue'
+import TagSelect from '../TagSelect/index.vue'
+import ActionView from '../ActionView/index.vue'
+defineOptions({
+  name: 'ComponentGroup',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+
+const props = defineProps<ComponentGroupProps>()
+const emits = defineEmits(['submit'])
+const innerFilter = ref<Record<string, any>>({})
+props.componentList?.forEach((item) => {
+  innerFilter.value[item.valueName] = props.filter?.[item.valueName]
+})
+const disabled = computed(() => {
+  const list = (props.componentList || []).filter((item) => {
+    if (item.component === 'slider') {
+      return (
+        item.componentProps.min === innerFilter.value[item.valueName][0] &&
+        item.componentProps.max === innerFilter.value[item.valueName][1]
+      )
+    } else {
+      return !innerFilter.value[item.valueName]
+    }
+  })
+  return list.length === (props.componentList || [])?.length
+})
+
+const onCancel = () => {
+  props.componentList?.forEach((key) => {
+    if (key.component === 'slider') {
+      innerFilter.value[key.valueName] = key.defaultValue
+    } else {
+      innerFilter.value[key.valueName] = key.defaultValue
+    }
+  })
+}
+const onSubmit = () => {
+  emits('submit', innerFilter.value)
+}
+</script>
+<style lang="scss" scoped>
+.lcb-filter {
+  &__group-title {
+    font-size: 30rpx;
+    color: #333;
+    font-weight: 500;
+    margin-bottom: 24rpx;
+    display: flex;
+    align-items: center;
+
+    > view {
+      font-size: 24rpx;
+      color: #999999;
+      margin-left: 20rpx;
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,68 @@
+<template>
+  <view class="max-h-60vh overflow-y-auto">
+    <view
+      v-for="item in options"
+      :key="`${item.value}`"
+      @click="onItemClick(item)"
+      class="filter-select flex justify-between items-center"
+      :class="getChecked(item) ? 'filter-select__choose' : ''"
+    >
+      {{ item.label }}
+      <wd-icon name="check" custom-class="choose_icon" v-if="model === item.value" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { FilterSelectProps } from './type'
+import useSelect from '../../hooks/useSelect'
+import { watch, watchEffect } from 'vue'
+defineOptions({
+  name: 'FilterSelect',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<FilterSelectProps>()
+const model = defineModel<string | string[]>()
+const modelTitle = defineModel<string>('title')
+const { onItemClick, options, getChecked } = useSelect(props, { model })
+const emits = defineEmits(['submit'])
+watchEffect(() => {
+  modelTitle.value = options.value?.find((v) => v.value === model.value)?.label
+})
+watch(
+  () => model.value,
+  (val) => {
+    emits('submit')
+  },
+)
+</script>
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.choose_icon {
+  color: $-color-theme;
+  font-size: $-cell-arrow-size;
+}
+.filter-select {
+  padding: 30rpx 40rpx;
+  font-size: $-cell-title-fs;
+  position: relative;
+  &__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/FilterSelect/type.ts

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

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

@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <wd-slider hide-label :max="max" :min="min" v-model="innerValue" @dragend="onDragend" />
+    <view class="grid grid-cols-4 gap-4 mt-2">
+      <SelectTagView
+        v-for="item in options"
+        :key="item.label"
+        :title="item.label"
+        :custom="item.value === 'custom'"
+        :checked="getChecked(item.value)"
+        @click="onItemClick(item.value)"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { FilterSliderProps } from './types'
+import SelectTagView from '../SelectTagView/index.vue'
+import { ref, watch } from 'vue'
+defineOptions({
+  name: 'FilterSlider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<FilterSliderProps>()
+const model = defineModel<number[]>()
+const innerValue = ref<number[]>()
+const onItemClick = (value) => {
+  if (Array.isArray(value)) {
+    if (value[1]) {
+      innerValue.value = value
+    } else {
+      innerValue.value = [value[0], value[0]]
+    }
+  }
+}
+watch(
+  () => model.value,
+  (val) => {
+    if (val?.length === 1) {
+      innerValue.value = [val[0], val[0]]
+    } else {
+      innerValue.value = val
+    }
+  },
+  { immediate: true },
+)
+const onDragend = () => {
+  if (innerValue.value?.[0] === props.max && innerValue.value?.[1] === props.max) {
+    model.value = [innerValue.value?.[0]]
+  } else {
+    model.value = innerValue.value
+  }
+}
+
+const getChecked = (value) => {
+  if (Array.isArray(value) && innerValue.value) {
+    if (value[1]) {
+      return innerValue.value[0] === value[0] && innerValue.value[1] === value[1]
+    } else {
+      return innerValue.value[0] === value[0] && innerValue.value[1] === value[0]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

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

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

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

@@ -0,0 +1,50 @@
+<template>
+  <view
+    class="select-tag"
+    :class="[{ 'select-tag-checked': checked, 'select-tag-small': size === 'small' }]"
+  >
+    {{ title }}
+  </view>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'SelectTagView',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+defineProps<{ title: string; checked?: boolean; size?: 'small' | 'normal' }>()
+</script>
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.select-tag {
+  width: 150rpx;
+  height: 56rpx;
+  background: #f5f5f7;
+  border-radius: 53rpx;
+  font-size: 24rpx;
+  color: #333333;
+  line-height: 56rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 6rpx;
+  box-sizing: border-box;
+  text-align: center;
+  margin-bottom: 16rpx;
+  &-checked {
+    background: $-color-theme;
+    color: #ffffff;
+  }
+  &-small {
+    width: 112rpx !important;
+    height: 42rpx !important;
+    border-radius: 21rpx !important;
+    line-height: 42rpx !important;
+    margin-bottom: 0rpx !important;
+  }
+}
+</style>

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

@@ -0,0 +1,159 @@
+<template>
+  <view v-for="item in options" :key="`${item.value}`" @click="onItemClick(item)">
+    <template v-if="item.custom">
+      <view
+        class="select-tag"
+        @click.stop="onCustomClick(item)"
+        :class="{
+          'select-tag-checked': showInput || getChecked(item),
+        }"
+      >
+        <view v-if="showInput" class="flex justify-center items-center">
+          <input
+            type="number"
+            class="text-24rpx min-w-5"
+            focus
+            v-model="inputValue"
+            @input="onInput(item, $event)"
+            @blur="onBlur(item)"
+            @confirm="onConfirm"
+          />
+        </view>
+        <template v-else>
+          <view v-if="item.value" class="text-22rpx leading-none">
+            <view @click.stop="onCustomClick(item, true)">{{ item.label }}</view>
+            <view class="text-16rpx mt-4rpx">自定义</view>
+          </view>
+          <view v-else>自定义</view>
+        </template>
+      </view>
+    </template>
+    <SelectTagView
+      :title="item.label"
+      :checked="getChecked(item)"
+      :custom="item.value === 'custom'"
+      :size="size"
+      v-else
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { TagSelectProps } from './type'
+import useSelect from '../../hooks/useSelect'
+import { ref, watchEffect, nextTick } from 'vue'
+import SelectTagView from '../SelectTagView/index.vue'
+import { Option } from '../../types'
+defineOptions({
+  name: 'TagSelect',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps<TagSelectProps>()
+const model = defineModel<string | string[]>()
+const modelTitle = defineModel<string>('title')
+const showInput = ref(false)
+const inputValue = ref('')
+const { options, onItemClick, getChecked } = useSelect(props, { model })
+watchEffect(() => {
+  modelTitle.value = options.value?.find((v) => v.value === model.value)?.label
+})
+const onCustomClick = (item: Option, edit = false) => {
+  if (item.value && !edit) {
+    onItemClick(item)
+  } else {
+    inputValue.value = `${item.value}`
+    if (props.mode !== 'multiple') {
+      model.value = undefined
+    }
+    showInput.value = true
+  }
+}
+const onBlur = (item: Option) => {
+  if (inputValue.value) {
+    item.label = inputValue.value + item.unit
+    item.value = inputValue.value
+    onItemClick(item)
+  } else {
+    item.value = ''
+    if (props.mode !== 'multiple') {
+      model.value = undefined
+    }
+  }
+  showInput.value = false
+}
+const onConfirm = () => {
+  showInput.value = false
+}
+const onInput = (item: Option, e) => {
+  if (item.max && parseInt(e.detail.value) > item.max) {
+    uni.showToast({
+      title: item.unit + '数最多输入 ' + item.max,
+      icon: 'none',
+    })
+    nextTick(() => {
+      inputValue.value = item.max + ''
+    })
+  } else if (item.min && parseInt(e.detail.value) < item.min) {
+    uni.showToast({
+      title: item.unit + '数最少输入 ' + item.min,
+      icon: 'none',
+    })
+    nextTick(() => {
+      inputValue.value = item.min + ''
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.choose_icon {
+  color: $-color-theme;
+  font-size: $-cell-arrow-size;
+}
+.filter-select {
+  font-size: $-cell-title-fs;
+  position: relative;
+  &__choose {
+    color: $-color-theme;
+    // 透明背景颜色
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.05;
+      background-color: $-color-theme;
+    }
+  }
+}
+.select-tag {
+  width: 150rpx;
+  height: 56rpx;
+  background: #f5f5f7;
+  border-radius: 53rpx;
+  font-size: 24rpx;
+  color: #333333;
+  line-height: 56rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 12rpx;
+  box-sizing: border-box;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 16rpx;
+  &-checked {
+    background: $-color-theme;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+import { FilterItemProps } from '../../types'
+
+export interface TagSelectProps extends FilterItemProps {
+  size?: 'small' | 'normal'
+}