赵忠林
1e51a137ee
- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画 - 添加了响应式样式，提高了移动端体验 - 新增了 CouponList组件样式，用于展示优惠券列表
101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
import React from 'react'
|
||
import { View, ScrollView } from '@tarojs/components'
|
||
import CouponCard, { CouponCardProps } from './CouponCard'
|
||
import './CouponList.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-container">
|
||
{title && (
|
||
<View className="coupon-list-title">{title}</View>
|
||
)}
|
||
|
||
{coupons.length === 0 ? (
|
||
showEmpty && (
|
||
<View className="coupon-list-empty">
|
||
{emptyText}
|
||
</View>
|
||
)
|
||
) : (
|
||
<View className="coupon-list-content">
|
||
{coupons.map((coupon, index) => (
|
||
<View
|
||
key={index}
|
||
className="coupon-list-item"
|
||
onClick={() => handleCouponClick(coupon, index)}
|
||
>
|
||
<CouponCard {...coupon} />
|
||
</View>
|
||
))}
|
||
</View>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
// 水平滚动布局
|
||
return (
|
||
<View className="coupon-horizontal-container">
|
||
{title && (
|
||
<View className="coupon-horizontal-title">
|
||
{title}
|
||
</View>
|
||
)}
|
||
|
||
{coupons.length === 0 ? (
|
||
showEmpty && (
|
||
<View className="coupon-list-empty">
|
||
{emptyText}
|
||
</View>
|
||
)
|
||
) : (
|
||
<ScrollView
|
||
scrollX
|
||
className="coupon-horizontal-scroll flex overflow-x-auto"
|
||
showScrollbar={false}
|
||
>
|
||
{coupons.map((coupon, index) => (
|
||
<View
|
||
key={index}
|
||
className="coupon-horizontal-item"
|
||
onClick={() => handleCouponClick(coupon, index)}
|
||
>
|
||
<CouponCard {...coupon} />
|
||
</View>
|
||
))}
|
||
</ScrollView>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default CouponList
|