讲解对象列表接入展厅分页接口

src/components/explain/ExplainHallSelect.vue

@@ -12,10 +12,11 @@
       class="explain-scroll"
       :class="{
         'hall-stage': stage === 'hall',
-        'unit-stage': stage === 'unit',
         'stop-stage': stage === 'stop'
       }"
       scroll-y
+      @scroll="handleScroll"
+      @scrolltolower="handleScrollToLower"
       :show-scrollbar="false"
     >
       <view v-if="loading" class="state-block">
@@ -24,8 +25,9 @@
       </view>
 
       <view v-else-if="error" class="state-block error">
-        <text class="state-title">讲解内容加载失败</text>
+        <text class="state-title">讲解对象加载失败</text>
         <text class="state-desc">{{ error }}</text>
+        <button class="state-retry" @tap="emit('retry')">重新加载</button>
       </view>
 
       <template v-else>
@@ -75,31 +77,6 @@
           </view>
         </view>
 
-        <view v-else-if="stage === 'unit' && businessUnits.length" class="hall-list">
-          <view
-            v-for="unit in businessUnits"
-            :key="unit.id"
-            class="hall-card unit-card"
-            @tap="handleBusinessUnitClick(unit.id)"
-          >
-            <image
-              class="unit-thumb"
-              :src="unitPreviewImageUrl(unit)"
-              mode="aspectFill"
-              @error="handleUnitPreviewError(unit.id)"
-            />
-
-            <view class="hall-main">
-              <text class="hall-name">{{ unit.name }}</text>
-              <view class="hall-meta-row">
-                <text class="hall-meta-text">{{ unit.guideStopCount }} 个讲解</text>
-              </view>
-            </view>
-
-            <text class="hall-arrow">›</text>
-          </view>
-        </view>
-
         <view v-else-if="stage === 'stop' && guideStops.length" class="hall-list">
           <view
             v-for="stop in guideStops"
@@ -140,6 +117,14 @@
           <text class="state-title">{{ emptyTitle }}</text>
           <text class="state-desc">{{ emptyDescription }}</text>
         </view>
+        <view v-if="stage === 'stop' && guideStops.length" class="load-more-state">
+          <text v-if="loadingMore" class="state-desc">正在加载更多讲解对象</text>
+          <template v-else-if="loadMoreError">
+            <text class="state-desc">{{ loadMoreError }}</text>
+            <button class="state-retry" @tap="emit('retryMore')">重试加载更多</button>
+          </template>
+          <text v-else-if="!hasMore" class="state-desc">已加载全部讲解对象</text>
+        </view>
       </template>
     </scroll-view>
   </view>
@@ -147,9 +132,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import {
-  EXPLAIN_UNIT_PREVIEW_FALLBACK
-} from '@/utils/explainUnitPreviews'
 import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
 
 export interface ExplainHallSelectItem {
@@ -158,19 +140,10 @@ export interface ExplainHallSelectItem {
   floorLabel?: string
   image?: string
   explainCount: number
-  businessUnitCount?: number
   guideStopCount?: number
   searchText: string
 }
 
-export interface ExplainBusinessUnitSelectItem {
-  id: string
-  name: string
-  hallId: string
-  previewImageUrl?: string
-  guideStopCount: number
-}
-
 export interface ExplainGuideStopSelectItem {
   id: string
   name: string
@@ -189,40 +162,42 @@ export interface ExplainGuideStopSelectItem {
   playTargetId?: string
 }
 
-export type ExplainSelectStage = 'hall' | 'unit' | 'stop'
+export type ExplainSelectStage = 'hall' | 'stop'
 
 const props = withDefaults(defineProps<{
   halls?: ExplainHallSelectItem[]
-  businessUnits?: ExplainBusinessUnitSelectItem[]
   guideStops?: ExplainGuideStopSelectItem[]
   stage?: ExplainSelectStage
   selectedHallName?: string
-  selectedBusinessUnitName?: string
   loading?: boolean
+  loadingMore?: boolean
+  hasMore?: boolean
   error?: string
+  loadMoreError?: string
 }>(), {
   halls: () => [],
-  businessUnits: () => [],
   guideStops: () => [],
   stage: 'hall',
   selectedHallName: '',
-  selectedBusinessUnitName: '',
   loading: false,
-  error: ''
+  loadingMore: false,
+  hasMore: false,
+  error: '',
+  loadMoreError: ''
 })
 
 const emit = defineEmits<{
   hallClick: [hallId: string]
-  businessUnitClick: [unitId: string]
   guideStopClick: [stop: ExplainGuideStopSelectItem]
   back: []
+  retry: []
+  retryMore: []
 }>()
 
 const HALL_PREVIEW_BASE = '/static/explain/hall-previews'
 const HALL_PREVIEW_EAGER_COUNT = 4
 const loadedHallPreviewIds = ref(new Set<string>())
 const failedHallPreviewIds = ref(new Set<string>())
-const failedUnitPreviewIds = ref(new Set<string>())
 
 const hallPreviewMap: Record<string, string> = {
   宇宙厅: `${HALL_PREVIEW_BASE}/universe.webp`,
@@ -240,28 +215,23 @@ const filteredHalls = computed(() => props.halls)
 const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
 const showInternalHeader = computed(() => !shouldUseHostNavigation.value)
 const headerTitle = computed(() => {
-  if (props.stage === 'unit') return props.selectedHallName || '选择业务单元'
-  if (props.stage === 'stop') return props.selectedBusinessUnitName || '选择讲解点'
+  if (props.stage === 'stop') return props.selectedHallName || '讲解对象'
   return '讲解'
 })
 const loadingTitle = computed(() => {
-  if (props.stage === 'unit') return '正在加载业务单元'
-  if (props.stage === 'stop') return '正在加载讲解点'
+  if (props.stage === 'stop') return '正在加载讲解对象'
   return '正在加载展厅讲解'
 })
 const loadingDescription = computed(() => {
-  if (props.stage === 'unit') return '正在按讲解点所属 outline 分组生成临时业务单元。'
-  if (props.stage === 'stop') return '稍后将展示该业务单元下的讲解点。'
+  if (props.stage === 'stop') return '稍后将展示该展厅的讲解对象。'
   return '稍后将展示可选择的展厅。'
 })
 const emptyTitle = computed(() => {
-  if (props.stage === 'unit') return '该展厅暂无已标定讲解点'
-  if (props.stage === 'stop') return '该业务单元暂无讲解点'
+  if (props.stage === 'stop') return '该展厅暂无讲解对象'
   return '未找到相关展厅'
 })
 const emptyDescription = computed(() => {
-  if (props.stage === 'unit') return '方案 B 只展示已在地图上标定的讲解点。'
-  if (props.stage === 'stop') return '可返回选择其他业务单元。'
+  if (props.stage === 'stop') return '可返回选择其他展厅。'
   return '暂无可选择的展厅讲解。'
 })
 
@@ -295,19 +265,9 @@ const handleHallPreviewError = (hallId: string) => {
   }
 }
 
-const unitPreviewImageUrl = (unit: ExplainBusinessUnitSelectItem) => (
-  failedUnitPreviewIds.value.has(unit.id)
-    ? EXPLAIN_UNIT_PREVIEW_FALLBACK
-    : unit.previewImageUrl || EXPLAIN_UNIT_PREVIEW_FALLBACK
-)
-
-const handleUnitPreviewError = (unitId: string) => {
-  failedUnitPreviewIds.value = new Set([...failedUnitPreviewIds.value, unitId])
-}
-
 const hallMetaText = (hall: ExplainHallSelectItem) => (
-  typeof hall.businessUnitCount === 'number' || typeof hall.guideStopCount === 'number'
-    ? `${hall.businessUnitCount || 0} 个业务单元 · ${hall.guideStopCount || 0} 个讲解点`
+  typeof hall.guideStopCount === 'number'
+    ? `${hall.guideStopCount || 0} 个讲解对象`
     : hall.explainCount > 0 ? `${hall.explainCount} 个展项` : '展厅'
 )
 
@@ -315,10 +275,6 @@ const handleHallClick = (hallId: string) => {
   emit('hallClick', hallId)
 }
 
-const handleBusinessUnitClick = (unitId: string) => {
-  emit('businessUnitClick', unitId)
-}
-
 const handleGuideStopClick = (stopId: string) => {
   const stop = props.guideStops.find((item) => item.id === stopId)
   if (stop) {
@@ -326,6 +282,21 @@ const handleGuideStopClick = (stopId: string) => {
   }
 }
 
+const handleScrollToLower = () => {
+  requestMore()
+}
+
+const requestMore = () => {
+  if (props.stage === 'stop' && props.hasMore && !props.loading && !props.loadingMore && !props.loadMoreError) {
+    emit('retryMore')
+  }
+}
+
+const handleScroll = (event: Event) => {
+  const target = event.target as HTMLElement | null
+  if (target && target.scrollTop + target.clientHeight >= target.scrollHeight - 8) requestMore()
+}
+
 const handleBack = () => {
   emit('back')
 }
@@ -351,7 +322,6 @@ const handleBack = () => {
   overflow: hidden;
 }
 
-.explain-scroll.unit-stage,
 .explain-scroll.stop-stage {
   padding-bottom: 0;
 }
@@ -553,17 +523,6 @@ const handleBack = () => {
   color: #83927a;
 }
 
-.unit-thumb {
-  flex-shrink: 0;
-  width: 84px;
-  height: 58px;
-  border-radius: 8px;
-  background: #eef0e4;
-  border: 1px solid rgba(36, 49, 42, 0.06);
-  box-sizing: border-box;
-  object-fit: cover;
-}
-
 .hall-main {
   flex: 1;
   min-width: 0;
@@ -734,4 +693,21 @@ const handleBack = () => {
   border-color: #e5c2c2;
   background: #fff7f7;
 }
+
+.load-more-state {
+  min-height: 52px;
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+  text-align: center;
+}
+
+.state-retry {
+  margin-top: 12px;
+  padding: 0 14px;
+  font-size: 13px;
+  line-height: 32px;
+  color: #151713;
+  background: #e0df00;
+  border: 0;
+  border-radius: 6px;
+}
 </style>