From c87731f1d538892046e6cb4284c1a56f37598d69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 22 Aug 2025 18:20:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor(coupon):=20=E9=87=8D=E6=9E=84=E4=BC=98?= =?UTF-8?q?=E6=83=A0=E5=88=B8=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -调整 CouponCard 和 CouponList 组件的样式，使其更加简洁和一致 - 优化页面布局，利用 flex 布局实现全屏布局 - 移除冗余代码和不必要的组件 - 调整空状态展示方式，增加查看我的优惠券按钮 --- src/components/CouponCard.scss | 60 +++++++++--------- src/components/CouponList.scss | 31 ++++----- src/coupon/index.tsx | 111 ++++++++++++++++----------------- 3 files changed, 99 insertions(+), 103 deletions(-) diff --git a/src/components/CouponCard.scss b/src/components/CouponCard.scss index afdafe8..7127d49 100644 --- a/src/components/CouponCard.scss +++ b/src/components/CouponCard.scss @@ -2,32 +2,32 @@ position: relative; display: flex; width: 100%; - height: 140px; + height: 160px; border-radius: 16px; overflow: hidden; background: #fff; + border: 2px solid #f0f0f0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // 更精美的阴影效果 - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.08), - 0 1px 3px rgba(0, 0, 0, 0.1); + //box-shadow: + // 0 4px 20px rgba(0, 0, 0, 0.08), + // 0 1px 3px rgba(0, 0, 0, 0.1); // 边框光晕效果 - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 16px; - padding: 1px; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - mask-composite: exclude; - pointer-events: none; - } + //&::before { + // content: ''; + // position: absolute; + // top: 0; + // left: 0; + // right: 0; + // bottom: 0; + // border-radius: 16px; + // padding: 1px; + // background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); + // mask-composite: exclude; + // pointer-events: none; + //} &:active { transform: scale(0.98) translateY(1px); @@ -43,7 +43,7 @@ .coupon-left { flex-shrink: 0; - width: 120px; + width: 140px; display: flex; flex-direction: column; align-items: center; @@ -93,7 +93,7 @@ .amount-wrapper { display: flex; align-items: baseline; - margin-bottom: 10px; + margin-bottom: 12px; position: relative; z-index: 2; @@ -151,7 +151,7 @@ position: absolute; width: 20px; height: 20px; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + background: #f5f5f5; border-radius: 50%; top: -10px; left: -8.5px; @@ -165,7 +165,7 @@ position: absolute; width: 20px; height: 20px; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + background: #f5f5f5; border-radius: 50%; bottom: -10px; left: -8.5px; @@ -195,7 +195,7 @@ font-size: 34px; font-weight: 700; color: #1a202c; - margin-bottom: 8px; + margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.5px; @@ -228,8 +228,8 @@ flex-shrink: 0; .coupon-btn { - min-width: 130px; - height: 68px; + min-width: 140px; + height: 72px; border-radius: 34px; font-size: 28px; border: none; @@ -337,10 +337,10 @@ // 响应式优化 @media (max-width: 768px) { .coupon-card { - height: 130px; + height: 150px; .coupon-left { - width: 110px; + width: 130px; .amount-wrapper { .currency { @@ -358,7 +358,7 @@ } .coupon-right { - padding: 16px 14px; + padding: 24px 20px; .coupon-info { .coupon-title { @@ -372,8 +372,8 @@ .coupon-actions { .coupon-btn { - min-width: 120px; - height: 60px; + min-width: 130px; + height: 64px; font-size: 26px; } diff --git a/src/components/CouponList.scss b/src/components/CouponList.scss index 0637acf..8178e55 100644 --- a/src/components/CouponList.scss +++ b/src/components/CouponList.scss @@ -1,42 +1,43 @@ .coupon-list-container { - padding: 0 16px; - background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); - min-height: 100vh; + padding: 0 20px; + background: #f5f5f5; + min-height: 100%; + height: 100%; } .coupon-list-title { font-size: 32px; font-weight: 600; color: #1f2937; - margin-bottom: 24px; - padding-top: 16px; + margin-bottom: 32px; + padding-top: 24px; } .coupon-list-empty { text-align: center; - padding: 80px 20px; + padding: 120px 20px; color: #9ca3af; font-size: 28px; } .coupon-list-content { - padding-bottom: 20px; + padding-bottom: 40px; } .coupon-list-item { - margin-bottom: 20px; + margin-bottom: 32px; transition: all 0.3s ease; - + &:hover { transform: translateY(-2px); } - + &:active { transform: translateY(0); } - + &:last-child { - margin-bottom: 0; + margin-bottom: 24px; } } @@ -49,15 +50,15 @@ margin-bottom: 24px; padding-left: 16px; } - + .coupon-horizontal-scroll { padding: 0 16px; - + .coupon-horizontal-item { flex-shrink: 0; width: 240px; margin-right: 16px; - + &:last-child { margin-right: 16px; // 保持右边距 } diff --git a/src/coupon/index.tsx b/src/coupon/index.tsx index c1edaf3..7bb224c 100644 --- a/src/coupon/index.tsx +++ b/src/coupon/index.tsx @@ -1,7 +1,6 @@ import {useState} from "react"; import Taro, {useDidShow} from '@tarojs/taro' import { - Button, Empty, ConfigProvider, InfiniteLoading, @@ -10,7 +9,6 @@ import { Tabs, TabPane } from '@nutui/nutui-react-taro' -import {Gift} from '@nutui/icons-react-taro' import {View} from '@tarojs/components' import {ShopCoupon} from "@/api/shop/shopCoupon/model"; import {pageShopCoupon} from "@/api/shop/shopCoupon"; @@ -279,7 +277,7 @@ const CouponReceiveCenter = () => { }); return ( - + {/* Tab切换 */} @@ -294,63 +292,60 @@ const CouponReceiveCenter = () => { - {/* 优惠券列表 */} - - - {list.length === 0 && !loading ? ( - - - - ) : ( - - - 加载中... - - } - loadMoreText={ - - {list.length === 0 ? "暂无数据" : "没有更多了"} - - } + {/* 优惠券列表 - 占满剩余空间 */} + + + - - - )} - - - - {/* 底部提示 */} - {list.length === 0 && !loading && ( - - - - - 暂无可领取的优惠券 - - + {list.length === 0 && !loading ? ( + + + + ) : ( + + + 加载中... + + } + loadMoreText={ + + {list.length === 0 ? "暂无数据" : "没有更多了"} + + } + > + + + )} - - )} + + {/* 使用指南弹窗 */}