refactor(coupon): 重构优惠券页面布局和样式

-调整 CouponCard 和 CouponList 组件的样式，使其更加简洁和一致
- 优化页面布局，利用 flex 布局实现全屏布局
- 移除冗余代码和不必要的组件
- 调整空状态展示方式，增加查看我的优惠券按钮

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:
+  //box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.08),
+  //  0 4px 20px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.1);
+  //  0 1px 3px rgba(0, 0, 0, 0.1);
 
   // 边框光晕效果
-  &::before {
+  //&::before {
-    content: '';
+  //  content: '';
-    position: absolute;
+  //  position: absolute;
-    top: 0;
+  //  top: 0;
-    left: 0;
+  //  left: 0;
-    right: 0;
+  //  right: 0;
-    bottom: 0;
+  //  bottom: 0;
-    border-radius: 16px;
+  //  border-radius: 16px;
-    padding: 1px;
+  //  padding: 1px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
+  //  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;
-    mask-composite: exclude;
+  //  pointer-events: none;
-    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;
+        min-width: 140px;
-        height: 68px;
+        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;
+          min-width: 130px;
-          height: 60px;
+          height: 64px;
           font-size: 26px;
         }
 

src/components/CouponList.scss

@@ -1,42 +1,43 @@
 .coupon-list-container {
-  padding: 0 16px;
+  padding: 0 20px;
-  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+  background: #f5f5f5;
-  min-height: 100vh;
+  min-height: 100%;
+  height: 100%;
 }
 
 .coupon-list-title {
   font-size: 32px;
   font-weight: 600;
   color: #1f2937;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
-  padding-top: 16px;
+  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; // 保持右边距
       }

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 (
-    <ConfigProvider className={'pt-3'}>
+    <ConfigProvider className="h-screen flex flex-col">
       {/* Tab切换 */}
       <View className="bg-white hidden">
         <Tabs value={activeTab} onChange={handleTabChange}>
@@ -294,63 +292,60 @@ const CouponReceiveCenter = () => {
         </Tabs>
       </View>
 
-      {/* 优惠券列表 */}
+      {/* 优惠券列表 - 占满剩余空间 */}
-      <PullToRefresh
+      <View className="flex-1 overflow-hidden">
-        onRefresh={handleRefresh}
+        <PullToRefresh
-        headHeight={60}
+          onRefresh={handleRefresh}
-      >
+          headHeight={60}
-        <View style={{ height: '600px', overflowY: 'auto' }} id="coupon-scroll">
+        >
-        {list.length === 0 && !loading ? (
+          <View
-          <View className="flex flex-col justify-center items-center" style={{height: '500px'}}>
+            style={{
-            <Empty
+              height: 'calc(100vh - 60px)',
-              description="暂无可领取的优惠券"
+              overflowY: 'auto',
-              style={{backgroundColor: 'transparent'}}
+              paddingTop: '24px',
-            />
+              paddingBottom: '32px'
-          </View>
+            }}
-        ) : (
+            id="coupon-scroll"
-          <InfiniteLoading
-            target="coupon-scroll"
-            hasMore={hasMore}
-            onLoadMore={loadMore}
-            loadingText={
-              <View className="flex justify-center items-center py-4">
-                <Loading />
-                <View className="ml-2">加载中...</View>
-              </View>
-            }
-            loadMoreText={
-              <View className="text-center py-4 text-gray-500">
-                {list.length === 0 ? "暂无数据" : "没有更多了"}
-              </View>
-            }
           >
-            <CouponList
+            {list.length === 0 && !loading ? (
-              coupons={list.map(transformCouponData)}
+              <View className="flex flex-col justify-center items-center h-full">
-              showEmpty={false}
+                <Empty
-            />
+                  description="暂无可领取的优惠券"
-          </InfiniteLoading>
+                  style={{backgroundColor: 'transparent'}}
-        )}
+                  actions={[
-        </View>
+                    {
-      </PullToRefresh>
+                      text: '查看我的优惠券',
-
+                      onClick: handleViewMyCoupons
-      {/* 底部提示 */}
+                    }
-      {list.length === 0 && !loading && (
+                  ]}
-        <View className="text-center py-8">
+                />
-          <View className="text-gray-400 mb-4">
+              </View>
-            <Gift size="48" />
+            ) : (
+              <InfiniteLoading
+                target="coupon-scroll"
+                hasMore={hasMore}
+                onLoadMore={loadMore}
+                loadingText={
+                  <View className="flex justify-center items-center py-4">
+                    <Loading />
+                    <View className="ml-2">加载中...</View>
+                  </View>
+                }
+                loadMoreText={
+                  <View className="text-center py-4 text-gray-500">
+                    {list.length === 0 ? "暂无数据" : "没有更多了"}
+                  </View>
+                }
+              >
+                <CouponList
+                  coupons={list.map(transformCouponData)}
+                  showEmpty={false}
+                />
+              </InfiniteLoading>
+            )}
           </View>
-          <View className="text-gray-500 mb-2">暂无可领取的优惠券</View>
+        </PullToRefresh>
-          <View className="flex gap-2 justify-center">
+      </View>
-            <Button
-              size="small"
-              type="primary"
-              onClick={handleViewMyCoupons}
-            >
-              查看我的优惠券
-            </Button>
-          </View>
-        </View>
-      )}
 
       {/* 使用指南弹窗 */}
       <CouponGuide