@tplc/business 0.0.18 → 0.0.22

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

@@ -1,12 +1,6 @@
 <template>
-  <lcb-block
-    :marginLeft="24"
-    :marginRight="24"
-    :radius="16"
-    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,6 +8,8 @@
         @click="current = index"
         :class="{
           active: current === index,
+          'active-left': index === current - 1,
+          'active-right': index === current + 1,
         }"
       >
         {{ item }}
@@ -22,48 +18,61 @@
     <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>
-        <wd-icon name="chevron-down-circle" size="30rpx"></wd-icon>
+        <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="30rpx"></wd-icon>
-          </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-1px bg-#F1F1F1 mt-26rpx mb-44rpx"></view>
       <view class="flex items-center">
-        <view class="title">6月12日</view>
+        <view class="title">{{ dayRange[0].format('MM月DD日') }}</view>
         <view class="hint ml-1">今天入住</view>
-        <view class="title mx-2">——</view>
-        <view class="title">6月13日</view>
+        <view class="title mx-1">——</view>
+        <view class="title">{{ dayRange[1].format('MM月DD日') }}</view>
         <view class="hint ml-1 flex-1">明天离店</view>
-        <view class="tag">共1晚</view>
+        <view class="tag">共{{ nightCount }}晚</view>
       </view>
-      <wd-button type="primary" customClass="!w-full my-42rpx" size="large">搜索酒店</wd-button>
+      <wd-button type="primary" customClass="!w-full my-42rpx" size="large">
+        {{ btnText }}
+      </wd-button>
       <view
         class="px-50rpx flex justify-between items-center mb-42rpx text-#000 text-28rpx"
         v-if="items?.length"
       >
-        <view
+        <lcb-action-view
           v-for="item in items"
           :key="item.title"
-          class="flex justify-center items-center gap-16rpx"
+          v-bind="item.link"
+          customClass="!flex justify-center items-center gap-16rpx"
         >
           <img :src="item.url" class="w-36rpx h-36rpx" />
           {{ item.title }}
-        </view>
+        </lcb-action-view>
       </view>
     </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { LcbHomeSearch } from './types'
-
+import dayjs from 'dayjs'
+const dayRange = ref([dayjs(), dayjs().add(1, 'day')])
+const nightCount = computed(() => {
+  return dayRange.value[1].diff(dayRange.value[0], 'day')
+})
 defineOptions({
   name: 'LcbHomeSearch',
   options: {
@@ -73,23 +82,42 @@ defineOptions({
   },
 })
 
-withDefaults(defineProps<LcbHomeSearch>(), { placeholder: '位置|酒店|关键词' })
+withDefaults(defineProps<LcbHomeSearch>(), {
+  marginHorizontal: 24,
+  backgroundColor: '#fff',
+  radius: 16,
+  placeholder: '位置|酒店|关键词',
+  btnText: '搜索酒店',
+})
 const tabs = ['全部', '酒店', '民宿']
 const current = ref(0)
 </script>
 <style lang="scss" scoped>
-.search-tab {
-  flex: 1;
-  text-align: center;
-  font-size: 30rpx;
-  padding: 24rpx 0;
-  color: #999;
-}
-.active {
-  background-color: #fff;
-  color: #000;
-  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: bold;
   font-size: 32rpx;

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

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

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,91 @@
+<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="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),
+    }">
+      <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(-(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 { 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
+  floatUp?: number
+  marginBottom?: number
+}

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

@@ -1,45 +1,47 @@
 <template>
-  <view
-    class="box-border"
-    :style="{
-      backgroundColor: bgColor,
-      color: textColor,
-      gridTemplateColumns: `repeat(${pictureDistribution}, minmax(0, 1fr))`,
-      padding: `${topMargin}rpx ${leftRightMargin}rpx ${bottomMargin}rpx`,
-      backgroundImage: bgImg ? `url(${bgImg})` : '',
-      backgroundSize: '100% 100%',
-    }"
-    :class="[styleGroup === 2 ? 'mutil' : 'single']"
-  >
-    <view v-for="item in items" :key="item.title" class="flex flex-col justify-center items-center">
-      <view
-        class="overflow-hidden"
-        :style="{
-          marginBottom: iconTextMargin + 'rpx',
-        }"
+  <lcb-block v-bind="$props">
+    <view
+      :style="{
+        gridTemplateColumns: `repeat(${pictureDistribution}, minmax(0, 1fr))`,
+      }"
+      :class="[styleGroup === 2 ? 'mutil' : 'single']"
+    >
+      <lcb-action-view
+        v-for="item in items"
+        :key="item.title"
+        v-bind="item.link"
+        custom-class="!flex flex-col justify-center items-center"
       >
-        <div v-if="iconType === 0" class="flex justify-center items-center">
+        <view
+          class="overflow-hidden"
+          :style="{
+            marginBottom: iconTextMargin + 'rpx',
+          }"
+        >
+          <!-- <div v-if="iconType === 0" class="flex justify-center items-center"> -->
           <wd-icon
+            v-if="iconType === 0"
             class-prefix="iconfont"
             :name="item.icon!"
             :size="iconSize + 'rpx'"
             :color="iconColor"
           />
-        </div>
-        <img
-          v-else
-          class="block"
-          :style="{
-            borderRadius: iconRadius + 'rpx',
-            height: iconSize + 'rpx',
-            width: iconSize + 'rpx',
-          }"
-          :src="item.url"
-        />
-      </view>
-      <view class="title">{{ item.title }}</view>
+          <!-- </div> -->
+          <img
+            v-else
+            class="block"
+            :style="{
+              borderRadius: iconRadius + 'rpx',
+              height: iconSize + 'rpx',
+              width: iconSize + 'rpx',
+            }"
+            :src="item.url"
+          />
+        </view>
+        <view class="title">{{ item.title }}</view>
+      </lcb-action-view>
     </view>
-  </view>
+  </lcb-block>
 </template>
 
 <script lang="ts" setup>
@@ -55,14 +57,12 @@ defineOptions({
 })
 
 withDefaults(defineProps<LcbImgNavProps>(), {
-  bgColor: '#ffffff',
   textColor: '#212121',
   iconColor: '#212121',
   iconRadius: 0,
-  topMargin: 36,
-  bottomMargin: 36,
+  paddingVertical: 36,
   iconSize: 80,
-  leftRightMargin: 0,
+  paddingHorizontal: 0,
   iconTextMargin: 4,
   pictureDistribution: 4,
 })

package/components/lcb-img-nav/types.ts

@@ -1,12 +1,11 @@
 import { ActionView } from 'action'
+import { LcbBlockProps } from '../lcb-block/types'
 
-export interface LcbImgNavProps {
+export interface LcbImgNavProps extends LcbBlockProps {
   /** 模式 1.单行 2.多行 */
   styleGroup?: 1 | 2
   /** 文字颜色 #212121 */
   textColor?: string
-  /** 背景颜色 #ffffff */
-  bgColor?: string
   /** 背景图片 */
   bgImg?: string
   /** 图标颜色 #212121 */
@@ -15,14 +14,8 @@ export interface LcbImgNavProps {
   iconType?: 0 | 1
   /** 数据内容 */
   items?: ActionView[]
-  /** 上边距 */
-  topMargin?: 0 | 24 | 36
-  /** 下边距 */
-  bottomMargin?: 0 | 24 | 36
   /** 排布方式每行几个 */
   pictureDistribution?: 3 | 4 | 5
-  /** 左右间距 */
-  leftRightMargin?: number
   /** 图标尺寸 0.小40px  2.大50px */
   iconSize?: number
   /** 图标圆角 默认 0 */

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

@@ -38,10 +38,15 @@
             class="h-full flex items-center"
             @click="onCapsule(item)"
             v-for="item in capsuleList"
-            :key="item.icon"
+            :key="item.action"
             :class="[capsuleList.length === 1 ? 'px-2' : 'px-2.5']"
           >
-            <wd-icon class-prefix="iconfont" :name="item.icon" size="36rpx" :color="contentColor" />
+            <wd-icon
+              class-prefix="iconfont"
+              :name="iconMap[item.action]"
+              size="36rpx"
+              :color="contentColor"
+            />
           </view>
         </view>
         <template v-else-if="back">
@@ -88,7 +93,6 @@ import Title from './Title/index.vue'
 import Search from './Search/index.vue'
 import { onPageScroll } from '@dcloudio/uni-app'
 
-const { statusBarHeight } = uni.getSystemInfoSync()
 defineOptions({
   name: 'LcbNav',
   options: {
@@ -97,6 +101,15 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const { statusBarHeight } = uni.getSystemInfoSync()
+const iconMap = {
+  back: 'dingdanliebiao',
+  search: 'a-xingzhuang23kaobei',
+  scanCode: 'a-xingzhuang106',
+  translate: 'a-xingzhuang22',
+  setting: 'shezhi',
+  home: 'tingshi',
+}
 const scrollTop = ref(0)
 const props = withDefaults(defineProps<NavProps>(), {
   styleGroup: 1,
@@ -147,26 +160,41 @@ const capsuleList = computed(() => {
   if (props.back) {
     list.push({
       icon: 'chevron-left',
-      action: 'link',
+      action: 'back',
     })
   }
 
   return [...list, ...(props.capsules || [])] as ICapsule[]
 })
-const onCapsule = ({ action = 'link', link }: ICapsule) => {
+const onCapsule = ({ action }: ICapsule) => {
   switch (action) {
-    case 'link':
-      if (link) {
-        uni.navigateTo({
-          url: link,
-        })
-      } else {
-        toBack()
-      }
+    case 'back':
+      toBack()
+      break
+    case 'search':
+      uni.navigateTo({
+        url: '/pages/search/index',
+      })
       break
+    case 'scanCode':
+      uni.scanCode({
+        success: (res) => {
+          console.log(res)
+        },
+      })
+      break
+    case 'translate':
+      toBack()
+      break
+    case 'setting':
+      uni.navigateTo({
+        url: '/pages/setting/index',
+      })
+      break
+
     case 'home':
       uni.switchTab({
-        url: '/pages/home/index',
+        url: '/pages/index/index',
       })
       break
   }

package/components/lcb-nav/types.ts

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