@tplc/business 0.0.18 → 0.0.20

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
+}

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

@@ -1,45 +1,45 @@
 <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">
+  <lcb-block v-bind="$props">
+    <view
+      :style="{
+        gridTemplateColumns: `repeat(${pictureDistribution}, minmax(0, 1fr))`,
+      }"
+      :class="[styleGroup === 2 ? 'mutil' : 'single']"
+    >
       <view
-        class="overflow-hidden"
-        :style="{
-          marginBottom: iconTextMargin + 'rpx',
-        }"
+        v-for="item in items"
+        :key="item.title"
+        class="flex flex-col justify-center items-center"
       >
-        <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"
+        <view
+          class="overflow-hidden"
           :style="{
-            borderRadius: iconRadius + 'rpx',
-            height: iconSize + 'rpx',
-            width: iconSize + 'rpx',
+            marginBottom: iconTextMargin + 'rpx',
           }"
-          :src="item.url"
-        />
+        >
+          <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"
+          />
+        </view>
+        <view class="title">{{ item.title }}</view>
       </view>
-      <view class="title">{{ item.title }}</view>
     </view>
-  </view>
+  </lcb-block>
 </template>
 
 <script lang="ts" setup>
@@ -55,14 +55,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-title/lcb-title.vue

@@ -2,10 +2,7 @@
   <lcb-block
     v-bind="{
       ...$props,
-      title: undefined,
     }"
-    :marginLeft="24"
-    :marginRight="24"
   >
     <text
       :style="{
@@ -28,9 +25,11 @@ defineOptions({
   },
 })
 withDefaults(defineProps<LcbTitleProps>(), {
+  marginHorizontal: 24,
   fontWeight: 600,
   fontSize: 14,
   color: '#333',
+  title: '标题',
 })
 </script>
 <style lang="scss" scoped></style>

package/components/lcb-user-order/lcb-user-order.vue

@@ -1,50 +1,59 @@
 <template>
-  <lcb-block class="flex flex-justify-between" v-bind="{
-    marginTop,
-    marginBottom,
-    marginLeft: marginHorizontal,
-    marginRight: marginHorizontal,
-    paddingTop: paddingVertical,
-    paddingBottom: paddingVertical,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    backgroundColor,
-    radius,
-    boxShadow: shadowColor && shadowSize ? `0px 0px ${blurSize}px ${shadowSize}px ${shadowColor}` : '',
-    // boxShadow: '0px 4px 8px 0px rgba(236,236,236,0.5)'
-  }">
-    <view class="flex flex-col flex-justify-center items-center" @click="onClick(item)" v-for="item in iconList"
-      :key="item.id">
-      <view class="position-relative" :style="{
-        height: transformValueUnit(iconSize),
-        width: transformValueUnit(iconSize),
-      }">
-        <view v-if="item.iconType === 0">
-          <wd-icon class-prefix="iconfont" v-bind="{
-            name: item.iconName || '',
-            size: transformValueUnit(iconSize),
-            color: iconColor,
-          }" />
-        </view>
-        <view v-if="item.iconType === 1" class="bg-no-repeat bg-contain" :style="{
+  <lcb-block v-bind="$props" class="flex flex-justify-between">
+    <view
+      class="flex flex-col flex-justify-center items-center"
+      @click="onClick(item)"
+      v-for="item in iconList"
+      :key="item.id"
+    >
+      <view
+        class="position-relative"
+        :style="{
           height: transformValueUnit(iconSize),
           width: transformValueUnit(iconSize),
-          color: iconColor,
-          backgroundImage: `url('${item.iconUpload}')`,
-        }" />
-        <view v-if="item.id < 5" class="pos-absolute bg-#f23d3d pos-top-0 pos-right-0 w-8px h-8px rounded-4px" />
+        }"
+      >
+        <view v-if="item.iconType === 0">
+          <wd-icon
+            class-prefix="iconfont"
+            v-bind="{
+              name: item.iconName || '',
+              size: transformValueUnit(iconSize),
+              color: iconColor,
+            }"
+          />
+        </view>
+        <view
+          v-if="item.iconType === 1"
+          class="bg-no-repeat bg-contain"
+          :style="{
+            height: transformValueUnit(iconSize),
+            width: transformValueUnit(iconSize),
+            color: iconColor,
+            backgroundImage: `url('${item.iconUpload}')`,
+          }"
+        />
+        <view
+          v-if="item.id < 5"
+          class="pos-absolute bg-#f23d3d pos-top-0 pos-right-0 w-8px h-8px rounded-4px"
+        />
+      </view>
+      <view
+        class="flex flex-justify-between text-center"
+        :style="{
+          color: textColor,
+          fontSize: transformValueUnit(textSize),
+          marginTop: transformValueUnit((textSize || 0) / 3),
+        }"
+      >
+        {{ item.iconTitle }}
       </view>
-      <view class="flex flex-justify-between text-center" :style="{
-        color: textColor,
-        fontSize: transformValueUnit(textSize),
-        marginTop: transformValueUnit((textSize || 0) / 3),
-      }">{{ item.iconTitle }}</view>
     </view>
   </lcb-block>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { LcbUserOrderProps, IIconList } from './types'
 import { transformValueUnit } from '../../utils/transform'
 defineOptions({
@@ -55,36 +64,32 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-const onClick = (item: any) => {
-
-}
+const onClick = (item: any) => {}
 const props = withDefaults(defineProps<LcbUserOrderProps>(), {
   paddingVertical: 0,
   paddingHorizontal: 0,
   blurSize: 5,
 })
-const statusNumbers = ['0', '1', '2', '3', '5', ''];
+const statusNumbers = ['0', '1', '2', '3', '5', '']
 const iconList = computed(() => {
   const list: IIconList[] = []
   for (let i = 0; i < statusNumbers.length; i++) {
-    const item = statusNumbers[i];
-    const isShow = props['iconShow' + item];
+    const item = statusNumbers[i]
+    const isShow = props['iconShow' + item]
     console.log('isShow', isShow)
     if (isShow !== false) {
       list.push({
-        'id': i,
-        'iconType': props['iconType' + item],
-        'iconTitle': props['iconTitle' + item],
-        'iconName': props['iconName' + item],
-        'iconUpload': props['iconUpload' + item],
-      });
+        id: i,
+        iconType: props['iconType' + item],
+        iconTitle: props['iconTitle' + item],
+        iconName: props['iconName' + item],
+        iconUpload: props['iconUpload' + item],
+      })
     }
   }
-  console.log('list', list)
+  console.log('list', list, props)
   return list as IIconList[]
 })
 </script>
 
-<style lang="scss" scoped>
-  
-</style>
+<style lang="scss" scoped></style>

package/components/lcb-user-order/types.ts

@@ -1,7 +1,7 @@
 export interface IIconList {
-  id: number,
+  id: number
   iconType: number
-  iconTitle?: string,
+  iconTitle?: string
   iconName?: string
   iconUpload?: string
 }