@tplc/business 0.0.20 → 0.0.24

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.24](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.23...v0.0.24) (2024-09-25)
+
+### [0.0.23](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.9...v0.0.23) (2024-09-25)
+
+### [0.0.22](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.21...v0.0.22) (2024-09-24)
+
+### [0.0.21](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.7...v0.0.21) (2024-09-24)
+
+
+### ✨ Features | 新功能
+
+* banner grid 新增链接 ([06ea3f9](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/06ea3f9203a04867ee71b01239f046d242f4ee3a))
+* banner 新增click ([e95fc15](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/e95fc15c6620ad5de70854a572eab5b3800cbf3c))
+* home-search支持点击 ([726fe69](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/726fe6974f0f5c83a92ddcf4c5f4d471e9bcfe28))
+* navImg 跳转 ([27e9d65](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/27e9d659770441e72e996a565820a98fdc8c48d0))
+* update version ([6aeee95](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6aeee95a18ab4a1091253c6b2a8bec76e3a63886))
+* 图片间隙 ([ce3501b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ce3501be567230d88e09abc5166941edc5c45ec0))
+* 支持nav action ([1ad0c00](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1ad0c001b8ecaa35041131ee3c3359f6b715c962))
+* 调整customClass ([74e83ce](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/74e83ce404fb3ccc73e0fb6c7065511e417d7470))
+* 调整swiper布局 ([faa2e24](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/faa2e244ed4e2929b91249b41256d6ab9055082a))
+* 跳转jumpType ([1a89c12](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1a89c12457388ed7875b4ce990c959e8e997407e))
+
 ### [0.0.20](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.19...v0.0.20) (2024-09-22)
 
 ### 0.0.19 (2024-09-22)

package/action.d.ts

@@ -1,7 +1,8 @@
+import { LcbActionViewProps } from './components/lcb-action-view/types'
 export interface ActionView {
   title: string
   icon?: string
-  link: string
+  link: LcbActionViewProps
   url?: string
   mode: number
   hotSpot?: {

package/components/lcb-action-view/lcb-action-view.vue

@@ -4,6 +4,7 @@
     class="lcb-action-btn"
     :open-type="openType"
     @getphonenumber="getPhoneNumber"
+    :class="customClass"
   >
     <slot />
   </button>
@@ -22,10 +23,10 @@ defineOptions({
 })
 const props = defineProps<LcbActionViewProps>()
 const openType = computed(() => {
-  return { 88: 'getPhoneNumber', 12: 'contact' }[props.jumpType]
+  return { 88: 'getPhoneNumber', 12: 'contact' }[props.jumpType || '']
 })
 const onActionClick = () => {
-  const { jumpAppid, jumpPageUrl: url, jumpType, phoneNumber } = props
+  const { jumpAppid, jumpUrl: url, jumpType, phoneNumber } = props
   /**
    * 跳转类型 1: 网页 2: 小程序内页 10: 跳转小程序 11: 跳转半屏小程序 12: 小程序客服
    * 13: 退出登录 14: 小程序弹框 21: 新窗口跳到页面 22: 切换TAB页 23: 重启进入某页面
@@ -138,6 +139,8 @@ const getPhoneNumber = (e) => {
   color: inherit;
   font-size: inherit;
   display: inline-block;
+  line-height: normal;
+  border-radius: inherit;
   &::after {
     border: none;
   }

package/components/lcb-action-view/types.ts

@@ -4,10 +4,11 @@ export interface LcbActionViewProps {
    * 13: 退出登录 14: 小程序弹框 21: 新窗口跳到页面 22: 切换TAB页 23: 重启进入某页面
    * 24: 回到上一层 25: 关闭当前页面 26: 关闭当前窗口 30: 拨打电话 88: 授权手机号
    */
-  jumpType: 1 | 2 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 88
+  jumpType?: 1 | 2 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 88
   /** 跳转路径 */
-  jumpPageUrl?: string
+  jumpUrl?: string
   /** 小程序appid */
   jumpAppid?: string
   phoneNumber?: string
+  customClass?: string
 }

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

@@ -3,6 +3,7 @@
     <lcb-block v-bind="$props">
       <wd-swiper
         value-key="url"
+        action
         v-bind="{
           list: items,
           loop,

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

@@ -12,17 +12,17 @@
         <wd-icon class-prefix="iconfont" name="a-xingzhuang97" size="24rpx" color="#666666" />
       </view>
       <scroll-view scroll-x class="w-full whitespace-nowrap pb-24rpx">
-        <img
-          v-for="(item, index) in items"
-          :key="index"
-          :src="item.url"
-          class="inline-block"
-          :style="{
-            height: transformValueUnit(height),
-            width: transformValueUnit(imgWidth),
-            marginRight: transformValueUnit(itemPadding),
-          }"
-        />
+        <lcb-action-view v-for="(item, index) in items" :key="index" v-bind="item.link">
+          <img
+            :src="item.url"
+            class="block"
+            :style="{
+              height: transformValueUnit(height),
+              width: transformValueUnit(imgWidth),
+              marginRight: transformValueUnit(itemPadding),
+            }"
+          />
+        </lcb-action-view>
       </scroll-view>
     </view>
     <view v-if="styleGroup === 2">

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

@@ -1,7 +1,7 @@
 import { LcbBlockProps } from '../lcb-block/types'
 import { ActionView } from 'action'
 export interface LcbBannerListProps extends LcbBlockProps {
-  items?: Partial<ActionView>[]
+  items?: ActionView[]
   /** 风格 1.顶部title 2.底部title */
   styleGroup?: 1 | 2
   /** 轮播图高度  默认192 */

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

@@ -17,6 +17,7 @@
         shadowColor && shadowSize ? `0px 0px ${blurSize}px ${shadowSize}px ${shadowColor}` : '',
     }"
     class="box-border overflow-hidden relative"
+    :class="customClass"
   >
     <slot />
   </view>

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

@@ -6,14 +6,16 @@
         'grid-template-columns': `repeat(${cols}, minmax(0, 1fr))`,
       }"
     >
-      <wd-img
-        v-for="(item, index) in items"
-        :key="index"
-        :src="item.url"
-        :height="transformValueUnit(height)"
-        :radius="transformValueUnit(radius)"
-        mode="aspectFill"
-      />
+      <lcb-action-view v-for="(item, index) in items" :key="index" v-bind="item.link">
+        <wd-img
+          :src="item.url"
+          :height="transformValueUnit(height)"
+          :radius="transformValueUnit(radius)"
+          mode="aspectFill"
+          width="100%"
+          custom-class="!block"
+        />
+      </lcb-action-view>
     </view>
   </lcb-block>
 </template>

package/components/lcb-grid/types.ts

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

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

@@ -37,35 +37,42 @@
       </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: {
@@ -80,6 +87,7 @@ withDefaults(defineProps<LcbHomeSearch>(), {
   backgroundColor: '#fff',
   radius: 16,
   placeholder: '位置|酒店|关键词',
+  btnText: '搜索酒店',
 })
 const tabs = ['全部', '酒店', '民宿']
 const current = ref(0)

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

@@ -3,5 +3,6 @@ import { LcbBlockProps } from '../lcb-block/types'
 
 export interface LcbHomeSearch extends LcbBlockProps {
   placeholder?: string
-  items?: Partial<ActionView>[]
+  items?: ActionView[]
+  btnText?: string
 }

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

@@ -78,6 +78,7 @@ function getRealSize(size: number = 0) {
   if (mode !== 3 && props.marginHorizontal) realWidth -= props.marginHorizontal * 2
   const imgSpan = props.imageMargin
   if (mode === 2 && imgSpan) realWidth -= (lens - 1) / 2
+  // console.log('size', size, 'realWidth', realWidth, 'props.marginHorizontal', props.marginHorizontal)
   return (realWidth / 375) * size
 }
 </script>

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

@@ -3,13 +3,15 @@
   <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(marginTop),
-    marginBottom: transformValueUnit(marginBottom),
+    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),
@@ -33,8 +35,9 @@
   <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),
+    marginTop: transformValueUnit(-(floatUp || 0)),
+    // marginTop: transformValueUnit(marginTop),
+    // marginBottom: transformValueUnit(marginBottom),
   }">
     <view class="flex shrink-0">
       <Image v-bind="imageProps" />
@@ -73,15 +76,16 @@ const imageProps = computed(() => {
     imageSize: props.imageSize,
     imageMargin: props.imageMargin,
     imageRadius: props.imageRadius,
+    marginHorizontal: props.marginHorizontal,
     enablePreview: props.enablePreview,
     styleGroup: props.styleGroup,
   }
 })
 
-const iconItems = computed(() => {
-  console.log('props.items', props.items)
-  return props.items;
-})
+// const iconItems = computed(() => {
+//   console.log('props.items', props.items)
+//   return props.items;
+// })
 
 </script>
 

package/components/lcb-image/types.ts

@@ -10,6 +10,6 @@ export interface LcbImageProps {
   marginHorizontal?: number
   imageMargin?: number
   imageSize?: number
-  marginTop?: number
+  floatUp?: number
   marginBottom?: number
 }

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

@@ -1,43 +1,26 @@
 <template>
   <lcb-block v-bind="$props">
-    <view
-      :style="{
-        gridTemplateColumns: `repeat(${pictureDistribution}, minmax(0, 1fr))`,
-      }"
-      :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',
-          }"
-        >
-          <div v-if="iconType === 0" class="flex justify-center items-center">
-            <wd-icon
-              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"
-          />
+    <lcb-title v-if="showTitle" :title="title" :marginHorizontal="0" />
+    <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">
+        <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>
-      </view>
+      </lcb-action-view>
     </view>
   </lcb-block>
 </template>
@@ -73,14 +56,17 @@ withDefaults(defineProps<LcbImgNavProps>(), {
   width: 100%;
   overflow-x: auto;
   white-space: nowrap;
-  > view {
+
+  >view {
     display: inline-flex;
   }
 }
+
 .mutil {
   display: grid;
   row-gap: 36rpx;
 }
+
 .title {
   width: 68px;
   overflow: hidden;

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

@@ -22,4 +22,8 @@ export interface LcbImgNavProps extends LcbBlockProps {
   iconRadius?: number
   /** 文字与图标距离 */
   iconTextMargin?: number
+
+  //是否显示标题
+  showTitle?: boolean
+  title?: string
 }

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">
@@ -87,8 +92,8 @@ import { ICapsule, NavProps } from './types'
 import Title from './Title/index.vue'
 import Search from './Search/index.vue'
 import { onPageScroll } from '@dcloudio/uni-app'
-
-const { statusBarHeight } = uni.getSystemInfoSync()
+import { Locale } from '@tplc/wot'
+import enUS from '@tplc/wot/locale/lang/en-US'
 defineOptions({
   name: 'LcbNav',
   options: {
@@ -97,6 +102,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 +161,50 @@ 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':
+      uni.showActionSheet({
+        itemList: ['中文', '英文'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            Locale.use('zh-CN')
+          } else {
+            Locale.use('en-US', enUS)
+          }
+        },
+      })
+      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 {

package/components/lcb-notice/Item/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="flex items-center">
+    <div
+      v-if="iconType === 1"
+      class="overflow-hidden bg-no-repeat bg-contain mr-12rpx"
+      :style="{
+        height: transformValueUnit(40),
+        width: transformValueUnit(40),
+        // color: textColor,
+        backgroundImage: `url('${item?.icon}')`,
+      }"
+    />
+    <view v-if="iconType === 0" class="mr-12rpx">
+      <wd-icon
+        class-prefix="iconfont"
+        v-bind="{
+          name: item?.icon || '',
+          size: transformValueUnit(40),
+          // color: textColor,
+        }"
+      />
+    </view>
+    <view class="flex-1 noticeBar relative overflow-hidden">
+      <view
+        :class="`text-28rpx absolute left-0 top-0 noticeItem flex overflow-hidden${lens == 1 ? ' infinite' : ''}${showAni ? ' animation' : ''}`"
+        :style="{
+          animationDuration: getTime(item?.noticeContent),
+        }"
+      >
+        {{ item?.noticeContent }}
+        <lcb-action-view v-bind="item?.link" customClass="absolute top-0 left-0 right-0 bottom-0" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { NoticeBarItemProps } from '../types'
+import { computed } from 'vue'
+import { transformValueUnit } from '../../../utils/transform'
+defineOptions({
+  name: 'NoticeBarItem',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<NoticeBarItemProps>(), {
+  textSpeed: 1,
+})
+// const { proxy } = getCurrentInstance() as any
+const showAni = computed(() => {
+  // const query = uni.createSelectorQuery().in(proxy)
+  // query.select('.noticeBar').boundingClientRect()
+  // query.exec((res) => {
+  //   console.log(res)
+  // })
+  const len = props.item?.noticeContent?.length || 0
+  // console.log('showAni', props.idx, len)
+  return props.current === props.idx && len > 25
+})
+
+function getTime(text: string | undefined) {
+  const len = text?.length || 0
+  // console.log('item---', props.textSpeed)
+  return `${((50 - len) / 10) * props.textSpeed + 3}s`
+}
+</script>
+<style lang="scss" scoped>
+.noticeBar {
+  height: 72rpx;
+}
+
+.noticeItem {
+  height: 72rpx;
+  line-height: 72rpx;
+  transform: translateZ(0.5px);
+  line-clamp: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  animation-delay: 0.5s;
+  animation-direction: normal;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+  animation-play-state: running;
+  animation-range-end: normal;
+  animation-range-start: normal;
+  animation-timeline: auto;
+  animation-timing-function: linear;
+}
+
+.infinite {
+  animation-iteration-count: infinite;
+}
+
+.animation {
+  animation-name: change;
+  // animation-duration: 5s;
+}
+
+@keyframes change {
+  0% {
+    transform: translate(0%);
+  }
+
+  100% {
+    transform: translate(-60%);
+  }
+}
+</style>