✨ feat(payment-success): 优化支付成功页面

- 添加导航栏组件，统一页面头部样式
- 重构参数获取方式，使用与订单详情页相同的实现
- 引入自定义Button组件，统一按钮样式和交互体验
- 优化页面布局结构，增加适当的容器层级
- 调整按钮尺寸和样式，提升移动端显示效果
- 改进参数验证逻辑，确保订单ID和金额有效

♻️ refactor(payment-success): 优化代码结构和性能

- 移除冗余的useState状态管理，直接使用路由参数
- 简化查询条件判断，使用hasValidParams统一控制查询启用状态
- 优化类型转换逻辑，确保参数类型正确
- 移除不必要的useEffect生命周期钩子
- 调整queryKey定义方式，使其更加简洁明了

mini/src/pages/payment-success/index.tsx

@@ -5,9 +5,11 @@
 
 import Taro from '@tarojs/taro'
 import { useEffect, useState } from 'react'
-import { View, Text, Button } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useQuery } from '@tanstack/react-query'
 import { orderClient } from '@/api'
+import { Navbar } from '@/components/ui/navbar'
+import { Button } from '@/components/ui/button'
 
 interface PaymentSuccessParams {
   orderId: number
@@ -15,42 +17,34 @@ interface PaymentSuccessParams {
 }
 
 const PaymentSuccessPage = () => {
-  const [params, setParams] = useState<PaymentSuccessParams | null>(null)
+  // 获取页面参数 - 使用与订单详情页相同的方式
+  const params = Taro.getCurrentInstance().router?.params
+  const orderId = params?.orderId ? parseInt(params.orderId) : 0
+  const amount = params?.amount ? parseFloat(params.amount) : 0
 
-  // 获取页面参数
-  useEffect(() => {
-    const currentPage = Taro.getCurrentPages().pop()
-    if (currentPage?.options) {
-      const { orderId, amount } = currentPage.options
-      if (orderId && amount) {
-        setParams({
-          orderId: parseInt(orderId),
-          amount: parseFloat(amount)
-        })
-      }
-    }
-  }, [])
+  // 检查参数有效性
+  const hasValidParams = orderId > 0 && amount > 0
 
   // 查询订单详情
   const { data: orderDetail } = useQuery({
-    queryKey: ['order', params?.orderId],
+    queryKey: ['order', orderId],
     queryFn: async () => {
-      if (!params?.orderId) throw new Error('订单ID无效')
-      const response = await orderClient[':id'].$get({ param: { id: params.orderId } })
+      if (!orderId) throw new Error('订单ID无效')
+      const response = await orderClient[':id'].$get({ param: { id: orderId } })
       if (response.status !== 200) {
         throw new Error('获取订单详情失败')
       }
       const data = await response.json()
       return data
     },
-    enabled: !!params?.orderId
+    enabled: hasValidParams
   })
 
   // 查看订单详情
   const handleViewOrderDetail = () => {
-    if (params?.orderId) {
+    if (orderId) {
       Taro.redirectTo({
-        url: `/pages/order-detail/index?orderId=${params.orderId}`
+        url: `/pages/order-detail/index?id=${orderId}`
       })
     }
   }
@@ -69,21 +63,26 @@ const PaymentSuccessPage = () => {
     })
   }
 
-  if (!params) {
+  if (!hasValidParams) {
     return (
-      <View className="min-h-screen bg-gray-50 flex flex-col items-center justify-center">
-        <View className="bg-white rounded-2xl p-8 text-center">
-          <Text className="text-xl text-red-500 mb-4 block">参数错误</Text>
-          <Button onClick={handleBackToHome} className="w-48 h-18 bg-blue-500 text-white rounded-full text-sm">
-            返回首页
-          </Button>
+      <View className="min-h-screen bg-gray-50">
+        <Navbar title="支付结果" />
+        <View className="flex flex-col items-center justify-center flex-1">
+          <View className="bg-white rounded-2xl p-8 text-center">
+            <Text className="text-xl text-red-500 mb-4 block">参数错误</Text>
+            <Button onClick={handleBackToHome} className="w-48">
+              返回首页
+            </Button>
+          </View>
         </View>
       </View>
     )
   }
 
   return (
-    <View className="min-h-screen bg-gray-50 p-5">
+    <View className="min-h-screen bg-gray-50">
+      <Navbar title="支付成功" />
+      <View className="p-5">
       {/* 成功图标 */}
       <View className="flex justify-center mb-6">
         <View className="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center">
@@ -94,7 +93,7 @@ const PaymentSuccessPage = () => {
       {/* 成功信息 */}
       <View className="bg-white rounded-2xl p-8 mb-5 text-center">
         <Text className="text-2xl font-bold text-green-500 block mb-4">支付成功</Text>
-        <Text className="text-3xl font-bold text-orange-500 block mb-2">¥{params.amount.toFixed(2)}</Text>
+        <Text className="text-3xl font-bold text-orange-500 block mb-2">¥{amount.toFixed(2)}</Text>
         <Text className="text-sm text-gray-600 block">订单支付成功，感谢您的购买</Text>
       </View>
 
@@ -102,7 +101,7 @@ const PaymentSuccessPage = () => {
       <View className="bg-white rounded-2xl p-6 mb-5">
         <View className="flex justify-between items-center py-3 border-b border-gray-100">
           <Text className="text-sm text-gray-600">订单号:</Text>
-          <Text className="text-sm text-gray-800">{orderDetail?.orderNo || `ORD${params.orderId}`}</Text>
+          <Text className="text-sm text-gray-800">{orderDetail?.orderNo || `ORD${orderId}`}</Text>
         </View>
         <View className="flex justify-between items-center py-3 border-b border-gray-100">
           <Text className="text-sm text-gray-600">支付时间:</Text>
@@ -118,19 +117,23 @@ const PaymentSuccessPage = () => {
       <View className="space-y-3 mb-5">
         <Button
           onClick={handleViewOrderDetail}
-          className="w-full h-22 bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-full text-lg font-bold"
+          className="w-full h-12"
+          size="lg"
         >
           查看订单详情
         </Button>
         <Button
           onClick={handleViewOrderList}
-          className="w-full h-22 bg-white text-blue-500 border border-blue-500 rounded-full text-lg font-bold"
+          className="w-full h-12"
+          variant="outline"
+          size="lg"
         >
           查看订单列表
         </Button>
         <Button
           onClick={handleBackToHome}
-          className="w-full h-22 bg-gray-100 text-gray-600 border border-gray-300 rounded-full text-sm"
+          className="w-full h-12"
+          variant="ghost"
         >
           返回首页
         </Button>
@@ -147,6 +150,7 @@ const PaymentSuccessPage = () => {
           • 感谢您的支持
         </Text>
       </View>
+      </View>
     </View>
   )
 }