refactor(components): 重构 CouponCard 组件样式

- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画 - 添加了响应式样式，提高了移动端体验 - 新增了 CouponList组件样式，用于展示优惠券列表
2025-08-22 17:27:45 +08:00
parent 41702c295a
commit 1e51a137ee
20 changed files with 1321 additions and 241 deletions
--- a/src/api/cms/cmsNavigation/model/index.ts
+++ b/src/api/cms/cmsNavigation/model/index.ts
@@ -55,8 +55,8 @@ export interface CmsNavigation {
  parentName?: string;
  // 模型名称
  modelName?: string;
-  // 类型（已废弃）
-  type?: number;
+  // 类型(模型)
+  type?: string;
  // 绑定的页面（已废弃）
  pageId?: number;
  // 项目ID
--- a/src/api/shop/shopCoupon/index.ts
+++ b/src/api/shop/shopCoupon/index.ts
@@ -99,17 +99,3 @@ export async function getShopCoupon(id: number) {
  }
  return Promise.reject(new Error(res.message));
 }
-
-/**
- * 领取优惠券
- */
-export async function receiveCoupon(params: { couponId: number; userId: number }) {
-  const res = await request.post<ApiResult<unknown>>(
-    '/shop/shop-coupon/receive',
-    params
-  );
-  if (res.code === 0) {
-    return res.message;
-  }
-  return Promise.reject(new Error(res.message));
-}
--- a/src/api/shop/shopUserCoupon/index.ts
+++ b/src/api/shop/shopUserCoupon/index.ts
@@ -138,3 +138,18 @@ export async function getMyExpiredCoupons() {
  }
  return Promise.reject(new Error(res.message));
 }
+
+
+/**
+ * 领取优惠券
+ */
+export async function takeCoupon(params: { couponId: number; userId: number }) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/shop/shop-user-coupon/take',
+    params
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -68,7 +68,8 @@ export default defineAppConfig({
    },
    {
      "root": "shop",
-      "pages": ['category/index',
+      "pages": [
+        'category/index',
        'orderDetail/index',
        'goodsDetail/index',
        'orderConfirm/index',
--- a/src/components/CartIcon.tsx
+++ b/src/components/CartIcon.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Badge } from "@nutui/nutui-react-taro";
 import { Cart } from "@nutui/icons-react-taro";
-import Taro from '@tarojs/taro';
 import { useCart } from "@/hooks/useCart";
+import { switchTab } from '@/utils/navigation';

 interface CartIconProps {
  style?: React.CSSProperties;
@@ -26,13 +26,13 @@ const CartIcon: React.FC<CartIconProps> = ({
      onClick();
    } else {
      // 默认跳转到购物车页面
-      Taro.switchTab({ url: '/pages/cart/cart' });
+      switchTab('cart/cart');
    }
  };

  if (showBadge) {
    return (
-      <div 
+      <div
        className={className}
        style={style}
        onClick={handleClick}
@@ -47,7 +47,7 @@ const CartIcon: React.FC<CartIconProps> = ({
  }

  return (
-    <div 
+    <div
      className={className}
      style={style}
      onClick={handleClick}
--- a/src/components/CouponCard.scss
+++ b/src/components/CouponCard.scss
@@ -2,115 +2,177 @@
  position: relative;
  display: flex;
  width: 100%;
-  height: 120px;
-  margin-bottom: 16px;
-  border-radius: 12px;
+  height: 140px;
+  border-radius: 16px;
  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
-  transition: all 0.3s ease;
+  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);
+
+  // 边框光晕效果
+  &::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;
+  }

  &:active {
-    transform: scale(0.98);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    transform: scale(0.98) translateY(1px);
+    box-shadow:
+      0 2px 12px rgba(0, 0, 0, 0.12),
+      0 1px 2px rgba(0, 0, 0, 0.15);
  }

  &.disabled {
    opacity: 0.6;
+    filter: grayscale(0.3);
  }

  .coupon-left {
    flex-shrink: 0;
-    width: 110px;
+    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
+    overflow: hidden;
+
+    // 添加光泽效果
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+      transform: rotate(45deg);
+      animation: shimmer 3s infinite;
+    }

    &.theme-red {
-      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    &.theme-orange {
-      background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
+      background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    &.theme-blue {
-      background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
+      background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    &.theme-purple {
-      background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
+      background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    &.theme-green {
-      background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
+      background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .amount-wrapper {
      display: flex;
      align-items: baseline;
-      margin-bottom: 8px;
+      margin-bottom: 10px;
+      position: relative;
+      z-index: 2;

      .currency {
-        font-size: 28px;
-        font-weight: 600;
-        margin-right: 2px;
+        font-size: 30px;
+        font-weight: 700;
+        margin-right: 3px;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }

      .amount {
-        font-size: 36px;
-        font-weight: bold;
+        font-size: 42px;
+        font-weight: 800;
        line-height: 1;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        letter-spacing: -1px;
      }
    }

    .condition {
-      font-size: 22px;
-      opacity: 0.9;
+      font-size: 24px;
+      opacity: 0.95;
      text-align: center;
      line-height: 1.2;
+      font-weight: 500;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      position: relative;
+      z-index: 2;
    }
  }

  .coupon-divider {
    flex-shrink: 0;
-    width: 2px;
+    width: 3px;
    position: relative;
-    background: #f5f5f5;
+    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);

    .divider-line {
-      width: 100%;
-      height: 100%;
+      position: absolute;
+      top: 24px;
+      bottom: 24px;
+      left: 50%;
+      width: 1px;
+      transform: translateX(-50%);
      background: repeating-linear-gradient(
        to bottom,
-        transparent 0px,
-        transparent 4px,
-        #ddd 4px,
-        #ddd 8px
+        #cbd5e1 0px,
+        #cbd5e1 6px,
+        transparent 6px,
+        transparent 12px
      );
    }

    .divider-circle-top {
      position: absolute;
-      width: 16px;
-      height: 16px;
-      background: #f5f5f5;
+      width: 20px;
+      height: 20px;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 50%;
-      top: -8px;
-      left: -7px;
+      top: -10px;
+      left: -8.5px;
+      border: 2px solid #e2e8f0;
+      box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.05),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .divider-circle-bottom {
      position: absolute;
-      width: 16px;
-      height: 16px;
-      background: #f5f5f5;
+      width: 20px;
+      height: 20px;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 50%;
-      bottom: -8px;
-      left: -7px;
+      bottom: -10px;
+      left: -8.5px;
+      border: 2px solid #e2e8f0;
+      box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.05),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
  }

@@ -120,7 +182,8 @@
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
-    padding: 16px;
+    padding: 20px 18px;
+    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);

    .coupon-info {
      flex: 1;
@@ -129,17 +192,32 @@
      justify-content: center;

      .coupon-title {
-        font-size: 32px;
-        font-weight: 600;
-        color: #1f2937;
-        margin-bottom: 6px;
+        font-size: 34px;
+        font-weight: 700;
+        color: #1a202c;
+        margin-bottom: 8px;
        line-height: 1.3;
+        letter-spacing: -0.5px;
+
+        // 添加文字渐变效果
+        background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
      }

      .coupon-validity {
        font-size: 26px;
-        color: #6b7280;
+        color: #718096;
        line-height: 1.2;
+        font-weight: 500;
+
+        // 添加图标前缀
+        &::before {
+          content: '⏰';
+          margin-right: 6px;
+          font-size: 24px;
+        }
      }
    }

@@ -150,45 +228,71 @@
      flex-shrink: 0;

      .coupon-btn {
-        min-width: 120px;
-        height: 60px;
-        border-radius: 30px;
-        font-size: 26px;
+        min-width: 130px;
+        height: 68px;
+        border-radius: 34px;
+        font-size: 28px;
        border: none;
        color: #fff;
-        font-weight: 600;
-        transition: all 0.2s ease;
+        font-weight: 700;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        overflow: hidden;
+
+        // 添加按钮光泽效果
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+          transition: left 0.5s;
+        }
+
+        &:hover::before {
+          left: 100%;
+        }

        &:active {
-          transform: scale(0.95);
+          transform: scale(0.96) translateY(1px);
        }

        &.theme-red {
-          background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+          background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
+          box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        }

        &.theme-orange {
-          background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
+          background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
+          box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
        }

        &.theme-blue {
-          background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
+          background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
+          box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
        }

        &.theme-purple {
-          background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
+          background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
+          box-shadow: 0 4px 12px rgba(171, 71, 188, 0.3);
        }

        &.theme-green {
-          background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
+          background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
+          box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
        }
      }

      .status-text {
-        font-size: 26px;
-        color: #9ca3af;
-        padding: 8px 12px;
-        font-weight: 500;
+        font-size: 28px;
+        color: #a0aec0;
+        padding: 12px 16px;
+        font-weight: 600;
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+        border-radius: 20px;
+        border: 1px solid #e2e8f0;
      }
    }
  }
@@ -199,19 +303,84 @@
    left: 0;
    right: 0;
    bottom: 0;
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
+    backdrop-filter: blur(2px);

    .status-badge {
-      background: rgba(0, 0, 0, 0.6);
+      background: rgba(0, 0, 0, 0.7);
      color: #fff;
-      padding: 4px 12px;
-      border-radius: 12px;
-      font-size: 28px;
-      font-weight: 500;
+      padding: 8px 16px;
+      border-radius: 16px;
+      font-size: 30px;
+      font-weight: 700;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+// 动画效果
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%) translateY(-100%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(100%) translateY(100%) rotate(45deg);
+  }
+}
+
+// 响应式优化
+@media (max-width: 768px) {
+  .coupon-card {
+    height: 130px;
+
+    .coupon-left {
+      width: 110px;
+
+      .amount-wrapper {
+        .currency {
+          font-size: 26px;
+        }
+
+        .amount {
+          font-size: 38px;
+        }
+      }
+
+      .condition {
+        font-size: 22px;
+      }
+    }
+
+    .coupon-right {
+      padding: 16px 14px;
+
+      .coupon-info {
+        .coupon-title {
+          font-size: 30px;
+        }
+
+        .coupon-validity {
+          font-size: 24px;
+        }
+      }
+
+      .coupon-actions {
+        .coupon-btn {
+          min-width: 120px;
+          height: 60px;
+          font-size: 26px;
+        }
+
+        .status-text {
+          font-size: 26px;
+        }
+      }
    }
  }
 }
--- a/src/components/CouponList.scss
+++ b/src/components/CouponList.scss
@@ -0,0 +1,66 @@
+.coupon-list-container {
+  padding: 0 16px;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+  min-height: 100vh;
+}
+
+.coupon-list-title {
+  font-size: 32px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 24px;
+  padding-top: 16px;
+}
+
+.coupon-list-empty {
+  text-align: center;
+  padding: 80px 20px;
+  color: #9ca3af;
+  font-size: 28px;
+}
+
+.coupon-list-content {
+  padding-bottom: 20px;
+}
+
+.coupon-list-item {
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* 水平滚动布局样式 */
+.coupon-horizontal-container {
+  .coupon-horizontal-title {
+    font-size: 32px;
+    font-weight: 600;
+    color: #1f2937;
+    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; // 保持右边距
+      }
+    }
+  }
+}
--- a/src/components/CouponList.tsx
+++ b/src/components/CouponList.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, ScrollView } from '@tarojs/components'
 import CouponCard, { CouponCardProps } from './CouponCard'
+import './CouponList.scss'

 export interface CouponListProps {
  /** 优惠券列表数据 */
@@ -32,26 +33,29 @@ const CouponList: React.FC<CouponListProps> = ({
  // 垂直布局
  if (layout === 'vertical') {
    return (
-      <View className="p-4">
+      <View className="coupon-list-container">
        {title && (
-          <View className="font-semibold text-gray-800 mb-4">{title}</View>
+          <View className="coupon-list-title">{title}</View>
        )}

        {coupons.length === 0 ? (
          showEmpty && (
-            <View className="text-center py-10 px-5 text-gray-500">
+            <View className="coupon-list-empty">
              {emptyText}
            </View>
          )
        ) : (
-          coupons.map((coupon, index) => (
-            <View
-              key={index}
-              onClick={() => handleCouponClick(coupon, index)}
-            >
-              <CouponCard {...coupon} />
-            </View>
-          ))
+          <View className="coupon-list-content">
+            {coupons.map((coupon, index) => (
+              <View
+                key={index}
+                className="coupon-list-item"
+                onClick={() => handleCouponClick(coupon, index)}
+              >
+                <CouponCard {...coupon} />
+              </View>
+            ))}
+          </View>
        )}
      </View>
    )
@@ -59,29 +63,29 @@ const CouponList: React.FC<CouponListProps> = ({

  // 水平滚动布局
  return (
-    <View>
+    <View className="coupon-horizontal-container">
      {title && (
-        <View className="font-semibold text-gray-800 mb-4 pl-4">
+        <View className="coupon-horizontal-title">
          {title}
        </View>
      )}

      {coupons.length === 0 ? (
        showEmpty && (
-          <View className="text-center py-10 px-5 text-gray-500">
+          <View className="coupon-list-empty">
            {emptyText}
          </View>
        )
      ) : (
        <ScrollView
          scrollX
-          className="flex p-4 gap-2 overflow-x-auto"
+          className="coupon-horizontal-scroll flex overflow-x-auto"
          showScrollbar={false}
        >
          {coupons.map((coupon, index) => (
            <View
              key={index}
-              className="flex-shrink-0 w-60 mb-0"
+              className="coupon-horizontal-item"
              onClick={() => handleCouponClick(coupon, index)}
            >
              <CouponCard {...coupon} />
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -1,6 +1,6 @@
 import { Tabbar } from '@nutui/nutui-react-taro'
 import { Home, User } from '@nutui/icons-react-taro'
-import Taro from '@tarojs/taro'
+import { switchTab } from '@/utils/navigation'

 function TabBar(){
  return (
@@ -9,13 +9,13 @@ function TabBar(){
      onSwitch={(index) => {
        console.log(index)
        if(index == 0){
-          Taro.switchTab({ url: '/pages/index/index' })
+          switchTab('index/index')
        }
        // if(index == 1){
-        //   Taro.navigateTo({ url: '/pages/detail/detail' })
+        //   goTo('detail/detail')
        // }
        if(index == 1){
-          Taro.switchTab({ url: '/pages/user/user' })
+          switchTab('user/user')
        }
      }}
    >
--- a/src/coupon/index.config.ts
+++ b/src/coupon/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '领劵中心',
+  navigationBarTextStyle: 'black'
+})
--- a/src/coupon/index.tsx
+++ b/src/coupon/index.tsx
@@ -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>
--- a/src/dealer/apply/add.tsx
+++ b/src/dealer/apply/add.tsx
@@ -64,33 +64,18 @@ const AddUserAddress = () => {

  // 提交表单
  const submitSucceed = async (values: any) => {
-    if(!values.refereeId){
-      return Taro.showToast({
-        title: '请填写邀请人ID',
-        icon: 'error'
-      });
-    }
-    // 验证邀请人ID是否存在
    try {
-      await getShopDealerUser(values.refereeId);
-    } catch (error) {
-      console.error('验证邀请人失败:', error);
-      return Taro.showToast({
-        title: '邀请人ID不存在',
-        icon: 'error'
-      });
-    }

-    try {
      // 准备提交的数据
      const submitData = {
        ...values,
        realName: values.realName || user?.nickname,
        mobile: user?.phone,
-        refereeId: values.refereeId,
+        refereeId: values.refereeId || FormData?.refereeId,
        applyStatus: 10,
        auditTime: undefined
      };
+      await getShopDealerUser(submitData.refereeId);

      // 如果是编辑模式，添加现有申请的id
      if (isEditMode && existingApply?.applyId) {
@@ -105,7 +90,7 @@ const AddUserAddress = () => {
      }

      Taro.showToast({
-        title: `${isEditMode ? '更新' : '提交'}成功`,
+        title: `${isEditMode ? '提交' : '提交'}成功`,
        icon: 'success'
      });

@@ -114,9 +99,9 @@ const AddUserAddress = () => {
      }, 1000);

    } catch (error) {
-      console.error('提交失败:', error);
-      Taro.showToast({
-        title: `${isEditMode ? '更新' : '提交'}失败`,
+      console.error('验证邀请人失败:', error);
+      return Taro.showToast({
+        title: '邀请人ID不存在',
        icon: 'error'
      });
    }
--- a/src/pages/index/Menu.tsx
+++ b/src/pages/index/Menu.tsx
@@ -1,46 +1,38 @@
-import Taro from '@tarojs/taro'
-import {useEffect, useState} from 'react'
 import {Image} from '@nutui/nutui-react-taro'
 import {Loading} from '@nutui/nutui-react-taro'
-import {listCmsNavigation} from "@/api/cms/cmsNavigation"
-import {CmsNavigation} from "@/api/cms/cmsNavigation/model"
+import {goTo} from "@/utils/navigation"
+import {useShopInfo} from "@/hooks/useShopInfo"

 const Page = () => {
+  // 使用 useShopInfo hooks 获取导航数据
+  const {
+    loading: shopLoading,
+    error,
+    getNavigation
+  } = useShopInfo()

-  const [loading, setLoading] = useState<boolean>(true)
-  const [navItems, setNavItems] = useState<CmsNavigation[]>([])
+  // 获取顶部导航菜单
+  const navigation = getNavigation()
+  const home = navigation.topNavs.find(item => item.model == 'index')
+  const navItems = navigation.topNavs.filter(item => item.parentId == home?.navigationId) || []

-  const reload = async () => {
-    // 读取首页菜单
-    const home = await listCmsNavigation({model: 'index'});
-    if (home && home.length > 0) {
-      // 读取首页导航条
-      const menus = await listCmsNavigation({parentId: home[0].navigationId, hide: 0});
-      setNavItems(menus || [])
+  const onNav = (item: any) => {
+    if (item.path) {
+      return goTo(`${item.path}`)
    }
-  };
-
-  const onNav = (row: CmsNavigation) => {
-    console.log('nav = ', row)
-    console.log('path = ', `/${row.model}${row.path}`)
-    if (row.model == 'goods') {
-      return Taro.navigateTo({url: `/shop/category/index?id=${row.navigationId}`})
-    }
-    if (row.model == 'article') {
-      return Taro.navigateTo({url: `/cms/category/index?id=${row.navigationId}`})
-    }
-    return Taro.navigateTo({url: `${row.path}`})
  }

-
-  useEffect(() => {
-    reload().then(() => {
-      setLoading(false)
-    });
-  }, [])
+  // 处理错误状态
+  if (error) {
+    return (
+      <div className={'p-2 text-center text-red-500'}>
+        加载导航菜单失败
+      </div>
+    )
+  }

  return (
-    loading ? (<Loading>加载中</Loading>) :
+    shopLoading ? (<Loading>加载中</Loading>) :
      <div className={'p-2 z-50 mt-1'}>
        <div className={'flex justify-between pb-2 p-2 bg-white rounded-xl shadow-sm'}>
          {
--- a/src/pages/index/MySearch.tsx
+++ b/src/pages/index/MySearch.tsx
@@ -2,6 +2,7 @@ import {Search} from '@nutui/icons-react-taro'
 import {Button, Input} from '@nutui/nutui-react-taro'
 import {useState} from "react";
 import Taro from '@tarojs/taro';
+import { goTo } from '@/utils/navigation';

 function MySearch() {
  const [keywords, setKeywords] = useState<string>('')
@@ -18,17 +19,13 @@ function MySearch() {
      });
      return false;
    }
-    // 跳转到搜索页面
-    Taro.navigateTo({
-      url: `/shop/search/index?keywords=${encodeURIComponent(keywords.trim())}`
-    });
+    // 跳转到搜索页面 - 使用新的导航工具，自动处理路径和参数
+    goTo('shop/search/index', { keywords: keywords.trim() });
  }

  // 点击搜索框跳转到搜索页面
  const onInputFocus = () => {
-    Taro.navigateTo({
-      url: '/shop/search/index'
-    });
+    goTo('shop/search/index');
  }


--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,4 +1,5 @@
 import Taro from '@tarojs/taro'
+import { goTo } from './navigation'

 export default function navTo(url: string, isLogin = false) {
  if (isLogin) {
@@ -11,14 +12,13 @@ export default function navTo(url: string, isLogin = false) {
      return false;
    }
  }
-  Taro.navigateTo({
-    url: url
-  })
+  // 使用新的导航工具，自动处理路径格式化
+  goTo(url)
 }


 // 转base64
-export function fileToBase64(filePath) {
+export function fileToBase64(filePath:string) {
  return new Promise((resolve) => {
    let fileManager = Taro.getFileSystemManager();
    fileManager.readFile({
@@ -35,7 +35,7 @@ export function fileToBase64(filePath) {
 * 转义微信富文本图片样式
 * @param htmlText
 */
-export function wxParse(htmlText) {
+export function wxParse(htmlText:string) {
  // Replace <img> tags with max-width, height and margin styles to remove spacing
  htmlText = htmlText.replace(/\<img/gi, '<img style="max-width:100%;height:auto;margin:0;padding:0;display:block;"');

--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -0,0 +1,192 @@
+import Taro from '@tarojs/taro'
+
+/**
+ * 导航选项接口
+ */
+export interface NavigationOptions {
+  /** 页面路径 */
+  url: string
+  /** 页面参数 */
+  params?: Record<string, any>
+  /** 是否替换当前页面（使用redirectTo） */
+  replace?: boolean
+  /** 是否重新启动应用（使用reLaunch） */
+  relaunch?: boolean
+  /** 是否切换到tabBar页面（使用switchTab） */
+  switchTab?: boolean
+  /** 成功回调 */
+  success?: (res: any) => void
+  /** 失败回调 */
+  fail?: (res: any) => void
+  /** 完成回调 */
+  complete?: (res: any) => void
+}
+
+/**
+ * 格式化页面路径
+ * @param url 原始路径
+ * @returns 格式化后的路径
+ */
+function formatUrl(url: string): string {
+  // 如果不是以"/"开头，自动添加
+  if (!url.startsWith('/')) {
+    url = '/' + url
+  }
+
+  // 如果不是以"/pages/"开头，自动添加
+  // if (!url.startsWith('/pages/')) {
+  //   // 移除开头的"/"，然后添加"/pages/"
+  //   url = '/pages/' + url.replace(/^\/+/, '')
+  // }
+
+  return url
+}
+
+/**
+ * 构建带参数的URL
+ * @param url 基础URL
+ * @param params 参数对象
+ * @returns 完整的URL
+ */
+function buildUrlWithParams(url: string, params?: Record<string, any>): string {
+  if (!params || Object.keys(params).length === 0) {
+    return url
+  }
+
+  const queryString = Object.entries(params)
+    .map(([key, value]) => {
+      if (value === null || value === undefined) {
+        return ''
+      }
+      return `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`
+    })
+    .filter(Boolean)
+    .join('&')
+
+  return queryString ? `${url}?${queryString}` : url
+}
+
+/**
+ * 统一的页面导航函数
+ * @param options 导航选项
+ */
+export function navigateTo(options: NavigationOptions | string): void {
+  console.log(options,'options')
+  // 如果传入的是字符串，转换为选项对象
+  const opts: NavigationOptions = typeof options === 'string'
+    ? { url: options }
+    : options
+  // 格式化URL
+  const formattedUrl = formatUrl(opts.url)
+
+  // 构建完整URL（包含参数）
+  const fullUrl = buildUrlWithParams(formattedUrl, opts.params)
+
+  // 默认错误处理函数
+  const defaultFail = (res?: any) => {
+    console.error('页面导航失败:', res)
+    if (opts.fail) {
+      opts.fail(res)
+    } else {
+      Taro.showToast({
+        title: '页面跳转失败',
+        icon: 'error'
+      })
+    }
+  }
+
+  // 根据不同的导航类型选择对应的Taro方法
+  if (opts.switchTab) {
+    Taro.switchTab({
+      url: fullUrl,
+      success: opts.success,
+      fail: defaultFail,
+      complete: opts.complete
+    })
+  } else if (opts.relaunch) {
+    Taro.reLaunch({
+      url: fullUrl,
+      success: opts.success,
+      fail: defaultFail,
+      complete: opts.complete
+    })
+  } else if (opts.replace) {
+    Taro.redirectTo({
+      url: fullUrl,
+      success: opts.success,
+      fail: defaultFail,
+      complete: opts.complete
+    })
+  } else {
+    console.log('这里🌶。 ', fullUrl)
+
+    Taro.navigateTo({
+      url: fullUrl,
+      success: opts.success,
+      fail: defaultFail,
+      complete: opts.complete
+    })
+  }
+}
+
+/**
+ * 导航到指定页面（默认方式）
+ * @param url 页面路径
+ * @param params 页面参数
+ */
+export function goTo(url: string, params?: Record<string, any>): void {
+  navigateTo({ url, params })
+}
+
+/**
+ * 替换当前页面
+ * @param url 页面路径
+ * @param params 页面参数
+ */
+export function redirectTo(url: string, params?: Record<string, any>): void {
+  navigateTo({ url, params, replace: true })
+}
+
+/**
+ * 重新启动应用
+ * @param url 页面路径
+ * @param params 页面参数
+ */
+export function reLaunch(url: string, params?: Record<string, any>): void {
+  navigateTo({ url, params, relaunch: true })
+}
+
+/**
+ * 切换到tabBar页面
+ * @param url 页面路径
+ */
+export function switchTab(url: string): void {
+  navigateTo({ url, switchTab: true })
+}
+
+/**
+ * 返回上一页
+ * @param delta 返回的页面数，默认为1
+ */
+export function goBack(delta: number = 1): void {
+  Taro.navigateBack({ delta })
+}
+
+/**
+ * 获取当前页面栈
+ */
+export function getCurrentPages() {
+  return Taro.getCurrentPages()
+}
+
+/**
+ * 获取当前页面路径
+ */
+export function getCurrentRoute(): string {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage ? currentPage.route || '' : ''
+}
+
+// 导出默认的导航函数
+export default navigateTo