feat(discovery): switch card component based on active tab
add computed property to check panorama guide tab, import required dependencies and CardSwiper component, update template conditional rendering
This commit is contained in:
@@ -6,7 +6,16 @@
|
||||
|
||||
<scroll-view class="discovery-scroll" scroll-y @scroll="handleContentScroll">
|
||||
<view class="discovery-body">
|
||||
<ExploreCards v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
|
||||
<ExploreCards
|
||||
v-if="discoveryCards.length > 0 && isPanoramaGuideTab"
|
||||
:list="discoveryCards"
|
||||
@didSelectItem="handleCardClick"
|
||||
/>
|
||||
<CardSwiper
|
||||
v-else-if="discoveryCards.length > 0"
|
||||
:list="discoveryCards"
|
||||
@didSelectItem="handleCardClick"
|
||||
/>
|
||||
|
||||
<QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions"
|
||||
@didSelectItem="handleQuickQuestionClick" />
|
||||
@@ -20,12 +29,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
|
||||
import { navigateTo } from "@/router";
|
||||
import { getAccessToken } from "@/constant/token";
|
||||
|
||||
import FindTabs from "./components/FindTabs/index.vue";
|
||||
import CardSwiper from "./components/CardSwiper/index.vue";
|
||||
import ExploreCards from "./components/ExploreCards/index.vue";
|
||||
import QuickQuestions from "./components/QuickQuestions/index.vue";
|
||||
import DiscoveryPhotoToolCard from "./components/DiscoveryPhotoToolCard/index.vue";
|
||||
@@ -47,6 +57,10 @@ const discoveryCards = ref([]);
|
||||
const discoveryQuickQuestions = ref([]);
|
||||
const emit = defineEmits(["content-scroll"]);
|
||||
|
||||
const isPanoramaGuideTab = computed(() => {
|
||||
return discoveryTabs.value[activeIndex.value]?.label === "全景攻略";
|
||||
});
|
||||
|
||||
const handleContentScroll = (e) => {
|
||||
emit("content-scroll", {
|
||||
scrollTop: Number(e.detail?.scrollTop || 0),
|
||||
|
||||
Reference in New Issue
Block a user