@tplc/business 0.0.48 → 0.0.50

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, useAttrs } from 'vue'
-import { lcbProductItemContentTypes, LcbProductItemProps } from './types'
+import { LcbProductItemProps } from './types'
 import ItemValue from './components/ItemValue.vue'
 
+const isNumber = (value: any) => typeof value === 'number'
+
 defineOptions({
   name: 'LcbProductItem',
   options: {
@@ -14,36 +16,54 @@ defineOptions({
 
 const props = withDefaults(defineProps<LcbProductItemProps>(), {
   layoutType: 'horizontal',
+  titleLineClamp: 1,
+  tagOverflowWrap: false,
+  tagType: 'primary',
+  tagPlain: true,
+  tagMark: false,
+  tagRound: false,
+  distanceUnit: 'km',
+
   priceUnit: '¥',
   originPriceUnit: '¥',
   imageVisible: true,
   titleVisible: true,
-  subTitleVisible: true,
+  subTitleVisible: false,
   priceVisible: true,
   priceUnitVisible: true,
   priceSuffixVisible: true,
   originPriceVisible: true,
   originPriceUnitVisible: true,
+  originPriceSuffixVisible: true,
   tagsVisible: true,
   locationVisible: true,
-  distanceVisible: true,
+  distanceVisible: false,
 })
 const attrs = useAttrs()
 
 provide('lcb-product-item-props', props)
 
 defineSlots<{
-  image(): any
-  title(): any
-  subTitle(): any
-  price(): any
-  priceUnit(): any
-  priceSuffix(): any
-  originPrice(): any
-  originPriceUnit(): any
-  tags(): any
-  location(): any
-  distance(): any
+  image(props: { value: any }): any
+  title(props: { value: any }): any
+  subTitle(props: { value: any }): any
+  price(props: { value: any }): any
+  priceUnit(props: { value: any }): any
+  priceSuffix(props: { value: any }): any
+  originPrice(props: { value: any }): any
+  originPriceUnit(props: { value: any }): any
+  originPriceSuffix(props: { value: any }): any
+  tags(props: { value: any }): any
+  location(props: { value: any }): any
+  distance(props: { value: any }): any
+
+  itemSection(): any
+  itemTopSection(): any
+  itemBottomSection(): any
+  itemLeftSection(): any
+  itemRightSection(): any
+  imageSection(): any
+  contentSection(): any
 }>()
 
 // console.log('attrs', attrs)
@@ -51,87 +71,246 @@ defineSlots<{
 
 <template>
   <!-- 横向布局 -->
-  <view v-if="layoutType === 'horizontal'" :class="className" class="flex gap-3 px-2 py-3 bg-white">
-    <ItemValue prop="image" className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden">
-      <template
-        v-for="slotName in lcbProductItemContentTypes"
-        :key="slotName"
-        #[slotName]="slotContext"
+  <view
+    v-if="layoutType === 'horizontal'"
+    :class="className"
+    class="flex flex-col gap-1 px-2 py-3 bg-white relative"
+  >
+    <slot name="itemSection" />
+    <slot name="itemTopSection" />
+    <view class="flex gap-2">
+      <slot name="itemLeftSection" />
+      <ItemValue
+        v-if="!!$slots?.['image']"
+        prop="image"
+        className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden relative"
       >
-        <slot :name="slotName" v-bind="slotContext" />
-      </template>
-    </ItemValue>
-    <view class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden">
-      <view class="flex flex-col gap-2 overflow-hidden">
-        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+        <template #image="{ value }">
+          <slot name="image" :value="value" />
+        </template>
+      </ItemValue>
+      <ItemValue
+        v-else
+        prop="image"
+        className="w-1/3 h-220rpx bg-gray-100 rounded-sm overflow-hidden relative"
+      >
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+      </ItemValue>
+      <view class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden relative">
+        <slot name="contentSection" />
+        <view class="flex flex-col gap-2 overflow-hidden">
           <template
-            v-for="slotName in lcbProductItemContentTypes"
-            :key="slotName"
-            #[slotName]="slotContext"
+            v-for="propName in ['title', 'subTitle', 'location', 'distance', 'tags']"
+            :key="propName"
           >
-            <slot :name="slotName" v-bind="slotContext" />
+            <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+              <template #image="{ value }"><slot name="image" :value="value" /></template>
+              <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 #priceSuffix="{ value }">
+                <slot name="priceSuffix" :value="value" />
+              </template>
+              <template #originPrice="{ value }">
+                <slot name="originPrice" :value="value" />
+              </template>
+              <template #originPriceUnit="{ value }">
+                <slot name="originPriceUnit" :value="value" />
+              </template>
+              <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+              <template #location="{ value }"><slot name="location" :value="value" /></template>
+              <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+            </ItemValue>
+            <ItemValue :prop="propName" v-else />
           </template>
-        </ItemValue>
-      </view>
+        </view>
 
-      <view class="flex gap-2">
-        <view class="flex gap-[4rpx] items-end">
-          <ItemValue v-for="prop in ['priceUnit', 'price', 'priceSuffix']" :prop="prop" :key="prop">
+        <view class="flex gap-2">
+          <view class="flex gap-[4rpx] items-end" v-if="priceVisible && isNumber(price)">
+            <template v-for="propName in ['priceUnit', 'price', 'priceSuffix']" :key="propName">
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <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 #priceSuffix="{ value }">
+                  <slot name="priceSuffix" :value="value" />
+                </template>
+                <template #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
+            </template>
+          </view>
+          <view
+            class="flex gap-[2rpx] items-end line-through"
+            v-if="originPriceVisible && isNumber(originPrice)"
+          >
             <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
+              v-for="propName in ['originPriceUnit', 'originPrice', 'originPriceSuffix']"
+              :key="propName"
             >
-              <slot :name="slotName" v-bind="slotContext" />
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <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 #priceSuffix="{ value }">
+                  <slot name="priceSuffix" :value="value" />
+                </template>
+                <template #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #originPriceSuffix="{ value }">
+                  <slot name="originPriceSuffix" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
             </template>
-          </ItemValue>
+          </view>
         </view>
       </view>
+      <slot name="itemRightSection" />
     </view>
+    <slot name="itemBottomSection" />
   </view>
 
   <!-- 竖向布局 -->
-  <view v-if="layoutType === 'vertical'" :class="className" class="flex flex-col gap-2 bg-white">
-    <ItemValue prop="image" className="overflow-hidden">
-      <template
-        v-for="slotName in lcbProductItemContentTypes"
-        :key="slotName"
-        #[slotName]="slotContext"
+  <view v-if="layoutType === 'vertical'" class="flex bg-white relative" :class="className">
+    <slot name="itemSection" />
+    <slot name="itemLeftSection" />
+    <view class="flex-1 flex flex-col w-full overflow-hidden">
+      <slot name="itemTopSection" />
+      <ItemValue v-if="!!$slots?.['image']" prop="image" className="overflow-hidden relative">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+        <template #image="{ value }">
+          <slot name="image" :value="value" />
+        </template>
+      </ItemValue>
+      <ItemValue v-else prop="image" className="overflow-hidden relative">
+        <template #default>
+          <slot name="imageSection" />
+        </template>
+      </ItemValue>
+      <view
+        :class="'p-2'"
+        class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden relative"
       >
-        <slot :name="slotName" v-bind="slotContext" />
-      </template>
-    </ItemValue>
-    <view
-      :class="'p-2'"
-      class="flex flex-col flex-1 gap-2 justify-between text-26rpx overflow-hidden"
-    >
-      <view class="flex flex-col gap-2 overflow-hidden">
-        <!-- <ItemValue prop="title"></ItemValue> -->
-        <ItemValue v-for="prop in ['title', 'location', 'tags']" :prop="prop" :key="prop">
+        <slot name="contentSection" />
+        <view class="flex flex-col gap-2 overflow-hidden">
           <template
-            v-for="slotName in lcbProductItemContentTypes"
-            :key="slotName"
-            #[slotName]="slotContext"
+            v-for="propName in ['title', 'subTitle', 'location', 'distance', 'tags']"
+            :key="propName"
           >
-            <slot :name="slotName" v-bind="slotContext" />
+            <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+              <template #image="{ value }"><slot name="image" :value="value" /></template>
+              <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 #priceSuffix="{ value }">
+                <slot name="priceSuffix" :value="value" />
+              </template>
+              <template #originPrice="{ value }">
+                <slot name="originPrice" :value="value" />
+              </template>
+              <template #originPriceUnit="{ value }">
+                <slot name="originPriceUnit" :value="value" />
+              </template>
+              <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+              <template #location="{ value }"><slot name="location" :value="value" /></template>
+              <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+            </ItemValue>
+            <ItemValue :prop="propName" v-else />
           </template>
-        </ItemValue>
-      </view>
+        </view>
 
-      <view class="flex gap-2">
-        <view class="flex gap-[4rpx] items-end">
-          <ItemValue v-for="prop in ['priceUnit', 'price', 'priceSuffix']" :prop="prop" :key="prop">
+        <view class="flex gap-2">
+          <view class="flex gap-[4rpx] items-end" v-if="priceVisible && isNumber(price)">
+            <template v-for="propName in ['priceUnit', 'price', 'priceSuffix']" :key="propName">
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <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 #priceSuffix="{ value }">
+                  <slot name="priceSuffix" :value="value" />
+                </template>
+                <template #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
+            </template>
+          </view>
+          <view
+            class="flex gap-[2rpx] items-end line-through"
+            v-if="originPriceVisible && isNumber(originPrice)"
+          >
             <template
-              v-for="slotName in lcbProductItemContentTypes"
-              :key="slotName"
-              #[slotName]="slotContext"
+              v-for="propName in ['originPriceUnit', 'originPrice', 'originPriceSuffix']"
+              :key="propName"
             >
-              <slot :name="slotName" v-bind="slotContext" />
+              <ItemValue :prop="propName" v-if="!!$slots?.[propName]">
+                <template #image="{ value }"><slot name="image" :value="value" /></template>
+                <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 #priceSuffix="{ value }">
+                  <slot name="priceSuffix" :value="value" />
+                </template>
+                <template #originPrice="{ value }">
+                  <slot name="originPrice" :value="value" />
+                </template>
+                <template #originPriceUnit="{ value }">
+                  <slot name="originPriceUnit" :value="value" />
+                </template>
+                <template #originPriceSuffix="{ value }">
+                  <slot name="originPriceSuffix" :value="value" />
+                </template>
+                <template #tags="{ value }"><slot name="tags" :value="value" /></template>
+                <template #location="{ value }"><slot name="location" :value="value" /></template>
+                <template #distance="{ value }"><slot name="distance" :value="value" /></template>
+              </ItemValue>
+              <ItemValue :prop="propName" v-else />
             </template>
-          </ItemValue>
+          </view>
         </view>
       </view>
+      <slot name="itemBottomSection" />
     </view>
+    <slot name="itemRightSection" />
   </view>
 </template>
 

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

@@ -1,23 +1,20 @@
 import { CSSProperties } from 'vue'
-
-export const lcbProductItemContentTypes = [
-  'image',
-  'title',
-  'subTitle',
-  'price',
-  'priceUnit',
-  'priceSuffix',
-  'originPrice',
-  'originPriceUnit',
-  'tags',
-  'location',
-  'distance',
-] as const
+import { TagType } from '@tplc/wot/components/wd-tag/types'
 
 export interface LcbProductItemProps {
   // Define the component's prop types here
   className?: string
   layoutType?: 'vertical' | 'horizontal'
+  titleLineClamp?: number
+  tagOverflowWrap?: boolean
+  tagType?: TagType
+  tagContentColor?: string
+  tagBgColor?: string
+  tagPlain?: boolean
+  tagMark?: boolean
+  tagRound?: boolean
+  distanceUnit?: string
+
   image?: any
   title?: any
   subTitle?: any
@@ -26,6 +23,7 @@ export interface LcbProductItemProps {
   priceSuffix?: any
   originPrice?: any
   originPriceUnit?: any
+  originPriceSuffix?: any
   tags?: any
   location?: any
   distance?: any
@@ -38,6 +36,7 @@ export interface LcbProductItemProps {
   priceSuffixVisible?: boolean
   originPriceVisible?: boolean
   originPriceUnitVisible?: boolean
+  originPriceSuffixVisible?: boolean
   tagsVisible?: boolean
   locationVisible?: boolean
   distanceVisible?: boolean
@@ -50,6 +49,7 @@ export interface LcbProductItemProps {
   priceSuffixClass?: string
   originPriceClass?: string
   originPriceUnitClass?: string
+  originPriceSuffixClass?: string
   tagsClass?: string
   tagsWrapperClass?: string
   locationClass?: string
@@ -63,6 +63,7 @@ export interface LcbProductItemProps {
   priceSuffixStyle?: CSSProperties
   originPriceStyle?: CSSProperties
   originPriceUnitStyle?: CSSProperties
+  originPriceSuffixStyle?: CSSProperties
   tagsStyle?: CSSProperties
   tagsWrapperStyle?: CSSProperties
   locationStyle?: CSSProperties

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

@@ -0,0 +1,20 @@
+<template>
+  <lcb-block>
+    {{ text }}
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { LcbTextProps } from './types'
+defineOptions({
+  name: 'LcbText',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbTextProps>(), {})
+</script>
+
+<style lang="scss" scoped></style>

package/components/lcb-text/types.ts

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

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

@@ -1,13 +1,23 @@
 <template>
   <View class="">
-    <view class="font-bold leading-none" :style="{
-      fontSize: transformValueUnit(numsSize),
-      color: numsColor,
-    }">0</view>
-    <view class="mt-15rpx" :style="{
-      fontSize: transformValueUnit(titleSize),
-      color: titleColor,
-    }">{{ title }}</view>
+    <view
+      class="font-bold leading-none"
+      :style="{
+        fontSize: transformValueUnit(numsSize),
+        color: numsColor,
+      }"
+    >
+      0
+    </view>
+    <view
+      class="mt-15rpx"
+      :style="{
+        fontSize: transformValueUnit(titleSize),
+        color: titleColor,
+      }"
+    >
+      {{ title }}
+    </view>
   </View>
 </template>
 
@@ -16,5 +26,4 @@ import { NumsItemProps } from '../types'
 import { transformValueUnit } from '../../../utils/transform'
 
 defineProps<NumsItemProps>()
-
-</script>
+</script>

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

@@ -13,29 +13,23 @@
       }"
     />
     <view class="flex flex-items-center">
-      <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-40rpx"
-      />
+      <lcb-action-view :jump-type="101" @avatar="onAvatar">
+        <wd-img
+          v-bind="{
+            width: transformValueUnit(photoSize),
+            height: transformValueUnit(photoSize),
+            round: photoRound,
+            src:
+              userStore?.userInfo?.headImgUrl ||
+              'https://lycs.eluying.com/material/icon/1/20240925185540/userPhoto.jpg',
+          }"
+          custom-class="mr-40rpx bg-#eee"
+        />
+      </lcb-action-view>
       <view class="flex-1">
-        <lcb-action-view :jumpType="88" @phone="getPhone">
+        <lcb-action-view :jumpType="88" @phone="phoneHandler" v-if="!userStore?.userInfo?.phone">
           <view
-            class="font-bold"
+            class="font-500"
             :style="{
               fontSize: transformValueUnit(textSize),
               color: textColor,
@@ -44,19 +38,24 @@
             授权登录
           </view>
         </lcb-action-view>
-        <view class="flex" v-if="editBtn">
-          <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 v-else class="leading-none">
+          <view class="text-32rpx font-#333 font-500 mb-20rpx">
+            {{ userStore?.userInfo?.userName || '微信用户' }}
+          </view>
+          <view class="flex" @click="toEdit">
+            <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>
       </view>
@@ -103,10 +102,10 @@
 import { LcbUserTopProps } from './types'
 import { transformValueUnit } from '../../utils/transform'
 import Nums from './Nums/index.vue'
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { addUnit } from '@tplc/wot/components/common/util'
-import { PAGE_PROVIDE_KEY } from '../../constants'
-import { getUserInfo, getUserPhone } from './api'
+import { getPhone } from '../../utils/auth'
+
 const { statusBarHeight } = uni.getSystemInfoSync()
 defineOptions({
   name: 'LcbUserTop',
@@ -116,9 +115,8 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
-const pageInfo = inject(PAGE_PROVIDE_KEY)
-const photoUrl = ''
-const editBtn = ''
+const userStore = uni.$lcb.userStore?.()
+userStore?.getUser()
 withDefaults(defineProps<LcbUserTopProps>(), {
   photoSize: 100,
   paddingLeft: 35,
@@ -139,10 +137,20 @@ withDefaults(defineProps<LcbUserTopProps>(), {
 const padTop = computed(() => {
   return addUnit(statusBarHeight || 0)
 })
-const getPhone = async (e) => {
-  await getUserPhone(e.detail)
+const phoneHandler = async (e) => {
+  await getPhone(e)
+  userStore?.getUser()
+}
+const onAvatar = (headImgUrl) => {
+  userStore?.updateUser({
+    headImgUrl,
+  })
+}
+const toEdit = () => {
+  uni.navigateTo({
+    url: '/pages/user/edit',
+  })
 }
-getUserInfo()
 </script>
 <style lang="scss" scoped>
 .userPlace {

package/constants.ts

@@ -1,3 +1,5 @@
 export const FORM_KEY = 'form'
 /** 页面信息 */
 export const PAGE_PROVIDE_KEY = 'page_provide'
+/** 页面类型 */
+export const PAGE_TYPE_PROVIDE_KEY = 'page_type_provide'