refactor(components): 重构优惠券组件样式和结构

- 更新 CouponCard 组件样式，优化主题颜色和布局
- 调整 CouponList 组件样式，使用原生样式替代自定义样式
- 修改 orderConfirm 页面中的地址栏样式
- 更新 QuantitySelector 组件样式，统一数量选择器样式
- 删除 Questions 组件代码

src/components/CouponCard.scss

@@ -6,193 +6,173 @@
   margin-bottom: 12px;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   background: #fff;
 
-  &--disabled {
+  &.disabled {
     opacity: 0.6;
   }
 
-  // 主题颜色
+  .coupon-left {
-  &--red {
+    flex-shrink: 0;
-    .coupon-card__left {
+    width: 100px;
-      background: linear-gradient(135deg, #ff6b6b, #ff5252);
-    }
-    .coupon-card__btn--receive,
-    .coupon-card__btn--use {
-      background: linear-gradient(135deg, #ff6b6b, #ff5252);
-      color: #fff;
-    }
-  }
-
-  &--orange {
-    .coupon-card__left {
-      background: linear-gradient(135deg, #ffa726, #ff9800);
-    }
-    .coupon-card__btn--receive,
-    .coupon-card__btn--use {
-      background: linear-gradient(135deg, #ffa726, #ff9800);
-      color: #fff;
-    }
-  }
-
-  &--blue {
-    .coupon-card__left {
-      background: linear-gradient(135deg, #42a5f5, #2196f3);
-    }
-    .coupon-card__btn--receive,
-    .coupon-card__btn--use {
-      background: linear-gradient(135deg, #42a5f5, #2196f3);
-      color: #fff;
-    }
-  }
-
-  &--purple {
-    .coupon-card__left {
-      background: linear-gradient(135deg, #ab47bc, #9c27b0);
-    }
-    .coupon-card__btn--receive,
-    .coupon-card__btn--use {
-      background: linear-gradient(135deg, #ab47bc, #9c27b0);
-      color: #fff;
-    }
-  }
-
-  &--green {
-    .coupon-card__left {
-      background: linear-gradient(135deg, #66bb6a, #4caf50);
-    }
-    .coupon-card__btn--receive,
-    .coupon-card__btn--use {
-      background: linear-gradient(135deg, #66bb6a, #4caf50);
-      color: #fff;
-    }
-  }
-
-  // 左侧金额区域
-  &__left {
-    flex: 0 0 100px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #fff;
     position: relative;
+
+    &.theme-red {
+      background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
+    }
+
+    &.theme-orange {
+      background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
+    }
+
+    &.theme-blue {
+      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+    }
+
+    &.theme-purple {
+      background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+    }
+
+    &.theme-green {
+      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
+    }
+
+    .amount-wrapper {
+      display: flex;
+      align-items: baseline;
+      margin-bottom: 4px;
+
+      .currency {
+        font-size: 14px;
+        font-weight: 500;
+        margin-right: 2px;
+      }
+
+      .amount {
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 1;
+      }
+    }
+
+    .condition {
+      font-size: 12px;
+      opacity: 0.9;
+      margin-top: 2px;
+    }
   }
 
-  &__amount {
+  .coupon-divider {
-    display: flex;
+    flex-shrink: 0;
-    align-items: baseline;
+    width: 2px;
-    margin-bottom: 4px;
-  }
-
-  &__currency {
-    font-size: 14px;
-    font-weight: 500;
-    margin-right: 1px;
-  }
-
-  &__value {
-    font-size: 28px;
-    font-weight: bold;
-    line-height: 1;
-  }
-
-  &__condition {
-    font-size: 11px;
-    opacity: 0.9;
-    margin-top: 2px;
-  }
-
-  // 分割线区域
-  &__divider {
-    flex: 0 0 2px;
     position: relative;
-    background: #f0f0f0;
-  }
-
-  &__divider-line {
-    width: 100%;
-    height: 100%;
-    background: repeating-linear-gradient(
-      to bottom,
-      transparent 0px,
-      transparent 4px,
-      #ddd 4px,
-      #ddd 8px
-    );
-  }
-
-  &__circle {
-    position: absolute;
-    width: 16px;
-    height: 16px;
     background: #f5f5f5;
-    border-radius: 50%;
-    left: 50%;
-    transform: translateX(-50%);
 
-    &--top {
+    .divider-line {
-      top: -8px;
+      width: 100%;
+      height: 100%;
+      background: repeating-linear-gradient(
+        to bottom,
+        transparent 0px,
+        transparent 4px,
+        #ddd 4px,
+        #ddd 8px
+      );
     }
 
-    &--bottom {
+    .divider-circle-top {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background: #f5f5f5;
+      border-radius: 50%;
+      top: -8px;
+      left: -7px;
+    }
+
+    .divider-circle-bottom {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background: #f5f5f5;
+      border-radius: 50%;
       bottom: -8px;
+      left: -7px;
     }
   }
 
-  // 右侧信息区域
+  .coupon-right {
-  &__right {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 12px;
-  }
 
-  &__info {
+    .coupon-info {
-    flex: 1;
+      flex: 1;
-  }
 
-  &__title {
+      .coupon-title {
-    font-size: 14px;
+        font-size: 14px;
-    font-weight: 600;
+        font-weight: 600;
-    color: #333;
+        color: #1f2937;
-    margin-bottom: 4px;
+        margin-bottom: 4px;
-  }
+      }
 
-  &__validity {
+      .coupon-validity {
-    font-size: 11px;
+        font-size: 12px;
-    color: #999;
+        color: #6b7280;
-  }
+      }
+    }
 
-  &__action {
+    .coupon-actions {
-    display: flex;
+      display: flex;
-    justify-content: flex-end;
+      justify-content: flex-end;
-    align-items: center;
+      align-items: center;
-  }
 
-  &__btn {
+      .coupon-btn {
-    min-width: 50px;
+        min-width: 48px;
-    height: 24px;
+        height: 24px;
-    border-radius: 12px;
+        border-radius: 12px;
-    font-size: 11px;
+        font-size: 12px;
-    border: none;
+        border: none;
+        color: #fff;
 
-    &--receive,
+        &.theme-red {
-    &--use {
+          background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
-      color: #fff;
+        }
+
+        &.theme-orange {
+          background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
+        }
+
+        &.theme-blue {
+          background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+        }
+
+        &.theme-purple {
+          background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+        }
+
+        &.theme-green {
+          background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
+        }
+      }
+
+      .status-text {
+        font-size: 12px;
+        color: #6b7280;
+        padding: 4px 8px;
+      }
     }
   }
 
-  &__status {
+  .status-overlay {
-    font-size: 12px;
-    color: #999;
-    padding: 4px 8px;
-  }
-
-  // 状态遮罩
-  &__mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -202,52 +182,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 10;
-  }
 
-  &__mask-text {
+    .status-badge {
-    background: rgba(0, 0, 0, 0.6);
+      background: rgba(0, 0, 0, 0.6);
-    color: #fff;
+      color: #fff;
-    padding: 4px 12px;
+      padding: 4px 12px;
-    border-radius: 12px;
+      border-radius: 12px;
-    font-size: 14px;
+      font-size: 14px;
-    font-weight: 500;
+      font-weight: 500;
-  }
+    }
-}
-
-// 优惠券列表容器
-.coupon-list {
-  padding: 16px;
-
-  &__title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 16px;
-  }
-
-  &__empty {
-    text-align: center;
-    padding: 40px 20px;
-    color: #999;
-    font-size: 14px;
-  }
-}
-
-// 优惠券横向滚动容器
-.coupon-scroll {
-  display: flex;
-  padding: 16px;
-  gap: 8px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .coupon-card {
-    flex: 0 0 240px;
-    margin-bottom: 0;
   }
 }

src/components/CouponCard.tsx

@@ -44,7 +44,12 @@ const CouponCard: React.FC<CouponCardProps> = ({
   onUse,
   theme = 'red'
 }) => {
+  // 获取主题颜色类名
+  const getThemeClass = () => {
+    return `theme-${theme}`
+  }
   // 格式化优惠券金额显示
+  // @ts-ignore
   const formatAmount = () => {
     switch (type) {
       case 1: // 满减券
@@ -96,42 +101,44 @@ const CouponCard: React.FC<CouponCardProps> = ({
     return ''
   }
 
+  const themeClass = getThemeClass()
+
   return (
-    <View className={`coupon-card coupon-card--${theme} ${status !== 0 ? 'coupon-card--disabled' : ''}`}>
+    <View className={`coupon-card ${status !== 0 ? 'disabled' : ''}`}>
       {/* 左侧金额区域 */}
-      <View className="coupon-card__left">
+      <View className={`coupon-left ${themeClass}`}>
-        <View className="coupon-card__amount">
+        <View className="amount-wrapper">
-          <Text className="coupon-card__currency">¥</Text>
+          <Text className="currency">¥</Text>
-          <Text className="coupon-card__value">{amount}</Text>
+          <Text className="amount">{amount}</Text>
         </View>
-        <View className="coupon-card__condition">
+        <View className="condition">
           {getConditionText()}
         </View>
       </View>
 
       {/* 中间分割线 */}
-      <View className="coupon-card__divider">
+      <View className="coupon-divider">
-        <View className="coupon-card__divider-line"></View>
+        <View className="divider-line"></View>
-        <View className="coupon-card__circle coupon-card__circle--top"></View>
+        <View className="divider-circle-top"></View>
-        <View className="coupon-card__circle coupon-card__circle--bottom"></View>
+        <View className="divider-circle-bottom"></View>
       </View>
 
       {/* 右侧信息区域 */}
-      <View className="coupon-card__right">
+      <View className="coupon-right">
-        <View className="coupon-card__info">
+        <View className="coupon-info">
-          <View className="coupon-card__title">
+          <View className="coupon-title">
             {title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
           </View>
-          <View className="coupon-card__validity">
+          <View className="coupon-validity">
             有效期：{getValidityText()}
           </View>
         </View>
 
         {/* 按钮区域 */}
-        <View className="coupon-card__action">
+        <View className="coupon-actions">
           {showReceiveBtn && status === 0 && (
             <Button
-              className="coupon-card__btn coupon-card__btn--receive"
+              className={`coupon-btn ${themeClass}`}
               size="small"
               onClick={onReceive}
             >
@@ -140,7 +147,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
           )}
           {showUseBtn && status === 0 && (
             <Button
-              className="coupon-card__btn coupon-card__btn--use"
+              className={`coupon-btn ${themeClass}`}
               size="small"
               onClick={onUse}
             >
@@ -148,7 +155,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
             </Button>
           )}
           {status !== 0 && (
-            <View className="coupon-card__status">
+            <View className="status-text">
               {getStatusText()}
             </View>
           )}
@@ -157,8 +164,10 @@ const CouponCard: React.FC<CouponCardProps> = ({
 
       {/* 状态遮罩 */}
       {status !== 0 && (
-        <View className="coupon-card__mask">
+        <View className="status-overlay">
-          <Text className="coupon-card__mask-text">{getStatusText()}</Text>
+          <Text className="status-badge">
+            {getStatusText()}
+          </Text>
         </View>
       )}
     </View>

src/components/CouponList.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { View, ScrollView } from '@tarojs/components'
 import CouponCard, { CouponCardProps } from './CouponCard'
-import './CouponCard.scss'
 
 export interface CouponListProps {
   /** 优惠券列表数据 */
@@ -33,14 +32,14 @@ const CouponList: React.FC<CouponListProps> = ({
   // 垂直布局
   if (layout === 'vertical') {
     return (
-      <View className="coupon-list">
+      <View className="p-4">
         {title && (
-          <View className="coupon-list__title">{title}</View>
+          <View className="text-lg font-semibold text-gray-800 mb-4">{title}</View>
         )}
-        
+
         {coupons.length === 0 ? (
           showEmpty && (
-            <View className="coupon-list__empty">
+            <View className="text-center py-10 px-5 text-gray-500 text-sm">
               {emptyText}
             </View>
           )
@@ -62,26 +61,30 @@ const CouponList: React.FC<CouponListProps> = ({
   return (
     <View>
       {title && (
-        <View className="coupon-list__title" style={{ paddingLeft: '16px' }}>
+        <View className="text-lg font-semibold text-gray-800 mb-4 pl-4">
           {title}
         </View>
       )}
-      
+
       {coupons.length === 0 ? (
         showEmpty && (
-          <View className="coupon-list__empty">
+          <View className="text-center py-10 px-5 text-gray-500 text-sm">
             {emptyText}
           </View>
         )
       ) : (
         <ScrollView
           scrollX
-          className="coupon-scroll"
+          className="flex p-4 gap-2 overflow-x-auto"
           showScrollbar={false}
+          style={{
+            WebkitOverflowScrolling: 'touch'
+          }}
         >
           {coupons.map((coupon, index) => (
             <View
               key={index}
+              className="flex-shrink-0 w-60 mb-0"
               onClick={() => handleCouponClick(coupon, index)}
             >
               <CouponCard {...coupon} />

src/components/QuantitySelector.scss

@@ -21,7 +21,7 @@
     background: #f8f8f8;
     color: #666;
     transition: all 0.2s ease;
-    
+
     &:active {
       background: #e5e5e5;
     }
@@ -54,7 +54,6 @@
   }
 
   &__stock-text {
-    font-size: 12px;
     color: #999;
   }
 

src/components/QuantitySelector.tsx

@@ -59,11 +59,11 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
         >
           <Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
         </Button>
-        
+
         <View className="quantity-selector__input">
           <Text className="quantity-selector__value">{value}</Text>
         </View>
-        
+
         <Button
           className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`}
           size="small"
@@ -73,10 +73,10 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
           <Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
         </Button>
       </View>
-      
+
       {showStock && stock !== undefined && (
         <View className="quantity-selector__stock">
-          <Text className="quantity-selector__stock-text">
+          <Text className="text-sm">
             库存 {stock} 件
           </Text>
         </View>

src/components/Questions.tsx

@@ -1,42 +0,0 @@
-import {useEffect, useState} from "react";
-import {pageHjmQuestions} from "@/api/hjm/hjmQuestions";
-import {HjmQuestions} from "@/api/hjm/hjmQuestions/model";
-
-/**
- * 文章终极列表
- * @constructor
- */
-const Questions = () => {
-  const [list, setList] = useState<HjmQuestions[]>([])
-
-  const reload = () => {
-    pageHjmQuestions({}).then(res => {
-      if (res?.list) {
-        setList(res?.list)
-      }
-    })
-  }
-
-  useEffect(() => {
-    reload()
-  }, [])
-
-  return (
-    <div className={'px-3 mb-10'}>
-      <div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
-        <div className={'bg-white w-full'}>
-          {
-            list.map((item, index) => {
-              return (
-                <div key={index} className={'flex justify-between items-center py-2'}>
-                  <div className={'text-sm'}>{item.question}</div>
-                </div>
-              )
-            })
-          }
-        </div>
-      </div>
-    </div>
-  )
-}
-export default Questions

src/shop/orderConfirm/index.scss

@@ -41,7 +41,7 @@
 }
 .address-bottom-line{
   width: 100%;
-  border-radius: 24rpx 24rpx 0 0;
+  border-radius: 12rpx 12rpx 0 0;
   background: #fff;
   padding: 26rpx 49rpx 0 34rpx;
   position: relative;

src/shop/orderConfirm/index.tsx

@@ -8,7 +8,6 @@ import {
   Space,
   ActionSheet,
   Popup,
-  Toast,
   InputNumber,
   ConfigProvider
 } from '@nutui/nutui-react-taro'
@@ -143,19 +142,28 @@ const OrderConfirm = () => {
 
     // 检查是否满足使用条件
     if (coupon.minAmount && total < coupon.minAmount) {
-      Toast.show(`需满${coupon.minAmount}元才能使用此优惠券`)
+      Taro.showToast({
+        title: `需满${coupon.minAmount}元才能使用此优惠券`,
+        icon: 'none'
+      })
       return
     }
 
     setSelectedCoupon(coupon)
     setCouponVisible(false)
-    Toast.show('优惠券选择成功')
+    Taro.showToast({
+      title: '优惠券选择成功',
+      icon: 'success'
+    })
   }
 
   // 取消选择优惠券
   const handleCouponCancel = () => {
     setSelectedCoupon(null)
-    Toast.show('已取消使用优惠券')
+    Taro.showToast({
+      title: '已取消使用优惠券',
+      icon: 'success'
+    })
   }
 
   /**
@@ -167,18 +175,27 @@ const OrderConfirm = () => {
 
       // 基础校验
       if (!address) {
-        Toast.show('请选择收货地址')
+        Taro.showToast({
+          title: '请选择收货地址',
+          icon: 'error'
+        })
         return;
       }
 
       if (!payment) {
-        Toast.show('请选择支付方式')
+        Taro.showToast({
+          title: '请选择支付方式',
+          icon: 'error'
+        })
         return;
       }
 
       // 库存校验
       if (goods.stock !== undefined && quantity > goods.stock) {
-        Toast.show('商品库存不足')
+        Taro.showToast({
+          title: '商品库存不足',
+          icon: 'error'
+        })
         return;
       }
 
@@ -191,8 +208,7 @@ const OrderConfirm = () => {
           comments: goods.name,
           deliveryType: 0,
           buyerRemarks: orderRemark,
-          couponId: selectedCoupon ? selectedCoupon.amount : undefined,
+          couponId: selectedCoupon ? selectedCoupon.amount : undefined
-          couponDiscount: getCouponDiscount()
         }
       );
 
@@ -202,10 +218,16 @@ const OrderConfirm = () => {
       // 执行支付
       await PaymentHandler.pay(orderData, paymentType);
 
-      Toast.show('支付成功')
+      Taro.showToast({
+        title: '支付成功',
+        icon: 'success'
+      })
     } catch (error) {
       console.error('支付失败:', error)
-      Toast.show('支付失败，请重试')
+      Taro.showToast({
+        title: '支付失败，请重试',
+        icon: 'error'
+      })
     } finally {
       setPayLoading(false)
     }
@@ -217,17 +239,16 @@ const OrderConfirm = () => {
       setLoading(true)
       setError('')
 
-      // 并行加载商品信息和其他数据
+      // 分别加载数据，避免类型推断问题
-      const promises = []
+      let goodsRes: ShopGoods | null = null
-
       if (goodsId) {
-        promises.push(getShopGoods(Number(goodsId)))
+        goodsRes = await getShopGoods(Number(goodsId))
       }
 
-      promises.push(listShopUserAddress({isDefault: true}))
+      const [addressRes, paymentRes] = await Promise.all([
-      promises.push(selectPayment({}))
+        listShopUserAddress({isDefault: true}),
-
+        selectPayment({})
-      const [goodsRes, addressRes, paymentRes] = await Promise.all(promises)
+      ])
 
       // 设置商品信息
       if (goodsRes) {
@@ -424,7 +445,7 @@ const OrderConfirm = () => {
       >
         <View className="coupon-popup">
           <View className="coupon-popup__header">
-            <Text className="coupon-popup__title">选择优惠券</Text>
+            <Text className="text-sm">选择优惠券</Text>
             <Button
               size="small"
               fill="none"
@@ -460,7 +481,7 @@ const OrderConfirm = () => {
               coupons={availableCoupons.filter(coupon => {
                 const total = getGoodsTotal()
                 return coupon.minAmount && total < coupon.minAmount
-              }).map(coupon => ({...coupon, status: 2}))}
+              }).map(coupon => ({...coupon, status: 2 as const}))}
               layout="vertical"
               showEmpty={false}
             />

src/utils/payment.ts

@@ -184,7 +184,7 @@ export function buildSingleGoodsOrder(
     ],
     addressId,
     payType: PaymentType.WECHAT, // 默认微信支付，会被PaymentHandler覆盖
-    comments: options?.comments || '',
+    comments: options?.buyerRemarks || options?.comments || '',
     deliveryType: options?.deliveryType || 0,
     couponId: options?.couponId,
     selfTakeMerchantId: options?.selfTakeMerchantId