fix: navbar commpontents

pages/mine/vip.vue

@@ -1,16 +1,6 @@
 <template>
-  <view class="vip-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- Custom Navbar -->
-    <view
-      class="nav-bar"
-      :style="{
-        height: navBarHeight + 'px',
-        paddingTop: statusBarHeight + 'px',
-      }"
-    >
-      <view class="back" @click="goBack">‹</view>
-      <text class="nav-title">会员中心</text>
-    </view>
+  <view class="vip-page" >
+    <NavBar title="会员中心" />
 
     <!-- Content -->
     <view class="content">
@@ -118,15 +108,10 @@
 import { ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 
-import {
-  getBavBarHeight,
-  getStatusBarHeight as getStatus,
-} from "@/utils/system";
 import { useUserStore } from "@/stores/user";
 import { createOrder, getVipPlan } from "@/api/pay.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
-const navBarHeight = getBavBarHeight();
-const statusBarHeight = getStatus();
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
@@ -164,10 +149,6 @@ const getVipPlanList = async () => {
   plans.value = planRes;
 };
 
-const goBack = () => {
-  uni.navigateBack();
-};
-
 const selectPlan = (index) => {
   selectedPlanIndex.value = index;
 };
@@ -228,37 +209,6 @@ const handlePurchase = async () => {
   padding-bottom: 200rpx; // Space for bottom bar
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-  z-index: 100;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-  .back {
-    font-size: 50rpx;
-    margin-right: 24rpx;
-    line-height: 1;
-    color: #333;
-    padding: 20rpx;
-    margin-left: -20rpx;
-  }
-
-  .nav-title {
-    font-size: 34rpx;
-    font-weight: 600;
-    color: #000;
-    flex: 1;
-    text-align: center;
-    margin-right: 50rpx;
-  }
-}
-
 .content {
   padding: 30rpx;
 }