feat: 对接了首页的接口
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
:id="'tab-' + idx"
|
||||
class="tab-item"
|
||||
:class="{ active: modelValue === idx }"
|
||||
@tap="handleSwitch(idx)"
|
||||
@tap="handleSwitch(tab, idx)"
|
||||
>
|
||||
<view class="tab-content">
|
||||
<view class="tab-label">
|
||||
@@ -29,21 +29,15 @@ const props = defineProps({
|
||||
modelValue: { type: Number, default: 0 },
|
||||
tabs: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: '小七孔古桥' },
|
||||
{ label: '翠谷瀑布' },
|
||||
{ label: '鸳鸯湖' },
|
||||
{ label: '天河潭' },
|
||||
{ label: '卧龙潭' }
|
||||
],
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const handleSwitch = (i) => {
|
||||
emit('update:modelValue', i);
|
||||
emit('change', i);
|
||||
const handleSwitch = (tab, idx) => {
|
||||
emit('update:modelValue', idx);
|
||||
emit('change', { tab, idx });
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,38 @@
|
||||
<template>
|
||||
<view>
|
||||
<FindTabs
|
||||
v-if="discoveryTabs.length > 0"
|
||||
v-model="activeIndex"
|
||||
:tabs="discoveryTabs"
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
|
||||
<CardSwiper
|
||||
v-if="discoveryCards.length > 0"
|
||||
:list="discoveryCards"
|
||||
@card-click="cardClick" />
|
||||
<QuickQuestions />
|
||||
|
||||
<QuickQuestions />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import FindTabs from "./components/FindTabs/index.vue";
|
||||
import CardSwiper from "./components/CardSwiper/index.vue";
|
||||
import QuickQuestions from "./components/QuickQuestions/index.vue";
|
||||
import discoveryCover from "@/components/ImageSwiper/images/2025-07-12_180248.jpg";
|
||||
|
||||
import { homeTabsData, homeTabContentData, homeQuickQuestionData } from "../../request/api/MainPageDataApi";
|
||||
import { useAppStore } from "@/store";
|
||||
const appStore = useAppStore();
|
||||
/// 从个渠道获取如二维码
|
||||
const sceneId = appStore.sceneId || "";
|
||||
|
||||
const activeIndex = ref(0);
|
||||
const discoveryTabs = ref([]);
|
||||
|
||||
const discoveryCards = ref([
|
||||
{
|
||||
title: "卧龙潭漂流",
|
||||
@@ -52,16 +64,71 @@ const discoveryCards = ref([
|
||||
},
|
||||
]);
|
||||
|
||||
const discoveryTabs = computed(() =>
|
||||
discoveryCards.value.map((item) => ({
|
||||
label: item.tabLabel || item.title,
|
||||
}))
|
||||
);
|
||||
/// tabs 切换事件
|
||||
const handleTabChange = ({ tab, idx }) => {
|
||||
if (activeIndex.value === idx) return;
|
||||
activeIndex.value = idx;
|
||||
queryDiscoveryData(tab.id);
|
||||
}
|
||||
|
||||
/// 卡片点击事件
|
||||
const cardClick = (item) => {
|
||||
console.log(JSON.stringify(item));
|
||||
};
|
||||
|
||||
/// 请求发现页tab数据
|
||||
const queryTabsList = async () => {
|
||||
const res = await homeTabsData();
|
||||
if (res.code === 0) {
|
||||
/// 处理tab数据
|
||||
const tabList = res.data.map((item) => ({
|
||||
id: item.id,
|
||||
label: item.tagName,
|
||||
}));
|
||||
/// 设置tab数据
|
||||
discoveryTabs.value = tabList;
|
||||
|
||||
/// 查询是否有sceneId参数
|
||||
const activeTab = discoveryTabs.value.find((tab) => {
|
||||
return tab.id === sceneId;
|
||||
});
|
||||
|
||||
/// 如果有则优先展示对应tab数据,没有则展示第一个tab数据
|
||||
if (activeTab) {
|
||||
queryDiscoveryData(sceneId);
|
||||
} else {
|
||||
queryDiscoveryData(discoveryTabs.value[0].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 统一请求发现页数据
|
||||
const queryDiscoveryData = async (tabId) => {
|
||||
queryDiscoveryCards(tabId);
|
||||
queryQuickQuestionData(tabId);
|
||||
};
|
||||
|
||||
/// 请求发现页卡片数据
|
||||
const queryDiscoveryCards = async (tabId) => {
|
||||
const res = await homeTabContentData({ tagId: tabId });
|
||||
if (res.code === 0) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/// 请求快速问题列表数据
|
||||
const queryQuickQuestionData = async (tabId) => {
|
||||
const res = await homeQuickQuestionData({ tagId: tabId });
|
||||
if (res.code === 0) {
|
||||
console.log("快速问题列表:", res.data);
|
||||
}
|
||||
}
|
||||
|
||||
/// 组件挂载后请求数据
|
||||
onMounted(() => {
|
||||
queryTabsList();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -58,7 +58,7 @@ const getWeixinMiniProgramParams = (e) => {
|
||||
if (e.q && e.q != "undefined") {
|
||||
const qrUrl = decodeURIComponent(e.q); // 获取到二维码原始链接内容
|
||||
const params = getUrlParams(qrUrl);
|
||||
appStore.setSceneId(params.sceneId);
|
||||
appStore.setSceneId(params.sceneId || params.tagId);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
import request from "../base/request";
|
||||
|
||||
/// 首页tab场景数据
|
||||
function homeTabsData(args) {
|
||||
return request.post("/hotelBiz/mainScene/queryTagListWithCache", args);
|
||||
}
|
||||
|
||||
/// 首页tab场景下内容数据
|
||||
function homeTabContentData(args) {
|
||||
return request.post("/hotelBiz/mainScene/queryContentListWithCache", args);
|
||||
}
|
||||
|
||||
/// 快速问题列表
|
||||
function homeQuickQuestionData(args) {
|
||||
return request.post("/hotelBiz/mainScene/queryQuickQuestionListWithCache", args);
|
||||
}
|
||||
|
||||
/// 主页数据
|
||||
function mainPageData(args) {
|
||||
return request.post("/hotelBiz/mainScene/mainPageData", args);
|
||||
@@ -16,4 +31,11 @@ function discoveryCradComponent() {
|
||||
return request.get("/hotelBiz/mainScene/discoveryComponent", {});
|
||||
}
|
||||
|
||||
export { mainPageData, quickBookingComponent, discoveryCradComponent };
|
||||
export {
|
||||
homeTabsData,
|
||||
homeTabContentData,
|
||||
homeQuickQuestionData,
|
||||
mainPageData,
|
||||
quickBookingComponent,
|
||||
discoveryCradComponent
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import { getServiceUrl } from "../api/GetServiceUrlApi";
|
||||
const versionValue = "1.1.1";
|
||||
|
||||
/// 是否是测试版本, 测试版本为true, 发布版本为false
|
||||
const developVersion = false;
|
||||
const developVersion = true;
|
||||
|
||||
// 获取服务地址
|
||||
const getEvnUrl = async () => {
|
||||
|
||||
Reference in New Issue
Block a user