fix(product): 修复 scroll-view 兼容性和 prop 验证错误

- 移除 product-center 页面的 scroll-view 组件，改用原生 view
- 删除冗余的 onScrollToLower 函数
- 将触底加载逻辑内联到 useReachBottom hook 中
- 为 product-detail 页面的 PlanFormContainer 添加条件渲染
- 避免 productDetail 为 null 时的 prop 类型检查错误

影响文件:
- src/pages/product-center/index.vue
- src/pages/product-detail/index.vue

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -43,12 +43,8 @@
       </view>
       </view>
     </view>
     </view>
 
 
-    <!-- 列表容器 -->
-    <scroll-view
-      class="flex-1 min-h-0 overflow-y-auto pb-[calc(160rpx+env(safe-area-inset-bottom))]"
-      scroll-y
-      @scrolltolower="onScrollToLower"
-    >
+    <!-- 列表容器 - 使用原生滚动 -->
+    <view class="flex-1 min-h-0 overflow-y-auto pb-[calc(160rpx+env(safe-area-inset-bottom))]">
       <!-- 加载状态 -->
       <!-- 加载状态 -->
       <view v-if="loading && products.length === 0" class="flex justify-center items-center py-[100rpx]">
       <view v-if="loading && products.length === 0" class="flex justify-center items-center py-[100rpx]">
         <text class="text-gray-400 text-[28rpx]">加载中...</text>
         <text class="text-gray-400 text-[28rpx]">加载中...</text>
@@ -131,7 +127,7 @@
       <view v-if="!loading && products.length === 0">
       <view v-if="!loading && products.length === 0">
         <nut-empty description="暂无相关产品" image="empty" />
         <nut-empty description="暂无相关产品" image="empty" />
       </view>
       </view>
-    </scroll-view>
+    </view>
 
 
     <!-- 计划书表单容器 -->
     <!-- 计划书表单容器 -->
     <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
     <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
@@ -342,17 +338,6 @@ const onClear = () => {
 }
 }
 
 
 /**
 /**
- * 滚动到底部加载更多
- * @description 触发上拉加载更多
- */
-const onScrollToLower = () => {
-  if (!hasMore.value || loading.value) return
-
-  page.value += 1
-  fetchProducts(true)
-}
-
-/**
  * 使用产品列表点击处理器
  * 使用产品列表点击处理器
  * @description 配置为产品类型列表，点击时跳转到产品详情页
  * @description 配置为产品类型列表，点击时跳转到产品详情页
  */
  */
@@ -412,10 +397,13 @@ useLoad(() => {
 })
 })
 
 
 /**
 /**
- * 触底加载更多（备用方案）
+ * 触底加载更多
  */
  */
 useReachBottom(() => {
 useReachBottom(() => {
-  onScrollToLower()
+  if (!hasMore.value || loading.value) return
+
+  page.value += 1
+  fetchProducts(true)
 })
 })
 </script>
 </script>
 
 

@@ -112,19 +112,21 @@
 
 
     <!-- 计划书表单容器 -->
     <!-- 计划书表单容器 -->
     <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
     <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
-    <PlanFormContainer
-      v-model:visible="showPlanPopup"
-      :product="productDetail"
-      @close="showPlanPopup = false"
-      @submit="handlePlanSubmit"
-    />
+    <!-- 使用 v-if 条件渲染，避免 productDetail 为 null 时的 prop 类型检查错误 -->
+    <view v-if="showPlanPopup && productDetail.id">
+      <PlanFormContainer
+        v-model:visible="showPlanPopup"
+        :product="productDetail"
+        @close="showPlanPopup = false"
+        @submit="handlePlanSubmit"
+      />
+    </view>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { ref } from 'vue'
 import { ref } from 'vue'
 import NavHeader from '@/components/NavHeader.vue'
 import NavHeader from '@/components/NavHeader.vue'
-import TabBar from '@/components/TabBar.vue'
 import IconFont from '@/components/IconFont.vue'
 import IconFont from '@/components/IconFont.vue'
 import PlanFormContainer from '@/components/PlanFormContainer.vue'
 import PlanFormContainer from '@/components/PlanFormContainer.vue'
 import { useFileOperation } from '@/composables/useFileOperation'
 import { useFileOperation } from '@/composables/useFileOperation'