From 2ddf0e96050d012699d2cddde0d6827d168a5d2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 19 Aug 2025 13:49:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor(order):=20=E4=BC=98=E5=8C=96=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E5=88=97=E8=A1=A8=E5=80=92=E8=AE=A1=E6=97=B6=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新 API 基础 URL 以适应开发环境 - 调整倒计时组件样式,移除冗余样式 - 优化订单列表中倒计时的显示逻辑 - 统一处理订单状态文本和颜色 --- config/env.ts | 2 +- src/components/PaymentCountdown.scss | 77 +++++++++++-------------- src/components/PaymentCountdown.tsx | 12 ++-- src/user/order/components/OrderList.tsx | 16 ++--- 4 files changed, 49 insertions(+), 58 deletions(-) diff --git a/config/env.ts b/config/env.ts index c92883b..44ddb26 100644 --- a/config/env.ts +++ b/config/env.ts @@ -2,7 +2,7 @@ export const ENV_CONFIG = { // 开发环境 development: { - API_BASE_URL: 'https://cms-api.websoft.top/api', + API_BASE_URL: 'http://127.0.0.1:9200/api', APP_NAME: '开发环境', DEBUG: 'true', }, diff --git a/src/components/PaymentCountdown.scss b/src/components/PaymentCountdown.scss index 6602c3f..b449fb2 100644 --- a/src/components/PaymentCountdown.scss +++ b/src/components/PaymentCountdown.scss @@ -7,32 +7,30 @@ color: white; padding: 4px 8px; border-radius: 12px; - font-size: 12px; font-weight: 500; box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3); margin-left: 8px; - + .countdown-text { color: white; - font-size: 12px; font-weight: 500; } - + /* 紧急状态(少于1小时) */ &.urgent { - background: linear-gradient(135deg, #ff6b6b, #ee5a52); + color: #ff6b6b; animation: pulse 2s infinite; } - + /* 非常紧急状态(少于10分钟) */ &.critical { - background: linear-gradient(135deg, #ff4757, #c44569); + color: #c44569; animation: flash 1s infinite; } - + /* 过期状态 */ &.expired { - background: linear-gradient(135deg, #95a5a6, #7f8c8d); + color: #95a5a6; animation: none; } } @@ -40,21 +38,20 @@ /* 纯文本模式样式 */ .payment-countdown-text { color: #ff4757; - font-size: 12px; font-weight: 500; - + /* 紧急状态 */ &.urgent { color: #ff6b6b; animation: textPulse 2s infinite; } - + /* 非常紧急状态 */ &.critical { color: #ff4757; animation: textFlash 1s infinite; } - + /* 过期状态 */ &.expired { color: #95a5a6; @@ -64,39 +61,39 @@ /* 动画效果 */ @keyframes pulse { - 0% { - opacity: 1; + 0% { + opacity: 1; transform: scale(1); } - 50% { - opacity: 0.8; + 50% { + opacity: 0.8; transform: scale(1.02); } - 100% { - opacity: 1; + 100% { + opacity: 1; transform: scale(1); } } @keyframes flash { - 0% { - opacity: 1; + 0% { + opacity: 1; transform: scale(1); } - 25% { - opacity: 0.7; + 25% { + opacity: 0.7; transform: scale(1.05); } - 50% { - opacity: 1; + 50% { + opacity: 1; transform: scale(1); } - 75% { - opacity: 0.7; + 75% { + opacity: 0.7; transform: scale(1.05); } - 100% { - opacity: 1; + 100% { + opacity: 1; transform: scale(1); } } @@ -118,35 +115,30 @@ /* 响应式调整 */ @media (max-width: 375px) { .payment-countdown-badge { - font-size: 11px; padding: 3px 6px; - + .countdown-text { - font-size: 11px; } } - + .payment-countdown-text { - font-size: 11px; } } /* 详情页专用样式 */ .order-detail-countdown { .payment-countdown-badge { - font-size: 14px; padding: 6px 12px; border-radius: 16px; margin: 8px 0; - + .countdown-text { font-size: 14px; font-weight: 600; } } - + .payment-countdown-text { - font-size: 14px; font-weight: 600; } } @@ -154,17 +146,16 @@ /* 列表页专用样式 */ .order-list-countdown { .payment-countdown-badge { - font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: 6px; - + .countdown-text { - font-size: 11px; + } } - + .payment-countdown-text { - font-size: 11px; + } } diff --git a/src/components/PaymentCountdown.tsx b/src/components/PaymentCountdown.tsx index b1b55c9..351905b 100644 --- a/src/components/PaymentCountdown.tsx +++ b/src/components/PaymentCountdown.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { View, Text } from '@tarojs/components'; -import { - usePaymentCountdown, - formatCountdownText, - isUrgentCountdown, - isCriticalCountdown +import { + usePaymentCountdown, + formatCountdownText, + isUrgentCountdown, + isCriticalCountdown } from '@/hooks/usePaymentCountdown'; import './PaymentCountdown.scss'; @@ -64,7 +64,7 @@ const PaymentCountdown: React.FC = ({ // 判断紧急程度 const isUrgent = isUrgentCountdown(timeLeft); const isCritical = isCriticalCountdown(timeLeft); - + // 格式化倒计时文本 const countdownText = formatCountdownText(timeLeft, showSeconds); const fullText = `等待付款 ${countdownText}`; diff --git a/src/user/order/components/OrderList.tsx b/src/user/order/components/OrderList.tsx index 5d57a43..25e2cff 100644 --- a/src/user/order/components/OrderList.tsx +++ b/src/user/order/components/OrderList.tsx @@ -1,6 +1,6 @@ import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro' import {useEffect, useState, CSSProperties} from "react"; -import {View} from '@tarojs/components' +import {View, Text} from '@tarojs/components' import Taro from '@tarojs/taro'; import {InfiniteLoading} from '@nutui/nutui-react-taro' import dayjs from "dayjs"; @@ -334,7 +334,6 @@ function OrderList(props: OrderListProps) { }, [props.searchParams?.statusFilter]); // 监听statusFilter变化 - return ( <> + ) : ( 没有更多了 @@ -416,18 +415,19 @@ function OrderList(props: OrderListProps) { e.stopPropagation(); copyText(`${item.orderNo}`) }}>{item.orderNo} - {/* 添加倒计时显示 - 列表页不实时更新 */} - + + + {item.orderStatus === 0 && ( - + )} + {getOrderStatusText(item)} - {getOrderStatusText(item)}
{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}