@tplc/business 0.0.17 → 0.0.20

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

@@ -1,6 +1,18 @@
 <template>
-  <view>
-    <wd-slider hide-label :max="max" :min="min" v-model="innerValue" @dragend="onDragend" />
+  <view class="filter-slider">
+    <wd-slider
+      hide-label
+      :max="max"
+      :min="min"
+      :minText="`${unit}${min}`"
+      :maxText="`${unit}${max}+`"
+      v-model="innerValue"
+      @dragend="onDragend"
+      ref="slider"
+      custom-class="px-4"
+      custom-min-class="left-0  slider-text"
+      custom-max-class="right--2 slider-text"
+    />
     <view class="grid grid-cols-4 gap-4 mt-2">
       <SelectTagView
         v-for="item in options"
@@ -17,7 +29,8 @@
 <script setup lang="ts">
 import { FilterSliderProps } from './types'
 import SelectTagView from '../SelectTagView/index.vue'
-import { ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import type { SliderInstance } from '@tplc/wot/components/wd-slider/types'
 defineOptions({
   name: 'FilterSlider',
   options: {
@@ -26,6 +39,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const slider = ref<SliderInstance>()
 const props = defineProps<FilterSliderProps>()
 const model = defineModel<number[]>()
 const innerValue = ref<number[]>()
@@ -38,6 +52,17 @@ const onItemClick = (value) => {
     }
   }
 }
+
+const onDropOpened = () => {
+  slider.value?.initSlider()
+}
+
+onMounted(() => {
+  uni.$on('drop-opened', onDropOpened)
+})
+onUnmounted(() => {
+  uni.$off('drop-opened', onDropOpened)
+})
 watch(
   () => model.value,
   (val) => {
@@ -67,4 +92,15 @@ const getChecked = (value) => {
   }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.filter-slider {
+  position: relative;
+  padding-top: 24rpx;
+  :deep(.slider-text) {
+    color: #999 !important;
+    font-size: 24rpx !important;
+    position: absolute;
+    margin-bottom: 100rpx;
+  }
+}
+</style>

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

@@ -5,7 +5,7 @@
         <view
           v-for="(item, index) in options"
           :key="item.label"
-          @click="currentCategory = index"
+          @click="onCategoryClick(index)"
           class="filter-select flex justify-between items-center"
           :class="currentCategory === index ? 'filter-select__choose' : ''"
         >
@@ -24,8 +24,15 @@
           <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">
+      <scroll-view
+        scroll-y
+        :scroll-into-view="toView"
+        scroll-with-animation
+        class="flex-1 w-0 bg-#FAFAFA pl-4 scroll-view pt-32rpx"
+        @scroll="onGridScroll"
+        v-else
+      >
+        <view v-for="(item, index) in options" :key="item.label" :id="`grid_${index}`">
           <view class="filter-select__title">
             {{ item.label }}
           </view>
@@ -40,7 +47,7 @@
             />
           </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
     <ActionView
       :disabled="!Boolean(innerValue)"
@@ -51,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, getCurrentInstance, nextTick, watch, ref } from 'vue'
 import { TreeSelectProps } from './type'
 import useSelect from '../../hooks/useSelect'
 import SelectTagView from '../SelectTagView/index.vue'
@@ -68,6 +75,8 @@ const props = defineProps<TreeSelectProps>()
 const model = defineModel<string | string[]>()
 const modelTitle = defineModel<string>('title')
 const innerValue = ref(model.value)
+const toView = ref('')
+const itemTopPositions = ref<{ top: number; bottom: number }[]>([])
 const emits = defineEmits(['submit'])
 const { onItemClick, options, getChecked } = useSelect(props, { model: innerValue })
 const currentCategory = ref(0)
@@ -91,6 +100,37 @@ const onSubmit = () => {
     emits('submit')
   })
 }
+const onCategoryClick = (index: number) => {
+  currentCategory.value = index
+  toView.value = `grid_${index}`
+}
+const { proxy } = getCurrentInstance() as any
+watch(
+  () => options.value,
+  () => {
+    nextTick(() => {
+      const query = uni.createSelectorQuery().in(proxy)
+      options.value.forEach((_, index) => {
+        query.select(`#grid_${index}`).boundingClientRect()
+      })
+      query.exec((res) => {
+        console.log(res)
+        itemTopPositions.value = res.map((rect) => ({ top: rect.top, bottom: rect.bottom }))
+      })
+    })
+  },
+  {
+    immediate: true,
+  },
+)
+const onGridScroll = (e) => {
+  const scrollTop = e.detail.scrollTop
+  itemTopPositions.value.forEach((pos, index) => {
+    if (pos.top <= scrollTop + 100) {
+      currentCategory.value = index
+    }
+  })
+}
 </script>
 <style lang="scss" scoped>
 @import '@tplc/wot/components/common/abstracts/variable';
@@ -112,6 +152,9 @@ const onSubmit = () => {
     font-size: 30rpx;
     color: $-color-theme;
     margin-bottom: 30rpx;
+    &:first-child {
+      margin-top: 0;
+    }
   }
   &__choose {
     color: $-color-theme;

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

@@ -9,6 +9,7 @@
         icon-size="26px"
         :selected="getSelect(item)"
         ref="dropMenu"
+        @opened="handleOpened"
       >
         <view class="lcb-filter__popup">
           <FilterSelect
@@ -118,6 +119,9 @@ const getSelect = (item: FilterComponent) => {
     return Boolean(filter.value[item.valueName])
   }
 }
+const handleOpened = () => {
+  uni.$emit('drop-opened')
+}
 </script>
 
 <style lang="scss" scoped>

package/components/lcb-gap/lcb-gap.vue

@@ -0,0 +1,23 @@
+<template>
+  <wd-gap
+    :height="transformValueUnit(height)"
+    :safe-area-bottom="safeAreaBottom"
+    :bg-color="bgColor"
+  />
+</template>
+
+<script setup lang="ts">
+import { LcbGapProps } from './types'
+import { transformValueUnit } from '../../utils/transform'
+defineOptions({
+  name: 'LcbGap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbGapProps>(), {})
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-gap/types.ts

@@ -0,0 +1,5 @@
+export interface LcbGapProps {
+  height?: number
+  safeAreaBottom?: boolean
+  bgColor?: string
+}

package/components/lcb-grid/lcb-grid.vue

@@ -1,12 +1,5 @@
 <template>
-  <lcb-block
-    v-bind="{
-      marginTop,
-      marginBottom,
-      marginLeft: 12,
-      marginRight: 12,
-    }"
-  >
+  <lcb-block v-bind="$props">
     <view
       class="grid gap-2"
       :style="{
@@ -17,8 +10,8 @@
         v-for="(item, index) in items"
         :key="index"
         :src="item.url"
-        :height="height"
-        :radius="radius"
+        :height="transformValueUnit(height)"
+        :radius="transformValueUnit(radius)"
         mode="aspectFill"
       />
     </view>
@@ -27,6 +20,7 @@
 
 <script setup lang="ts">
 import { LcbGridProps } from './types'
+import { transformValueUnit } from '../../utils/transform'
 defineOptions({
   name: 'LcbGrid',
   options: {
@@ -36,6 +30,7 @@ defineOptions({
   },
 })
 withDefaults(defineProps<LcbGridProps>(), {
+  marginHorizontal: 24,
   height: 100,
   cols: 2,
   radius: 8,

package/components/lcb-home-search/lcb-home-search.vue

@@ -1,12 +1,6 @@
 <template>
-  <lcb-block
-    :marginLeft="12"
-    :marginRight="12"
-    :radius="12"
-    backgroundColor="#fff"
-    :marginTop="-(marginTop || 0)"
-  >
-    <view class="flex w-full bg-#F5F6F9">
+  <lcb-block v-bind="$props">
+    <view class="flex w-full search-view overflow-hidden">
       <view
         v-for="(item, index) in tabs"
         :key="item"
@@ -14,24 +8,34 @@
         @click="current = index"
         :class="{
           active: current === index,
+          'active-left': index === current - 1,
+          'active-right': index === current + 1,
         }"
       >
         {{ item }}
       </view>
     </view>
-    <view class="box-border px-3">
-      <view class="flex items-center justify-center mt-3 text-#333 gap-2">
-        <view class="text-4">义乌</view>
-        <wd-icon name="chevron-down-circle" size="22px"></wd-icon>
-        <view class="h-24px w-1rpx bg-#f4f4f4"></view>
-        <view class="text-#999 text-4">位置|酒店|关键词</view>
+    <view class="box-border px-3 leading-none">
+      <view class="flex items-center justify-center mt-3 text-#333 gap-16rpx">
+        <view class="text-30rpx font-bold">义乌</view>
+        <img
+          class="w-30rpx h-30rpx"
+          mode="aspectFit"
+          src="https://ddll-lycs.oss-cn-hangzhou.aliyuncs.com/default/1/20240914164446/%E5%BD%A2%E7%8A%B6%2092%402x.png"
+        />
+        <view class="h-42rpx w-1px bg-#F1F1F1"></view>
+        <view class="text-#999 text-28rpx">{{ placeholder }}</view>
         <view class="flex-1"></view>
         <view class="justify-center flex flex-col items-center">
-          <view><wd-icon name="play-circle-stroke" size="22px"></wd-icon></view>
-          <view>当前位置</view>
+          <img
+            class="w-30rpx h-30rpx"
+            mode="aspectFit"
+            src="https://ddll-lycs.oss-cn-hangzhou.aliyuncs.com/default/1/20240914164707/%E5%BD%A2%E7%8A%B6%2095%402x.png"
+          />
+          <view class="text-26rpx text-#333 mt-12rpx">当前位置</view>
         </view>
       </view>
-      <view class="w-full h-1rpx bg-#f4f4f4 my-3"></view>
+      <view class="w-full h-1px bg-#F1F1F1 mt-26rpx mb-44rpx"></view>
       <view class="flex items-center">
         <view class="title">6月12日</view>
         <view class="hint ml-1">今天入住</view>
@@ -40,14 +44,27 @@
         <view class="hint ml-1 flex-1">明天离店</view>
         <view class="tag">共1晚</view>
       </view>
-      <wd-button type="primary" customClass="!w-full my-5" size="large">搜索酒店</wd-button>
-      <view></view>
+      <wd-button type="primary" customClass="!w-full my-42rpx" size="large">搜索酒店</wd-button>
+      <view
+        class="px-50rpx flex justify-between items-center mb-42rpx text-#000 text-28rpx"
+        v-if="items?.length"
+      >
+        <view
+          v-for="item in items"
+          :key="item.title"
+          class="flex justify-center items-center gap-16rpx"
+        >
+          <img :src="item.url" class="w-36rpx h-36rpx" />
+          {{ item.title }}
+        </view>
+      </view>
     </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { LcbHomeSearch } from './types'
 
 defineOptions({
   name: 'LcbHomeSearch',
@@ -58,37 +75,55 @@ defineOptions({
   },
 })
 
-defineProps<{ marginTop?: number }>()
+withDefaults(defineProps<LcbHomeSearch>(), {
+  marginHorizontal: 24,
+  backgroundColor: '#fff',
+  radius: 16,
+  placeholder: '位置|酒店|关键词',
+})
 const tabs = ['全部', '酒店', '民宿']
 const current = ref(0)
 </script>
 <style lang="scss" scoped>
-.search-tab {
-  flex: 1;
-  text-align: center;
-  font-size: 32rpx;
-  padding: 16rpx 0;
-  color: #999;
-}
-.active {
-  background-color: #fff;
-  color: #333;
-  font-weight: bold;
+.search-view {
+  border-radius: 16rpx;
+  .search-tab {
+    flex: 1;
+    text-align: center;
+    font-size: 30rpx;
+    padding: 24rpx 0;
+    color: #999;
+    background-color: #f5f6f9;
+  }
+  .active {
+    background-color: #fff;
+    color: #000;
+    font-weight: bold;
+    border-top-left-radius: 16rpx;
+    border-top-right-radius: 16rpx;
+    &-left {
+      border-bottom-right-radius: 16rpx;
+    }
+    &-right {
+      border-bottom-left-radius: 16rpx;
+    }
+  }
 }
+
 .title {
-  font-weight: 600;
-  font-size: 30rpx;
-  color: #333;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #000;
 }
 .hint {
-  font-size: 26rpx;
+  font-size: 24rpx;
   color: #999;
 }
 .tag {
-  padding: 4rpx 20rpx;
-  font-size: 24rpx;
+  padding: 5rpx 12rpx;
+  font-size: 20rpx;
   color: #999;
   background-color: #f1f1f1;
-  border-radius: 24rpx;
+  border-radius: 16rpx;
 }
 </style>

package/components/lcb-home-search/types.ts

@@ -0,0 +1,7 @@
+import { ActionView } from 'action'
+import { LcbBlockProps } from '../lcb-block/types'
+
+export interface LcbHomeSearch extends LcbBlockProps {
+  placeholder?: string
+  items?: Partial<ActionView>[]
+}

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

@@ -0,0 +1,96 @@
+<template>
+  <view
+    v-for="(item, index) in items"
+    :key="index"
+    :class="styleGroup == 2 ? 'flex-1' : ''"
+    :style="{
+      marginLeft: transformValueUnit(styleGroup != 1 && index > 0 ? imageMargin : 0),
+      marginTop: transformValueUnit(styleGroup == 1 && index > 0 ? imageMargin : 0),
+      // marginLeft: transformValueUnit(styleGroup == 2 && index > 0 ? imageMargin : 0),
+      width: styleGroup == 3 ? transformValueUnit(imageSize) : 'auto',
+    }"
+  >
+    <view class="relative overflow-hidden">
+      <wd-img
+        v-if="!!item.url"
+        :width="`${styleGroup == 3 ? transformValueUnit(imageSize) : '100%'}`"
+        @click="item.mode == 1 && onClickItem(item)"
+        :src="item.url"
+        :enable-preview="enablePreview"
+        mode="widthFix"
+        :class="`${styleGroup == 3 ? 'overflow-hidden' : 'overflow-hidden block'}`"
+        :style="{
+          borderRadius: transformValueUnit(imageRadius),
+          display: 'block',
+        }"
+      />
+
+      <view
+        v-if="!item.url"
+        class="flex justify-center items-center bg-light color-gray overflow-hidden"
+        :style="{
+          height: transformValueUnit(styleGroup == 3 ? 300 : 400),
+          borderRadius: transformValueUnit(imageRadius),
+        }"
+      >
+        <wd-icon name="image" size="50px"></wd-icon>
+      </view>
+
+      <view
+        v-for="(each, edx) in item.hotSpot"
+        :key="edx"
+        class="link absolute"
+        :style="{
+          width: transformValueUnit(getRealSize(each.width)),
+          height: transformValueUnit(getRealSize(each.height)),
+          left: transformValueUnit(getRealSize(each.x)),
+          top: transformValueUnit(getRealSize(each.y)),
+        }"
+      >
+        <lcb-action-view v-bind="each.urlObj" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { LcbImageProps } from '../types'
+import { transformValueUnit } from '../../../utils/transform'
+
+// defineProps<LcbImageProps>() @click="onClickItem(each.urlObj)"
+
+function onClickItem(item: any) {
+  if (item?.link) {
+    uni.navigateTo({
+      url: item.link,
+    })
+  }
+}
+
+const props = withDefaults(defineProps<LcbImageProps>(), {
+  imageMargin: 0,
+})
+
+function getRealSize(size: number = 0) {
+  const mode = props.styleGroup
+  const lens = props.items?.length || 1
+  let realWidth = (mode === 1 ? 750 : mode === 2 ? 750 / lens : props.imageSize) || 0
+  if (mode !== 3 && props.marginHorizontal) realWidth -= props.marginHorizontal * 2
+  const imgSpan = props.imageMargin
+  if (mode === 2 && imgSpan) realWidth -= (lens - 1) / 2
+  return (realWidth / 375) * size
+}
+</script>
+<style lang="scss" scoped>
+.link {
+  .lcb-action-btn {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<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),
+  }"><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(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),
+    }">
+      <wd-img v-if="!!item.url" v-bind="{
+        src: item.url,
+        class: 'overflow-hidden block',
+      }" @click="onClickItem(item)" width="100%" :enable-preview="enablePreview" mode="widthFix" :style="{
+        borderRadius: transformValueUnit(imageRadius),
+        display: 'block',
+      }" />
+      <view v-if="!item.url" class="flex justify-center items-center bg-light color-gray overflow-hidden" :style="{
+        height: transformValueUnit(400),
+        borderRadius: transformValueUnit(imageRadius),
+      }"><wd-icon name="image" size="50px"></wd-icon></view>
+    </view> -->
+    <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(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 { transformValueUnit } from '../../utils/transform'
+import Image from './Image/index.vue'
+import { LcbImageProps } from './types'
+defineOptions({
+  name: 'LcbImage',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbImageProps>(), {
+  styleGroup: 1,
+  imageMargin: 0,
+  imageSize: 300,
+  marginTop: 0,
+  marginBottom: 0,
+  marginHorizontal: 0,
+})
+
+const imageProps = computed(() => {
+  return {
+    items: props.items,
+    imageSize: props.imageSize,
+    imageMargin: props.imageMargin,
+    imageRadius: props.imageRadius,
+    enablePreview: props.enablePreview,
+    styleGroup: props.styleGroup,
+  }
+})
+
+const iconItems = computed(() => {
+  console.log('props.items', props.items)
+  return props.items;
+})
+
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-image/types.ts

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