@yorkjs/hive-ui 2.3.5 → 2.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/item/ProductItem/ProductItem.tsx

@@ -49,6 +49,10 @@ export interface IProductCardProps {
   image: { url: string }
   /** 是否显示售罄标记 */
   showSoldOut?: boolean
+  /** 是否显图片上的遮罩 */
+  showImageOverlay?: boolean
+  /** 遮罩文案 */
+  imageOverlayText?: string
   /** 是否显示已下架标记 */
   showOffline?: boolean
   /** 商品标题 */
@@ -57,6 +61,8 @@ export interface IProductCardProps {
   titleMaxLines?: number
   /** 商品类型：实物/虚拟/服务 */
   productType?: number
+  /** 自定义商品类型 */
+  productTypeCustom?: { color: string; text: string, backgroundColor?: string }
   /** 是否显示“多规格”标签 */
   showMultipleSpec?: boolean
   /** 库存数量文案 */
@@ -124,6 +130,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     title,
     titleMaxLines = 1,
     productType,
+    productTypeCustom,
     customTags,
     showMultipleSpec,
     stockCount,
@@ -144,6 +151,8 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     remainingTotal,
     buyCount,
     showSoldOut = false,
+    showImageOverlay = false,
+    imageOverlayText = '',
     showOffline = false,
     showCheckbox = false,
     checkboxChecked = false,
@@ -159,6 +168,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     children
   } = props
 
+  const isOverlayVisible = useMemo(() => {
+    return showSoldOut || showOffline || showImageOverlay
+  }, [showSoldOut, showOffline, showImageOverlay])
+
   const handleCardClick = (e: ITouchEvent) => {
     if (showCheckbox) {
       if (!checkboxDisabled) {
@@ -178,7 +191,27 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
   }, [])
 
   const productTypeTag = useMemo(() => {
-    if (productType === undefined) return null
+    
+    if (productTypeCustom) {
+      return (
+        <View className={styles['product-tag-container']}>
+          <Tag
+            type='light-warning'
+            text={productTypeCustom.text}
+            className="product-tag"
+            style={{ 
+              backgroundColor: productTypeCustom.backgroundColor, 
+              color: productTypeCustom.color
+           }}
+          />
+        </View>
+      )
+    }
+
+    if (productType === undefined) {
+      return null
+    }
+
     const colorMap: Record<number, { color: string; text: string | undefined }> = {
     [MALL_PRODUCT_TYPE_REAL]: {
       color: 'var(--primary)',
@@ -209,7 +242,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
         />
       </View>
     )
-  }, [productType, labels])
+  }, [productType, labels, productTypeCustom])
 
   const deliveryTags = useMemo(() => {
     if (isEmpty(deliveryTypes)) return null
@@ -319,10 +352,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
               className={styles['product-image']}
               mode='aspectFill'
             />
-            {(showSoldOut || showOffline) && (
+            {isOverlayVisible && (
               <View className={styles['status-overlay']}>
                 <Text className={styles['status-text']}>
-                  {showSoldOut ? labels.sold_out : labels.offline}
+                  {showImageOverlay ? imageOverlayText : showSoldOut ? labels.sold_out : labels.offline}
                 </Text>
               </View>
             )}