|
|
|
@@ -1,11 +1,11 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<view class="guide-stop-catalog" :class="{ 'host-navigation': shouldUseHostNavigation }">
|
|
|
|
<view class="guide-stop-catalog" :class="{ 'host-navigation': shouldUseHostNavigation, 'has-embedded-back': showEmbeddedBack }">
|
|
|
|
<view v-if="showInternalHeader" class="catalog-header">
|
|
|
|
<view v-if="showInternalHeader || showEmbeddedBack" class="catalog-header">
|
|
|
|
<view class="header-back" @tap="emit('back')">
|
|
|
|
<view v-if="showInternalBack" class="header-back" @tap="emit('back')">
|
|
|
|
<text class="header-back-icon" />
|
|
|
|
<text class="header-back-icon" />
|
|
|
|
<text class="header-back-text">返回</text>
|
|
|
|
<text class="header-back-text">返回</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<text class="header-title">{{ selectedHallName || '讲解对象' }}</text>
|
|
|
|
<text v-if="showInternalHeader" class="header-title">{{ selectedHallName || '讲解对象' }}</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<scroll-view class="explain-scroll" scroll-y :show-scrollbar="false" @scroll="handleScroll" @scrolltolower="requestMore">
|
|
|
|
<scroll-view class="explain-scroll" scroll-y :show-scrollbar="false" @scroll="handleScroll" @scrolltolower="requestMore">
|
|
|
|
@@ -71,16 +71,18 @@ export interface ExplainGuideStopCatalogItem {
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
guideStops?: ExplainGuideStopCatalogItem[]
|
|
|
|
guideStops?: ExplainGuideStopCatalogItem[]
|
|
|
|
selectedHallName?: string
|
|
|
|
selectedHallName?: string
|
|
|
|
|
|
|
|
showEmbeddedBack?: boolean
|
|
|
|
loading?: boolean
|
|
|
|
loading?: boolean
|
|
|
|
loadingMore?: boolean
|
|
|
|
loadingMore?: boolean
|
|
|
|
hasMore?: boolean
|
|
|
|
hasMore?: boolean
|
|
|
|
error?: string
|
|
|
|
error?: string
|
|
|
|
loadMoreError?: string
|
|
|
|
loadMoreError?: string
|
|
|
|
}>(), { guideStops: () => [], selectedHallName: '', loading: false, loadingMore: false, hasMore: false, error: '', loadMoreError: '' })
|
|
|
|
}>(), { guideStops: () => [], selectedHallName: '', showEmbeddedBack: false, loading: false, loadingMore: false, hasMore: false, error: '', loadMoreError: '' })
|
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<{ guideStopClick: [stop: ExplainGuideStopCatalogItem], back: [], retry: [], retryMore: [] }>()
|
|
|
|
const emit = defineEmits<{ guideStopClick: [stop: ExplainGuideStopCatalogItem], back: [], retry: [], retryMore: [] }>()
|
|
|
|
const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
|
|
|
|
const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
|
|
|
|
const showInternalHeader = computed(() => !shouldUseHostNavigation.value)
|
|
|
|
const showInternalHeader = computed(() => !shouldUseHostNavigation.value)
|
|
|
|
|
|
|
|
const showInternalBack = computed(() => !shouldUseHostNavigation.value || props.showEmbeddedBack)
|
|
|
|
const failedImageIds = ref(new Set<string>())
|
|
|
|
const failedImageIds = ref(new Set<string>())
|
|
|
|
const visibleCoverIds = ref(new Set<string>())
|
|
|
|
const visibleCoverIds = ref(new Set<string>())
|
|
|
|
const coverSlots = new Map<string, Element>()
|
|
|
|
const coverSlots = new Map<string, Element>()
|
|
|
|
@@ -155,7 +157,7 @@ const handleScroll = (event: Event) => { const target = event.target as HTMLElem
|
|
|
|
.catalog-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: center; background: #f7f9f2; }
|
|
|
|
.catalog-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: center; background: #f7f9f2; }
|
|
|
|
.header-back { position: absolute; left: 12px; top: 10px; width: 44px; height: 44px; display: flex; align-items: center; }.header-back-icon { width: 20px; height: 20px; position: relative; } .header-back-icon::before { content: ''; position: absolute; left: 3px; top: 4px; width: 10px; height: 10px; border-left: 1.5px solid #262421; border-bottom: 1.5px solid #262421; transform: rotate(45deg); }
|
|
|
|
.header-back { position: absolute; left: 12px; top: 10px; width: 44px; height: 44px; display: flex; align-items: center; }.header-back-icon { width: 20px; height: 20px; position: relative; } .header-back-icon::before { content: ''; position: absolute; left: 3px; top: 4px; width: 10px; height: 10px; border-left: 1.5px solid #262421; border-bottom: 1.5px solid #262421; transform: rotate(45deg); }
|
|
|
|
.header-back-text { display: none; }.header-title { max-width: calc(100% - 152px); padding: 0 8px; font-size: 18px; line-height: 26px; font-weight: 700; color: #262421; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.header-back-text { display: none; }.header-title { max-width: calc(100% - 152px); padding: 0 8px; font-size: 18px; line-height: 26px; font-weight: 700; color: #262421; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.explain-scroll { height: 100%; padding: 80px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f7f9f2; }.host-navigation .explain-scroll { padding-top: 16px; }
|
|
|
|
.explain-scroll { height: 100%; padding: 80px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f7f9f2; }.host-navigation .explain-scroll { padding-top: 16px; }.host-navigation.has-embedded-back .explain-scroll { padding-top: 80px; }
|
|
|
|
.stop-list { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 4px; }.stop-card { width: 100%; min-width: 0; height: 80px; padding: 8px 0; display: flex; align-items: center; gap: 12px; box-sizing: border-box; overflow: hidden; border: 0; border-bottom: 1px solid #dbded4; border-radius: 0; background: transparent; }.stop-card:active { background: rgba(227, 235, 201, 0.4); }.stop-cover { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; background: #f5f5ed; }.stop-cover-fallback { font-size: 22px; line-height: 28px; color: #a9b29b; }.stop-copy { min-width: 0; display: flex; flex: 1; overflow: hidden; }.stop-name { display: -webkit-box; max-height: 40px; font-size: 14px; line-height: 20px; font-weight: 700; color: #262421; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.stop-status { flex: 0 0 44px; width: 44px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e3ebc9; }.stop-status-text { font-size: 11px; line-height: 16px; color: #262421; white-space: nowrap; }
|
|
|
|
.stop-list { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 4px; }.stop-card { width: 100%; min-width: 0; height: 80px; padding: 8px 0; display: flex; align-items: center; gap: 12px; box-sizing: border-box; overflow: hidden; border: 0; border-bottom: 1px solid #dbded4; border-radius: 0; background: transparent; }.stop-card:active { background: rgba(227, 235, 201, 0.4); }.stop-cover { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; background: #f5f5ed; }.stop-cover-fallback { font-size: 22px; line-height: 28px; color: #a9b29b; }.stop-copy { min-width: 0; display: flex; flex: 1; overflow: hidden; }.stop-name { display: -webkit-box; max-height: 40px; font-size: 14px; line-height: 20px; font-weight: 700; color: #262421; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.stop-status { flex: 0 0 44px; width: 44px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e3ebc9; }.stop-status-text { font-size: 11px; line-height: 16px; color: #262421; white-space: nowrap; }
|
|
|
|
.state-block { margin: 34px 0; padding: 22px 16px; box-sizing: border-box; text-align: center; border: 1px solid #e4e6df; border-radius: 8px; background: #fff; }.state-block.error { border-color: #e5c2c2; background: #fff7f7; }.state-title,.state-desc { display: block; }.state-title { font-size: 15px; line-height: 21px; font-weight: 700; color: #141412; }.state-desc { margin-top: 6px; font-size: 12px; line-height: 18px; color: #68725d; }.state-retry { margin-top: 12px; padding: 0 14px; font-size: 13px; line-height: 32px; color: #141412; background: #e0df00; border: 0; border-radius: 6px; }.load-more-state { min-height: 52px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); text-align: center; }
|
|
|
|
.state-block { margin: 34px 0; padding: 22px 16px; box-sizing: border-box; text-align: center; border: 1px solid #e4e6df; border-radius: 8px; background: #fff; }.state-block.error { border-color: #e5c2c2; background: #fff7f7; }.state-title,.state-desc { display: block; }.state-title { font-size: 15px; line-height: 21px; font-weight: 700; color: #141412; }.state-desc { margin-top: 6px; font-size: 12px; line-height: 18px; color: #68725d; }.state-retry { margin-top: 12px; padding: 0 14px; font-size: 13px; line-height: 32px; color: #141412; background: #e0df00; border: 0; border-radius: 6px; }.load-more-state { min-height: 52px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); text-align: center; }
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|