<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>

自定义商品数据

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

API 文档

Props

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

goodsData 对象结构

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

Events

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

confirm 事件参数

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

Methods

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

样式定制

组件使用 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;

高级用法

响应式数据绑定

<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>

订单处理集成

<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>

注意事项

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

更新日志

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

README.md Unescape Escape

GoodConfirm 商品确认组件

功能特性

基础用法

默认使用

自定义商品数据

API 文档

Props

goodsData 对象结构

Events

confirm 事件参数

Methods

样式定制

高级用法

响应式数据绑定

订单处理集成

注意事项

更新日志

v1.4.2 (2024-12-19)

v1.4.1 (2024-12-19)

v1.4.0

v1.3.0

v1.2.0

v1.1.0

v1.0.0 (2024-01-XX)

技术栈

浏览器支持

许可证

README.md