From 11d6f7699f1343345d9f1c3e3e5ccc1571eb669f Mon Sep 17 00:00:00 2001 From: Therainclouds <245141853@qq.com> Date: Thu, 12 Feb 2026 23:57:06 +0800 Subject: [PATCH] n --- frontend/src/pages/activity/Detail.jsx | 2 +- miniprogram/src/app.config.ts | 1 + miniprogram/src/pages/order/detail.scss | 86 ++++++++++++++ miniprogram/src/pages/order/detail.tsx | 141 +++++++++++++++++++++++ miniprogram/src/pages/order/list.scss | 60 ++++++---- miniprogram/src/pages/order/list.tsx | 12 +- miniprogram/src/pages/order/payment.scss | 39 ++++--- 7 files changed, 296 insertions(+), 45 deletions(-) create mode 100644 miniprogram/src/pages/order/detail.scss create mode 100644 miniprogram/src/pages/order/detail.tsx diff --git a/frontend/src/pages/activity/Detail.jsx b/frontend/src/pages/activity/Detail.jsx index 94b2246..884220b 100644 --- a/frontend/src/pages/activity/Detail.jsx +++ b/frontend/src/pages/activity/Detail.jsx @@ -60,7 +60,7 @@ const ActivityDetail = () => { sessionStorage.setItem(hasRefreshedKey, 'true'); window.location.reload(); } - }, 5000); + }, 2000); return () => clearTimeout(timer); }, [id, refetch]); diff --git a/miniprogram/src/app.config.ts b/miniprogram/src/app.config.ts index e8c8ea5..4dfe422 100644 --- a/miniprogram/src/app.config.ts +++ b/miniprogram/src/app.config.ts @@ -11,6 +11,7 @@ export default defineAppConfig({ 'pages/order/checkout', 'pages/order/payment', 'pages/order/list', + 'pages/order/detail', 'pages/user/index' ], subPackages: [ diff --git a/miniprogram/src/pages/order/detail.scss b/miniprogram/src/pages/order/detail.scss new file mode 100644 index 0000000..5d41c4a --- /dev/null +++ b/miniprogram/src/pages/order/detail.scss @@ -0,0 +1,86 @@ +.page-container { + min-height: 100vh; + background-color: var(--bg-dark); + padding: 24px; +} + +.status-header { + text-align: center; + padding: 40px 0; + + .status-text { + font-size: 28px; /* 放大 */ + font-weight: bold; + color: var(--primary-green); + margin-bottom: 15px; + display: block; + + &.pending { color: var(--primary-cyan); } + } + + .amount { + font-size: 48px; /* 放大 */ + font-weight: bold; + color: var(--text-main); + line-height: 1.2; + } +} + +.section-card { + background: var(--card-bg); + border: 1px solid var(--glass-border); + border-radius: 16px; + padding: 24px; + margin-bottom: 24px; + + .section-title { + font-size: 18px; /* 放大 */ + font-weight: bold; + color: var(--text-main); + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 1px solid var(--glass-border); + } + + .info-row { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + font-size: 16px; /* 放大 */ + align-items: flex-start; + + &:last-child { margin-bottom: 0; } + + .label { + color: var(--text-secondary); + width: 90px; /* 加宽 label */ + flex-shrink: 0; + } + + .value { + flex: 1; + color: var(--text-main); + text-align: right; + word-break: break-all; + line-height: 1.4; + } + } +} + +.btn-area { + margin-top: 40px; + + .btn { + border-radius: 30px; + font-size: 18px; /* 放大 */ + font-weight: 500; + height: 56px; /* 加高 */ + line-height: 56px; + + &.btn-primary { + background: var(--primary-green); + color: #fff; + box-shadow: 0 4px 20px rgba(0, 185, 107, 0.3); + } + } +} diff --git a/miniprogram/src/pages/order/detail.tsx b/miniprogram/src/pages/order/detail.tsx new file mode 100644 index 0000000..109fbd3 --- /dev/null +++ b/miniprogram/src/pages/order/detail.tsx @@ -0,0 +1,141 @@ +import { View, Text, Button, Image } from '@tarojs/components' +import Taro, { useRouter, useLoad } from '@tarojs/taro' +import { useState } from 'react' +import { getOrder, prepayMiniprogram } from '../../api' +import './detail.scss' + +export default function OrderDetail() { + const router = useRouter() + const { id } = router.params + const [order, setOrder] = useState(null) + const [loading, setLoading] = useState(false) + + useLoad(async () => { + if (id) { + fetchOrder(Number(id)) + } + }) + + const fetchOrder = async (orderId: number) => { + try { + const res = await getOrder(orderId) + setOrder(res) + } catch (e) { + console.error(e) + Taro.showToast({ title: '获取订单失败', icon: 'none' }) + } + } + + const handlePay = async () => { + if (!order) return + setLoading(true) + try { + const params = await prepayMiniprogram(order.id) + + await Taro.requestPayment({ + timeStamp: params.timeStamp, + nonceStr: params.nonceStr, + package: params.package, + signType: params.signType, + paySign: params.paySign + }) + + Taro.showToast({ title: '支付成功', icon: 'success' }) + fetchOrder(order.id) // Refresh order status + + } catch (err: any) { + console.error(err) + if (err.errMsg && err.errMsg.indexOf('cancel') > -1) { + Taro.showToast({ title: '取消支付', icon: 'none' }) + } else { + Taro.showToast({ title: '支付失败', icon: 'none' }) + } + } finally { + setLoading(false) + } + } + + if (!order) return Loading... + + const isPending = order.status === 'pending' + const isPaid = order.status === 'paid' + + return ( + + + + {isPending ? '待支付' : isPaid ? '已支付' : order.status} + + ¥{order.total_price} + + + {/* Product Info */} + + 商品信息 + + 商品名称 + {order.config_name || order.course_title} + + + 数量 + x {order.quantity} + + + + {/* Shipping Info - Only show if available */} + {(order.customer_name || order.shipping_address) && ( + + 收货信息 + + 收货人 + {order.customer_name} + + + 联系电话 + {order.phone_number} + + {order.shipping_address && ( + + 收货地址 + {order.shipping_address} + + )} + + )} + + {/* Logistics Info - Only show if shipped */} + {(order.courier_name || order.tracking_number) && ( + + 物流信息 + + 快递公司 + {order.courier_name || '-'} + + + 运单号 + {order.tracking_number || '-'} + + + )} + + {/* Order Info */} + + 订单信息 + + 订单编号 + {order.wechat_trade_no || order.id} + + + 下单时间 + {order.created_at?.replace('T', ' ').substring(0, 19)} + + + + {isPending && ( + + + + )} + + ) +} diff --git a/miniprogram/src/pages/order/list.scss b/miniprogram/src/pages/order/list.scss index 3230081..20cf301 100644 --- a/miniprogram/src/pages/order/list.scss +++ b/miniprogram/src/pages/order/list.scss @@ -1,26 +1,29 @@ .page-container { min-height: 100vh; background-color: var(--bg-dark); - padding: 15px; + padding: 20px; /* 加大页面边距 */ } .card { background: var(--card-bg); border: 1px solid var(--glass-border); - border-radius: 12px; - padding: 20px; - margin-bottom: 20px; + border-radius: 16px; /* 更圆润 */ + padding: 24px; /* 加大卡片内边距 */ + margin-bottom: 24px; /* 加大卡片间距 */ .header { display: flex; justify-content: space-between; + align-items: center; border-bottom: 1px solid var(--glass-border); - padding-bottom: 15px; - margin-bottom: 15px; - font-size: 14px; + padding-bottom: 16px; + margin-bottom: 20px; + font-size: 16px; /* 基础字体放大 */ color: var(--text-secondary); .status { + font-weight: 500; + font-size: 16px; &.pending { color: var(--primary-cyan); } &.paid { color: var(--primary-green); } } @@ -28,49 +31,60 @@ .body { display: flex; - align-items: center; + align-items: flex-start; /* 对齐方式微调 */ .img { - width: 100px; - height: 100px; - border-radius: 8px; + width: 110px; /* 图片加大 */ + height: 110px; + border-radius: 12px; background: #333; - margin-right: 15px; + margin-right: 20px; + flex-shrink: 0; } .info { flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 110px; + .name { - font-size: 18px; + font-size: 20px; /* 名称显著放大 */ color: var(--text-main); display: block; - margin-bottom: 8px; - font-weight: 500; + margin-bottom: 10px; + font-weight: 600; + line-height: 1.4; } .qty { - font-size: 14px; + font-size: 16px; color: var(--text-secondary); } } .price { - font-size: 20px; + font-size: 24px; /* 价格加大 */ font-weight: bold; color: var(--text-main); + align-self: flex-end; /* 价格靠下对齐或根据设计调整，这里保持原位或微调 */ + margin-left: 10px; } } .footer { display: flex; justify-content: flex-end; - margin-top: 15px; + margin-top: 20px; + padding-top: 10px; /* 增加一点间隔 */ .btn-pay { border: 1px solid var(--primary-green); color: var(--primary-green); - padding: 6px 18px; - border-radius: 20px; - font-size: 14px; + padding: 10px 24px; /* 按钮加大 */ + border-radius: 24px; + font-size: 16px; + font-weight: 500; background: rgba(0, 185, 107, 0.1); } } @@ -78,7 +92,7 @@ .empty { text-align: center; - padding-top: 100px; + padding-top: 150px; color: var(--text-secondary); - font-size: 16px; + font-size: 18px; } diff --git a/miniprogram/src/pages/order/list.tsx b/miniprogram/src/pages/order/list.tsx index 4b93e35..165f4e4 100644 --- a/miniprogram/src/pages/order/list.tsx +++ b/miniprogram/src/pages/order/list.tsx @@ -20,13 +20,17 @@ export default function OrderList() { } } - const goPay = (id) => Taro.navigateTo({ url: `/pages/order/payment?id=${id}` }) + const goDetail = (id) => Taro.navigateTo({ url: `/pages/order/detail?id=${id}` }) + const goPay = (e, id) => { + e.stopPropagation() + Taro.navigateTo({ url: `/pages/order/payment?id=${id}` }) + } return ( {orders.map(order => ( - + goDetail(order.id)}> {order.created_at?.substring(0, 10)} @@ -44,7 +48,9 @@ export default function OrderList() { - {order.status === 'pending' && goPay(order.id)}>去支付} + {order.status === 'pending' && ( + goPay(e, order.id)}>去支付 + )} ))} diff --git a/miniprogram/src/pages/order/payment.scss b/miniprogram/src/pages/order/payment.scss index 58772f3..715ec4d 100644 --- a/miniprogram/src/pages/order/payment.scss +++ b/miniprogram/src/pages/order/payment.scss @@ -1,25 +1,26 @@ .page-container { min-height: 100vh; background-color: var(--bg-dark); - padding: 20px; + padding: 24px; } .status-header { text-align: center; - padding: 50px 0; + padding: 60px 0; .amount { - font-size: 48px; + font-size: 64px; /* 超大金额 */ font-weight: bold; color: var(--primary-green); display: block; - text-shadow: 0 0 20px rgba(0, 185, 107, 0.3); + text-shadow: 0 0 25px rgba(0, 185, 107, 0.4); + line-height: 1.1; } .desc { - font-size: 16px; + font-size: 18px; color: var(--text-secondary); - margin-top: 15px; + margin-top: 20px; display: block; } } @@ -27,19 +28,20 @@ .info-card { background: var(--card-bg); border: 1px solid var(--glass-border); - border-radius: 16px; - padding: 25px; - margin-bottom: 40px; + border-radius: 20px; + padding: 30px; + margin-bottom: 50px; .row { display: flex; justify-content: space-between; - margin-bottom: 20px; + margin-bottom: 24px; + align-items: center; &:last-child { margin-bottom: 0; } - .label { color: var(--text-secondary); font-size: 16px; } - .value { color: var(--text-main); font-size: 16px; font-weight: 500; } + .label { color: var(--text-secondary); font-size: 18px; } + .value { color: var(--text-main); font-size: 18px; font-weight: 500; } } } @@ -48,14 +50,15 @@ background: var(--primary-green); color: #fff; border: none; - border-radius: 12px; - font-size: 18px; - height: 56px; - line-height: 56px; - box-shadow: 0 4px 20px rgba(0, 185, 107, 0.4); + border-radius: 16px; + font-size: 20px; + font-weight: bold; + height: 64px; /* 更高的按钮 */ + line-height: 64px; + box-shadow: 0 8px 30px rgba(0, 185, 107, 0.5); &:active { - opacity: 0.8; + opacity: 0.9; transform: scale(0.98); } }