refactor(shop): 重构优惠券和礼品卡相关功能

- 优化了优惠券和礼品卡的搜索功能 - 重新设计了统计卡片的样式和布局- 改进了优惠券和礼品卡的领取和兑换流程 - 统一了图标样式和大小 - 调整了部分组件的显示逻辑
2025-08-13 11:17:00 +08:00
parent 5d4dc4518f
commit 89cadc3886
11 changed files with 74 additions and 68 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -57,6 +57,5 @@ export interface PageParam {
  dateTime?: string;
  lang?: string;
  model?: string;
-  type?: string;
  BaseUrl?: string;
 }
--- a/src/api/shop/shopCoupon/model/index.ts
+++ b/src/api/shop/shopCoupon/model/index.ts
@@ -65,5 +65,9 @@ export interface ShopCouponParam extends PageParam {
  status?: number;
  isExpire?: number;
  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
  keywords?: string;
+  enabled?: number;
+  type?: number;
+  minAmount?: number;
 }
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -40,7 +40,8 @@ export default defineAppConfig({
        "wallet/wallet",
        "coupon/index",
        "points/points",
-        "gift/index"
+        "gift/index",
+        "gift/redeem"
      ]
    },
    {
--- a/src/components/CouponCard.tsx
+++ b/src/components/CouponCard.tsx
@@ -129,6 +129,8 @@ const CouponCard: React.FC<CouponCardProps> = ({
    return ''
  }

+  console.log(getValidityText)
+
  const themeClass = getThemeClass()

  return (
--- a/src/components/CouponStats.tsx
+++ b/src/components/CouponStats.tsx
@@ -25,9 +25,9 @@ const CouponStats: React.FC<CouponStatsProps> = ({

  return (
    <View className="bg-white mx-4 my-3 rounded-xl p-4">
-      <Text className="text-lg font-semibold mb-4 text-gray-800">优惠券统计</Text>
+      <Text className="font-semibold text-gray-800">优惠券统计</Text>

-      <View className="flex justify-between">
+      <View className="flex justify-between mt-2">
        {/* 可用优惠券 */}
        <View
          className="flex-1 text-center py-3 mx-1 bg-red-50 rounded-lg"
--- a/src/components/GiftCardStats.tsx
+++ b/src/components/GiftCardStats.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
-import { Gift, Voucher, Clock } from '@nutui/icons-react-taro'
+import { Gift, Voucher, Clock, Star } from '@nutui/icons-react-taro'

 export interface GiftCardStatsProps {
  /** 可用礼品卡数量 */
@@ -16,26 +16,27 @@ export interface GiftCardStatsProps {
 }

 const GiftCardStats: React.FC<GiftCardStatsProps> = ({
-  availableCount,
-  usedCount,
-  expiredCount,
-  onStatsClick
-}) => {
+                                                       availableCount,
+                                                       usedCount,
+                                                       expiredCount,
+                                                       totalValue,
+                                                       onStatsClick
+                                                     }) => {
  const handleStatsClick = (type: 'available' | 'used' | 'expired' | 'total') => {
    onStatsClick?.(type)
  }

  return (
-    <View className="bg-white mx-4 my-3 rounded-xl p-3 shadow-sm">
+    <View className="bg-white mx-4 my-3 rounded-xl p-3 shadow-sm hidden">
      {/* 紧凑的统计卡片 - 2x2 网格 */}
-      <View className="grid grid-cols-3 gap-2">
+      <View className="grid grid-cols-2 gap-2">
        {/* 可用礼品卡 */}
        <View
-          className="flex items-center justify-between p-2 bg-yellow-50 rounded-lg border border-yellow-200"
+          className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200"
          onClick={() => handleStatsClick('available')}
        >
          <View className="flex items-center">
-            <Gift size="16" className="text-yellow-600 mr-1" />
+            <Gift size="20" className="text-yellow-600 mr-2" />
            <Text className="text-sm text-gray-600">可用</Text>
          </View>
          <Text className="text-lg font-bold text-yellow-600">{availableCount}</Text>
@@ -43,11 +44,11 @@ const GiftCardStats: React.FC<GiftCardStatsProps> = ({

        {/* 已使用礼品卡 */}
        <View
-          className="flex items-center justify-between p-2 bg-green-50 rounded-lg border border-green-200"
+          className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200"
          onClick={() => handleStatsClick('used')}
        >
          <View className="flex items-center">
-            <Voucher size="16" className="text-green-600 mr-1" />
+            <Voucher size="20" className="text-green-600 mr-2" />
            <Text className="text-sm text-gray-600">已使用</Text>
          </View>
          <Text className="text-lg font-bold text-green-600">{usedCount}</Text>
@@ -55,15 +56,29 @@ const GiftCardStats: React.FC<GiftCardStatsProps> = ({

        {/* 已过期礼品卡 */}
        <View
-          className="flex items-center justify-between p-2 bg-gray-50 rounded-lg border border-gray-200"
+          className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200"
          onClick={() => handleStatsClick('expired')}
        >
          <View className="flex items-center">
-            <Clock size="16" className="text-gray-500 mr-1" />
+            <Clock size="20" className="text-gray-500 mr-2" />
            <Text className="text-sm text-gray-600">已过期</Text>
          </View>
          <Text className="text-lg font-bold text-gray-500">{expiredCount}</Text>
        </View>
+
+        {/* 总价值 */}
+        {totalValue !== undefined && (
+          <View
+            className="flex items-center justify-between p-3 bg-purple-50 rounded-lg border border-purple-200"
+            onClick={() => handleStatsClick('total')}
+          >
+            <View className="flex items-center">
+              <Star size="20" className="text-purple-600 mr-2" />
+              <Text className="text-sm text-gray-600">总价值</Text>
+            </View>
+            <Text className="text-lg font-bold text-purple-600">¥{totalValue}</Text>
+          </View>
+        )}
      </View>
    </View>
  )
--- a/src/user/coupon/index.tsx
+++ b/src/user/coupon/index.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import Taro, {useDidShow} from '@tarojs/taro'
 import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
-import {Gift, Search, Plus, Filter} from '@nutui/icons-react-taro'
+import {Plus, Filter} from '@nutui/icons-react-taro'
 import {View} from '@tarojs/components'
 import {ShopCoupon} from "@/api/shop/shopCoupon/model";
 import {pageShopCoupon} from "@/api/shop/shopCoupon";
@@ -20,6 +20,7 @@ const CouponManage = () => {
  const [searchValue, setSearchValue] = useState('')
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
+  console.log('total = ',total)
  const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
  const [stats, setStats] = useState({
    available: 0,
@@ -191,7 +192,7 @@ const CouponManage = () => {
  }

  // 优惠券点击事件
-  const handleCouponClick = (coupon: CouponCardProps, index: number) => {
+  const handleCouponClick = (_coupon: CouponCardProps, index: number) => {
    const originalCoupon = list[index]
    if (originalCoupon) {
      // 显示优惠券详情
@@ -317,15 +318,14 @@ const CouponManage = () => {
  return (
    <ConfigProvider>
      {/* 搜索栏和领取入口 */}
-      <View className="bg-white px-4 py-3">
+      <View className="bg-white px-4 py-3 hidden">
        <View className="flex items-center gap-3">
          <View className="flex-1">
            <SearchBar
-              placeholder="搜索优惠券名称"
+              placeholder="搜索"
              value={searchValue}
              onChange={setSearchValue}
              onSearch={handleSearch}
-              leftIcon={<Search />}
            />
          </View>
          <Button
@@ -374,13 +374,6 @@ const CouponManage = () => {
        </Tabs>
      </View>

-      {/* 统计信息 */}
-      {total > 0 && (
-        <View className="px-4 py-2 text-sm text-gray-500 bg-gray-50">
-          共找到 {total} 张优惠券
-        </View>
-      )}
-
      {/* 优惠券列表 */}
      <PullToRefresh
        onRefresh={handleRefresh}
@@ -425,23 +418,6 @@ const CouponManage = () => {
        </View>
      </PullToRefresh>

-      {/* 底部提示 */}
-      {activeTab === '0' && list.length === 0 && !loading && (
-        <View className="text-center py-8">
-          <View className="text-gray-400 mb-4">
-            <Gift size="48" />
-          </View>
-          <View className="text-gray-500 mb-2">暂无可用优惠券</View>
-          <Button
-            size="small"
-            type="primary"
-            onClick={() => Taro.navigateTo({url: '/pages/index/index'})}
-          >
-            去逛逛
-          </Button>
-        </View>
-      )}
-
      {/* 使用指南弹窗 */}
      <CouponGuide
        visible={showGuide}
--- a/src/user/coupon/receive.tsx
+++ b/src/user/coupon/receive.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import Taro, {useDidShow} from '@tarojs/taro'
 import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
-import {Gift, Search} 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} from "@/api/shop/shopCoupon";
@@ -31,7 +31,7 @@ const CouponReceive = () => {
        page: currentPage,
        limit: 10,
        keywords: searchValue,
-        enabled: '1', // 启用状态
+        enabled: 1, // 启用状态
        isExpire: 0   // 未过期
      })

@@ -77,7 +77,7 @@ const CouponReceive = () => {
  const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
    let amount = 0
    let type: 1 | 2 | 3 = 1
-    
+
    if (coupon.type === 10) { // 满减券
      type = 1
      amount = parseFloat(coupon.reducePrice || '0')
@@ -114,16 +114,16 @@ const CouponReceive = () => {
  }

  // 领取优惠券
-  const handleReceiveCoupon = async (coupon: ShopCoupon) => {
+  const handleReceiveCoupon = async (_coupon: ShopCoupon) => {
    try {
      // 这里应该调用领取优惠券的API
      // await receiveCoupon(coupon.id)
-      
+
      Taro.showToast({
        title: '领取成功',
        icon: 'success'
      })
-      
+
      // 刷新列表
      reload(true)
    } catch (error) {
@@ -136,7 +136,7 @@ const CouponReceive = () => {
  }

  // 优惠券点击事件
-  const handleCouponClick = (coupon: CouponCardProps, index: number) => {
+  const handleCouponClick = (_coupon: CouponCardProps, index: number) => {
    const originalCoupon = list[index]
    if (originalCoupon) {
      // 显示优惠券详情
@@ -168,11 +168,10 @@ const CouponReceive = () => {
      {/* 搜索栏 */}
      <View className="bg-white px-4 py-3">
        <SearchBar
-          placeholder="搜索优惠券名称"
+          placeholder="搜索"
          value={searchValue}
          onChange={setSearchValue}
          onSearch={handleSearch}
-          leftIcon={<Search />}
        />
      </View>

--- a/src/user/gift/index.tsx
+++ b/src/user/gift/index.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import Taro, {useDidShow} from '@tarojs/taro'
-import {Button, Empty, ConfigProvider, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
-import {Gift, Plus, Board, QrCode} from '@nutui/icons-react-taro'
+import {Button, Empty, ConfigProvider,SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
+import {Gift, Retweet, Board, QrCode} from '@nutui/icons-react-taro'
 import {View} from '@tarojs/components'
 import {ShopGift} from "@/api/shop/shopGift/model";
 import {getUserGifts} from "@/api/shop/shopGift";
@@ -14,7 +14,7 @@ const GiftCardManage = () => {
  const [list, setList] = useState<ShopGift[]>([])
  const [loading, setLoading] = useState(false)
  const [hasMore, setHasMore] = useState(true)
-  // const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState('')
  const [page, setPage] = useState(1)
  // const [total, setTotal] = useState(0)
  const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
@@ -97,10 +97,10 @@ const GiftCardManage = () => {
  }

  // 搜索功能
-  // const handleSearch = (value: string) => {
-  //   setSearchValue(value)
-  //   reload(true)
-  // }
+  const handleSearch = (value: string) => {
+    setSearchValue(value)
+    reload(true)
+  }

  // 下拉刷新
  const handleRefresh = async () => {
@@ -272,10 +272,19 @@ const GiftCardManage = () => {
      {/* 搜索栏和功能入口 */}
      <View className="bg-white px-4 py-3">
        <View className="flex items-center justify-between gap-3">
+          <View className="flex-1 hidden">
+            <SearchBar
+              placeholder="搜索"
+              value={searchValue}
+              className={'border'}
+              onChange={setSearchValue}
+              onSearch={handleSearch}
+            />
+          </View>
          <Button
            size="small"
            type="primary"
-            icon={<Plus />}
+            icon={<Retweet />}
            onClick={handleRedeemGift}
          >
            兑换
--- a/src/user/gift/redeem.config.ts
+++ b/src/user/gift/redeem.config.ts
@@ -1,6 +1,5 @@
 export default definePageConfig({
  navigationBarTitleText: '兑换礼品卡',
  navigationBarTextStyle: 'black',
-  navigationBarBackgroundColor: '#ffffff',
-  navigationStyle: 'custom'
+  navigationBarBackgroundColor: '#ffffff'
 })
--- a/src/user/gift/redeem.tsx
+++ b/src/user/gift/redeem.tsx
@@ -39,7 +39,9 @@ const GiftCardRedeem = () => {
    setValidating(true)
    try {
      const gift = await validateGiftCode(codeToValidate.trim())
-      setValidGift(gift)
+      if(gift){
+        setValidGift(gift)
+      }
      Taro.showToast({
        title: '验证成功',
        icon: 'success'
@@ -138,7 +140,7 @@ const GiftCardRedeem = () => {
  return (
    <ConfigProvider>
      {/* 自定义导航栏 */}
-      <View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
+      <View className="flex items-center justify-between p-4 bg-white border-b border-gray-100 hidden">
        <View className="flex items-center" onClick={handleBack}>
          <ArrowLeft size="20" />
          <Text className="ml-2 text-lg">兑换礼品卡</Text>