feat: 改版首页搭建

This commit is contained in:
2026-07-30 09:50:59 +08:00
parent 84e6702929
commit dd8e622bad
3 changed files with 27 additions and 11 deletions

View File

@@ -18,7 +18,7 @@
>
<view class="tab-content">
<view class="tab-label">
<text class="tab-text">{{ tab.label }}</text>
<text class="tab-text">{{ tab.tagName }}</text>
<image v-if="modelValue === idx && (isZhiNian ? indicatorSrcB : indicatorSrc)" :src="isZhiNian ? indicatorSrcB : indicatorSrc" class="tab-indicator" mode="widthFix" />
</view>
</view>

View File

@@ -0,0 +1,5 @@
<template>
<view>
</view>
</template>

View File

@@ -1,11 +1,14 @@
<template>
<view class="discovery-content">
<view class="discovery-tabs-sticky">
<FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
<view v-if="!isPanoramaGuideTab" class="discovery-tabs-sticky">
<FindTabs v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
</view>
<scroll-view class="discovery-scroll" scroll-y @scroll="handleContentScroll">
<view class="discovery-body">
<view v-if="isPanoramaGuideTab" class="discovery-body">
<PanoramicHome />
</view>
<view v-else class="discovery-body">
<CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
<ExploreCards v-if="exploreCards.length > 0" :list="exploreCards" @didSelectItem="handleCardClick" />
@@ -33,6 +36,7 @@ import QuickQuestions from "./components/QuickQuestions/index.vue";
import DiscoveryPhotoToolCard from "./components/DiscoveryPhotoToolCard/index.vue";
import DiscoveryAudioToolCard from "./components/DiscoveryAudioToolCard/index.vue";
import DiscoveryGuideMapToolCard from "./components/DiscoveryGuideMapToolCard/index.vue";
import PanoramicHome from "./components/PanoramicHome/index.vue";
import { homeTabsData, getNearbyTags, homeTabContentData, homeQuickQuestionData } from "../../request/api/MainPageDataApi";
import { useAppStore, useLocationStore } from "@/store";
@@ -44,14 +48,17 @@ const locationStore = useLocationStore();
const sceneId = appStore.sceneId || "";
const activeIndex = ref(0);
const discoveryTabs = ref([]);
const discoveryTabs = ref([{
id: '99999',
tagName: "荔波全景",
}]);
const discoveryCards = ref([]);
const exploreCards = ref([]);
const discoveryQuickQuestions = ref([]);
const emit = defineEmits(["content-scroll"]);
const isPanoramaGuideTab = computed(() => {
return discoveryTabs.value[activeIndex.value]?.label === "测试-2.0";
return discoveryTabs.value[activeIndex.value]?.tagName === "荔波全景";
});
const handleContentScroll = (e) => {
@@ -64,6 +71,12 @@ const handleContentScroll = (e) => {
/// tabs 切换事件
const handleTabChange = ({ tab, idx }) => {
activeIndex.value = idx;
if (isPanoramaGuideTab.value) {
discoveryCards.value = [];
exploreCards.value = [];
discoveryQuickQuestions.value = [];
return;
}
queryDiscoveryData(tab.id);
}
@@ -72,18 +85,16 @@ const queryTabsList = async () => {
const res = await homeTabsData();
if (res.code === 0) {
/// 处理tab数据
const tabList = res.data.map((item) => ({
id: item.id,
label: item.tagName,
}));
const tabList = res.data;
/// 设置tab数据
discoveryTabs.value = tabList;
discoveryTabs.value.push(...tabList);
/// 根据sceneId查询对应tab数据
findTabByIdWithActiveTabIndex(sceneId);
}
}
/// 根据id查询tab并设置activeIndex
const findTabByIdWithActiveTabIndex = (tabsId) => {
if (isPanoramaGuideTab.value) return;
/// 查询是否有id参数
const activeTabIndex = discoveryTabs.value.findIndex((tab) => tab.id === tabsId);
/// 如果有则优先展示对应tab数据没有则展示第一个tab数据