赵忠林
bcaf8203e4
- 添加优惠券选择功能 - 增加商品数量选择 - 完善订单信息展示 - 优化支付流程 - 添加错误状态和加载状态处理 - 新增 OrderConfirmSkeleton 组件用于加载骨架屏
97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
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
|