Преглед на файлове

✨ feat(pay-success): 添加导航栏并优化页面布局

- 引入Navbar组件实现导航栏功能,支持返回操作
- 调整页面结构,将内容包裹在新的容器中
- 优化顶部间距,提升整体视觉层次感
- 保持原有支付成功页面功能和样式的同时增强导航体验
yourname преди 3 месеца
родител
ревизия
20e1f179a5
променени са 1 файла, в които са добавени 52 реда и са изтрити 42 реда
  1. 52 42
      mini/src/pages/pay-success/index.tsx

+ 52 - 42
mini/src/pages/pay-success/index.tsx

@@ -1,7 +1,8 @@
 import { View, Text } from '@tarojs/components'
-import { useLoad, useRouter, navigateTo } from '@tarojs/taro'
+import Taro, { useLoad, useRouter, navigateTo } from '@tarojs/taro'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Navbar, NavbarPresets } from '@/components/ui/navbar'
 
 export default function PaySuccessPage() {
   const router = useRouter()
@@ -30,51 +31,60 @@ export default function PaySuccessPage() {
   }
 
   return (
-    <View className="min-h-screen bg-gradient-to-b from-primary to-primary-dark p-8 text-center">
-      {/* 成功图标 */}
-      <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="min-h-screen bg-gradient-to-b from-primary to-primary-dark">
+      {/* 导航栏 */}
+      <Navbar
+        title="支付成功"
+        leftIcon="i-heroicons-arrow-left-20-solid"
+        onClickLeft={() => Taro.navigateBack()}
+        {...NavbarPresets.transparent}
+      />
 
-      {/* 支付信息 */}
-      <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 className="p-8 text-center pt-20">
+        {/* 成功图标 */}
+        <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>
-        </CardContent>
-      </Card>
+          <Text className="text-white text-3xl font-bold mb-2">支付成功!</Text>
+          <Text className="text-white/80 text-sm">感谢您的信任与支持</Text>
+        </View>
 
+        {/* 支付信息 */}
+        <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>
+          </CardContent>
+        </Card>
 
-      {/* 操作按钮 */}
-      <View className="flex gap-4">
-        <Button
-          variant="outline"
-          size="lg"
-          onClick={handleBackToHome}
-          className="flex-1 bg-white text-primary border-primary hover:bg-primary/5"
-        >
-          返回首页
-        </Button>
-        <Button
-          variant="default"
-          size="lg"
-          onClick={handleViewOrder}
-          className="flex-1 bg-white text-primary border-white hover:bg-primary hover:text-white"
-        >
-          查看订单
-        </Button>
+        {/* 操作按钮 */}
+        <View className="flex gap-4">
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={handleBackToHome}
+            className="flex-1 bg-white text-primary border-primary hover:bg-primary/5"
+          >
+            返回首页
+          </Button>
+          <Button
+            variant="default"
+            size="lg"
+            onClick={handleViewOrder}
+            className="flex-1 bg-white text-primary border-white hover:bg-primary hover:text-white"
+          >
+            查看订单
+          </Button>
+        </View>
       </View>
     </View>
   )