feat: 首页的搭建

src/pages/Discovery/index.vue

@@ -1,14 +1,25 @@
 <template>
-  <view class="discovery-content">
-    <view v-if="!isPanoramaGuideTab" class="discovery-tabs-sticky">
-      <FindTabs v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
+  <view class="flex h-full min-h-0 w-full flex-col bg-[#F0F8F3]">
+    <view
+      v-if="!isMainPanoramaGuide"
+      class="z-[12] flex w-full shrink-0 flex-row items-center bg-[#F0F8F3]"
+    >
+      <view
+        class="ml-[12px] shrink-0 whitespace-nowrap px-[4px] text-[16px] font-medium text-[rgba(128,140,153,0.9)]"
+        @click="handleMainPanoramaClick"
+      >
+        荔波全景
+      </view>
+      <view v-if="discoveryTabs.length > 0" class="min-w-0 flex-1 overflow-hidden">
+        <FindTabs v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
+      </view>
     </view>
 
-    <scroll-view class="discovery-scroll" scroll-y @scroll="handleContentScroll">
-      <view v-if="isPanoramaGuideTab" class="discovery-body">
-        <PanoramicHome  />
+    <scroll-view class="h-0 min-h-0 w-full flex-1 overflow-hidden" scroll-y @scroll="handleContentScroll">
+      <view v-if="isMainPanoramaGuide" class="flex w-full flex-col gap-[12px]">
+        <PanoramicHome @select="handlePanoramicHomeSelect" />
       </view>
-      <view v-else class="discovery-body">
+      <view v-else class="flex w-full flex-col gap-[12px]">
         <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
         <ExploreCards v-if="exploreCards.length > 0" :list="exploreCards" @didSelectItem="handleCardClick" />
 
@@ -24,7 +35,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
 import { navigateTo } from "@/router";
 import { getAccessToken } from "@/constant/token";
@@ -48,18 +59,14 @@ const locationStore = useLocationStore();
 const sceneId = appStore.sceneId || "";
 
 const activeIndex = ref(0);
-const discoveryTabs = ref([{
-  id: '99999',
-  tagName: "荔波全景",
-}]);
+const discoveryTabs = ref([]);
 const discoveryCards = ref([]);
 const exploreCards = ref([]);
 const discoveryQuickQuestions = ref([]);
 const emit = defineEmits(["content-scroll"]);
 
-const isPanoramaGuideTab = computed(() => {
-  return discoveryTabs.value[activeIndex.value]?.tagName === "荔波全景";
-});
+/// 是否是主景区引导页 默认是 true，点击主景区后为 false
+const isMainPanoramaGuide = ref(true);
 
 const handleContentScroll = (e) => {
   emit("content-scroll", {
@@ -67,22 +74,24 @@ const handleContentScroll = (e) => {
   });
 };
 
+/// 点击主景区
+const handleMainPanoramaClick = () => {
+  isMainPanoramaGuide.value = true;
+  discoveryCards.value = [];
+  exploreCards.value = [];
+  discoveryQuickQuestions.value = [];
+};
+
 
 /// tabs 切换事件
 const handleTabChange = ({ tab, idx }) => {
   activeIndex.value = idx;
-  if (isPanoramaGuideTab.value) {
-    discoveryCards.value = [];
-    exploreCards.value = [];
-    discoveryQuickQuestions.value = [];
-    return;
-  }
   queryDiscoveryData(tab.id);
 }
 
 /// 请求发现页tab数据
-const queryTabsList = async () => {
-  const res = await homeTabsData();
+const queryTabsList = async (homePageId) => {
+  const res = await homeTabsData({ homePageId });
   if (res.code === 0) {
     /// 处理tab数据
     const tabList = res.data;
@@ -92,9 +101,18 @@ const queryTabsList = async () => {
     findTabByIdWithActiveTabIndex(sceneId);
   }
 }
+
+const handlePanoramicHomeSelect = (item) => {
+  const homePageId = item?.homePageId;
+  if (!homePageId) return;
+  isMainPanoramaGuide.value = false;
+
+  queryTabsList(homePageId);
+  getLocation();
+};
+
 /// 根据id查询tab并设置activeIndex
 const findTabByIdWithActiveTabIndex = (tabsId) => {
-  if (isPanoramaGuideTab.value) return;
   /// 查询是否有id参数
   const activeTabIndex = discoveryTabs.value.findIndex((tab) => tab.id === tabsId);
   /// 如果有则优先展示对应tab数据，没有则展示第一个tab数据
@@ -236,43 +254,4 @@ const getNearbyTagsData = async () => {
   }
 }
 
-/// 组件挂载后请求数据
-onMounted(() => {
-  queryTabsList();
-  getLocation();
-});
-
 </script>
-
-<style lang="scss" scoped>
-.discovery-content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  background: #F0F8F3;
-}
-
-.discovery-tabs-sticky {
-  flex-shrink: 0;
-  z-index: 12;
-  width: 100%;
-  background: #F0F8F3;
-}
-
-.discovery-scroll {
-  flex: 1;
-  width: 100%;
-  height: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.discovery-body {
-  width: 100%;
-  gap: 12px;
-  display: flex;
-  flex-direction: column;
-}
-</style>