فهرست منبع

✨ feat(payment): 添加导航栏组件并优化页面布局

- 引入Navbar组件替换原头部文本,增强页面导航功能
- 调整页面容器结构,将内容区域包裹在p-5容器内
- 优化页面整体布局,提升移动端显示效果
yourname 1 ماه پیش
والد
کامیت
d0ca54c7bd
1فایلهای تغییر یافته به همراه15 افزوده شده و 5 حذف شده
  1. 15 5
      mini/src/pages/payment/index.tsx

+ 15 - 5
mini/src/pages/payment/index.tsx

@@ -8,6 +8,7 @@ import { useState } from 'react'
 import { View, Text } from '@tarojs/components'
 import { useQuery } from '@tanstack/react-query'
 import { Button } from '@/components/ui/button'
+import { Navbar } from '@/components/ui/navbar'
 import {
   requestWechatPayment,
   PaymentStatus,
@@ -234,11 +235,19 @@ const PaymentPage = () => {
   }
 
   return (
-    <View className="min-h-screen bg-gray-50 p-5">
-      {/* 头部 */}
-      <View className="text-center py-6 bg-white rounded-2xl mb-5">
-        <Text className="text-2xl font-bold text-gray-800">支付订单</Text>
-      </View>
+    <View className="min-h-screen bg-gray-50">
+      {/* 导航栏 */}
+      <Navbar
+        title="支付订单"
+        leftIcon=""
+        onClickLeft={() => {}}
+      />
+
+      <View className="p-5">
+        {/* 头部 */}
+        <View className="text-center py-6 bg-white rounded-2xl mb-5">
+          <Text className="text-2xl font-bold text-gray-800">支付订单</Text>
+        </View>
 
       {/* 订单信息 */}
       <View className="bg-white rounded-2xl p-6 mb-5">
@@ -308,6 +317,7 @@ const PaymentPage = () => {
           • 支付成功后会自动跳转
         </Text>
       </View>
+      </View>
     </View>
   )
 }