Browse Source
- 添加优惠券选择功能 - 增加商品数量选择 - 完善订单信息展示 - 优化支付流程 - 添加错误状态和加载状态处理 - 新增 OrderConfirmSkeleton 组件用于加载骨架屏master
10 changed files with 1313 additions and 85 deletions
@ -0,0 +1,253 @@ |
|||
.coupon-card { |
|||
position: relative; |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100px; |
|||
margin-bottom: 12px; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
|||
background: #fff; |
|||
|
|||
&--disabled { |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
// 主题颜色 |
|||
&--red { |
|||
.coupon-card__left { |
|||
background: linear-gradient(135deg, #ff6b6b, #ff5252); |
|||
} |
|||
.coupon-card__btn--receive, |
|||
.coupon-card__btn--use { |
|||
background: linear-gradient(135deg, #ff6b6b, #ff5252); |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&--orange { |
|||
.coupon-card__left { |
|||
background: linear-gradient(135deg, #ffa726, #ff9800); |
|||
} |
|||
.coupon-card__btn--receive, |
|||
.coupon-card__btn--use { |
|||
background: linear-gradient(135deg, #ffa726, #ff9800); |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&--blue { |
|||
.coupon-card__left { |
|||
background: linear-gradient(135deg, #42a5f5, #2196f3); |
|||
} |
|||
.coupon-card__btn--receive, |
|||
.coupon-card__btn--use { |
|||
background: linear-gradient(135deg, #42a5f5, #2196f3); |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&--purple { |
|||
.coupon-card__left { |
|||
background: linear-gradient(135deg, #ab47bc, #9c27b0); |
|||
} |
|||
.coupon-card__btn--receive, |
|||
.coupon-card__btn--use { |
|||
background: linear-gradient(135deg, #ab47bc, #9c27b0); |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&--green { |
|||
.coupon-card__left { |
|||
background: linear-gradient(135deg, #66bb6a, #4caf50); |
|||
} |
|||
.coupon-card__btn--receive, |
|||
.coupon-card__btn--use { |
|||
background: linear-gradient(135deg, #66bb6a, #4caf50); |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
// 左侧金额区域 |
|||
&__left { |
|||
flex: 0 0 100px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #fff; |
|||
position: relative; |
|||
} |
|||
|
|||
&__amount { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
&__currency { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-right: 1px; |
|||
} |
|||
|
|||
&__value { |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
} |
|||
|
|||
&__condition { |
|||
font-size: 11px; |
|||
opacity: 0.9; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
// 分割线区域 |
|||
&__divider { |
|||
flex: 0 0 2px; |
|||
position: relative; |
|||
background: #f0f0f0; |
|||
} |
|||
|
|||
&__divider-line { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: repeating-linear-gradient( |
|||
to bottom, |
|||
transparent 0px, |
|||
transparent 4px, |
|||
#ddd 4px, |
|||
#ddd 8px |
|||
); |
|||
} |
|||
|
|||
&__circle { |
|||
position: absolute; |
|||
width: 16px; |
|||
height: 16px; |
|||
background: #f5f5f5; |
|||
border-radius: 50%; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
|
|||
&--top { |
|||
top: -8px; |
|||
} |
|||
|
|||
&--bottom { |
|||
bottom: -8px; |
|||
} |
|||
} |
|||
|
|||
// 右侧信息区域 |
|||
&__right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
padding: 12px; |
|||
} |
|||
|
|||
&__info { |
|||
flex: 1; |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
&__validity { |
|||
font-size: 11px; |
|||
color: #999; |
|||
} |
|||
|
|||
&__action { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
|
|||
&__btn { |
|||
min-width: 50px; |
|||
height: 24px; |
|||
border-radius: 12px; |
|||
font-size: 11px; |
|||
border: none; |
|||
|
|||
&--receive, |
|||
&--use { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&__status { |
|||
font-size: 12px; |
|||
color: #999; |
|||
padding: 4px 8px; |
|||
} |
|||
|
|||
// 状态遮罩 |
|||
&__mask { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1; |
|||
} |
|||
|
|||
&__mask-text { |
|||
background: rgba(0, 0, 0, 0.6); |
|||
color: #fff; |
|||
padding: 4px 12px; |
|||
border-radius: 12px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
// 优惠券列表容器 |
|||
.coupon-list { |
|||
padding: 16px; |
|||
|
|||
&__title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
&__empty { |
|||
text-align: center; |
|||
padding: 40px 20px; |
|||
color: #999; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
// 优惠券横向滚动容器 |
|||
.coupon-scroll { |
|||
display: flex; |
|||
padding: 16px; |
|||
gap: 8px; |
|||
overflow-x: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.coupon-card { |
|||
flex: 0 0 240px; |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,168 @@ |
|||
import React from 'react' |
|||
import { View, Text } from '@tarojs/components' |
|||
import { Button } from '@nutui/nutui-react-taro' |
|||
import './CouponCard.scss' |
|||
|
|||
export interface CouponCardProps { |
|||
/** 优惠券金额 */ |
|||
amount: number |
|||
/** 最低消费金额 */ |
|||
minAmount?: number |
|||
/** 优惠券类型：1-满减券 2-折扣券 3-免费券 */ |
|||
type?: 1 | 2 | 3 |
|||
/** 优惠券状态：0-未使用 1-已使用 2-已过期 */ |
|||
status?: 0 | 1 | 2 |
|||
/** 优惠券标题 */ |
|||
title?: string |
|||
/** 有效期开始时间 */ |
|||
startTime?: string |
|||
/** 有效期结束时间 */ |
|||
endTime?: string |
|||
/** 是否显示领取按钮 */ |
|||
showReceiveBtn?: boolean |
|||
/** 是否显示使用按钮 */ |
|||
showUseBtn?: boolean |
|||
/** 领取按钮点击事件 */ |
|||
onReceive?: () => void |
|||
/** 使用按钮点击事件 */ |
|||
onUse?: () => void |
|||
/** 优惠券样式主题：red | orange | blue | purple | green */ |
|||
theme?: 'red' | 'orange' | 'blue' | 'purple' | 'green' |
|||
} |
|||
|
|||
const CouponCard: React.FC<CouponCardProps> = ({ |
|||
amount, |
|||
minAmount, |
|||
type = 1, |
|||
status = 0, |
|||
title, |
|||
startTime, |
|||
endTime, |
|||
showReceiveBtn = false, |
|||
showUseBtn = false, |
|||
onReceive, |
|||
onUse, |
|||
theme = 'red' |
|||
}) => { |
|||
// 格式化优惠券金额显示
|
|||
const formatAmount = () => { |
|||
switch (type) { |
|||
case 1: // 满减券
|
|||
return `¥${amount}` |
|||
case 2: // 折扣券
|
|||
return `${amount}折` |
|||
case 3: // 免费券
|
|||
return '免费' |
|||
default: |
|||
return `¥${amount}` |
|||
} |
|||
} |
|||
|
|||
// 获取优惠券状态文本
|
|||
const getStatusText = () => { |
|||
switch (status) { |
|||
case 0: |
|||
return '未使用' |
|||
case 1: |
|||
return '已使用' |
|||
case 2: |
|||
return '已过期' |
|||
default: |
|||
return '未使用' |
|||
} |
|||
} |
|||
|
|||
// 获取使用条件文本
|
|||
const getConditionText = () => { |
|||
if (type === 3) return '无门槛' |
|||
if (minAmount && minAmount > 0) { |
|||
return `满${minAmount}可用` |
|||
} |
|||
return '无门槛' |
|||
} |
|||
|
|||
// 格式化日期
|
|||
const formatDate = (dateStr?: string) => { |
|||
if (!dateStr) return '' |
|||
const date = new Date(dateStr) |
|||
return `${date.getMonth() + 1}.${date.getDate()}` |
|||
} |
|||
|
|||
// 获取有效期文本
|
|||
const getValidityText = () => { |
|||
if (startTime && endTime) { |
|||
return `${formatDate(startTime)}-${formatDate(endTime)}` |
|||
} |
|||
return '' |
|||
} |
|||
|
|||
return ( |
|||
<View className={`coupon-card coupon-card--${theme} ${status !== 0 ? 'coupon-card--disabled' : ''}`}> |
|||
{/* 左侧金额区域 */} |
|||
<View className="coupon-card__left"> |
|||
<View className="coupon-card__amount"> |
|||
<Text className="coupon-card__currency">¥</Text> |
|||
<Text className="coupon-card__value">{amount}</Text> |
|||
</View> |
|||
<View className="coupon-card__condition"> |
|||
{getConditionText()} |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 中间分割线 */} |
|||
<View className="coupon-card__divider"> |
|||
<View className="coupon-card__divider-line"></View> |
|||
<View className="coupon-card__circle coupon-card__circle--top"></View> |
|||
<View className="coupon-card__circle coupon-card__circle--bottom"></View> |
|||
</View> |
|||
|
|||
{/* 右侧信息区域 */} |
|||
<View className="coupon-card__right"> |
|||
<View className="coupon-card__info"> |
|||
<View className="coupon-card__title"> |
|||
{title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')} |
|||
</View> |
|||
<View className="coupon-card__validity"> |
|||
有效期：{getValidityText()} |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 按钮区域 */} |
|||
<View className="coupon-card__action"> |
|||
{showReceiveBtn && status === 0 && ( |
|||
<Button |
|||
className="coupon-card__btn coupon-card__btn--receive" |
|||
size="small" |
|||
onClick={onReceive} |
|||
> |
|||
领取 |
|||
</Button> |
|||
)} |
|||
{showUseBtn && status === 0 && ( |
|||
<Button |
|||
className="coupon-card__btn coupon-card__btn--use" |
|||
size="small" |
|||
onClick={onUse} |
|||
> |
|||
使用 |
|||
</Button> |
|||
)} |
|||
{status !== 0 && ( |
|||
<View className="coupon-card__status"> |
|||
{getStatusText()} |
|||
</View> |
|||
)} |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 状态遮罩 */} |
|||
{status !== 0 && ( |
|||
<View className="coupon-card__mask"> |
|||
<Text className="coupon-card__mask-text">{getStatusText()}</Text> |
|||
</View> |
|||
)} |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default CouponCard |
|||
@ -0,0 +1,96 @@ |
|||
import React from 'react' |
|||
import { View, ScrollView } from '@tarojs/components' |
|||
import CouponCard, { CouponCardProps } from './CouponCard' |
|||
import './CouponCard.scss' |
|||
|
|||
export interface CouponListProps { |
|||
/** 优惠券列表数据 */ |
|||
coupons: CouponCardProps[] |
|||
/** 列表标题 */ |
|||
title?: string |
|||
/** 布局方式：vertical-垂直布局 horizontal-水平滚动 */ |
|||
layout?: 'vertical' | 'horizontal' |
|||
/** 是否显示空状态 */ |
|||
showEmpty?: boolean |
|||
/** 空状态文案 */ |
|||
emptyText?: string |
|||
/** 优惠券点击事件 */ |
|||
onCouponClick?: (coupon: CouponCardProps, index: number) => void |
|||
} |
|||
|
|||
const CouponList: React.FC<CouponListProps> = ({ |
|||
coupons = [], |
|||
title, |
|||
layout = 'vertical', |
|||
showEmpty = true, |
|||
emptyText = '暂无优惠券', |
|||
onCouponClick |
|||
}) => { |
|||
const handleCouponClick = (coupon: CouponCardProps, index: number) => { |
|||
onCouponClick?.(coupon, index) |
|||
} |
|||
|
|||
// 垂直布局
|
|||
if (layout === 'vertical') { |
|||
return ( |
|||
<View className="coupon-list"> |
|||
{title && ( |
|||
<View className="coupon-list__title">{title}</View> |
|||
)} |
|||
|
|||
{coupons.length === 0 ? ( |
|||
showEmpty && ( |
|||
<View className="coupon-list__empty"> |
|||
{emptyText} |
|||
</View> |
|||
) |
|||
) : ( |
|||
coupons.map((coupon, index) => ( |
|||
<View |
|||
key={index} |
|||
onClick={() => handleCouponClick(coupon, index)} |
|||
> |
|||
<CouponCard {...coupon} /> |
|||
</View> |
|||
)) |
|||
)} |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
// 水平滚动布局
|
|||
return ( |
|||
<View> |
|||
{title && ( |
|||
<View className="coupon-list__title" style={{ paddingLeft: '16px' }}> |
|||
{title} |
|||
</View> |
|||
)} |
|||
|
|||
{coupons.length === 0 ? ( |
|||
showEmpty && ( |
|||
<View className="coupon-list__empty"> |
|||
{emptyText} |
|||
</View> |
|||
) |
|||
) : ( |
|||
<ScrollView |
|||
scrollX |
|||
className="coupon-scroll" |
|||
showScrollbar={false} |
|||
> |
|||
{coupons.map((coupon, index) => ( |
|||
<View |
|||
key={index} |
|||
onClick={() => handleCouponClick(coupon, index)} |
|||
> |
|||
<CouponCard {...coupon} /> |
|||
</View> |
|||
))} |
|||
</ScrollView> |
|||
)} |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default CouponList |
|||
@ -0,0 +1,78 @@ |
|||
.order-confirm-skeleton { |
|||
padding: 0; |
|||
background: #f5f5f5; |
|||
|
|||
.skeleton-section { |
|||
background: #fff; |
|||
margin-bottom: 8px; |
|||
padding: 16px; |
|||
} |
|||
|
|||
.skeleton-address { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
gap: 12px; |
|||
|
|||
&-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
} |
|||
|
|||
.skeleton-goods { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
gap: 12px; |
|||
|
|||
&-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
|
|||
&-price { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12px; |
|||
} |
|||
} |
|||
|
|||
.skeleton-payment { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.skeleton-price-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 12px; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.skeleton-remark { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.skeleton-bottom { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #fff; |
|||
padding: 16px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
@ -0,0 +1,80 @@ |
|||
import React from 'react' |
|||
import { View } from '@tarojs/components' |
|||
import { Skeleton } from '@nutui/nutui-react-taro' |
|||
import './OrderConfirmSkeleton.scss' |
|||
|
|||
const OrderConfirmSkeleton: React.FC = () => { |
|||
return ( |
|||
<View className="order-confirm-skeleton"> |
|||
{/* 收货地址骨架 */} |
|||
<View className="skeleton-section"> |
|||
<View className="skeleton-address"> |
|||
<Skeleton width="20px" height="20px" animated /> |
|||
<View className="skeleton-address-content"> |
|||
<Skeleton width="200px" height="16px" animated /> |
|||
<Skeleton width="120px" height="14px" animated /> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 商品信息骨架 */} |
|||
<View className="skeleton-section"> |
|||
<View className="skeleton-goods"> |
|||
<Skeleton width="80px" height="80px" animated /> |
|||
<View className="skeleton-goods-content"> |
|||
<Skeleton width="180px" height="16px" animated /> |
|||
<Skeleton width="60px" height="14px" animated /> |
|||
<View className="skeleton-goods-price"> |
|||
<Skeleton width="80px" height="16px" animated /> |
|||
<Skeleton width="40px" height="14px" animated /> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 支付方式骨架 */} |
|||
<View className="skeleton-section"> |
|||
<View className="skeleton-payment"> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
<Skeleton width="80px" height="16px" animated /> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 价格明细骨架 */} |
|||
<View className="skeleton-section"> |
|||
<View className="skeleton-price-item"> |
|||
<Skeleton width="100px" height="16px" animated /> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
</View> |
|||
<View className="skeleton-price-item"> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
<Skeleton width="80px" height="16px" animated /> |
|||
</View> |
|||
<View className="skeleton-price-item"> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
</View> |
|||
<View className="skeleton-price-item"> |
|||
<Skeleton width="120px" height="18px" animated /> |
|||
<Skeleton width="80px" height="18px" animated /> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 订单备注骨架 */} |
|||
<View className="skeleton-section"> |
|||
<View className="skeleton-remark"> |
|||
<Skeleton width="60px" height="16px" animated /> |
|||
<Skeleton width="200px" height="32px" animated /> |
|||
</View> |
|||
</View> |
|||
|
|||
{/* 底部按钮骨架 */} |
|||
<View className="skeleton-bottom"> |
|||
<Skeleton width="120px" height="20px" animated /> |
|||
<Skeleton width="100px" height="40px" animated /> |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default OrderConfirmSkeleton |
|||
@ -0,0 +1,121 @@ |
|||
.quantity-selector { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 4px; |
|||
|
|||
&__controls { |
|||
display: flex; |
|||
align-items: center; |
|||
border: 1px solid #e5e5e5; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
} |
|||
|
|||
&__btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: none; |
|||
background: #f8f8f8; |
|||
color: #666; |
|||
transition: all 0.2s ease; |
|||
|
|||
&:active { |
|||
background: #e5e5e5; |
|||
} |
|||
|
|||
&--disabled { |
|||
background: #f5f5f5 !important; |
|||
color: #ccc !important; |
|||
cursor: not-allowed; |
|||
} |
|||
} |
|||
|
|||
&__input { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #fff; |
|||
border-left: 1px solid #e5e5e5; |
|||
border-right: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
&__value { |
|||
font-size: 14px; |
|||
color: #333; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
|
|||
&__stock { |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
&__stock-text { |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
|
|||
// 尺寸变体 |
|||
&--small { |
|||
.quantity-selector__controls { |
|||
height: 24px; |
|||
} |
|||
|
|||
.quantity-selector__btn { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.quantity-selector__input { |
|||
width: 32px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.quantity-selector__value { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
|
|||
&--medium { |
|||
.quantity-selector__controls { |
|||
height: 32px; |
|||
} |
|||
|
|||
.quantity-selector__btn { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
|
|||
.quantity-selector__input { |
|||
width: 40px; |
|||
height: 32px; |
|||
} |
|||
|
|||
.quantity-selector__value { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
&--large { |
|||
.quantity-selector__controls { |
|||
height: 40px; |
|||
} |
|||
|
|||
.quantity-selector__btn { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.quantity-selector__input { |
|||
width: 48px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.quantity-selector__value { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
@ -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 |
|||
Loading…
Reference in new issue