# GoodConfirm 商品确认组件

基于 uni-popup 弹出层的商品确认组件，提供优雅的商品购买确认界面。

## 功能特性

- 🎨 **现代化设计** - 采用底部弹出设计，符合移动端交互习惯
- 📱 **响应式布局** - 完美适配各种屏幕尺寸
- 🛒 **商品信息展示** - 支持商品图片、标题、价格、标签展示
- 🔢 **数量选择** - 提供加减按钮和手动输入两种方式
- 👥 **动态表单管理** - 根据数量自动添加/删除游客信息表单
- 📝 **表单数据绑定** - 支持姓名和手机号的双向绑定
- 📱 **横向滚动支持** - 游客信息区域支持横向滚动浏览多个表单
- 🗑️ **删除表单支持** - 支持删除游客信息表单，自动同步数量和列表长度
- 💰 **实时计算** - 自动计算并显示总价
- ⚡ **性能优化** - 基于 Vue 3 Composition API，性能卓越
- 🎭 **动画效果** - 流畅的弹出和交互动画
- 🔧 **高度可配置** - 支持自定义商品数据和事件处理

## 基础用法

### 默认使用

```vue
<template>
  <view>
    <button @click="showConfirm">显示确认弹窗</button>
    
    <GoodConfirm 
      ref="confirmRef" 
      :goodsData="goodsData" 
      @confirm="handleConfirm"
      @close="handleClose"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import GoodConfirm from '@/pages/goods/components/GoodConfirm/index.vue'

const confirmRef = ref(null)
const goodsData = ref({
  commodityName: '【成人票】云从朵花温泉门票',
  price: 399,
  timeTag: '随时可退',
  commodityPhotoList: [
    {
      photoUrl: '/static/test/mk_img_1.png'
    }
  ]
})

const showConfirm = () => {
  confirmRef.value?.showPopup()
}

const handleConfirm = (orderData) => {
  console.log('确认订单:', orderData)
  // orderData 包含:
  // {
  //   goodsData: 商品数据,
  //   quantity: 购买数量,
  //   totalPrice: 总价,
  //   userFormList: 游客信息列表 [{ name: '', phone: '' }, ...]
  // }
}

const handleClose = () => {
  console.log('关闭弹窗')
}
</script>
```

### 自定义商品数据

```vue
<script setup>
const customGoodsData = ref({
  commodityName: '【亲子套票】海洋世界一日游',
  price: 268,
  timeTag: '限时优惠',
  commodityPhotoList: [
    {
      photoUrl: '/path/to/custom/image.jpg'
    }
  ]
})
</script>
```

## API 文档

### Props

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| goodsData | Object | {} | 商品数据对象 |

#### goodsData 对象结构

```typescript
interface GoodsData {
  commodityName?: string;        // 商品名称
  price?: number;               // 商品价格
  timeTag?: string;             // 时间标签（如：随时可退）
  commodityPhotoList?: Array<{  // 商品图片列表
    photoUrl: string;           // 图片URL
  }>;
}
```

### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| confirm | orderData | 确认购买时触发 |
| close | - | 关闭弹窗时触发 |

#### confirm 事件参数

```typescript
interface OrderData {
  goodsData: GoodsData;  // 商品数据
  quantity: number;      // 购买数量
  totalPrice: string;    // 总价（字符串格式）
  userFormList: Array<{  // 游客信息列表
    name: string;        // 游客姓名
    phone: string;       // 游客手机号
  }>;
}
```

### Methods

| 方法名 | 参数 | 说明 |
|--------|------|------|
| showPopup | - | 显示弹窗 |
| closePopup | - | 关闭弹窗 |

## 样式定制

组件使用 SCSS 编写样式，支持以下自定义变量：

```scss
// 主色调
$primary-color: #ff6b35;
$primary-gradient: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);

// 文字颜色
$text-primary: #333;
$text-secondary: #666;

// 背景颜色
$bg-white: #fff;
$bg-gray: #f8f9fa;
$border-color: #f5f5f5;

// 圆角
$border-radius: 8px;
$border-radius-large: 20px;
```

## 高级用法

### 响应式数据绑定

```vue
<script setup>
import { computed } from 'vue'

const goodsData = computed(() => ({
  commodityName: store.currentGoods.name,
  price: store.currentGoods.price,
  timeTag: store.currentGoods.refundPolicy,
  commodityPhotoList: store.currentGoods.images
}))
</script>
```

### 订单处理集成

```vue
<script setup>
import { createOrder } from '@/api/order'

const handleConfirm = async (orderData) => {
  try {
    uni.showLoading({ title: '处理中...' })
    
    const result = await createOrder({
      commodityId: goodsData.value.id,
      quantity: orderData.quantity,
      totalAmount: orderData.totalPrice
    })
    
    uni.hideLoading()
    uni.showToast({ title: '订单创建成功', icon: 'success' })
    
    // 跳转到支付页面
    uni.navigateTo({
      url: `/pages/payment/index?orderId=${result.orderId}`
    })
  } catch (error) {
    uni.hideLoading()
    uni.showToast({ title: '订单创建失败', icon: 'error' })
  }
}
</script>
```

## 注意事项

1. **依赖要求**：组件依赖 `uni-popup` 和 `uni-icons`，请确保项目中已安装相关依赖
2. **图片资源**：请确保商品图片路径正确，建议使用绝对路径或网络图片
3. **数量限制**：组件默认最小购买数量为 1，可根据业务需求调整
4. **价格格式**：价格支持数字类型，组件内部会自动处理格式化
5. **事件处理**：建议在 `confirm` 事件中添加适当的错误处理和用户反馈
6. **表单管理**：游客信息表单会根据购买数量自动调整，无需手动管理

## 更新日志

### v1.4.2 (2024-12-19)
**修复Stepper组件响应性问题**
- 🐛 修复Stepper组件不响应外部modelValue变化的问题
- 🔄 添加watch监听器，确保Stepper组件能实时同步外部值变化
- ✨ 完善删除表单卡片时Stepper显示值的自动更新
- 🎯 提升组件间数据同步的准确性和实时性

### v1.4.1 (2024-12-19)
**修复quantity更新问题**
- 🐛 修复删除表单时quantity值未正确更新的问题
- 🔧 优化watch监听器逻辑，添加删除标志位防止冲突
- 🎯 改进deleteUserForm方法，确保数据同步准确
- 🔍 增强demo页面调试信息，便于测试验证

### v1.4.0
- 🗑️ **新增删除功能** - 支持点击删除图标删除游客信息表单
- 🔄 **智能数量同步** - 删除表单时自动同步quantity数量和userFormList长度
- 🛡️ **最小限制保护** - 确保至少保留一位游客信息，防止全部删除
- 🎯 **动态图标控制** - 只有多于一个表单时才显示删除图标
- 📱 **用户体验优化** - 删除操作提供友好的提示信息

### v1.3.0
- 🚫 **防换行优化** - 确保FormCard组件在任何情况下都不会换行显示
- 📐 **布局增强** - 添加flex-shrink: 0确保表单卡片保持固定宽度
- 🎯 **滚动优化** - 改进横向滚动体验，支持触摸滚动
- 🧪 **测试改进** - demo页面新增多人数测试按钮，便于测试横向滚动效果

### v1.2.0
- 📱 **新增横向滚动** - 游客信息区域支持横向滚动浏览多个表单
- 🎨 **优化布局设计** - 表单卡片采用固定宽度，提升视觉体验
- 🔧 **改进滚动体验** - 隐藏滚动条，提供更清爽的界面
- 📐 **响应式优化** - 确保在不同屏幕尺寸下的良好表现

### v1.1.0
- 🎉 **新增动态表单管理** - 根据购买数量自动添加/删除游客信息表单
- 📝 **新增表单数据绑定** - 支持游客姓名和手机号的双向绑定
- 🔄 **优化数据结构** - 确认订单时返回完整的用户信息列表
- 🎯 **改进用户体验** - 表单项数量与购买数量实时同步
- 🐛 **修复已知问题** - 优化组件初始化和数据更新逻辑

### v1.0.0 (2024-01-XX)
- ✨ 初始版本发布
- 🎨 基于 uni-popup 的底部弹出设计
- 🛒 完整的商品信息展示功能
- 🔢 数量选择和总价计算
- 📱 响应式移动端适配
- 🎭 流畅的动画效果
- 📚 完整的文档和示例

## 技术栈

- **框架**: Vue 3 + Composition API
- **UI组件**: uni-app + uni-ui
- **样式**: SCSS
- **构建工具**: Vite

## 浏览器支持

- iOS Safari 10+
- Android Chrome 50+
- 微信小程序
- 支付宝小程序
- H5 现代浏览器

## 许可证

MIT License