@tplc/business 0.1.13 → 0.1.15

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

@@ -3,7 +3,7 @@
     class="customNavigation"
     :class="{
       immersiveTop: topStyle === 2,
-      fixed,
+      fixed: topStyle === 1,
     }"
     :style="{
       paddingTop,
@@ -49,7 +49,7 @@
         <template v-else-if="back">
           <wd-icon
             class-prefix="lcb"
-            name="zuo_left"
+            :name="isLastPage() ? 'shouye_home-two' : 'zuo_left'"
             @click="toBack"
             :color="contentColor"
             size="24px"
@@ -72,14 +72,15 @@
         <Search v-if="styleGroup === 2 && titleLocation === 'center'" :back="back" />
         <Title v-bind="titleProps" v-else-if="styleGroup === 2 || titleLocation === 'center'" />
       </view>
-      <!-- </template> -->
     </view>
   </view>
+  <!-- 常规默认底部弹一个高度的gap -->
+  <lcb-gap v-if="topStyle === 1" height="44px" safe-area-top />
 </template>
 
 <script setup lang="ts">
 import { addUnit } from '@tplc/wot/components/common/util'
-import { computed, ref } from 'vue'
+import { computed, inject } from 'vue'
 import { ICapsule, NavProps } from './types'
 import Title from './Title/index.vue'
 import Search from './Search/index.vue'
@@ -103,6 +104,7 @@ const iconMap = {
   home: 'shouye_home1',
 }
 const [scrollTop] = usePageScroll()
+const injectScrollTop = inject('page-scroll-top', { value: 0 })
 const props = withDefaults(defineProps<NavProps>(), {
   styleGroup: 1,
   titleLocation: 'center',
@@ -114,7 +116,6 @@ const props = withDefaults(defineProps<NavProps>(), {
   backColor: '#ffffff',
   contentColor: '#000000',
   logoImg: '',
-  fixed: false,
   back: false,
   capsuleMode: 'light',
   immersionMode: 1,
@@ -123,12 +124,18 @@ const props = withDefaults(defineProps<NavProps>(), {
 const navbarBgColor = computed(() => {
   return props.backgroundType === 'color' ? props.backColor : ''
 })
-
+// 判断是否是最后一个页面
+const isLastPage = () => {
+  const pages = getCurrentPages()
+  return pages.length === 1
+}
 // 透明度
 const navbarBgOpacity = computed(() => {
   const { topStyle, immersionMode } = props
   if (topStyle === 2) {
-    return immersionMode === 1 ? scrollTop.value / ((statusBarHeight || 0) + 44) : 0
+    return immersionMode === 1
+      ? (scrollTop.value || injectScrollTop.value) / ((statusBarHeight || 0) + 44)
+      : 0
   }
   return 1
 })
@@ -189,7 +196,7 @@ const onCapsule = ({ action }: ICapsule) => {
       break
     case 'setting':
       uni.navigateTo({
-        url: '/pages/setting/index',
+        url: '/pages/mine/setting',
       })
       break
 
@@ -202,7 +209,13 @@ const onCapsule = ({ action }: ICapsule) => {
 }
 
 const toBack = () => {
-  uni.navigateBack()
+  if (isLastPage()) {
+    uni.switchTab({
+      url: '/pages/index/index',
+    })
+  } else {
+    uni.navigateBack()
+  }
 }
 </script>
 <style lang="scss" scoped>

package/components/lcb-notice/api/index.ts

@@ -0,0 +1,21 @@
+export interface AdvertItem {
+  adContent: string
+  advertId: string
+  closeTime: number
+  closeType: string
+  createDate: string
+  jumpType: number
+  lastModifyDate: string
+  pageType: string
+  type: number
+  title?: string
+  weightSort: string
+}
+/** 获取公告 */
+export const getAdvertList = (data: {
+  pageType: string
+  /** 1: 文字 2: 图片 */
+  type: 1 | 2
+}) => {
+  return uni.$lcb.http.post<AdvertItem[]>('/advert/list', data)
+}

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

@@ -1,32 +1,49 @@
 <template>
-  <lcb-block v-bind="$props" custom-class="border-solid border-1">
-    <swiper
-      class="swiper"
-      circular
-      :autoplay="true"
-      :disableTouch="true"
-      :interval="interval"
-      :vertical="direction == 'up'"
-      @change="onSwiperChange"
+  <lcb-block v-bind="$props" custom-class="border-solid border-1" v-if="adverts.length">
+    <wd-notice-bar
+      :text="textArray"
+      backgroundColor="transparent"
+      :color="color"
+      :direction="direction"
+      :speed="speed"
+      @click="handleClick"
+      custom-class="!p-0 !rounded-none"
     >
-      <swiper-item v-for="(item, idx) in items" :key="item.id">
-        <Item
-          :idx="idx"
-          :current="current"
-          :lens="items?.length"
-          :iconType="iconType"
-          :item="item"
-          :textSpeed="textSpeed"
-          :textColor="textColor"
-        />
-      </swiper-item>
-    </swiper>
+      <template #prefix v-if="iconType !== -1 && icon">
+        <view class="mr-12rpx">
+          <image
+            :src="icon"
+            class="h-auto"
+            mode="widthFix"
+            v-if="iconType === 1"
+            :style="{
+              width: transformValueUnit(iconSize),
+            }"
+          />
+          <wd-icon :name="icon" :size="transformValueUnit(iconSize)" class-prefix="lcb" v-else />
+        </view>
+      </template>
+      <template #suffix v-if="rightArrow">
+        <wd-icon name="arrow-right" size="32rpx" />
+      </template>
+    </wd-notice-bar>
   </lcb-block>
+  <wd-popup v-model="popup.show" position="bottom" custom-class="!bg-transparent" closable>
+    <view class="text-#333 px-3 pb-3 box-border bg-#fff rounded-t-20rpx">
+      <view class="py-3 text-center font-500 text-4">{{ popup.item.title || '公告' }}</view>
+      <view class="min-h-30vh max-h-50vh overflow-y-auto text-28rpx">
+        {{ popup.item.adContent }}
+      </view>
+    </view>
+  </wd-popup>
 </template>
 
 <script setup lang="ts">
 import { LcbNoticeBarProps } from './types'
-import Item from './Item/index.vue'
+import { inject, watch, ref, computed } from 'vue'
+import { AdvertItem, getAdvertList } from './api'
+import { PAGE_TYPE_PROVIDE_KEY } from '../../constants'
+import { transformValueUnit } from '../../utils/transform'
 
 defineOptions({
   name: 'LcbNotice',
@@ -36,37 +53,36 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-
+const adverts = ref<AdvertItem[]>([])
 const props = withDefaults(defineProps<LcbNoticeBarProps>(), {
-  textSpeed: 1,
+  speed: 50,
   borderColor: 'transparent',
+  direction: 'vertical',
+  backgroundColor: '#fff',
+  paddingVertical: 16,
+  rightArrow: true,
+  color: '#333',
+  iconSize: 40,
 })
-console.log(props, 'props')
-
-function getTime(text: string | undefined) {
-  const len = text?.length || 0
-  // console.log('props.textSpeed', len, props.textSpeed)
-  return len > 25 ? ((50 - len) / 10) * props.textSpeed * 1000 + 3000 : 3000
-}
-// const params = ref<number>(0)
-// const model = defineModel<number>()
-const current = defineModel({ type: Number, default: 0 })
-const interval = defineModel('interval', { type: Number, default: 3000 })
-function onSwiperChange(item: any) {
-  // console.log('current.value', current.value)
-  current.value = item?.detail?.current
-  interval.value = getTime(props.items?.[current.value]?.noticeContent)
-  // console.log('onSwiperChange item', item)
-  // console.log('interval.value', interval.value)
+const popup = ref({
+  show: false,
+  item: {} as AdvertItem,
+})
+const pageType = inject(PAGE_TYPE_PROVIDE_KEY, props.pageType) as string
+const getData = async () => {
+  const { data } = await getAdvertList({
+    type: 1,
+    pageType,
+  })
+  adverts.value = data
 }
+watch(() => pageType, getData, { immediate: true })
 
-// function onSetInterval(val: number) {
-//   interval.value = val;
-// }
-</script>
-
-<style lang="scss" scoped>
-.swiper {
-  height: 72rpx;
+const textArray = computed(() => adverts.value.map((item) => item.adContent))
+const handleClick = (data: { text: string; index: number }) => {
+  popup.value = {
+    show: true,
+    item: adverts.value[data.index],
+  }
 }
-</style>
+</script>

package/components/lcb-notice/types.ts

@@ -1,30 +1,15 @@
-import { LcbActionViewProps } from '../../components/lcb-action-view/types'
-interface NoticeItem {
-  id?: number
-  noticeContent?: string
-  icon?: string
-  link?: LcbActionViewProps
-}
+import { NoticeBarScrollDirection } from '@tplc/wot/types/components/wd-notice-bar/types'
+import { LcbBlockProps } from '../lcb-block/types'
 
-export interface LcbNoticeBarProps {
-  // Define the component's prop types here
-  items?: Partial<NoticeItem>[]
+export interface LcbNoticeBarProps extends LcbBlockProps {
   vertical?: boolean
-  iconType?: number
-  direction?: string
-  textSpeed?: number
-  textColor?: string
-  borderColor?: string
-}
-
-export interface NoticeBarItemProps {
-  idx?: number
-  current?: number
-  text?: string
-  lens?: number
-  iconType?: number
-  item?: NoticeItem
-  textSpeed?: number
+  /** -1 无  0 图标 1 自定义 */
+  iconType?: -1 | 0 | 1
+  direction?: NoticeBarScrollDirection
+  speed?: number
   textColor?: string
-  // setInterval?: Function
+  pageType?: string
+  rightArrow?: boolean
+  icon?: string
+  iconSize?: number
 }

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import UWaterfall from 'uview-plus/components/u-waterfall/u-waterfall.vue'
 import { LcbProductProps } from './types'
 
 const attrs = useAttrs()
@@ -26,11 +27,20 @@ defineSlots<{
 <template>
   <lcb-block v-bind="$props">
     <view class="flex flex-col gap-2 p-2" v-if="listType === 'list'">
-      <view v-for="(item, index) in items" :key="`${item?.productId}:${index}`">
+      <lcb-action-view
+        v-for="(item, index) in items"
+        :key="`${item?.productId}:${index}`"
+        v-bind="item.link"
+      >
         <slot name="item" :item="item">
           <lcb-product-item
             v-bind="{ ...item, ...attrs }"
-            :imageStyle="{ width: `${imageWidthPercent}%` }"
+            :imageStyle="{
+              width: imageWidth ?? `${imageWidthPercent}%`,
+              height: imageHeight ? `${imageHeight}rpx` : undefined,
+              borderRadius: imageRadius ? `${imageRadius}rpx` : undefined,
+              ...(attrs?.imageStyle ?? {}),
+            }"
           >
             <!-- <template #itemTopSection>
               <view class="min-w-10 min-h-10 bg-red-500/50"></view>
@@ -59,7 +69,7 @@ defineSlots<{
             </template> -->
           </lcb-product-item>
         </slot>
-      </view>
+      </lcb-action-view>
     </view>
 
     <view class="flex p-1 flex-wrap" v-if="listType === 'grid'">
@@ -71,7 +81,10 @@ defineSlots<{
                 v-bind="{ ...item, ...attrs }"
                 layoutType="vertical"
                 className="!h-full"
-                :imageStyle="{ height: `${imageHeightPercent}%` }"
+                :imageStyle="{
+                  height: imageHeight ?? `${imageHeightPercent}%`,
+                  ...(attrs?.imageStyle ?? {}),
+                }"
               >
                 <!-- <template #itemTopSection>
                   <view class="min-w-10 min-h-10 bg-red-500/50"></view>
@@ -92,6 +105,103 @@ defineSlots<{
       </view>
     </view>
 
+    <u-waterfall :modelValue="items" v-if="listType === 'waterfall'" class="flex gap-3 p-3">
+      <template #left="{ leftList: list }">
+        <view class="flex flex-col gap-3">
+          <view
+            v-for="(item, index) in list"
+            :key="`${item?.productId}:${index}`"
+            class="rounded overflow-hidden"
+          >
+            <slot name="item" :item="item">
+              <lcb-product-item
+                v-bind="{ ...item, ...attrs }"
+                layoutType="vertical"
+                tag-overflow-wrap
+                :title-line-clamp="2"
+              >
+                <template #image="{ value }">
+                  <image :src="value" class="w-full" mode="widthFix" />
+                </template>
+                <!-- <template #itemTopSection>
+              <view class="min-w-10 min-h-10 bg-red-500/50"></view>
+            </template>
+            <template #itemBottomSection>
+              <view class="min-w-10 min-h-10 bg-yellow-500/50"></view>
+            </template>
+            <template #itemLeftSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50"></view>
+            </template>
+            <template #itemRightSection>
+              <view class="min-w-10 min-h-10 bg-green-500/50"></view>
+            </template> -->
+
+                <!-- <template #imageSection>
+              <view class="min-w-5 min-h-5 bg-yellow-400 right-1 top-1 absolute z-10"></view>
+            </template>
+
+            <template #itemSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50 right-0 top-0 absolute z-10"></view>
+            </template>
+            <template #contentSection>
+              <view
+                class="min-w-15 min-h-15 bg-gray-500/20 right-10 top-10 absolute z-10 rounded-full"
+              ></view>
+            </template> -->
+              </lcb-product-item>
+            </slot>
+          </view>
+        </view>
+      </template>
+      <template #right="{ rightList: list }">
+        <view class="flex flex-col gap-3">
+          <view
+            v-for="(item, index) in list"
+            :key="`${item?.productId}:${index}`"
+            class="rounded overflow-hidden"
+          >
+            <slot name="item" :item="item">
+              <lcb-product-item
+                v-bind="{ ...item, ...attrs }"
+                layoutType="vertical"
+                tag-overflow-wrap
+                :title-line-clamp="2"
+              >
+                <template #image="{ value }">
+                  <image :src="value" class="w-full" mode="widthFix" />
+                </template>
+                <!-- <template #itemTopSection>
+              <view class="min-w-10 min-h-10 bg-red-500/50"></view>
+            </template>
+            <template #itemBottomSection>
+              <view class="min-w-10 min-h-10 bg-yellow-500/50"></view>
+            </template>
+            <template #itemLeftSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50"></view>
+            </template>
+            <template #itemRightSection>
+              <view class="min-w-10 min-h-10 bg-green-500/50"></view>
+            </template> -->
+
+                <!-- <template #imageSection>
+              <view class="min-w-5 min-h-5 bg-yellow-400 right-1 top-1 absolute z-10"></view>
+            </template>
+
+            <template #itemSection>
+              <view class="min-w-10 min-h-10 bg-blue-500/50 right-0 top-0 absolute z-10"></view>
+            </template>
+            <template #contentSection>
+              <view
+                class="min-w-15 min-h-15 bg-gray-500/20 right-10 top-10 absolute z-10 rounded-full"
+              ></view>
+            </template> -->
+              </lcb-product-item>
+            </slot>
+          </view>
+        </view>
+      </template>
+    </u-waterfall>
+
     <scroll-view v-if="listType == 'horizontal'" scroll-x>
       <view class="p-2 flex gap-2 whitespace-nowrap overflow-auto flex-nowrap">
         <view

package/components/lcb-product/types.ts

@@ -3,6 +3,9 @@ export interface LcbProductProps {
   listType?: 'list' | 'horizontal' | 'grid' | 'waterfall' // 1列表 2 左右滑动 3一行两个 4瀑布流
   imageWidthPercent?: number
   imageHeightPercent?: number
+  imageWidth?: number
+  imageHeight?: number
+  imageRadius?: number
   itemHeight?: number // 列表项高度
   items?: Record<string, any>[]
 }

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

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { inject, computed, useAttrs } from 'vue'
 import { isArray } from '@tplc/wot/components/common/util'
-
+defineOptions({
+  name: 'LcbProductItemView',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
 // const attrs = useAttrs()
 
 const itemProps: any = inject('lcb-product-item-props')
@@ -49,7 +56,7 @@ const value = computed(() => {
   >
     <!-- 图片 -->
     <slot :value="value" v-if="prop === 'image'" name="image">
-      <view :value="value" :class="className" :style="style">
+      <view :class="className" :style="style">
         <image :src="value" class="w-full h-full" mode="aspectFill" />
         <slot></slot>
       </view>
@@ -79,7 +86,6 @@ const value = computed(() => {
       <view
         :class="className"
         :style="style"
-        :value="value"
         class="text-22rpx text-gray-500 text-ellipsis line-clamp-1"
       >
         <view>{{ value }}</view>
@@ -91,7 +97,6 @@ const value = computed(() => {
       <view
         :class="className"
         :style="style"
-        :value="value"
         class="text-gray-500 text-22rpx flex gap-3rpx items-center"
       >
         <wd-icon name="location" size="32rpx"></wd-icon>
@@ -104,7 +109,6 @@ const value = computed(() => {
       <view
         :class="className"
         :style="style"
-        :value="value"
         class="text-gray-500 text-22rpx flex gap-3rpx items-center"
       >
         <wd-icon name="location" size="32rpx"></wd-icon>
@@ -145,12 +149,7 @@ const value = computed(() => {
 
     <!-- 价格单位 -->
     <slot :value="value" v-if="prop === 'priceUnit'" name="priceUnit">
-      <view
-        :class="className"
-        :style="style"
-        :value="value"
-        class="text-red-500 font-bold text-22rpx"
-      >
+      <view :class="className" :style="style" class="text-red-500 font-bold text-22rpx">
         <view>{{ value }}</view>
       </view>
     </slot>
@@ -169,38 +168,28 @@ const value = computed(() => {
 
     <!-- 价格后缀 -->
     <slot :value="value" v-if="prop === 'priceSuffix'" name="priceSuffix">
-      <view :class="className" :style="style" :value="value" class="text-22rpx">
+      <view :class="className" :style="style" class="text-22rpx">
         <view>{{ value }}</view>
       </view>
     </slot>
 
     <!-- 原始价格单位 -->
     <slot :value="value" v-if="prop === 'originPriceUnit'" name="originPriceUnit">
-      <view
-        :class="className"
-        :style="style"
-        :value="value"
-        class="text-gray-500 font-bold text-19rpx"
-      >
+      <view :class="className" :style="style" class="text-gray-500 font-bold text-19rpx">
         <view>{{ value }}</view>
       </view>
     </slot>
 
     <!-- 原始价格 -->
     <slot :value="value" v-if="prop === 'originPrice'" name="originPrice">
-      <view
-        :class="className"
-        :style="style"
-        :value="value"
-        class="text-gray-500 font-bold text-20rpx"
-      >
+      <view :class="className" :style="style" class="text-gray-500 font-bold text-20rpx">
         <view>{{ value }}</view>
       </view>
     </slot>
 
     <!-- 原始价格后缀 -->
     <slot :value="value" v-if="prop === 'originPriceSuffix'" name="originPriceSuffix">
-      <view :class="className" :style="style" :value="value" class="text-gray-500 text-20rpx">
+      <view :class="className" :style="style" class="text-gray-500 text-20rpx">
         <view>{{ value }}</view>
       </view>
     </slot>

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

@@ -2,9 +2,6 @@
 import { computed, provide, useAttrs } from 'vue'
 import { LcbProductItemProps } from './types'
 import ItemValue from './components/ItemValue.vue'
-
-const isNumber = (value: any) => typeof value === 'number'
-
 defineOptions({
   name: 'LcbProductItem',
   options: {
@@ -13,6 +10,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const isNumber = (value: any) => typeof value === 'number'
 
 const props = withDefaults(defineProps<LcbProductItemProps>(), {
   layoutType: 'horizontal',
@@ -139,7 +137,9 @@ defineSlots<{
                 <template #title="{ value }"><slot name="title" :value="value" /></template>
                 <template #subTitle="{ value }"><slot name="subTitle" :value="value" /></template>
                 <template #price="{ value }"><slot name="price" :value="value" /></template>
-                <template #priceUnit="{ value }"><slot name="priceUnit" :value="value" /></template>
+                <template #priceUnit="{ value }">
+                  <slot name="priceUnit" :value="value" />
+                </template>
                 <template #priceSuffix="{ value }">
                   <slot name="priceSuffix" :value="value" />
                 </template>
@@ -169,7 +169,9 @@ defineSlots<{
                 <template #title="{ value }"><slot name="title" :value="value" /></template>
                 <template #subTitle="{ value }"><slot name="subTitle" :value="value" /></template>
                 <template #price="{ value }"><slot name="price" :value="value" /></template>
-                <template #priceUnit="{ value }"><slot name="priceUnit" :value="value" /></template>
+                <template #priceUnit="{ value }">
+                  <slot name="priceUnit" :value="value" />
+                </template>
                 <template #priceSuffix="{ value }">
                   <slot name="priceSuffix" :value="value" />
                 </template>
@@ -256,7 +258,9 @@ defineSlots<{
                 <template #title="{ value }"><slot name="title" :value="value" /></template>
                 <template #subTitle="{ value }"><slot name="subTitle" :value="value" /></template>
                 <template #price="{ value }"><slot name="price" :value="value" /></template>
-                <template #priceUnit="{ value }"><slot name="priceUnit" :value="value" /></template>
+                <template #priceUnit="{ value }">
+                  <slot name="priceUnit" :value="value" />
+                </template>
                 <template #priceSuffix="{ value }">
                   <slot name="priceSuffix" :value="value" />
                 </template>
@@ -286,7 +290,9 @@ defineSlots<{
                 <template #title="{ value }"><slot name="title" :value="value" /></template>
                 <template #subTitle="{ value }"><slot name="subTitle" :value="value" /></template>
                 <template #price="{ value }"><slot name="price" :value="value" /></template>
-                <template #priceUnit="{ value }"><slot name="priceUnit" :value="value" /></template>
+                <template #priceUnit="{ value }">
+                  <slot name="priceUnit" :value="value" />
+                </template>
                 <template #priceSuffix="{ value }">
                   <slot name="priceSuffix" :value="value" />
                 </template>

package/components/lcb-rich-text/lcb-rich-text.vue

@@ -0,0 +1,22 @@
+<template>
+  <lcb-block v-bind="$props">
+    <mp-html :content="content" />
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { LcbRichTextProps } from './types'
+import mpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
+defineOptions({
+  name: 'LcbRichText',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbRichTextProps>(), {})
+console.log('props', props)
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-rich-text/types.ts

@@ -0,0 +1,5 @@
+import { LcbBlockProps } from '../lcb-block/types'
+
+export interface LcbRichTextProps extends LcbBlockProps {
+  content?: string
+}