# SkuDetailModal 商品详情弹窗

一个用于显示商品详细信息的弹窗组件，支持商品图片展示、数量调整、备注添加、价格计算等功能。

## 功能特性

- 🖼️ 商品图片展示（基于 ProductData.cover）
- 🔢 数量调整（基于 ProductData.extend.quantity）
- 📝 备注添加和显示（基于 ProductData.extend.note）
- 💰 价格计算（基于 ProductData.extend.price）
- 🗑️ 商品删除
- 📱 响应式设计

## 数据映射关系

组件会自动从 ProductData 中提取以下信息：

- **图片**: `ProductData.cover` (可选，支持判空)
- **标题**: `ProductData.title` (可选，支持判空)
- **价格**: `ProductData._extend?.price` (可选，支持判空)
- **数量**: `ProductData._extend?.quantity` (可选，支持判空)
- **备注**: `ProductData._extend?.note` (可选，支持判空)

## 基本用法

```tsx
import React, { useRef } from 'react';
import SkuDetailModal, {
  SkuDetailModalRef,
  ProductData,
} from './SkuDetailModal';

const App = () => {
  const modalRef = useRef<SkuDetailModalRef>(null);

  const productData: ProductData = {
    id: 60954,
    title: '定金测试-xue-预约普通商品',
    cover: 'https://example.com/product-image.jpg',
    price: '12.00',
    original_price: '15.00',
    unit: 'kg',
    weight_unit: 'KILOGRAMS',
    _extend: {
      price: '12.00',
      quantity: 1,
      note: '客户备注信息',
      // ... 其他扩展字段
    },
    // ... 其他ProductData字段
  };

  const handleOpenModal = () => {
    modalRef.current?.open(productData);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>打开商品详情</button>

      <SkuDetailModal
        ref={modalRef}
        onConfirm={(data) => console.log('确认:', data)}
        onRemove={(productId) => console.log('删除:', productId)}
        onManualPriceChange={(productId, price) =>
          console.log('价格调整:', productId, price)
        }
      />
    </div>
  );
};
```

## API

### Props


| 参数                  | 说明       | 类型                                           | 默认值 |
| ------------------- | -------- | -------------------------------------------- | --- |
| onConfirm           | 确认按钮回调   | `(data: ProductData) => void`                | -   |
| onRemove            | 删除按钮回调   | `(productId: number) => void`                | -   |
| onManualPriceChange | 手动价格修改回调 | `(productId: number, price: number) => void` | -   |


### Ref 方法


| 方法   | 说明   | 参数                            |
| ---- | ---- | ----------------------------- |
| open | 打开弹窗 | `(data: ProductData) => void` |


### ProductData 接口

```tsx
interface ProductData {
  id: number; // 商品ID
  title: string; // 商品标题
  cover: string; // 商品封面图片
  price: string; // 商品价格
  original_price: string; // 原价
  unit: string; // 单位
  weight_unit: WeightUnit; // 重量单位
  _extend: {
    price?: string; // 扩展价格
    quantity?: number; // 数量
    note?: string; // 备注
    // ... 其他扩展字段
  };
  discount_list?: DiscountItem[]; // 折扣列表
  // ... 其他ProductData字段
}
```

## 样式定制

组件使用 CSS Modules 进行样式隔离，主要样式类名：

- `.pisell-sku-detail-modal` - 弹窗根容器
- `.sku-detail-content` - 内容容器
- `.sku-detail-left` - 左侧商品图片区域
- `.sku-detail-right` - 右侧商品信息区域
- `.product-image` - 商品图片
- `.product-actions` - 操作按钮区域
- `.price-summary` - 价格汇总区域
- `.modal-actions` - 底部操作按钮区域

## 注意事项

1. 组件使用 `forwardRef` 实现，需要通过 ref 调用 `open` 方法打开弹窗
2. 所有数据字段都是可选的，组件内部会进行判空处理
3. 价格计算会自动根据数量、折扣进行更新
4. 支持响应式设计，在移动端会自动调整为垂直布局
5. 所有回调函数都是可选的，可以根据需要实现相应的业务逻辑
6. 组件会自动处理图片加载失败的情况

## 示例

查看 `example.tsx` 文件了解完整的使用示例，该示例使用了 `mock.json` 中的真实数据结构。