评论需要添加功能，提交订单有问题

components/bottom-view/bottom-view.vue

@@ -14,9 +14,9 @@
     left: 0;
     right: 0;
     bottom: 0;
-    padding: 16rpx 24rpx env(safe-area-inset-bottom); /* 关键：适配 iPhone 等安全区域 */
+    padding: 16rpx 24rpx calc(env(safe-area-inset-bottom) + 20rpx); /* 关键：适配 iPhone 等安全区域 */
     background: #fff;
     box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
-    z-index: 999;
+    z-index: 100;
   }
 </style>

components/nav-bar/nav-bar.vue

@@ -1,29 +1,56 @@
 <script setup>
   import { navigateBack } from '@/utils/router'
+  import { useSlots } from 'vue'
+
+  const slots = useSlots()
 
   const props = defineProps({
+    title: { type: String, default: '' },
+    /** 是否带背景 */
+    isTopBg: { type: Boolean, default: false },
+    /** 是否有占位符 */
+    isPlaceholder: { type: Boolean, default: false }
   })
 
+  // 判断是否传入了名为 "back" 的插槽
+  const hasBackSlot = !!slots.back
+
   const onBack = () => {
     navigateBack()
   }
 </script>
 
 <template>
-  <view class="nav-bar">
-    <view class="status_bar">
-      <!-- 这里是状态栏 -->
-    </view>
-    <view class="nav-bar-box">
-      <!-- 左侧插槽 -->
-      <view @click="onBack">
-        <slot name="back"></slot>
+  <view>
+    <view :class="{ 'nav-bar_bg': props.isTopBg }" class="nav-bar">
+      <view class="status_bar">
+        <!-- 这里是状态栏 -->
       </view>
-      <!-- 右侧插槽 -->
-       <view>
-        <slot name="right"></slot>
+      <view class="nav-bar-box">
+        <!-- 左侧插槽 -->
+        <view @click="onBack">
+          <image
+            v-if="!hasBackSlot"
+            src="/static/images/login/back.png"
+            mode="heightFix"
+            class="top_left-icon"
+          ></image>
+          <slot name="back"></slot>
+        </view>
+
+        <!-- 中间标题 -->
+        <view v-if="props.title" class="nav-bar-title">
+          <text>{{ props.title }}</text>
+        </view>
+
+        <!-- 右侧插槽 -->
+        <view>
+          <slot name="right"></slot>
+        </view>
       </view>
     </view>
+
+    <view v-if="props.isPlaceholder" class="nav-bar-placeholder"></view>
   </view>
 </template>
 
@@ -34,6 +61,15 @@
     width: 100%;
     z-index: 99;
   }
+
+  .nav-bar_bg {
+    background: #ffffff;
+  }
+
+  .top_left-icon {
+    height: 36rpx;
+  }
+
   .status_bar {
     height: var(--status-bar-height);
     width: 100%;
@@ -45,5 +81,27 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .nav-bar-title {
+      position: absolute;
+      width: calc(100% - 72rpx);
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      pointer-events: none;
+      text {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #333333;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+    }
+  }
+
+  .nav-bar-placeholder {
+    height: calc(var(--status-bar-height) + 44px);
   }
 </style>