首页接口

src/components/pageTopBar/pageTopBar.vue

@@ -5,9 +5,12 @@
       <!-- 顶部导航 -->
       <div class="dis-f jus-x al-item index-top-navigation-box">
         <div class="index-top-navigation dis-f al-item body-maxWidth">
-          <div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
+          <div class="navigation-text" 
+          @click="topTabSelect(i,item)"
+          :class="{ 'navigation-text-click': i === topTabNum }" 
+          v-for="(item, i) in topTab.data" :key="i">
             {{
-              item.title }}</div>
+              item.name }}</div>
           <img src="" class="user-img" alt="">
         </div>
       </div>
@@ -30,11 +33,11 @@
       </div>
       <div class="btm-seach-btn-box dis-f al-item jus-x">
         <div class="body-maxWidth dis-f" style="height:48px;">
-          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
+          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab.data"
             :key="i">
             <el-badge :value="12">
               <div style="padding:0 10px;">
-                {{ item.title }}
+                {{ item.name }}
               </div>
             </el-badge>
 
@@ -46,49 +49,30 @@
 </template>
   
 <script setup>
-let topTab = [
-  {
-    title: '寄托首页',
-  }, {
-    title: '论坛'
-  }, {
-    title: 'Offer榜'
-  }, {
-    title: '港校租房'
-  }, {
-    title: '院校库'
-  }, {
-    title: '兑换店'
-  }, {
-    title: '搜索'
-  }, {
-    title: '招生官'
-  }, {
-    title: '中外合办院校'
+import { defineProps, reactive, watchEffect, ref } from "vue";
+const props=defineProps({
+  tabMens:{
+    type:Object,
+    default:function(){
+      return {}
+    }
   }
-]
-let seachTab = [
-  {
-    title: '首页',
-  }, {
-    title: '个人房源'
-  }, {
-    title: '中介房源'
-  }, {
-    title: '品牌公寓'
-  }, {
-    title: '求房源'
-  }, {
-    title: '我的'
-  }
-]
-</script>
-<script>
-export default {
-  props: {
+})
+//组件数据
+let topTab=reactive({data:[]})
+let seachTab = reactive({data:[]})
+watchEffect(()=>{
+  seachTab.data=props.tabMens.menu
+  topTab.data=props.tabMens.nav
+})
 
-  }
+//顶部导航跳转
+let topTabNum=ref('gter')
+let topTabSelect=(type,item)=>{
+  topTabNum.value=type
+  window.open(item.url)
 }
+
 </script>
 <style scoped>
 .pos-r {