| | |
|---|
| | | <view class="page"> |
|---|
| | | <view class="custom-nav" :class="isSolidNav ? 'is-solid' : ''"><view class="nav-bg"></view><view class="safe-space" :style="'height:' + navTop + 'px'"></view><view class="nav-row" :style="'height:' + navHeight + 'px;padding-right:' + navRight + 'px'"><view class="back-button" @tap="goBack"><image src="/static/food-assets/arrow-left-white.svg" mode="aspectFit"></image></view><text class="nav-title">享—{{topicTitle}}</text><view class="capsule-space" :style="'width:' + navWidth + 'px'"></view></view></view> |
|---|
| | | <scroll-view class="page-scroll" scroll-y lower-threshold="80" @scroll="handleScroll" @scrolltolower="loadMore"> |
|---|
| | | <view class="hero"><image class="hero-image" :src="activeScene.image" mode="aspectFill" @error="replaceImage(activeScene)"></image><view class="hero-top-shade"></view><view class="hero-bottom-shade"></view><text class="scene-name">{{activeScene.name}}</text><scroll-view class="scene-scroll" scroll-x :show-scrollbar="false" scroll-with-animation :scroll-left="sceneScrollLeft" @scrollend="handleSceneScrollEnd"><view class="scene-row" :style="'width:' + sceneTrackWidth + 'rpx'"><view class="scene-pad"></view><view v-for="(item, index) in scenes" :key="item.id" class="scene-item" :class="index == activeIndex ? 'active' : ''" @tap="selectScene(index)"><image :src="item.image" mode="aspectFill" @error="replaceImage(item)"></image></view><view class="scene-pad"></view></view></scroll-view></view> |
|---|
| | | <view class="hero"><image class="hero-image" :src="activeScene.image" mode="aspectFill" @error="replaceImage(activeScene)"></image><view class="hero-top-shade"></view><view class="hero-bottom-shade"></view><text class="scene-name">{{activeScene.name}}</text><scroll-view class="scene-scroll" scroll-x :show-scrollbar="false" scroll-with-animation :scroll-left="sceneScrollLeft" @scroll="handleSceneScroll"><view class="scene-row" :style="'width:' + sceneTrackWidth + 'rpx'"><view class="scene-pad"></view><view v-for="(item, index) in scenes" :key="item.id" class="scene-item" :class="index == activeIndex ? 'active' : ''" @tap="selectScene(index)"><image :src="item.image" mode="aspectFill" @error="replaceImage(item)"></image></view><view class="scene-pad"></view></view></scroll-view></view> |
|---|
| | | <view v-if="topicError" class="topic-error"><text>专题配置加载失败</text><text @tap="loadPremiumTopic">重新加载</text></view> |
|---|
| | | <view v-if="topicDescription != ''" class="topic-summary"><view class="intro-card"><text>{{topicDescription}}</text></view></view> |
|---|
| | | <view class="service-section"><scroll-view class="tab-scroll" scroll-x :show-scrollbar="false"><view class="service-tabs" :style="'width:' + Math.max(750, serviceTabs.length * 234) + 'rpx'"><view v-for="tab in serviceTabs" :key="tab.id" class="service-tab" :class="tab.id == activeTab ? 'active' : ''" @tap="selectTab(tab.id)"><text>{{tab.name}}</text><view class="tab-line"></view></view></view></scroll-view> |
|---|
| | |
|---|
| | | const replaceImage = (item: any) => { if (item.image != fallbackImage) item.image = fallbackImage } |
|---|
| | | const centerActiveScene = (index: number) => { sceneScrollLeft.value = index * 137 * windowWidth.value / 750 } |
|---|
| | | const selectScene = (index: number) => { if (index < 0 || index >= scenes.value.length) return; activeIndex.value = index; activeScene.value = scenes.value[index]; centerActiveScene(index) } |
|---|
| | | const handleSceneScrollEnd = (event: any) => { let index = Math.round(event.detail.scrollLeft * 750 / windowWidth.value / 137); if (index < 0) index = 0; if (index >= scenes.value.length) index = scenes.value.length - 1; selectScene(index) } |
|---|
| | | // scroll-view 的 scrollend 只在 Skyline 渲染下触发，WebView 下改用 scroll 停止滚动后判定居中图片 |
|---|
| | | const sceneIndexFromScroll = (scrollLeft: number): number => { let index = Math.round(scrollLeft * 750 / windowWidth.value / 137); if (index < 0) index = 0; if (index >= scenes.value.length) index = scenes.value.length - 1; return index } |
|---|
| | | let sceneSettleTimer = 0 |
|---|
| | | const handleSceneScroll = (event: any) => { const index = sceneIndexFromScroll(event.detail.scrollLeft as number); if (sceneSettleTimer != 0) clearTimeout(sceneSettleTimer); sceneSettleTimer = setTimeout(() => { sceneSettleTimer = 0; selectScene(index) }, 200) } |
|---|
| | | const handleScroll = (event: any) => { isSolidNav.value = event.detail.scrollTop > 64 } |
|---|
| | | const loadPremiumTopic = () => { |
|---|
| | | if (!isApiConfigured()) { topicError.value = true; initialLoading.value = false; initialError.value = true; return } |
|---|
| | |
|---|
| | | if (item.businessType == 'CHILD_ENTRUSTMENT') { uni.navigateTo({ url: '/pages/children-entrustment/children-entrustment?serviceId=' + encodeURIComponent(item.id) }); return } |
|---|
| | | uni.navigateTo({ url: '/pages/merchant/merchant?merchantType=' + encodeURIComponent(item.merchantType) + '&merchantId=' + encodeURIComponent(item.id) + '&name=' + encodeURIComponent(item.name) + '&image=' + encodeURIComponent(item.image) + '&address=' + encodeURIComponent(item.address) + '&discount=' + encodeURIComponent(item.benefit) }) |
|---|
| | | } |
|---|
| | | onUnload(() => { if (sceneSettleTimer != 0) { clearTimeout(sceneSettleTimer); sceneSettleTimer = 0 } }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
