@tplc/business 0.0.17 → 0.0.20

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

@@ -1,39 +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">
-      <div
-        class="overflow-hidden"
-        :style="{
-          height: iconSize + 'rpx',
-          width: iconSize + 'rpx',
-          borderRadius: (iconType === 1 ? iconRadius : 0) + 'rpx',
-          color: iconColor,
-          marginBottom: iconTextMargin + 'rpx',
-          backgroundImage: iconType === 1 ? 'url(' + item.url + ')' : '',
-          backgroundSize: '100% 100%',
-        }"
-        :class="{
-          imageNav: iconType === 1,
-        }"
+  <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"
       >
-        <div v-if="iconType === 0" class="flex justify-center items-center">
-          <wd-icon class-prefix="iconfont" :name="item.icon!" size="36" />
-        </div>
-      </div>
-      <view class="title">{{ item.title }}</view>
+        <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"
+          />
+        </view>
+        <view class="title">{{ item.title }}</view>
+      </view>
     </view>
-  </view>
+  </lcb-block>
 </template>
 
 <script lang="ts" setup>
@@ -49,15 +55,13 @@ defineOptions({
 })
 
 withDefaults(defineProps<LcbImgNavProps>(), {
-  bgColor: '#ffffff',
   textColor: '#212121',
   iconColor: '#212121',
   iconRadius: 0,
-  topMargin: 36,
-  bottomMargin: 36,
+  paddingVertical: 36,
   iconSize: 80,
-  leftRightMargin: 0,
-  iconTextMargin: 8,
+  paddingHorizontal: 0,
+  iconTextMargin: 4,
   pictureDistribution: 4,
 })
 </script>
@@ -77,12 +81,6 @@ withDefaults(defineProps<LcbImgNavProps>(), {
   display: grid;
   row-gap: 36rpx;
 }
-.imageNav {
-  box-sizing: content-box;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-}
 .title {
   width: 68px;
   overflow: hidden;

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

@@ -41,11 +41,16 @@
             :key="item.icon"
             :class="[capsuleList.length === 1 ? 'px-2' : 'px-2.5']"
           >
-            <wd-icon class-prefix="iconfont" :name="item.icon" size="20" />
+            <wd-icon class-prefix="iconfont" :name="item.icon" size="36rpx" :color="contentColor" />
           </view>
         </view>
         <template v-else-if="back">
-          <wd-icon class-prefix="iconfont" name="dingdanliebiao" @click="toBack" />
+          <wd-icon
+            class-prefix="iconfont"
+            name="dingdanliebiao"
+            @click="toBack"
+            :color="contentColor"
+          />
         </template>
         <view class="ml-2" v-if="titleLocation === 'left'">
           <Search
@@ -219,11 +224,10 @@ onPageScroll(({ scrollTop: top }) => {
       @extend %action;
       .navbar-capsule {
         margin: auto 20rpx auto 0;
-        height: 29px;
         content: '';
-        border: 1rpx solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 82rpx;
-        padding: 0px;
+        padding: 10rpx 0px;
         background-color: rgba(255, 255, 255, 0.6);
         // 不等于最后一个儿子
         > view {
@@ -234,7 +238,7 @@ onPageScroll(({ scrollTop: top }) => {
             top: 50%;
             transform: translateY(-50%);
             content: ' ';
-            width: 1rpx;
+            width: 1px;
             height: 18px;
             background: rgba(0, 0, 0, 0.1);
           }

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

@@ -2,10 +2,7 @@
   <lcb-block
     v-bind="{
       ...$props,
-      title: undefined,
     }"
-    :marginLeft="12"
-    :marginRight="12"
   >
     <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
 }

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

@@ -1,55 +1,91 @@
 <template>
-  <lcb-block v-bind="{
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    backgroundColor,
-    backgroundImage,
-  }">
+  <lcb-block
+    v-bind="{
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      backgroundColor: bgStyle === 1 ? backgroundColor : '',
+      backgroundImage: bgStyle === 2 ? backgroundImage : '',
+    }"
+  >
     <view class="flex flex-items-center">
-      <wd-img v-bind="{
-        width: transformValueUnit(photoSize),
-        height: transformValueUnit(photoSize),
-        round: photoRound,
-        src: photoUrl,
-      }" class="bg-coolgray mr-20rpx" />
+      <wd-img
+        v-if="!!photoUrl"
+        v-bind="{
+          width: transformValueUnit(photoSize),
+          height: transformValueUnit(photoSize),
+          round: photoRound,
+          src: photoUrl,
+        }"
+        class="mr-20rpx"
+      />
+      <view
+        v-if="!photoUrl"
+        :style="{
+          width: transformValueUnit(photoSize),
+          height: transformValueUnit(photoSize),
+          borderRadius: photoRound ? '50%' : '',
+        }"
+        class="bg-#eee userPlace mr-20rpx"
+      >
+        <!-- flex justify-center items-center overflow-hidden relative -->
+        <!-- <wd-icon name="user" :size="transformValueUnit(photoSize * 0.9)" color="#ddd" class="absolute photoIcon"></wd-icon> -->
+      </view>
       <view class="flex-1">
-        <view class="font-bold" :style="{
-          fontSize: transformValueUnit(textSize),
-          color: textColor,
-        }">用户</view>
-        <view class="flex" v-if="editBtn == true">
-          <view class="flex flex-content-center flex-items-center mt-5px border-style-solid" :style="{
+        <view
+          class="font-bold"
+          :style="{
+            fontSize: transformValueUnit(textSize),
             color: textColor,
-            borderWidth: editBorder ? transformValueUnit(1) : 0,
-            borderColor: textColor,
-            padding: editBorder ? `2px ${editSize / 2.5}px 2px ${editSize / 2.5}px` : '',
-            borderRadius: transformValueUnit(30),
-            fontSize: transformValueUnit(editSize),
-          }">
+          }"
+        >
+          用户
+        </view>
+        <view class="flex" v-if="editBtn == true">
+          <view
+            class="flex flex-content-center flex-items-center mt-5px border-style-solid"
+            :style="{
+              color: textColor,
+              borderWidth: editBorder ? transformValueUnit(1) : 0,
+              borderColor: textColor,
+              padding: editBorder ? `2px ${editSize / 2.5}px 2px ${editSize / 2.5}px` : '',
+              borderRadius: transformValueUnit(30),
+              fontSize: transformValueUnit(editSize),
+            }"
+          >
             <view>{{ editText }}</view>
           </view>
         </view>
       </view>
-      <div v-if="moreIcon == true && iconType === 1" class="overflow-hidden bg-no-repeat bg-contain" :style="{
-        height: transformValueUnit(textSize),
-        width: transformValueUnit(textSize),
-        color: textColor,
-        backgroundImage: `url('${iconUpload}')`,
-      }" />
-      <view v-if="moreIcon == true && iconType === 0">
-        <wd-icon class-prefix="iconfont" v-bind="{
-          name: iconName,
-          size: transformValueUnit(textSize),
+      <div
+        v-if="moreIcon == true && iconType === 1"
+        class="overflow-hidden bg-no-repeat bg-contain"
+        :style="{
+          height: transformValueUnit(textSize),
+          width: transformValueUnit(textSize),
           color: textColor,
-        }" />
+          backgroundImage: `url('${iconUpload}')`,
+        }"
+      />
+      <view v-if="moreIcon == true && iconType === 0">
+        <wd-icon
+          class-prefix="iconfont"
+          v-bind="{
+            name: iconName,
+            size: transformValueUnit(textSize),
+            color: textColor,
+          }"
+        />
       </view>
     </view>
-    <view v-if="valuesCard == true || coupons == true || presales == true"
-      class="flex flex-justify-between text-center mt-15px" :style="{
+    <view
+      v-if="valuesCard == true || coupons == true || presales == true"
+      class="flex flex-justify-between text-center mt-15px"
+      :style="{
         color: textColor,
-      }">
+      }"
+    >
       <View v-if="valuesCard == true" class="">
         <view class="text-22px font-bold">0</view>
         <view class="text-12px optName">储值卡</view>
@@ -69,6 +105,7 @@
 <script setup lang="ts">
 import { LcbUserTopProps } from './types'
 import { transformValueUnit } from '../../utils/transform'
+import { styleText } from 'util'
 defineOptions({
   name: 'LcbUserTop',
   options: {
@@ -78,23 +115,34 @@ defineOptions({
   },
 })
 withDefaults(defineProps<LcbUserTopProps>(), {
-  photoSize: 30,
-  paddingLeft: 30,
-  paddingRight: 30,
-  paddingTop: 30,
-  paddingBottom: 30,
+  photoSize: 100,
+  paddingLeft: 35,
+  paddingRight: 35,
+  paddingTop: 100,
+  paddingBottom: 100,
   photoRound: false,
-  textSize: 22,
+  textSize: 32,
   textColor: '#333',
   moreIcon: true,
   iconType: 0,
   iconName: 'xiayiye',
   editText: '编辑资料',
-  editSize: 14,
+  editSize: 28,
+  bgStyle: 1,
 })
 </script>
 <style lang="scss" scoped>
-.optName{
+.optName {
   opacity: 0.7;
 }
+.userPlace {
+  background-image: url('https://image-c.weimobwmc.com/static-resource/33c59afc76d04917a8b3b62520835db6.jpg');
+  background-size: contain;
+  background-position: center bottom;
+}
+.photoIcon {
+  bottom: -20rpx;
+  left: 50%;
+  transform: translateX(-50%);
+}
 </style>

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

@@ -53,6 +53,7 @@ export interface LcbUserTopProps {
   photoSize?: number
   textSize?: number
   textColor?: string
+  bgStyle?: 1 | 2
   backgroundColor?: string
   backgroundImage?: string
   moreIcon?: boolean

package/components/lcb-video/lcb-video.vue

@@ -0,0 +1,33 @@
+<template>
+  <lcb-block v-bind="{
+    marginTop,
+    marginBottom,
+    marginLeft: marginHorizontal,
+    marginRight: marginHorizontal,
+  }">
+    <video v-bind="{
+      src,
+      loop,
+      muted,
+      autoplay,
+      showProgress,
+    }" class="w-full" />
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { LcbVideoProps } from './types'
+defineOptions({
+  name: 'LcbVideo',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbVideoProps>(), {
+  marginHorizontal: 0,
+})
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-video/types.ts

@@ -0,0 +1,11 @@
+export interface LcbVideoProps {
+  // Define the component's prop types here
+  src?: string
+  loop?: boolean
+  muted?: boolean
+  autoplay?: boolean
+  showProgress?: boolean
+  marginTop?: number
+  marginBottom?: number
+  marginHorizontal?: number
+}

package/global.d.ts

@@ -1,18 +1,22 @@
 declare module 'vue' {
   // Helper for Volar
   export interface GlobalComponents {
+    'lcb-action-view': (typeof import('./types/components/lcb-action-view/lcb-action-view.vue'))['default']
     'lcb-banner': (typeof import('./types/components/lcb-banner/lcb-banner.vue'))['default']
     'lcb-banner-block': (typeof import('./types/components/lcb-banner-block/lcb-banner-block.vue'))['default']
     'lcb-block': (typeof import('./types/components/lcb-block/lcb-block.vue'))['default']
     'lcb-filter': (typeof import('./types/components/lcb-filter/lcb-filter.vue'))['default']
+    'lcb-gap': (typeof import('./types/components/lcb-gap/lcb-gap.vue'))['default']
     'lcb-grid': (typeof import('./types/components/lcb-grid/lcb-grid.vue'))['default']
     'lcb-home-search': (typeof import('./types/components/lcb-home-search/lcb-home-search.vue'))['default']
+    'lcb-image': (typeof import('./types/components/lcb-image/lcb-image.vue'))['default']
     'lcb-img-nav': (typeof import('./types/components/lcb-img-nav/lcb-img-nav.vue'))['default']
     'lcb-nav': (typeof import('./types/components/lcb-nav/lcb-nav.vue'))['default']
     'lcb-swiper': (typeof import('./types/components/lcb-swiper/lcb-swiper.vue'))['default']
     'lcb-title': (typeof import('./types/components/lcb-title/lcb-title.vue'))['default']
     'lcb-user-order': (typeof import('./types/components/lcb-user-order/lcb-user-order.vue'))['default']
     'lcb-user-top': (typeof import('./types/components/lcb-user-top/lcb-user-top.vue'))['default']
+    'lcb-video': (typeof import('./types/components/lcb-video/lcb-video.vue'))['default']
   }
 }
 

package/iconfonts/index.css

@@ -1,12 +1,11 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 4652744 */
   src:
-    url('//at.alicdn.com/t/c/font_4652744_o8lyw0d70s.woff2?t=1724428388776') format('woff2'),
-    url('//at.alicdn.com/t/c/font_4652744_o8lyw0d70s.woff?t=1724428388776') format('woff'),
-    url('//at.alicdn.com/t/c/font_4652744_o8lyw0d70s.ttf?t=1724428388776') format('truetype'),
-    url('//at.alicdn.com/t/c/font_4652744_o8lyw0d70s.svg?t=1724428388776#iconfont') format('svg');
+    url('//at.alicdn.com/t/c/font_4652744_bhoie787kfq.woff2?t=1726152120892') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4652744_bhoie787kfq.woff?t=1726152120892') format('woff'),
+    url('//at.alicdn.com/t/c/font_4652744_bhoie787kfq.ttf?t=1726152120892') format('truetype'),
+    url('//at.alicdn.com/t/c/font_4652744_bhoie787kfq.svg?t=1726152120892#iconfont') format('svg');
 }
-
 .iconfont {
   font-family: 'iconfont' !important;
   font-size: 16px;
@@ -15,6 +14,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfont-a-xingzhuang23kaobei:before {
+  content: '\e60f';
+}
+
+.iconfont-a-xingzhuang103:before {
+  content: '\e610';
+}
+
+.iconfont-a-xingzhuang22:before {
+  content: '\e611';
+}
+
+.iconfont-a-xingzhuang97:before {
+  content: '\e612';
+}
+
+.iconfont-a-xingzhuang106:before {
+  content: '\e613';
+}
+
 .iconfont-dingdanliebiao:before {
   content: '\e662';
 }