@tplc/business 0.0.6 → 0.0.8

package/components/lcb-banner/lcb-banner.vue

@@ -0,0 +1,57 @@
+<template>
+  <LcbBlock :marginTop :marginBottom>
+    <wd-swiper
+      value-key="url"
+      v-bind="{
+        list: items,
+        loop,
+        height: transformValueUnit(height),
+        radius: transformValueUnit(radius),
+        autoplay: Boolean(interval),
+        direction,
+        itemPadding,
+        imageRadius: transformValueUnit(imageRadius),
+        indicatorPosition,
+        displayMultipleItems,
+        customNextImageClass,
+        interval,
+        indicator: indicator ? { type: indicator } : false,
+        ...supplementProps,
+      }"
+    />
+  </LcbBlock>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { LcbBannerProps } from './types'
+import LcbBlock from '../lcb-block/lcb-block.vue'
+import { transformValueUnit } from '../../utils/transform'
+defineOptions({
+  name: 'LcbBanner',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbBannerProps>(), {
+  styleGroup: 1,
+  radius: 0,
+  slidingStyle: 1,
+})
+const supplementProps = computed(() => {
+  if (props.styleGroup === 2) {
+    return {
+      nextMargin: transformValueUnit(props.previousMargin ?? 24),
+      previousMargin: transformValueUnit(props.previousMargin ?? 24),
+      itemPadding: `0px ${transformValueUnit(props.itemPadding ?? 10)}`,
+      imageRadius: transformValueUnit(props.imageRadius ?? 12),
+      customPrevImageHeight: props.slidingStyle === 2 ? (props.height ?? 24) * 0.8 : undefined,
+      customNextImageHeight: props.slidingStyle === 2 ? (props.height ?? 24) * 0.8 : undefined,
+    } as any
+  }
+  return {}
+})
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-banner/types.ts

@@ -0,0 +1,50 @@
+import { ActionView } from 'global'
+
+export interface LcbBannerProps {
+  items?: Partial<ActionView>[]
+  imageWidth?: number
+  /** 风格 1.平铺 2.卡片 */
+  styleGroup?: 1 | 2
+  autoplay?: boolean
+  /**  滚动方向 默认 horizontal */
+  direction?: 'horizontal' | 'vertical'
+  /** 同时显示的滑块数量 默认 1 */
+  displayMultipleItems?: number
+  /** 滑动时长 300ms */
+  duration?: number
+  /** 轮播图高度  默认192 */
+  height?: number
+  /** 轮播间隔时间 5000ms */
+  interval?: number
+  /** 是否循环播放 默认 true */
+  loop?: boolean
+  /**  后边间距 */
+  nextMargin?: number
+  /** 前边间距 */
+  previousMargin?: number
+  /** 指示器位置 bottom */
+  indicatorPosition?:
+    | 'left'
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right'
+    | 'right'
+  /** 边距是否应用到第一个、最后一个元素 */
+  snapToEdge?: boolean
+  // 图片之间距离
+  itemPadding?: number
+  /** 图片圆角 */
+  imageRadius?: number
+  // 整个banner圆角
+  radius?: number
+  customPrevImageClass?: string
+  customNextImageClass?: string
+  indicator?: 'dots' | 'dots-bar' | 'fraction'
+  /** 滑动样式 1平面 2立体 */
+  slidingStyle?: 1 | 2
+  marginTop?: number
+  marginBottom?: number
+}

package/components/lcb-banner-block/lcb-banner-block.vue

@@ -0,0 +1,70 @@
+<template>
+  <LcbBlock
+    :radius
+    :marginTop
+    :marginBottom
+    :backgroundColor
+    card
+    :marginLeft="12"
+    :marginRight="12"
+    :paddingBottom="styleGroup === 2 ? 0 : 24"
+  >
+    <view
+      class="py-2 px-3 text-3.5 text-#333 flex justify-between items-center"
+      v-if="styleGroup === 1"
+    >
+      <view class="flex-1 flex items-center">
+        <wd-icon name="github-filled" size="30" />
+        <view class="ml-3">
+          <view class="text-#333 text-lg">{{ title }}</view>
+          <view class="text-#999 text-sm">即刻成为开成尊享会员</view>
+        </view>
+      </view>
+      <wd-icon name="arrow-right1" size="24" />
+    </view>
+    <lcb-banner
+      v-bind="bannerProps"
+      :items="items"
+      :height="height"
+      :interval="styleGroup === 1 ? undefined : 2000"
+    />
+    <view
+      class="py-2 px-3 text-3.5 text-#333 flex justify-between items-center"
+      v-if="styleGroup === 2"
+    >
+      <view>{{ title }}</view>
+      <wd-icon name="arrow-right1" size="24" />
+    </view>
+  </LcbBlock>
+</template>
+
+<script setup lang="ts">
+import lcbBanner from '../lcb-banner/lcb-banner.vue'
+import { LcbBannerListProps } from './types'
+import LcbBlock from '../lcb-block/lcb-block.vue'
+import { computed } from 'vue'
+import { LcbBannerProps } from 'components/lcb-banner/types'
+defineOptions({
+  name: 'LcbBannerList',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbBannerListProps>(), {
+  borderRadius: 12,
+  backgroundColor: '#ffffff',
+})
+const bannerProps = computed(() => {
+  if (props.styleGroup === 1) {
+    return {
+      styleGroup: 2,
+      displayMultipleItems: 2,
+      previousMargin: 32,
+    } as LcbBannerProps
+  } else {
+    return {} as LcbBannerProps
+  }
+})
+</script>

package/components/lcb-banner-block/types.ts

@@ -0,0 +1,13 @@
+import { LcbBlockProps } from 'components/lcb-block/types'
+import { ActionView } from 'global'
+export interface LcbBannerListProps extends LcbBlockProps {
+  items?: Partial<ActionView>[]
+  /** 风格 1.顶部title 2.底部title */
+  styleGroup?: 1 | 2
+  /** 轮播图高度  默认192 */
+  height?: number
+  title: string
+  hint?: string
+  rightIcon?: string
+  leftIcon?: string
+}

package/components/lcb-block/lcb-block.vue

@@ -0,0 +1,38 @@
+<template>
+  <view
+    :style="{
+      marginTop: transformValueUnit(marginTop),
+      marginBottom: transformValueUnit(marginBottom),
+      marginLeft: transformValueUnit(marginLeft),
+      marginRight: transformValueUnit(marginRight),
+      padding: `
+        ${transformValueUnit(paddingTop || 0)}
+        ${transformValueUnit(paddingRight || 0)}
+        ${transformValueUnit(paddingBottom || 0)}
+        ${transformValueUnit(paddingLeft || 0)}
+      `,
+      borderRadius: transformValueUnit(radius),
+      color,
+      backgroundColor,
+      fontSize: transformValueUnit(fontSize),
+    }"
+    :class="{
+      card,
+    }"
+    class="box-border overflow-hidden"
+  >
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { LcbBlockProps } from './types'
+import { transformValueUnit } from '../../utils/transform'
+
+withDefaults(defineProps<LcbBlockProps>(), {})
+</script>
+<style lang="scss" scoped>
+.card {
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

package/components/lcb-block/types.ts

@@ -0,0 +1,17 @@
+export interface LcbBlockProps {
+  marginTop?: number
+  marginBottom?: number
+  backgroundColor?: string
+  paddingTop?: number
+  paddingBottom?: number
+  color?: string
+  fontSize?: number
+  bold?: boolean
+  radius?: number
+  customClass?: string
+  card?: boolean
+  paddingLeft?: number
+  paddingRight?: number
+  marginLeft?: number
+  marginRight?: number
+}

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

@@ -0,0 +1,38 @@
+<template>
+  <LcbBlock :marginTop :marginBottom :marginLeft="12" :marginRight="12">
+    <view
+      class="grid gap-2"
+      :style="{
+        'grid-template-columns': `repeat(${cols}, minmax(0, 1fr))`,
+      }"
+    >
+      <wd-img
+        v-for="(item, index) in items"
+        :key="index"
+        :src="item.url"
+        :height="height"
+        :radius="radius"
+        mode="aspectFill"
+      />
+    </view>
+  </LcbBlock>
+</template>
+
+<script setup lang="ts">
+import { LcbGridProps } from './types'
+import LcbBlock from '../lcb-block/lcb-block.vue'
+defineOptions({
+  name: 'Lcbtitle',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbGridProps>(), {
+  height: 100,
+  cols: 2,
+  radius: 8,
+})
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-grid/types.ts

@@ -0,0 +1,8 @@
+import { LcbBlockProps } from '../lcb-block/types'
+import { ActionView } from 'global'
+export interface LcbGridProps extends LcbBlockProps {
+  items?: Partial<ActionView>[]
+  height?: number
+  cols?: number
+  gap?: number
+}

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

@@ -0,0 +1,85 @@
+<template>
+  <lcb-block
+    :marginLeft="12"
+    :marginRight="12"
+    :radius="12"
+    backgroundColor="#fff"
+    :marginTop="-(marginTop || 0)"
+  >
+    <view class="flex w-full bg-#F5F6F9">
+      <view
+        v-for="(item, index) in tabs"
+        :key="item"
+        class="search-tab"
+        @click="current = index"
+        :class="{
+          active: current === index,
+        }"
+      >
+        {{ 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="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>
+        </view>
+      </view>
+      <view class="w-full h-1rpx bg-#f4f4f4 my-3"></view>
+      <view class="flex items-center">
+        <view class="title">6月12日</view>
+        <view class="hint ml-1">今天入住</view>
+        <view class="title mx-2">——</view>
+        <view class="title">6月13日</view>
+        <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>
+    </view>
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import LcbBlock from '../lcb-block/lcb-block.vue'
+defineProps<{ marginTop?: number }>()
+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;
+}
+.title {
+  font-weight: 600;
+  font-size: 30rpx;
+  color: #333;
+}
+.hint {
+  font-size: 26rpx;
+  color: #999;
+}
+.tag {
+  padding: 4rpx 20rpx;
+  font-size: 24rpx;
+  color: #999;
+  background-color: #f1f1f1;
+  border-radius: 24rpx;
+}
+</style>

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

@@ -20,7 +20,7 @@
           borderRadius: (iconType === 1 ? iconRadius : 0) + 'rpx',
           color: iconColor,
           marginBottom: iconTextMargin + 'rpx',
-          backgroundImage: iconType === 1 ? 'url(' + item.img + ')' : '',
+          backgroundImage: iconType === 1 ? 'url(' + item.url + ')' : '',
           backgroundSize: '100% 100%',
         }"
         :class="{
@@ -37,6 +37,8 @@
 </template>
 
 <script lang="ts" setup>
+import { LcbImgNavProps } from './types'
+
 defineOptions({
   name: 'LcbImgNav',
   options: {
@@ -45,42 +47,8 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-interface LcbImgNavProps {
-  /** 模式 1.单行 2.多行 */
-  styleGroup?: 1 | 2
-  /** 文字颜色 #212121 */
-  textColor?: string
-  /** 背景颜色 #ffffff */
-  bgColor?: string
-  /** 背景图片 */
-  bgImg?: string
-  /** 图标颜色 #212121 */
-  iconColor?: string
-  /** 图标类型 0.系统 1.自定义 */
-  iconType?: 0 | 1
-  /** 数据内容 */
-  items?: {
-    title: string
-    icon?: string
-    link: string
-    img?: string
-  }[]
-  /** 上边距 */
-  topMargin?: 0 | 24 | 36
-  /** 下边距 */
-  bottomMargin?: 0 | 24 | 36
-  /** 排布方式每行几个 */
-  pictureDistribution?: 3 | 4 | 5
-  /** 左右间距 */
-  leftRightMargin?: number
-  /** 图标尺寸 0.小40px  2.大50px */
-  iconSize?: number
-  /** 图标圆角 默认 0 */
-  iconRadius?: number
-  /** 文字与图标距离 */
-  iconTextMargin?: number
-}
-const props = withDefaults(defineProps<LcbImgNavProps>(), {
+
+withDefaults(defineProps<LcbImgNavProps>(), {
   bgColor: '#ffffff',
   textColor: '#212121',
   iconColor: '#212121',

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

@@ -0,0 +1,32 @@
+import { ActionView } from 'global'
+
+export interface LcbImgNavProps {
+  /** 模式 1.单行 2.多行 */
+  styleGroup?: 1 | 2
+  /** 文字颜色 #212121 */
+  textColor?: string
+  /** 背景颜色 #ffffff */
+  bgColor?: string
+  /** 背景图片 */
+  bgImg?: string
+  /** 图标颜色 #212121 */
+  iconColor?: string
+  /** 图标类型 0.系统 1.自定义 */
+  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 */
+  iconRadius?: number
+  /** 文字与图标距离 */
+  iconTextMargin?: number
+}

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

@@ -0,0 +1,59 @@
+<template>
+  <view
+    :class="{
+      center_mod: !left,
+      'pl-7': back && !left,
+      'pr-80px': hasCapsule,
+    }"
+  >
+    <view class="search-input">
+      <wd-icon name="search" color="#a1a1a1" />
+      <view class="search-text" v-if="!left">{{ searchText }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+const hasCapsule = Boolean(uni.getMenuButtonBoundingClientRect)
+
+defineProps({
+  searchText: {
+    type: String,
+    default: '搜索',
+  },
+  left: {
+    type: Boolean,
+  },
+  back: {
+    type: Boolean,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.center_mod {
+  flex: 1 1;
+}
+.search-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 64rpx;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #a1a1a1;
+  background: #f5f5f5;
+  border-radius: 32rpx;
+
+  .search-text {
+    flex: 1 1;
+    margin-left: 12rpx;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <view class="titleContainer" v-if="titleMode === 'text'">
+    <view class="images mr-2" v-if="logoImg">
+      <img :src="logoImg" />
+    </view>
+    <view class="title">{{ title }}</view>
+  </view>
+  <view class="images" v-else>
+    <img :src="typographyTextBackground" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { NavTitleProps } from './types'
+
+defineProps<NavTitleProps>()
+</script>
+<style lang="scss" scoped>
+.titleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .title {
+    max-width: 300rpx;
+    overflow: hidden;
+    font-size: 32rpx;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.images {
+  width: auto;
+  max-width: 320rpx !important;
+  height: 100%;
+  overflow: hidden;
+
+  img {
+    min-width: 50rpx;
+    height: 50rpx;
+    border-radius: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+    -o-object-position: center;
+    object-position: center;
+  }
+}
+</style>