feat(orderConfirm): 优化订单确认页面功能和样式

- 添加优惠券选择功能
- 增加商品数量选择
- 完善订单信息展示
- 优化支付流程
- 添加错误状态和加载状态处理
- 新增 OrderConfirmSkeleton 组件用于加载骨架屏
This commit is contained in:
2025-08-11 17:27:00 +08:00
parent c6fcf9c2e5
commit bcaf8203e4
10 changed files with 1314 additions and 86 deletions

View File

@@ -0,0 +1,88 @@
import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import { Minus, Plus } from '@nutui/icons-react-taro'
import './QuantitySelector.scss'
export interface QuantitySelectorProps {
/** 当前数量 */
value: number
/** 最小数量 */
min?: number
/** 最大数量(库存) */
max?: number
/** 是否禁用 */
disabled?: boolean
/** 数量变化回调 */
onChange?: (value: number) => void
/** 尺寸 */
size?: 'small' | 'medium' | 'large'
/** 是否显示库存提示 */
showStock?: boolean
/** 库存数量 */
stock?: number
}
const QuantitySelector: React.FC<QuantitySelectorProps> = ({
value,
min = 1,
max = 999,
disabled = false,
onChange,
size = 'medium',
showStock = false,
stock
}) => {
const handleDecrease = () => {
if (disabled || value <= min) return
const newValue = value - 1
onChange?.(newValue)
}
const handleIncrease = () => {
if (disabled || value >= max) return
const newValue = value + 1
onChange?.(newValue)
}
const canDecrease = !disabled && value > min
const canIncrease = !disabled && value < max
return (
<View className={`quantity-selector quantity-selector--${size}`}>
<View className="quantity-selector__controls">
<Button
className={`quantity-selector__btn quantity-selector__btn--minus ${!canDecrease ? 'quantity-selector__btn--disabled' : ''}`}
size="small"
onClick={handleDecrease}
disabled={!canDecrease}
>
<Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
</Button>
<View className="quantity-selector__input">
<Text className="quantity-selector__value">{value}</Text>
</View>
<Button
className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`}
size="small"
onClick={handleIncrease}
disabled={!canIncrease}
>
<Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
</Button>
</View>
{showStock && stock !== undefined && (
<View className="quantity-selector__stock">
<Text className="quantity-selector__stock-text">
{stock}
</Text>
</View>
)}
</View>
)
}
export default QuantitySelector