显示格式优化

src/components/PriceText/index.less

@@ -0,0 +1,21 @@
+// ===== 零售价标注：小字置灰 =====
+.price-text__retail {
+  font-size: 20rpx;
+  color: #969799;
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+// inline 模式：与大价格同行，左间距分隔
+.price-text__retail--inline {
+  margin-left: 8rpx;
+}
+
+// block 模式：大价格 / 零售价上下两行（窄卡片布局）
+.price-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1.3;
+}

src/components/PriceText/index.tsx

@@ -0,0 +1,47 @@
+import { Text, View } from '@tarojs/components'
+import { formatRetailPrice } from '@/utils/format'
+import './index.less'
+
+interface PriceTextProps {
+  /** 售价（展示为 ￥price） */
+  price: string | number
+  /** 包规（用于计算零售价；无法计算时不展示零售价） */
+  spec?: string | number | null
+  /** 大价格样式类（字号 / 颜色由调用方控制） */
+  className?: string
+  /**
+   * 零售价布局：
+   * - inline 跟随大价格同行（宽裕区域：商品详情、各类弹层行）
+   * - block  独占一行（窄卡片：首页推荐、商品列表、购物车）
+   */
+  mode?: 'inline' | 'block'
+}
+
+/**
+ * 商品价格：售价 + 零售价标注（小字）
+ * price=30、spec=15 → ￥30 零售价：￥2
+ */
+export default function PriceText({ price, spec, className, mode = 'inline' }: PriceTextProps) {
+  const retail = formatRetailPrice(price, spec)
+
+  // 窄卡片：大价格 / 零售价上下两行，避免与右侧按钮（＋/步进器）挤压换行
+  if (mode === 'block') {
+    return (
+      <View className={`price-text ${className ?? ''}`}>
+        <Text className='price-text__main'>￥{price}</Text>
+        {retail !== null && (
+          <Text className='price-text__retail'>零售价：￥{retail}</Text>
+        )}
+      </View>
+    )
+  }
+
+  return (
+    <Text className={className}>
+      ￥{price}
+      {retail !== null && (
+        <Text className='price-text__retail price-text__retail--inline'>零售价：￥{retail}</Text>
+      )}
+    </Text>
+  )
+}