@yorkjs/hive-ui 2.3.1 → 2.3.3

package/package.json

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

package/src/item/ProductItem/ProductItem.tsx

@@ -36,6 +36,7 @@ export interface IProductCardLabels {
   multiple_spec?: string
   barcode_label?: string
   spec_label?: string
+  remaining_label?: string
   sold_out?: string
   offline?: string
 }
@@ -88,6 +89,10 @@ export interface IProductCardProps {
   salePrice: string | number
   /** 原价 (划线价) */
   originalPrice?: string | number
+  /** 剩余次数（次卡独立权益等场景） */
+  remainingCount?: number | string
+  /** 剩余次数对应的总次数（与 remainingCount 组成 剩余/总数） */
+  remainingTotal?: number | string
   /** 已购数量 (显示为 xN) */
   buyCount?: number
   /** 是否显示左侧勾选框 */
@@ -135,6 +140,8 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     salePricePrefix,
     salePrice,
     originalPrice,
+    remainingCount,
+    remainingTotal,
     buyCount,
     showSoldOut = false,
     showOffline = false,
@@ -260,6 +267,25 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     )
   }, [stockCount, saleCount, labels])
 
+  const remainingElem = useMemo(() => {
+    if (remainingCount == null || remainingCount === '') return null
+    return (
+      <View className={styles['remaining-box']}>
+        <Text className={styles['info-text']}>{labels.remaining_label}</Text>
+        <Text className={styles['remaining-value']}>{remainingCount}</Text>
+        {
+          remainingTotal != null && remainingTotal !== ''
+          ? (
+            <Text className={styles['remaining-total']}>
+              /{remainingTotal}
+            </Text>
+          )
+          : undefined
+        }
+      </View>
+    )
+  }, [remainingCount, remainingTotal, labels])
+
   return (
     <View
       className={formatClassNames(
@@ -307,13 +333,15 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
                 {productTypeTag}
                 <Text className={styles['title']} style={{ WebkitLineClamp: titleMaxLines }}>{title}</Text>
               </View>
-              {(showMultipleSpec || stockCount || saleCount || barcode) && (
+              {(showMultipleSpec || stockCount || saleCount || barcode || remainingElem) && (
                 <ScrollView scrollX className={styles['second-row']} showScrollbar={false}>
                   <View className={styles['second-row-inner']}>
                     {showMultipleSpec && <Text className={styles['primary-text']}>{labels.multiple_spec}</Text>}
                     {showMultipleSpec && stockAndSaleElem && <View className={styles['info-line']} />}
                     {stockAndSaleElem}
-                    {((showMultipleSpec || stockAndSaleElem) && barcode) && <View className={styles['info-line']} />}
+                    {(showMultipleSpec || stockAndSaleElem) && remainingElem && <View className={styles['info-line']} />}
+                    {remainingElem}
+                    {((showMultipleSpec || stockAndSaleElem || remainingElem) && barcode) && <View className={styles['info-line']} />}
                     {barcode && <Text className={styles['info-text']}>{labels.barcode_label} {barcode}</Text>}
                   </View>
                 </ScrollView>
@@ -452,4 +480,4 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
   )
 }
 
-export default React.memo(ProductItem)
+export default React.memo(ProductItem)

package/src/item/ProductItem/config.ts

@@ -26,6 +26,7 @@ let globalLabels: IProductCardLabels = {
   multiple_spec: '多规格',
   barcode_label: '条码',
   spec_label: '规格',
+  remaining_label: '剩余次数',
   sold_out: '售罄',
   offline: '已下架'
 }

package/src/item/ProductItem/index.module.styl

@@ -205,6 +205,20 @@ $F_BUY_COUNT = 14PX    // RN 14
   margin-top 5PX
   lineClamp(1)
 
+.remaining-box
+  display flex
+  flex-direction row
+  align-items center
+
+.remaining-value
+  font-size $F_INFO
+  color var(--primary)
+  margin-left 5PX
+
+.remaining-total
+  font-size $F_INFO
+  color var(--textTitle)
+
 .customization-text
   font-size $F_CUSTOM
   color var(--textMuted)
@@ -262,4 +276,4 @@ $F_BUY_COUNT = 14PX    // RN 14
       color var(--textContent)
 
 .card-footer
-  width 100%
+  width 100%