feat: 商品详情交互调整
This commit is contained in:
duanshuwen
234
pages/goods/components/GoodConfirm/README.md
Normal file
234
pages/goods/components/GoodConfirm/README.md
Normal file
@@ -0,0 +1,234 @@
|
||||
# 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)
|
||||
// 处理订单确认逻辑
|
||||
}
|
||||
|
||||
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; // 总价（字符串格式）
|
||||
}
|
||||
```
|
||||
|
||||
### 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` 事件中添加适当的错误处理和用户反馈
|
||||
|
||||
## 更新日志
|
||||
|
||||
### 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
|
||||
Reference in New Issue
Block a user