优化tab的轮播图的数据

2024-03-26 17:30:58 +08:00
parent d8f64a1a5f
commit 9cc3ef52fa
20 changed files with 347 additions and 331 deletions
--- a/dist/css/app.96d24200.css
+++ b/dist/css/app.96d24200.css
--- a/dist/css/housing.77b6f068.css
+++ b/dist/css/housing.77b6f068.css
--- a/dist/css/user.9bcb1e48.css
+++ b/dist/css/user.9bcb1e48.css
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.753b82c0.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.6e9dd806.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || [];
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.25ef79b4.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.0804c7b1.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.96d24200.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || [];
      (function () {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";
--- a/dist/js/app.0804c7b1.js
+++ b/dist/js/app.0804c7b1.js
--- a/dist/js/app.753b82c0.js
+++ b/dist/js/app.753b82c0.js
--- a/dist/js/chunk-vendors.25ef79b4.js
+++ b/dist/js/chunk-vendors.25ef79b4.js
--- a/dist/js/detail.150f07a0.js
+++ b/dist/js/detail.150f07a0.js
--- a/dist/js/edit.eca4e671.js
+++ b/dist/js/edit.eca4e671.js
--- a/dist/js/housing.bea11d09.js
+++ b/dist/js/housing.bea11d09.js
--- a/dist/js/seachPage.9a3627ce.js
+++ b/dist/js/seachPage.9a3627ce.js
--- a/dist/js/user.3e46f6bb.js
+++ b/dist/js/user.3e46f6bb.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ import login from "@/components/public/login.vue"
 import store from "@/store"
 import {onMounted, watch, watchEffect} from "vue"
 import {useRoute} from "vue-router"
+import api from "./utils/api"
 let socketTask = null

 onMounted(() => {
@@ -20,6 +21,8 @@ onMounted(() => {
    // script.src = "https://v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"
    // script.language = "JavaScript"
    // document.body.appendChild(script)
+
+    getBannerData()
 })

 const route = useRoute()
@@ -84,6 +87,16 @@ const getMiucmsSessionCookie = () => {
    }
    return null
 }
+
+// 获取轮播图的 数据
+const getBannerData = () => {
+    api.banner().then(res => {
+        if (res.code === 200) {
+            // bannerData
+            store.state.bannerData = res.data
+        }
+    })
+}
 </script>
 <style lang="less">
 header.page-header {
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/src/components/pageTopBar/pageTopBar.vue
@@ -1,18 +1,18 @@
 <template>
    <!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
    <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }">
-    <img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length">
-    <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
+        <img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length" />
+        <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length" />
        <div class="info-box">
            <!-- 顶部导航 -->
            <div class="dis-f jus-x al-item index-top-navigation-box">
                <div class="index-top-navigation dis-f al-item body-maxWidth" v-if="false">
-          <div class="navigation-text" @click="topTabSelect(i, item)"
-            :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
-            {{ item.name }}</div>
+                    <div class="navigation-text" @click="topTabSelect(i, item)" :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
+                        {{ item.name }}
+                    </div>
                    <div class="user-box" v-if="user.data['uid'] > 0">
                        <a target="_blank" :href="`https://bbs.gter.net/home.php?mod=space&uid=${user.data['uin']}`">
-              <img :src="user.data.avatar" class="user-img" alt="">
+                            <img :src="user.data.avatar" class="user-img" alt="" />
                        </a>

                        <!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> -->
@@ -29,13 +29,12 @@
                        <div class="login-box-item" @click="loginBtn('login')">登录</div>
                        <div class="login-box-item" @click="loginBtn('register')">注册</div>
                    </div>
-
                </div>
            </div>
            <div class="dis-f jus-x al-item body-maxWidth" style="margin: auto;">
                <div class="logo-box dis-f al-item body-maxWidth">
-          <img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()">
-          <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
+                    <img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()" />
+                    <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()" />
                </div>
            </div>
            <!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
@@ -44,7 +43,7 @@
                    <el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
                        <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
                            <div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
-                <img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)">
+                                <img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)" />
                            </div>
                        </el-carousel-item>
                    </el-carousel>
@@ -52,9 +51,7 @@
            </div>
            <div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
                <div class="body-maxWidth dis-f" style="height: 40px;">
-          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
-            v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
-
+                    <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
                        <el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
                            <div style="padding: 0 10px;">
                                {{ item.name }}
@@ -69,18 +66,18 @@
 </template>

 <script setup>
-import store from '../../store/index';
-import { useRoute, useRouter } from 'vue-router'
-import { reactive, watchEffect, ref, defineProps } from "vue";
-import { goTologin } from '@/utils/util.js'
+import store from "../../store/index"
+import { useRoute, useRouter } from "vue-router"
+import { reactive, watchEffect, ref, defineProps } from "vue"
+import { goTologin } from "@/utils/util.js"

 const props = defineProps({
    bannerList: {
        type: Array,
        default: function () {
            return []
-    }
-  }
+        },
+    },
 })

 //退出登录
@@ -95,25 +92,21 @@ let bannerLists = reactive({ data: [] })

 watchEffect(() => {
    user.data = store.state.user
-  bannerLists.data = props.bannerList
+    // bannerLists.data = props.bannerList
    if (!store.state.indexData.menu) return
    store.state.indexData.menu.map(res => {
-    if (res.name === '首页') {
-      res.path = '/'
-    } else if (res.name === '个人房源') {
-      res.path = '/personHousing'
-    }
-    else if (res.name === '中介房源') {
-      res.path = '/intermediaryHousing'
-    }
-    else if (res.name === '品牌公寓') {
-      res.path = '/apartment'
-    }
-    else if (res.name === '求房源') {
-      res.path = '/needHousing'
-    }
-    else if (res.name === '我的') {
-      res.path = '/user'
+        if (res.name === "首页") {
+            res.path = "/"
+        } else if (res.name === "个人房源") {
+            res.path = "/personHousing"
+        } else if (res.name === "中介房源") {
+            res.path = "/intermediaryHousing"
+        } else if (res.name === "品牌公寓") {
+            res.path = "/apartment"
+        } else if (res.name === "求房源") {
+            res.path = "/needHousing"
+        } else if (res.name === "我的") {
+            res.path = "/user"
        }
    })
    seachTab.data = store.state.indexData.menu
@@ -121,7 +114,7 @@ watchEffect(() => {
 })

 //顶部导航跳转
-let topTabNum = ref('fang')
+let topTabNum = ref("fang")
 let topTabSelect = (type, item) => {
    // topTabNum.value=type
    window.open(item.url)
@@ -129,35 +122,34 @@ let topTabSelect = (type, item) => {

 //页面跳转
 const router = useRouter()
-let tabBtnType = ref('/')
+let tabBtnType = ref("/")

 let pageTopBarShow = router.currentRoute.value.meta.topBarShow
-let changeTabBtnType = (item) => {
+let changeTabBtnType = item => {
    // 判断点击进入 user 时是否已经登录
-  if (item['path'] == '/user' && user.data['uid'] == 0) {
-    loginBtn('login')
+    if (item["path"] == "/user" && user.data["uid"] == 0) {
+        loginBtn("login")
        return
    }
    tabBtnType.value = item.path
    router.push({
-    path: item.path
+        path: item.path,
    })
 }

-let openInfo = (data) => {
+let openInfo = data => {
    window.open(data.url)
 }

 //监听路由
 const route = useRoute()
-let routePath = ref('')
+let routePath = ref("")
 routePath.value = route.meta.path
 tabBtnType.value = route.meta.path

-
 // 点击登录注册 type login 登录 register注册
 const loginBtn = type => {
-  if (type == 'login') {
+    if (type == "login") {
        store.state.showloginmodal = true
        return
    }
@@ -167,7 +159,14 @@ const loginBtn = type => {
 // 跳转首页
 const goIndex = () => router.push("/")

+watchEffect(() => {
+    if (routePath.value == "/needHousing")  bannerLists.data = store.state.bannerData.needHousing || []
+    else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || []
+    else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || []
+    else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || []
+    else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || []
    
+})
 </script>
 <style lang="less" scoped>
 .pos-r {
@@ -225,7 +224,7 @@ const goIndex = () => router.push("/")
 }

 .index-top-navigation-box .navigation-text {
-  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
@@ -236,11 +235,11 @@ const goIndex = () => router.push("/")
 }

 .index-top-navigation-box .navigation-text-click {
-  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
-  color: #62B1FF;
+    color: #62b1ff;
    border-bottom: 3px solid rgba(98, 177, 255, 1);
 }

@@ -291,11 +290,11 @@ const goIndex = () => router.push("/")
 .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
    width: 120px;
    height: 40px;
-  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
-  color: #E2EDF7;
+    color: #e2edf7;
    cursor: pointer;
 }

@@ -309,11 +308,11 @@ const goIndex = () => router.push("/")
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
-  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 18px;
-  color: #FFFFFF;
+    color: #ffffff;
 }

 .carousel-img {
@@ -330,7 +329,7 @@ const goIndex = () => router.push("/")

 .user-out-box {
    color: #fff;
-  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
@@ -349,7 +348,7 @@ const goIndex = () => router.push("/")
        background: #000;
        position: absolute;
        top: -4px;
-    transform: rotate(45deg)
+        transform: rotate(45deg);
    }

    .box-bg {
@@ -395,11 +394,11 @@ const goIndex = () => router.push("/")
 }

 /deep/ .el-input__inner {
-  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
-  color: #7F7F7F;
+    color: #7f7f7f;
    text-align: left;
 }

@@ -433,4 +432,3 @@ const goIndex = () => router.push("/")
    }
 }
 </style>
-  
--- a/src/components/public/public-list-item.vue
+++ b/src/components/public/public-list-item.vue
@@ -35,7 +35,7 @@
                    </div>
                    <div class="address-text dis-f al-item" v-if="item['location']">
                        <template v-if="Array.isArray(item['location'])">
-                            <template v-for="it in item['location']">
+                            <template v-for="(it, i) in item['location']" :key="i">
                                <div class="address-item flexacenter" v-if="it">
                                    <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                                    {{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }}
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -29,6 +29,7 @@ export default createStore({
    personPitchValue: {}, // 个人筛选的值 全局化
    intermediaryPitchValue: {}, // 中介筛选的值 全局化
    locationObj: {}, // 地区数据
+    bannerData: {}, // 所有轮播数据
  },
  getters: {

--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="home box-min-1200-src">
-    <pageTopBar :bannerList="bannerList.data.home"></pageTopBar>
+    <!-- <pageTopBar :bannerList="bannerList.data.home"></pageTopBar> -->
+    <pageTopBar></pageTopBar>
    <!-- 搜索模块 -->
    <seachModule :getDataList="personHouseingInfo"></seachModule>
    <!-- 房源展示 -->
@@ -227,14 +228,14 @@ let waterfallList = ref([])
 let noWaterfallList = ref(3)

 //轮播
-let bannerList = reactive({ data: [] })
-let banner = () => {
-  api.banner().then(res => {
-    if (res.code === 200) {
-      bannerList.data = res.data
-    }
-  })
-}
+// let bannerList = reactive({ data: [] })
+// let banner = () => {
+//   api.banner().then(res => {
+//     if (res.code === 200) {
+//       bannerList.data = res.data
+//     }
+//   })
+// }

 //开关
 let loadMore = ref(true)
@@ -353,7 +354,7 @@ onMounted(() => {
  document.documentElement.scrollTop = 0
  currentInstance = getCurrentInstance()
  getRecommendList()
-  banner()
+  // banner()
  window.addEventListener('scroll', onPageSrcoll, true);
 })

--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@@ -1,12 +1,13 @@
 <template>
-    <pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar>
+    <!-- <pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar> -->
+    <pageTopBar></pageTopBar>
    <!-- 筛选 -->
    <div class="screen-box wid1200">
        <seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module>
    </div>

    <div class="list wid1200 flexflex" ref="gridContainer">
-        <apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
+        <apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
    </div>

    <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
@@ -66,7 +67,7 @@ onMounted(() => {
    pitchValue.value = store.state.apartmentPitchValue
    if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]

-    banner()  // 获取轮播图数据
+    // banner()  // 获取轮播图数据
    getData()  // 获取列表数据

    window.addEventListener("scroll", handleScroll)
@@ -147,12 +148,12 @@ const handleTransfer = data => {
 }

 //轮播
-let bannerList = reactive({ data: [] })
-let banner = () => {
-    proxy.$get("/tenement/pc/api/banner").then(res => {
-        if (res.code === 200) bannerList.data = res.data
-    })
-}
+// let bannerList = reactive({ data: [] })
+// let banner = () => {
+//     proxy.$get("/tenement/pc/api/banner").then(res => {
+//         if (res.code === 200) bannerList.data = res.data
+//     })
+// }
 </script>
 <style lang="less" scoped>
 .screen-box {
--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@@ -1,6 +1,7 @@
 <template>
    <div class="box-min-1200-src">
-        <pageTopBar :bannerList="bannerList.data.intermediaryHousing"></pageTopBar>
+        <!-- <pageTopBar :bannerList="bannerList.data.intermediaryHousing"></pageTopBar> -->
+        <pageTopBar></pageTopBar>
        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
@@ -50,14 +51,14 @@ let loadingText = ref(" 下拉加载更多 ")
 provide("count", dataCount)

 //轮播
-let bannerList = reactive({ data: [] })
-let banner = () => {
-    api.banner().then(res => {
-        if (res.code === 200) {
-            bannerList.data = res.data
-        }
-    })
-}
+// let bannerList = reactive({ data: [] })
+// let banner = () => {
+//     api.banner().then(res => {
+//         if (res.code === 200) {
+//             bannerList.data = res.data
+//         }
+//     })
+// }

 //保存搜索设置
 let setSeachSelectData = (data, noMask = false) => {
@@ -129,7 +130,7 @@ onMounted(() => {
        gutter: 20,
    })
    // getDataList()
-    banner()
+    // banner()
    window.addEventListener("scroll", downLoadMore, true)
 })

--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -1,6 +1,7 @@
 <template>
    <div class="box-min-1200-src">
-        <pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar>
+        <!-- <pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar> -->
+        <pageTopBar></pageTopBar>
        <seachModule :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
@@ -70,14 +71,14 @@ let setSeachSelectData = (data, noMask = false) => {
 }

 //轮播
-let bannerList = reactive({ data: [] })
-let banner = () => {
-    api.banner().then(res => {
-        if (res.code === 200) {
-            bannerList.data = res.data
-        }
-    })
-}
+// let bannerList = reactive({ data: [] })
+// let banner = () => {
+//     api.banner().then(res => {
+//         if (res.code === 200) {
+//             bannerList.data = res.data
+//         }
+//     })
+// }

 //获取搜索数据
 let getDataList = data => {
@@ -146,7 +147,7 @@ onMounted(() => {
    //         seachSelectData.data = { [type]: typeData }
    //     }
    // }
-    banner()
+    // banner()
    // getDataList(seachSelectData.data)
    window.addEventListener("scroll", downLoadMore, true)
 })