refactor(coupon): 重构优惠券页面布局和样式
-调整 CouponCard 和 CouponList 组件的样式，使其更加简洁和一致 - 优化页面布局，利用 flex 布局实现全屏布局 - 移除冗余代码和不必要的组件 - 调整空状态展示方式，增加查看我的优惠券按钮
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
.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 {
|
||||
@@ -36,7 +37,7 @@
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={{ height: '600px', overflowY: 'auto' }} id="coupon-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center" style={{height: '500px'}}>
|
||||
<Empty
|
||||
description="暂无可领取的优惠券"
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<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>
|
||||
}
|
||||
{/* 优惠券列表 - 占满剩余空间 */}
|
||||
<View className="flex-1 overflow-hidden">
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
height: 'calc(100vh - 60px)',
|
||||
overflowY: 'auto',
|
||||
paddingTop: '24px',
|
||||
paddingBottom: '32px'
|
||||
}}
|
||||
id="coupon-scroll"
|
||||
>
|
||||
<CouponList
|
||||
coupons={list.map(transformCouponData)}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 底部提示 */}
|
||||
{list.length === 0 && !loading && (
|
||||
<View className="text-center py-8">
|
||||
<View className="text-gray-400 mb-4">
|
||||
<Gift size="48" />
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center h-full">
|
||||
<Empty
|
||||
description="暂无可领取的优惠券"
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
actions={[
|
||||
{
|
||||
text: '查看我的优惠券',
|
||||
onClick: handleViewMyCoupons
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<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>
|
||||
<View className="flex gap-2 justify-center">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={handleViewMyCoupons}
|
||||
>
|
||||
查看我的优惠券
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</PullToRefresh>
|
||||
</View>
|
||||
|
||||
{/* 使用指南弹窗 */}
|
||||
<CouponGuide
|
||||
|
||||
Reference in New Issue
Block a user