refactor(components): 重构 CouponCard 组件样式
- 优化了 CouponCard 组件的视觉效果,增加了更多细节和动画 - 添加了响应式样式,提高了移动端体验 - 新增了 CouponList组件样式,用于展示优惠券列表
This commit is contained in:
4
src/coupon/index.config.ts
Normal file
4
src/coupon/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '领劵中心',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -4,32 +4,28 @@ import {
|
||||
Button,
|
||||
Empty,
|
||||
ConfigProvider,
|
||||
SearchBar,
|
||||
InfiniteLoading,
|
||||
Loading,
|
||||
PullToRefresh,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Swiper,
|
||||
SwiperItem
|
||||
TabPane
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {Filter, Board, Gift} from '@nutui/icons-react-taro'
|
||||
import {Gift} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {pageShopCoupon, receiveCoupon} from "@/api/shop/shopCoupon";
|
||||
import {pageShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import CouponGuide from "@/components/CouponGuide";
|
||||
import CouponFilter from "@/components/CouponFilter";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
import {takeCoupon} from "@/api/shop/shopUserCoupon";
|
||||
|
||||
const CouponReceiveCenter = () => {
|
||||
const [list, setList] = useState<ShopCoupon[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [activeTab, setActiveTab] = useState('0') // 0-全部 1-满减券 2-折扣券 3-免费券
|
||||
const [hotCoupons, setHotCoupons] = useState<ShopCoupon[]>([]) // 热门优惠券
|
||||
const [showGuide, setShowGuide] = useState(false)
|
||||
const [showFilter, setShowFilter] = useState(false)
|
||||
const [filters, setFilters] = useState({
|
||||
@@ -80,7 +76,7 @@ const CouponReceiveCenter = () => {
|
||||
const res = await pageShopCoupon({
|
||||
page: currentPage,
|
||||
limit: 10,
|
||||
keywords: searchValue,
|
||||
keywords: '',
|
||||
enabled: 1, // 启用状态
|
||||
isExpire: 0, // 未过期
|
||||
...typeFilter
|
||||
@@ -123,7 +119,7 @@ const CouponReceiveCenter = () => {
|
||||
const res = await pageShopCoupon({
|
||||
page: currentPage,
|
||||
limit: 10,
|
||||
keywords: searchValue,
|
||||
keywords: '',
|
||||
enabled: 1, // 启用状态
|
||||
isExpire: 0, // 未过期
|
||||
...typeFilter,
|
||||
@@ -160,12 +156,6 @@ const CouponReceiveCenter = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value)
|
||||
reload(true)
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await reload(true)
|
||||
@@ -187,26 +177,6 @@ const CouponReceiveCenter = () => {
|
||||
loadCouponsByType(typeFilter)
|
||||
}
|
||||
|
||||
// 加载热门优惠券
|
||||
const loadHotCoupons = async () => {
|
||||
try {
|
||||
const res = await pageShopCoupon({
|
||||
page: 1,
|
||||
limit: 5,
|
||||
enabled: 1,
|
||||
isExpire: 0,
|
||||
sortBy: 'createTime',
|
||||
sortOrder: 'desc'
|
||||
})
|
||||
|
||||
if (res && res.list) {
|
||||
setHotCoupons(res.list)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取热门优惠券失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 转换优惠券数据为CouponCard组件所需格式
|
||||
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
|
||||
let amount = 0
|
||||
@@ -263,7 +233,7 @@ const CouponReceiveCenter = () => {
|
||||
}
|
||||
|
||||
// 调用领取接口
|
||||
await receiveCoupon({
|
||||
await takeCoupon({
|
||||
couponId: coupon.id!,
|
||||
userId: userId
|
||||
})
|
||||
@@ -279,35 +249,11 @@ const CouponReceiveCenter = () => {
|
||||
console.error('领取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: error.message || '领取失败',
|
||||
icon: 'error'
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠券点击事件
|
||||
const handleCouponClick = (_: CouponCardProps, index: number) => {
|
||||
const originalCoupon = list[index]
|
||||
if (originalCoupon) {
|
||||
// 显示优惠券详情
|
||||
handleCouponDetail(originalCoupon)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示优惠券详情
|
||||
const handleCouponDetail = (coupon: ShopCoupon) => {
|
||||
// 可以显示优惠券详情弹窗或跳转到详情页
|
||||
Taro.showModal({
|
||||
title: coupon.name || '优惠券详情',
|
||||
content: `${coupon.description || ''}
|
||||
|
||||
优惠类型:${coupon.type === 10 ? '满减券' : coupon.type === 20 ? '折扣券' : '免费券'}
|
||||
${coupon.minPrice ? `最低消费:¥${coupon.minPrice}` : ''}
|
||||
有效期:${coupon.startTime} 至 ${coupon.endTime}`,
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
|
||||
// 筛选条件变更
|
||||
const handleFiltersChange = (newFilters: any) => {
|
||||
setFilters(newFilters)
|
||||
@@ -329,14 +275,13 @@ ${coupon.minPrice ? `最低消费:¥${coupon.minPrice}` : ''}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload(true)
|
||||
loadHotCoupons()
|
||||
reload(true).then()
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<ConfigProvider className={'pt-3'}>
|
||||
{/* Tab切换 */}
|
||||
<View className="bg-white">
|
||||
<View className="bg-white hidden">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<TabPane title="全部" value="0">
|
||||
</TabPane>
|
||||
@@ -381,7 +326,6 @@ ${coupon.minPrice ? `最低消费:¥${coupon.minPrice}` : ''}
|
||||
>
|
||||
<CouponList
|
||||
coupons={list.map(transformCouponData)}
|
||||
onCouponClick={handleCouponClick}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
|
||||
Reference in New Issue
Block a user