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

- 更新 CouponCard 组件样式，优化主题颜色和布局 - 调整 CouponList 组件样式，使用原生样式替代自定义样式 - 修改 orderConfirm 页面中的地址栏样式 - 更新 QuantitySelector 组件样式，统一数量选择器样式 - 删除 Questions 组件代码
2025-08-11 18:15:36 +08:00
parent bcaf8203e4
commit 6f76be4da4
9 changed files with 230 additions and 297 deletions
--- a/src/components/CouponCard.scss
+++ b/src/components/CouponCard.scss
@@ -6,112 +6,75 @@
  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;
  }

-  // 主题颜色
-  &--red {
-    .coupon-card__left {
-      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;
+  .coupon-left {
+    flex-shrink: 0;
+    width: 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%);
    }

-  &__amount {
+    &.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 {
+      .currency {
        font-size: 14px;
        font-weight: 500;
-    margin-right: 1px;
+        margin-right: 2px;
      }

-  &__value {
-    font-size: 28px;
+      .amount {
+        font-size: 30px;
        font-weight: bold;
        line-height: 1;
      }
+    }

-  &__condition {
-    font-size: 11px;
+    .condition {
+      font-size: 12px;
      opacity: 0.9;
      margin-top: 2px;
    }
-
-  // 分割线区域
-  &__divider {
-    flex: 0 0 2px;
-    position: relative;
-    background: #f0f0f0;
  }

-  &__divider-line {
+  .coupon-divider {
+    flex-shrink: 0;
+    width: 2px;
+    position: relative;
+    background: #f5f5f5;
+
+    .divider-line {
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
@@ -123,76 +86,93 @@
      );
    }

-  &__circle {
+    .divider-circle-top {
      position: absolute;
      width: 16px;
      height: 16px;
      background: #f5f5f5;
      border-radius: 50%;
-    left: 50%;
-    transform: translateX(-50%);
-
-    &--top {
      top: -8px;
+      left: -7px;
    }

-    &--bottom {
+    .divider-circle-bottom {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background: #f5f5f5;
+      border-radius: 50%;
      bottom: -8px;
+      left: -7px;
    }
  }

-  // 右侧信息区域
-  &__right {
+  .coupon-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
-  }

-  &__info {
+    .coupon-info {
      flex: 1;
-  }

-  &__title {
+      .coupon-title {
        font-size: 14px;
        font-weight: 600;
-    color: #333;
+        color: #1f2937;
        margin-bottom: 4px;
      }

-  &__validity {
-    font-size: 11px;
-    color: #999;
+      .coupon-validity {
+        font-size: 12px;
+        color: #6b7280;
+      }
    }

-  &__action {
+    .coupon-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
-  }

-  &__btn {
-    min-width: 50px;
+      .coupon-btn {
+        min-width: 48px;
        height: 24px;
        border-radius: 12px;
-    font-size: 11px;
-    border: none;
-
-    &--receive,
-    &--use {
-      color: #fff;
-    }
-  }
-
-  &__status {
        font-size: 12px;
-    color: #999;
+        border: none;
+        color: #fff;
+
+        &.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%);
+        }
+      }
+
+      .status-text {
+        font-size: 12px;
+        color: #6b7280;
        padding: 4px 8px;
      }
+    }
+  }

-  // 状态遮罩
-  &__mask {
+  .status-overlay {
    position: absolute;
    top: 0;
    left: 0;
@@ -202,10 +182,9 @@
    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);
      color: #fff;
      padding: 4px 12px;
@@ -214,40 +193,4 @@
      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;
-  }
 }
--- a/src/components/CouponCard.tsx
+++ b/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-card__amount">
-          <Text className="coupon-card__currency">¥</Text>
-          <Text className="coupon-card__value">{amount}</Text>
+      <View className={`coupon-left ${themeClass}`}>
+        <View className="amount-wrapper">
+          <Text className="currency">¥</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-card__divider-line"></View>
-        <View className="coupon-card__circle coupon-card__circle--top"></View>
-        <View className="coupon-card__circle coupon-card__circle--bottom"></View>
+      <View className="coupon-divider">
+        <View className="divider-line"></View>
+        <View className="divider-circle-top"></View>
+        <View className="divider-circle-bottom"></View>
      </View>

      {/* 右侧信息区域 */}
-      <View className="coupon-card__right">
-        <View className="coupon-card__info">
-          <View className="coupon-card__title">
+      <View className="coupon-right">
+        <View className="coupon-info">
+          <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">
-          <Text className="coupon-card__mask-text">{getStatusText()}</Text>
+        <View className="status-overlay">
+          <Text className="status-badge">
+            {getStatusText()}
+          </Text>
        </View>
      )}
    </View>
--- a/src/components/CouponList.tsx
+++ b/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} />
--- a/src/components/QuantitySelector.scss
+++ b/src/components/QuantitySelector.scss
@@ -54,7 +54,6 @@
  }

  &__stock-text {
-    font-size: 12px;
    color: #999;
  }

--- a/src/components/QuantitySelector.tsx
+++ b/src/components/QuantitySelector.tsx
@@ -76,7 +76,7 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({

      {showStock && stock !== undefined && (
        <View className="quantity-selector__stock">
-          <Text className="quantity-selector__stock-text">
+          <Text className="text-sm">
            库存 {stock} 件
          </Text>
        </View>
--- a/src/components/Questions.tsx
+++ b/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
--- a/src/shop/orderConfirm/index.scss
+++ b/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;
--- a/src/shop/orderConfirm/index.tsx
+++ b/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,
-          couponDiscount: getCouponDiscount()
+          couponId: selectedCoupon ? selectedCoupon.amount : undefined
        }
      );

@@ -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}))
-      promises.push(selectPayment({}))
-
-      const [goodsRes, addressRes, paymentRes] = await Promise.all(promises)
+      const [addressRes, paymentRes] = await Promise.all([
+        listShopUserAddress({isDefault: true}),
+        selectPayment({})
+      ])

      // 设置商品信息
      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}
            />
--- a/src/utils/payment.ts
+++ b/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