赵忠林
87b83b4d2c
- 调整了 CouponCard、CouponList 和 orderConfirm 组件中的字体大小、间距等样式 - 优化了标题、金额、条件等元素的视觉效果 - 统一了按钮和状态文本的样式 -调整了部分布局和对齐方式
100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
import React from 'react'
|
||
import { View, ScrollView } from '@tarojs/components'
|
||
import CouponCard, { CouponCardProps } from './CouponCard'
|
||
|
||
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="p-4">
|
||
{title && (
|
||
<View className="font-semibold text-gray-800 mb-4">{title}</View>
|
||
)}
|
||
|
||
{coupons.length === 0 ? (
|
||
showEmpty && (
|
||
<View className="text-center py-10 px-5 text-gray-500">
|
||
{emptyText}
|
||
</View>
|
||
)
|
||
) : (
|
||
coupons.map((coupon, index) => (
|
||
<View
|
||
key={index}
|
||
onClick={() => handleCouponClick(coupon, index)}
|
||
>
|
||
<CouponCard {...coupon} />
|
||
</View>
|
||
))
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
// 水平滚动布局
|
||
return (
|
||
<View>
|
||
{title && (
|
||
<View className="font-semibold text-gray-800 mb-4 pl-4">
|
||
{title}
|
||
</View>
|
||
)}
|
||
|
||
{coupons.length === 0 ? (
|
||
showEmpty && (
|
||
<View className="text-center py-10 px-5 text-gray-500">
|
||
{emptyText}
|
||
</View>
|
||
)
|
||
) : (
|
||
<ScrollView
|
||
scrollX
|
||
className="flex p-4 gap-2 overflow-x-auto"
|
||
showScrollbar={false}
|
||
style={{
|
||
WebkitOverflowScrolling: 'touch'
|
||
}}
|
||
>
|
||
{coupons.map((coupon, index) => (
|
||
<View
|
||
key={index}
|
||
className="flex-shrink-0 w-60 mb-0"
|
||
onClick={() => handleCouponClick(coupon, index)}
|
||
>
|
||
<CouponCard {...coupon} />
|
||
</View>
|
||
))}
|
||
</ScrollView>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default CouponList
|