feat: 改版首页搭建
This commit is contained in:
@@ -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>
|
||||
|
||||
5
src/pages/Discovery/components/PanoramicHome/index.vue
Normal file
5
src/pages/Discovery/components/PanoramicHome/index.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@@ -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数据
|
||||
|
||||
Reference in New Issue
Block a user