@tplc/business 0.2.84 → 0.2.86

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.2.86](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.85...v0.2.86) (2025-01-11)
+
+### [0.2.85](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.84...v0.2.85) (2025-01-11)
+
+
+### ✨ Features | 新功能
+
+* img prodcut 阴影 ([14f2203](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/14f2203b835e6beccbc692a77cd7809035aafef8))
+
 ### [0.2.84](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.2.83...v0.2.84) (2025-01-11)
 
 

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

@@ -47,6 +47,9 @@ const props = withDefaults(defineProps<LcbBlockInnerProps>(), {
 // 透明度+颜色
 const innerBackgroundColor = computed(() => {
   if (!props.backgroundColor) return ''
-  return props.backgroundColor + Math.floor(props.opacity * 255).toString(16)
+  if (props.backgroundColor.length === 7) {
+    return props.backgroundColor + Math.floor(props.opacity * 255).toString(16)
+  }
+  return props.backgroundColor
 })
 </script>

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

@@ -6,11 +6,16 @@
     :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">
+    <view
+      class="relative overflow-hidden"
+      :style="{
+        boxShadow:
+          shadowColor && shadowSize ? `0px 0px ${blurSize}px ${shadowSize}px ${shadowColor}` : '',
+      }"
+    >
       <lcb-action-view v-bind="item.link" custom-class="w-full" v-if="item.url">
         <wd-img
           :width="`${styleGroup == 3 ? transformValueUnit(imageSize) : '100%'}`"
@@ -18,11 +23,8 @@
           :enable-preview="enablePreview"
           :mode="imageHeight ? 'scaleToFill' : 'widthFix'"
           :height="imageHeight ? transformValueUnit(imageHeight) : 'auto'"
-          :custom-class="`${styleGroup == 3 ? 'overflow-hidden' : 'overflow-hidden block'}`"
-          :style="{
-            borderRadius: transformValueUnit(imageRadius),
-            display: 'block',
-          }"
+          custom-class="overflow-hidden block"
+          :radius="transformValueUnit(imageRadius)"
         />
       </lcb-action-view>
       <view
@@ -68,7 +70,6 @@ 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

@@ -18,27 +18,9 @@
       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" />
+    <Image v-bind="$props" />
   </view>
 
   <scroll-view
@@ -49,20 +31,15 @@
       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" />
+      <Image v-bind="$props" />
     </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'
@@ -82,24 +59,6 @@ const props = withDefaults(defineProps<LcbImageProps>(), {
   marginBottom: 0,
   marginHorizontal: 0,
 })
-
-const imageProps = computed(() => {
-  return {
-    items: props.items,
-    imageSize: props.imageSize,
-    imageMargin: props.imageMargin,
-    imageRadius: props.imageRadius,
-    marginHorizontal: props.marginHorizontal,
-    enablePreview: props.enablePreview,
-    styleGroup: props.styleGroup,
-    imageHeight: props.imageHeight,
-  }
-})
-
-// const iconItems = computed(() => {
-//   console.log('props.items', props.items)
-//   return props.items;
-// })
 </script>
 
 <style lang="scss" scoped></style>

package/components/lcb-image/types.ts

@@ -11,6 +11,9 @@ export interface LcbImageProps {
   imageMargin?: number
   imageSize?: number
   floatUp?: number
+  shadowColor?: string
+  shadowSize?: number
+  blurSize?: number
   marginBottom?: number
   imageHeight?: number
 }

package/components/lcb-product/types.ts

@@ -3,6 +3,9 @@ import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbProductProps extends LcbBlockProps {
   // Define the component's prop types here
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
+  shadowColor?: string
+  shadowSize?: number
+  blurSize?: number
   imageWidth?: number
   imageHeight?: number
   imageRadius?: number

package/components/lcb-product-item/lcb-product-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, useAttrs } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
 import { LcbProductItemProps } from './types'
 import ItemValue from './components/ItemValue.vue'
 import { transformValueUnit } from '../../utils/transform'
@@ -48,6 +48,9 @@ const props = withDefaults(defineProps<LcbProductItemProps>(), {
   addressIntroVisible: true,
   distanceVisible: true,
   borderRadius: 12,
+  shadowSize: 1,
+  shadowColor: '#D6D7DA',
+  blurSize: 5,
 })
 const attrs = useAttrs()
 provide('lcb-product-item-props', props)
@@ -86,6 +89,15 @@ defineSlots<{
   coverImgSection(): any
   contentSection(): any
 }>()
+const itemStyle = computed(() => {
+  return {
+    borderRadius: transformValueUnit(props.borderRadius),
+    boxShadow:
+      props.shadowColor && props.shadowSize
+        ? `0px 0px ${props.blurSize}px ${props.shadowSize}px ${props.shadowColor}`
+        : '',
+  }
+})
 </script>
 
 <template>
@@ -94,9 +106,7 @@ defineSlots<{
     v-if="layoutType === 'horizontal'"
     :class="className"
     class="flex flex-col gap-1 px-2 py-3 bg-white relative overflow-clip"
-    :style="{
-      borderRadius: transformValueUnit(borderRadius),
-    }"
+    :style="itemStyle"
   >
     <slot name="itemSection" />
     <slot name="itemTopSection" />
@@ -237,9 +247,7 @@ defineSlots<{
     v-if="layoutType === 'vertical'"
     class="flex bg-white relative overflow-hidden"
     :class="className"
-    :style="{
-      borderRadius: transformValueUnit(borderRadius),
-    }"
+    :style="itemStyle"
   >
     <slot name="itemSection" />
     <slot name="itemLeftSection" />

package/components/lcb-product-item/types.ts

@@ -108,4 +108,7 @@ export interface LcbProductItemProps {
   titleIconStyle?: CSSProperties
   userInteractionInfoStyle?: CSSProperties
   orderTipsStyle?: CSSProperties
+  blurSize?: number
+  shadowColor?: string
+  shadowSize?: number
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.2.84",
+  "version": "0.2.86",
   "keywords": [
     "业务组件"
   ],

package/types/components/lcb-image/types.d.ts

@@ -9,6 +9,9 @@ export interface LcbImageProps {
   imageMargin?: number
   imageSize?: number
   floatUp?: number
+  shadowColor?: string
+  shadowSize?: number
+  blurSize?: number
   marginBottom?: number
   imageHeight?: number
 }

package/types/components/lcb-list/lcb-list.vue.d.ts

@@ -50,14 +50,14 @@ declare const __VLS_component: import('vue').DefineComponent<
     borderRadius: number
     imageHeight: number
     listType: 'list' | 'horizontal' | 'grid' | 'waterfall'
-    itemWidth: number
-    layoutType: 'vertical' | 'horizontal'
-    titleLineClamp: number
     pageFilterType: string
     pageListProps: import('./components/FilterList/type').PageListProps
     styleMode: 'default' | 'plain'
     border: boolean
+    titleLineClamp: number
     isSticky: boolean
+    layoutType: 'vertical' | 'horizontal'
+    itemWidth: number
   },
   {}
 >

package/types/components/lcb-product/types.d.ts

@@ -1,6 +1,9 @@
 import { LcbBlockProps } from '../lcb-block/types'
 export interface LcbProductProps extends LcbBlockProps {
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall'
+  shadowColor?: string
+  shadowSize?: number
+  blurSize?: number
   imageWidth?: number
   imageHeight?: number
   imageRadius?: number

package/types/components/lcb-product-item/lcb-product-item.vue.d.ts

@@ -100,6 +100,9 @@ declare const __VLS_component: import('vue').DefineComponent<
       addressIntroVisible: boolean
       distanceVisible: boolean
       borderRadius: number
+      shadowSize: number
+      shadowColor: string
+      blurSize: number
     }
   >,
   {},
@@ -150,14 +153,20 @@ declare const __VLS_component: import('vue').DefineComponent<
           addressIntroVisible: boolean
           distanceVisible: boolean
           borderRadius: number
+          shadowSize: number
+          shadowColor: string
+          blurSize: number
         }
       >
     >
   >,
   {
+    shadowColor: string
+    shadowSize: number
+    blurSize: number
     borderRadius: number
-    layoutType: 'vertical' | 'horizontal'
     titleLineClamp: number
+    layoutType: 'vertical' | 'horizontal'
     tagOverflowWrap: boolean
     priceUnit: any
     scribePriceUnit: any

package/types/components/lcb-product-item/types.d.ts

@@ -103,4 +103,7 @@ export interface LcbProductItemProps {
   titleIconStyle?: CSSProperties
   userInteractionInfoStyle?: CSSProperties
   orderTipsStyle?: CSSProperties
+  blurSize?: number
+  shadowColor?: string
+  shadowSize?: number
 }