首页骨架 css样式

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -69,8 +69,9 @@
                     </div>
                 </div>
             </div>
-            <div class="corner-box" v-if="itemData.type === 'housing'">
+            <div class="corner-box">
-                <img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
+                <img src="../../assets/homeImage/corner.svg" v-if="itemData.type === 'housing'&&itemData.intermediary!==1" class="corner-img" alt="">
+                <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="itemData.type === 'housing'&&itemData.intermediary===1" style="transform: rotate(90deg);" class="tab-img" alt="">
             </div>
             <!-- <div class="apartment-price-more flexcenter">更多</div> -->
 
@@ -213,7 +214,7 @@ let itemData = props.data
         font-weight: 400;
         font-style: normal;
         font-size: 14px;
-        color: #7F7F7F;
+        color: #AAAAAA;
         margin-top: 15px;
         padding: 0 10px;
     }

src/components/pageTopBar/pageTopBar.vue

@@ -10,11 +10,13 @@
             {{
               item.name }}</div>
           <div class="user-box">
-            <img src="" class="user-img" alt="">
+            <img :src="user.data.avatar" class="user-img" alt="">
             <div class="user-out-box">
               <div class="box-bg dis-f jus-x">
                 <div class="top-box"></div>
-                退出
+                <a :href="quitUrl" style="color: #fff;">
+                  退出
+                </a>
               </div>
             </div>
           </div>
@@ -29,9 +31,9 @@
       <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'">
         <div class="body-maxWidth">
           <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
-            <el-carousel-item v-for="item in 4" :key="item">
+            <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="../../assets/homeImage/carousel.svg" alt="">
+                <img class="carousel-img" :src="item.imageurl" alt="">
               </div>
             </el-carousel-item>
           </el-carousel>
@@ -56,12 +58,31 @@
 <script setup>
 import store from '../../store/index';
 import { useRoute, useRouter } from 'vue-router'
-import { reactive, watchEffect, ref } from "vue";
+import { reactive, watchEffect, ref,defineProps } from "vue";
+
+const props=defineProps({
+  bannerList:{
+    type:Array,
+    default:function (){
+      return []
+    }
+  }
+})
+
+//退出登录
+let url = location.href
+let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`)
+//个人信息
+let user = reactive({data:{}})
 //组件数据
 let topTab = reactive({ data: [] })
 let seachTab = reactive({ data: [] })
+let bannerLists = reactive({data:[]})
+
 watchEffect(() => {
-  console.log(store.state.indexData.menu)
+  user.data=store.state.user
+  bannerLists.data=props.bannerList
+  console.log(bannerLists.data)
   if (!store.state.indexData.menu) return
   store.state.indexData.menu.map(res => {
     if (res.name === '首页') {
@@ -192,7 +213,7 @@ tabBtnType.value = route.path
 .top-bg-img-box .user-img {
   width: 32px;
   height: 32px;
-  border-radius: 16rpx;
+  border-radius: 50%;
 }
 
 .top-bg-img-box .info-box .logo-box {

src/components/seachModule/seachModule.vue

@@ -73,7 +73,8 @@
                             v-if="allHireType.data.length"></seachInfo>
                     </div>
                     <!--  -->
-                    <div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
+                    <div
+                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
                         <selectTabBox></selectTabBox>
                     </div>
                 </div>
@@ -83,11 +84,12 @@
 </template>
   
 <script setup>
-import { ref, watchEffect, reactive, watch } from 'vue';
+import { ref, watchEffect, reactive, beforeMount } from 'vue';
 import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
 import { useRoute } from 'vue-router';
 import store from '../../store/index';
+import api from "../../utils/api";
 
 
 //搜索框
@@ -103,6 +105,25 @@ let seachArea = {};//区域找房
 let historyArr = reactive({ data: [] })//历史查找记录
 let hotArr = reactive({ data: [] })
 
+//获取区域下列数据
+let getLocationData = () => {
+    console.log(seachArea.data)
+    api.getLocationData().then(res => {
+        console.log(res)
+        if (res.code === 200) {
+            for (let item in res.data) {
+                if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
+                if (item.length > 1) {
+                    seachArea.data[item.substring(0, 1) - 1].data.push({
+                        title: res.data[item],
+                        id: item
+                    })
+                }
+            }
+        }
+    })
+}
+
 //监听路由
 const route = useRoute()
 let routePath = ref('')
@@ -113,6 +134,7 @@ watchEffect(() => {
     hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
     allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
     seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
+    if (seachArea.data.length > 0&&!seachArea.data[0].data) getLocationData()
     hotArr.data = store.state.indexData.hotSearcheWords
 })
 
@@ -125,6 +147,7 @@ let seachList = () => {
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
 }
 
+
 defineExpose({
     historyShow,
     seachValue

src/components/skeletonBox/skeletonBox.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <el-skeleton style="width: 240px" animated="true">
+            <template #template>
+                <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
+                <div style="padding: 14px">
+                    <el-skeleton-item variant="p" style="width: 50%" />
+                    <div style="
+            display: flex;
+            align-items: center;
+            justify-items: space-between;
+          ">
+                        <el-skeleton-item variant="text" style="margin-right: 16px" />
+                        <el-skeleton-item variant="text" style="width: 30%" />
+                    </div>
+                </div>
+            </template>
+        </el-skeleton>
+    </div>
+</template>
+  
+<script setup>
+
+</script>
+<style scoped>
+img {
+    object-fit: contain;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.body-maxWidth {
+    width: 1200px;
+    min-width: 1200px;
+}
+
+.s-w-100 {
+    width: 100%;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.mg-t-35 {
+    margin-top: 35px;
+}
+</style>
+  

src/main.js

@@ -20,6 +20,9 @@ import {
   ElPopover,
   ElDatePicker,
   ElMessage,
+  ElSpace,
+  ElSkeleton,
+  ElSkeletonItem,
   // 其他需要的组件
 } from 'element-plus'
 
@@ -43,7 +46,6 @@ api.index().then(res => {
     store.state.user = res.data.user
     store.state.nav = res.data.nav
     store.state.wechat = res.data.wechat
-    console.log(123,res.data.recommendedTab)
   }
 })
 
@@ -64,6 +66,8 @@ app.use(ElDropdown)
 app.use(ElPopover)
 app.use(ElDatePicker)
 app.use(ElMessage)
+app.use(ElSkeleton)
+app.use(ElSkeletonItem)
 
 
 app.use(store).use(router).use(Axios).mount('#app')

src/utils/api.js

@@ -9,5 +9,11 @@ export default{
     },
     recommendList:(params={})=>{//首页瀑布流
         return axios.get('/tenement/pc/api/home/recommendList',params)
+    },
+    banner:(params={})=>{//轮播
+        return axios.get('/tenement/pc/api/banner',params)
+    },
+    getLocationData:(params={})=>{//地区选择数据
+        return axios.get('/tenement/pc/api/home/getLocationData',params)
     }
 }

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <pageTopBar></pageTopBar>
+    <pageTopBar :bannerList="bannerList.data"></pageTopBar>
     <!-- <headerNavigation></headerNavigation> -->
     <!-- 搜索模块 -->
     <seachModule></seachModule>
@@ -107,7 +107,10 @@
       <div class="body-maxWidth dis-f al-item">
         <div class="waterfall-box s-w-100">
           <div>
-            <div ref="waterfall1">
+            <div v-show="waterfallList['1'].length===0">
+              <skeletonBox v-show="waterfallList['1'].length===0" v-for="item in noWaterfallList['1']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall1" v-show="waterfallList['1'].length>0">
               <div class="waterfall-first-box dis-f">
                 <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
                   <div>
@@ -142,22 +145,32 @@
                   </div>
                 </div>
               </div>
+              <!-- 骨架屏 -->
               <indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
-            <div ref="waterfall2">
+            <div v-show="waterfallList['2'].length===0">
+              <skeletonBox v-show="waterfallList['2'].length===0" v-for="item in noWaterfallList['2']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall2" v-show="waterfallList['2'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
             </div>
             <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
           </div>
           <div>
-            <div ref="waterfall3">
+            <div v-show="waterfallList['3'].length===0">
+              <skeletonBox v-show="waterfallList['3'].length===0" v-for="item in noWaterfallList['3']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall3" v-show="waterfallList['3'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
-            <div ref="waterfall4">
+            <div v-show="waterfallList['4'].length===0">
+              <skeletonBox v-show="waterfallList['4'].length===0" v-for="item in noWaterfallList['4']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall4" v-show="waterfallList['4'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
@@ -178,6 +191,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import seachModule from "../components/seachModule/seachModule.vue";
 import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
+import skeletonBox from '../components/skeletonBox/skeletonBox.vue'
 import headerNavigation from '../components/public/head.vue';
 import { useRouter } from 'vue-router'
 import store from '../store/index';
@@ -230,9 +244,12 @@ api.getApartment().then(res => {
 
 //获取实例
 let currentInstance = null
+
+let pagevalue = ref(0)
 //瀑布流数据
 let pages = ref(1)
 let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
+let noWaterfallList=reactive({1:3,2:3,3:3,4:3})
 
 //判断最小值
 let getMinHeight = (data) => {
@@ -249,6 +266,16 @@ let getMinHeight = (data) => {
   // console.log(index,waterfallAll)
 }
 
+//轮播
+let bannerList = reactive({ data: [] })
+let banner = () => {
+  api.banner({ type: 'home' }).then(res => {
+    if (res.code === 200) {
+      bannerList.data = res.data
+    }
+  })
+}
+
 //瀑布流添加
 let addListData = (data) => {
   data.map((res) => {
@@ -264,11 +291,15 @@ let getRecommendList = () => {
   api.recommendList({
     page: pages.value,
     limit: 30,
-    type: ListSelectBtn.selectType
+    type: ListSelectBtn.selectType,
+    pagevalue: pagevalue.value
   }).then(res => {
     console.log(res)
     if (res.code === 200) {
-      if (res.data.pagevalue) addListData(res.data.data)
+      if (res.data.pagevalue) {
+        addListData(res.data.data)
+        pagevalue.value = res.data.pagevalue
+      }
       if (res.data.data.length >= 30) {
         loadMore.value = true
       } else {
@@ -287,6 +318,7 @@ let listDataTypeChange = (item) => {
   waterfallList[3] = []
   waterfallList[4] = []
   pages.value = 1
+  pagevalue.value = 0
   getRecommendList()
 }
 
@@ -322,12 +354,14 @@ onMounted(() => {
   currentInstance = getCurrentInstance()
   setTimeout(() => {
     getRecommendList()
+    banner()
     window.addEventListener('scroll', onPageSrcoll, true);
   }, 1000)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', onPageSrcoll);
+  window.removeEventListener('scroll', onPageSrcoll, true);
+  console.log('卸载', window.scroll)
 })