✨ feat(pay-success): 重构支付成功页面UI

- 引入组件库组件替换原生组件，提升UI一致性
- 优化页面布局和视觉层次，增强用户体验
- 改进颜色方案，使用主题色变量提高可维护性
- 优化成功图标设计，使用文字图标替代图片
- 改进卡片组件样式，增强视觉层次感
- 优化按钮样式和交互效果
- 改进司机分配状态显示样式，增强信息可读性
- 优化排版和间距，提升整体视觉美感

💄 style(pay-success): 优化页面样式细节

- 调整字体大小和粗细，提升文本可读性
- 优化颜色对比度，增强视觉体验
- 改进动画效果，提升页面生动性
- 统一间距和圆角样式，增强设计一致性

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

@@ -1,6 +1,8 @@
-import { View, Text, Button, Image } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useLoad, useRouter, navigateTo } from '@tarojs/taro'
 import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 
 export default function PaySuccessPage() {
   const router = useRouter()
@@ -74,98 +76,123 @@ export default function PaySuccessPage() {
   }
 
   return (
-    <View className="min-h-screen bg-gradient-to-b from-blue-500 to-blue-600 p-8 text-center">
+    <View className="min-h-screen bg-gradient-to-b from-primary to-primary-dark p-8 text-center">
       {/* 成功图标 */}
-      <Image
-        src="/static/success.png"
-        className="w-30 h-30 mb-8 mx-auto"
-        mode="aspectFit"
-      />
-      <Text className="text-white text-4xl font-bold mb-12">支付成功！</Text>
-
-      {/* 支付信息 */}
-      <View className="bg-white/95 rounded-card p-8 mb-8 backdrop-blur-sm">
-        <View className="flex justify-between items-center mb-4">
-          <Text className="text-sm text-gray-600">支付金额</Text>
-          <Text className="text-base font-bold text-gray-900">¥{totalPrice}</Text>
-        </View>
-        <View className="flex justify-between items-center">
-          <Text className="text-sm text-gray-600">购票数量</Text>
-          <Text className="text-base font-bold text-gray-900">{passengerCount}张</Text>
+      <View className="flex flex-col items-center justify-center mb-8">
+        <View className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center mb-6">
+          <Text className="text-6xl text-white">✅</Text>
         </View>
+        <Text className="text-white text-3xl font-bold mb-2">支付成功！</Text>
+        <Text className="text-white/80 text-sm">感谢您的信任与支持</Text>
       </View>
 
-      {/* 积分奖励 */}
-      <View className="bg-white/95 rounded-card p-8 mb-12 backdrop-blur-sm">
-        <Text className="text-base font-bold text-gray-900 mb-6">本次获得奖励</Text>
-        <View className="flex justify-center gap-12 mb-6">
-          <View className="flex flex-col items-center">
-            <Text className="text-4xl mb-3">💰</Text>
-            <Text className="text-3xl font-bold text-blue-600 mb-2">+{Math.floor(parseFloat(totalPrice))}</Text>
-            <Text className="text-xs text-gray-600">积分</Text>
+      {/* 支付信息 */}
+      <Card className="mb-6 bg-white/95 backdrop-blur-sm border-white/40">
+        <CardContent className="p-6">
+          <View className="space-y-4">
+            <View className="flex justify-between items-center">
+              <Text className="text-sm text-gray-600">支付金额</Text>
+              <Text className="text-lg font-bold text-gray-900">¥{totalPrice}</Text>
+            </View>
+            <View className="flex justify-between items-center">
+              <Text className="text-sm text-gray-600">购票数量</Text>
+              <Text className="text-lg font-bold text-gray-900">{passengerCount}张</Text>
+            </View>
           </View>
-          <View className="flex flex-col items-center">
-            <Text className="text-4xl mb-3">💎</Text>
-            <Text className="text-3xl font-bold text-blue-600 mb-2">+{Math.floor(parseFloat(totalPrice))}</Text>
-            <Text className="text-xs text-gray-600">会员值</Text>
+        </CardContent>
+      </Card>
+
+      {/* 积分奖励 */}
+      <Card className="mb-8 bg-white/95 backdrop-blur-sm border-white/40">
+        <CardContent className="p-6">
+          <Text className="text-lg font-bold text-gray-900 mb-6 text-center">本次获得奖励</Text>
+          <View className="flex justify-around mb-6">
+            <View className="flex flex-col items-center">
+              <View className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-3">
+                <Text className="text-2xl">💰</Text>
+              </View>
+              <Text className="text-2xl font-bold text-primary mb-1">+{Math.floor(parseFloat(totalPrice))}</Text>
+              <Text className="text-xs text-gray-600">积分</Text>
+            </View>
+            <View className="flex flex-col items-center">
+              <View className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-3">
+                <Text className="text-2xl">💎</Text>
+              </View>
+              <Text className="text-2xl font-bold text-primary mb-1">+{Math.floor(parseFloat(totalPrice))}</Text>
+              <Text className="text-xs text-gray-600">会员值</Text>
+            </View>
           </View>
-        </View>
-        <Text className="text-xs text-gray-500 leading-5">
-          消费1元得1积分+1会员值，积分可兑换优惠券
-        </Text>
-      </View>
+          <Text className="text-xs text-gray-500 text-center leading-5">
+            消费1元得1积分+1会员值，积分可兑换优惠券
+          </Text>
+        </CardContent>
+      </Card>
 
       {/* 司机分配状态 */}
-      <View className="mx-8 mb-12">
+      <View className="mb-8">
         {assigningDriver && (
-          <View className="bg-white/95 rounded-card p-12 text-center backdrop-blur-sm border border-white/40 shadow-lg">
-            <Text className="text-8xl mb-6 animate-bounce">🚗</Text>
-            <Text className="text-base font-semibold text-gray-900 mb-3">正在为您分配司机...</Text>
-            <Text className="text-xs text-gray-600">预计需要1-2分钟</Text>
-          </View>
+          <Card className="bg-white/95 backdrop-blur-sm border-white/40">
+            <CardContent className="p-8 text-center">
+              <Text className="text-6xl mb-4 animate-bounce">🚗</Text>
+              <Text className="text-lg font-semibold text-gray-900 mb-2">正在为您分配司机...</Text>
+              <Text className="text-sm text-gray-600">预计需要1-2分钟</Text>
+            </CardContent>
+          </Card>
         )}
 
         {driverAssigned && driverInfo && (
-          <View className="bg-white/95 rounded-card p-8 backdrop-blur-sm border border-white/40 shadow-lg animate-slideInUp">
-            <View className="flex items-center justify-center mb-6">
-              <Text className="text-base mr-3">✅</Text>
-              <Text className="text-base font-semibold text-success">司机分配成功</Text>
-            </View>
-            <View className="bg-blue-50 rounded-medium p-6 border border-blue-100">
-              <View className="flex items-center justify-between mb-5 pb-4 border-b border-blue-100">
-                <Text className="text-lg font-semibold text-gray-900">{driverInfo.driverName}</Text>
-                <Text className="text-sm text-warning">⭐ {driverInfo.rating}</Text>
-              </View>
-              <View className="mt-4">
-                <View className="flex items-center mb-3">
-                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">车牌号：</Text>
-                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carNumber}</Text>
-                </View>
-                <View className="flex items-center mb-3">
-                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">车型：</Text>
-                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carModel}</Text>
-                </View>
-                <View className="flex items-center">
-                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">预计到达：</Text>
-                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.estimatedArrival.display}</Text>
+          <Card className="bg-white/95 backdrop-blur-sm border-white/40">
+            <CardContent className="p-6">
+              <View className="flex items-center justify-center mb-6">
+                <View className="w-6 h-6 bg-success rounded-full flex items-center justify-center mr-3">
+                  <Text className="text-white text-xs">✓</Text>
                 </View>
+                <Text className="text-lg font-semibold text-success">司机分配成功</Text>
               </View>
-            </View>
-          </View>
+              <Card className="bg-blue-50 border-blue-100">
+                <CardContent className="p-4">
+                  <View className="flex items-center justify-between mb-4 pb-4 border-b border-blue-100">
+                    <Text className="text-lg font-semibold text-gray-900">{driverInfo.driverName}</Text>
+                    <View className="flex items-center bg-warning/20 px-2 py-1 rounded-full">
+                      <Text className="text-warning text-sm">⭐ {driverInfo.rating}</Text>
+                    </View>
+                  </View>
+                  <View className="space-y-3">
+                    <View className="flex items-center">
+                      <Text className="text-sm text-gray-600 w-20 flex-shrink-0">车牌号：</Text>
+                      <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carNumber}</Text>
+                    </View>
+                    <View className="flex items-center">
+                      <Text className="text-sm text-gray-600 w-20 flex-shrink-0">车型：</Text>
+                      <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carModel}</Text>
+                    </View>
+                    <View className="flex items-center">
+                      <Text className="text-sm text-gray-600 w-20 flex-shrink-0">预计到达：</Text>
+                      <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.estimatedArrival.display}</Text>
+                    </View>
+                  </View>
+                </CardContent>
+              </Card>
+            </CardContent>
+          </Card>
         )}
       </View>
 
       {/* 操作按钮 */}
-      <View className="flex gap-6">
+      <View className="flex gap-4">
         <Button
-          className="flex-1 bg-white/90 text-blue-600 border-2 border-blue-600 rounded-button py-6 text-base font-bold backdrop-blur-sm"
+          variant="outline"
+          size="lg"
           onClick={handleBackToHome}
+          className="flex-1 bg-white text-primary border-primary hover:bg-primary/5"
         >
           返回首页
         </Button>
         <Button
-          className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-button py-6 text-base font-bold shadow-lg"
+          variant="default"
+          size="lg"
           onClick={handleViewOrder}
+          className="flex-1 bg-white text-primary border-white hover:bg-primary hover:text-white"
         >
           查看订单
         </Button>