You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
88 lines
2.4 KiB
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="text-sm">
|
|
库存 {stock} 件
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default QuantitySelector
|