YGChatCS/pages/goods/components/GoodConfirm/README.md

GoodConfirm 商品确认组件

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

功能特性

• 🎨 现代化设计 - 采用底部弹出设计，符合移动端交互习惯
• 📱 响应式布局 - 完美适配各种屏幕尺寸
• 🛒 商品信息展示 - 支持商品图片、标题、价格、标签展示
• 🔢 数量选择 - 提供加减按钮和手动输入两种方式
• 💰 实时计算 - 自动计算并显示总价
• ⚡ 性能优化 - 基于 Vue 3 Composition API，性能卓越
• 🎭 动画效果 - 流畅的弹出和交互动画
• 🔧 高度可配置 - 支持自定义商品数据和事件处理

基础用法

默认使用

<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)
  // 处理订单确认逻辑
}

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;    // 总价（字符串格式）
}

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>

注意事项

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

更新日志

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