hookehuyr

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>
<!-- 列表容器 -->
<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]">
<text class="text-gray-400 text-[28rpx]">加载中...</text>
......@@ -131,7 +127,7 @@
<view v-if="!loading && products.length === 0">
<nut-empty description="暂无相关产品" image="empty" />
</view>
</scroll-view>
</view>
<!-- 计划书表单容器 -->
<!-- 测试数据:后端接口和字段还没有准备好,使用 PlanFormContainer 进行的前端测试 -->
......@@ -342,17 +338,6 @@ const onClear = () => {
}
/**
* 滚动到底部加载更多
* @description 触发上拉加载更多
*/
const onScrollToLower = () => {
if (!hasMore.value || loading.value) return
page.value += 1
fetchProducts(true)
}
/**
* 使用产品列表点击处理器
* @description 配置为产品类型列表,点击时跳转到产品详情页
*/
......@@ -412,10 +397,13 @@ useLoad(() => {
})
/**
* 触底加载更多(备用方案)
* 触底加载更多
*/
useReachBottom(() => {
onScrollToLower()
if (!hasMore.value || loading.value) return
page.value += 1
fetchProducts(true)
})
</script>
......
......@@ -112,19 +112,21 @@
<!-- 计划书表单容器 -->
<!-- 测试数据:后端接口和字段还没有准备好,使用 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>
</template>
<script setup>
import { ref } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
import PlanFormContainer from '@/components/PlanFormContainer.vue'
import { useFileOperation } from '@/composables/useFileOperation'
......