refactor(components): 重构优惠券组件样式和结构

- 更新 CouponCard 组件样式,优化主题颜色和布局
- 调整 CouponList 组件样式,使用原生样式替代自定义样式
- 修改 orderConfirm 页面中的地址栏样式
- 更新 QuantitySelector 组件样式,统一数量选择器样式
- 删除 Questions 组件代码
This commit is contained in:
2025-08-11 18:15:36 +08:00
parent bcaf8203e4
commit 6f76be4da4
9 changed files with 230 additions and 297 deletions

View File

@@ -1,7 +1,6 @@
import React from 'react'
import { View, ScrollView } from '@tarojs/components'
import CouponCard, { CouponCardProps } from './CouponCard'
import './CouponCard.scss'
export interface CouponListProps {
/** 优惠券列表数据 */
@@ -33,14 +32,14 @@ const CouponList: React.FC<CouponListProps> = ({
// 垂直布局
if (layout === 'vertical') {
return (
<View className="coupon-list">
<View className="p-4">
{title && (
<View className="coupon-list__title">{title}</View>
<View className="text-lg font-semibold text-gray-800 mb-4">{title}</View>
)}
{coupons.length === 0 ? (
showEmpty && (
<View className="coupon-list__empty">
<View className="text-center py-10 px-5 text-gray-500 text-sm">
{emptyText}
</View>
)
@@ -62,26 +61,30 @@ const CouponList: React.FC<CouponListProps> = ({
return (
<View>
{title && (
<View className="coupon-list__title" style={{ paddingLeft: '16px' }}>
<View className="text-lg font-semibold text-gray-800 mb-4 pl-4">
{title}
</View>
)}
{coupons.length === 0 ? (
showEmpty && (
<View className="coupon-list__empty">
<View className="text-center py-10 px-5 text-gray-500 text-sm">
{emptyText}
</View>
)
) : (
<ScrollView
scrollX
className="coupon-scroll"
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} />