个人房源列表

src/assets/homeImage/videoIcon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -863 -1189 )">
+    <path d="M 7.470703125 2.01171875  C 9.76888020833333 0.670572916666664  12.2786458333333 0  15 0  C 17.7213541666667 0  20.2311197916667 0.670572916666664  22.529296875 2.01171875  C 24.8274739583333 3.35286458333333  26.6471354166667 5.17252604166667  27.98828125 7.470703125  C 29.3294270833333 9.76888020833333  30 12.2786458333333  30 15  C 30 17.7213541666667  29.3294270833333 20.2311197916667  27.98828125 22.529296875  C 26.6471354166667 24.8274739583333  24.8274739583333 26.6471354166667  22.529296875 27.98828125  C 20.2311197916667 29.3294270833333  17.7213541666667 30  15 30  C 12.2786458333333 30  9.76888020833333 29.3294270833333  7.470703125 27.98828125  C 5.17252604166667 26.6471354166667  3.35286458333333 24.8274739583333  2.01171875 22.529296875  C 0.670572916666667 20.2311197916667  0 17.7213541666667  0 15  C 0 12.2786458333333  0.670572916666667 9.76888020833333  2.01171875 7.470703125  C 3.35286458333333 5.17252604166667  5.17252604166667 3.35286458333333  7.470703125 2.01171875  Z M 11.875 22.32421875  L 22.5 16.07421875  C 22.9166666666667 15.83984375  23.125 15.4817708333333  23.125 15  C 23.125 14.5182291666667  22.9166666666667 14.16015625  22.5 13.92578125  L 11.875 7.67578125  C 11.4713541666667 7.42838541666667  11.0546875 7.421875  10.625 7.65625  C 10.2083333333333 7.90364583333333  10 8.26822916666666  10 8.75  L 10 21.25  C 10 21.7317708333333  10.2083333333333 22.0963541666667  10.625 22.34375  C 10.8333333333333 22.4479166666667  11.0416666666667 22.5  11.25 22.5  C 11.4713541666667 22.5  11.6796875 22.44140625  11.875 22.32421875  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 863 1189 )" />
+  </g>
+</svg>

src/components/biserialListItem/biserialListItem.vue

@@ -7,52 +7,87 @@
         </div>
         <div class="top-box">
             <div class="title-text">
-                123456789
+                {{ data&&data.subject||'暂无标题' }}
             </div>
             <div class="mg-t-10 dis-f al-item jus-bet s-w-100">
                 <div>
                     <div class="dis-f al-item">
-                        <div class="tab-item" :class="[{ 'mg-l-5': i > 0 }, { 'first-tab': i === 0 }]"
+                        <div class="tab-item first-tab">
-                            v-for="(item, i) in 5" :key="i">
+                            {{ data&&data.gptype||'' }}
-                            {{ item }}
+                        </div>
+                        <div class="tab-item mg-l-8">
+                            {{ listData&&listData.data&&listData.data.type[data&&data.type]||'' }}
+                        </div>
+                        <div class="tab-item mg-l-8" v-if="data&&data.elevator!==-1">
+                            {{ listData&&listData.data&&listData.data.elevator[data&&data.elevator]||'' }}
+                        </div>
+                        <div class="tab-item mg-l-8" v-if="data&&data.sunshinearea!==-1">
+                            {{ listData&&listData.data&&listData.data.sunshinearea[data&&data.sunshinearea]||'' }}
+                        </div>
+                        <div class="tab-item mg-l-8">
+                            {{ listData&&listData.data&&listData.data.gender[data&&data.gender]||'' }}
                         </div>
                     </div>
                     <div class="address-text dis-f al-item">
                         <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
-                        <span>九龙 > 尖沙咀/佐敦</span>
+                        <span>{{
+                        location&&location.data&&location.data[1]?`${ location&&location.data&&location.data[data&&data.location&&data.location.substring(0,1)] } > ${ location&&location.data[data&&data.location] }`:'' 
+                        }}</span>
                     </div>
                     <div class="price-text dis-f" style="align-items: end;">
                         <span class="unit">HK$</span>
-                        <span class="price">5600</span>
+                        <span class="price">{{ data&&data.rent }}</span>
                         <span>/月</span>
-                        <span class="time">[123456]</span>
+                        <span class="time" v-show="data&&data.rentalduration!=0">[ 租期{{ data&&data.rentalduration }}{{ data&&data.rentalperiod }} ]</span>
                     </div>
                 </div>
                 <div class="img">
-                    <img src="" class="img " alt="">
+                    <img :src="data&&data.ispic?data&&data.imageurl:data&&data.isvideo?data&&data.imageurl:''" class="img " alt="">
-                    <img src="" class="s-img" alt="" v-if="false">
+                    <div class="s-img dis-f jus-x al-item" v-if="data&&data.isvideo">
+                        <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
+                    </div>
+                    
                 </div>
             </div>
             <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath==='/personHousing'" alt="">
             <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath==='/intermediaryHousing'" class="tab-img" alt="">
         </div>
         <div class="btm-box dis-f al-item">
-            <img src="" class="user-img" alt="">
+            <img :src="data&&data.avatar" class="user-img" alt="">
-            <span class="user-name">123</span>
+            <span class="user-name">{{ data&&data.author }}</span>
-            <div class="btn">456456</div>
+            <div class="btn" v-if="data&&data.isintermediary !== 1&&!data.intermediary_text">{{ listData&&listData.data&&listData.data.intermediary[data&&data.intermediary] }}</div>
-            <img src="../../assets/homeImage/intermediaryTabImg.png" class="intermediary-tab-img" alt="">
+            <div class="btn" v-if="data&&data.isintermediary !== 1&&data.intermediary_text">{{ data&&data.intermediary_text }}</div>
+            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data&&data.isintermediary == 1" class="intermediary-tab-img" alt="">
         </div>
     </div>
 </template>
   
 <script setup>
-import { ref } from "vue";
+import { ref ,defineProps,reactive} from "vue";
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router';
+import store from '../../store/index';
+let props = defineProps({
+    item:{
+        type:Object
+    }
+})
+let data={}
+data= props.item
 
 //监听路由
 const route = useRoute()
 let routePath = ref('')
 routePath.value = route.path
+//地区数据
+let location=reactive({data:{}})
+location.data=store.state.indexData&&store.state.indexData.config&&store.state.indexData.config.location
+
+
+//数据包
+let listData=reactive({data:{}})
+listData.data=store.state.indexData&&store.state.indexData.config
+console.log(listData.data)
+
 </script>
 <style scoped>
 img {
@@ -128,14 +163,24 @@ img {
 
     .img {
         width: 100px;
-        height: 100px;
+        /* height: 100px; */
         object-fit: cover;
         border-radius: 10px;
+        position: relative;
     }
 
     .s-img {
-        width: 110px;
+        width: 100px;
+        height:100%;
         border-radius: 10px;
+        position: absolute;
+        top:0;
+        left:0;
+        background: rgba(51, 51, 51, 0.733333333333333);
+        .img{
+            width:30px;
+            height:30px;
+        }
     }
 
     .top-box {
@@ -163,8 +208,8 @@ img {
             -webkit-box-orient: vertical;
         }
 
-        .mg-l-5 {
+        .mg-l-8 {
-            margin-left: 5px;
+            margin-left: 8px;
         }
 
         .tab-item {

src/components/pageTopBar/pageTopBar.vue

@@ -82,7 +82,6 @@ let bannerLists = reactive({data:[]})
 watchEffect(() => {
   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 === '首页') {

src/components/seachModule/seachModule.vue

@@ -74,8 +74,9 @@
                     </div>
                     <!--  -->
                     <div
-                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
+                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'" :count="counti">
                         <selectTabBox></selectTabBox>
+                        {{ counti }}
                     </div>
                 </div>
             </div>
@@ -84,13 +85,20 @@
 </template>
   
 <script setup>
-import { ref, watchEffect, reactive, beforeMount } from 'vue';
+import { ref, watchEffect, reactive, defineProps } 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";
 
+const props=defineProps({
+    count:{
+        type:Number,
+        default:0
+    }
+})
+let counti = ref(0)
 
 //搜索框
 let seachValue = ref('')
@@ -107,7 +115,6 @@ let hotArr = reactive({ data: [] })
 
 //获取区域下列数据
 let getLocationData = (data) => {
-    console.log(seachArea.data)
     for (let item in data) {
         if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
         if (item.length > 1) {
@@ -117,7 +124,6 @@ let getLocationData = (data) => {
             })
         }
     }
-    console.log(store.state)
 }
 
 //监听路由
@@ -130,9 +136,9 @@ 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(store.state.indexData.config.location
+    if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
-)
     hotArr.data = store.state.indexData.hotSearcheWords
+    counti.value=props.count
 })
 
 //获取历史搜索记录

src/components/selectTabBox/selectTabBox.vue

@@ -193,7 +193,7 @@
     </div>
     <div class="btm-list">
         <div class="dis-f al-item">
-            共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
+            共<span class="count">{{ counti }}</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
             <div class="dis-f al-item">
                 <div v-show="selectTabCheck.id&&selectTabCheck.title">{{ selectTabCheck.title }}:</div>
                 <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
@@ -210,12 +210,26 @@
 </template>
   
 <script setup>
-import { reactive, ref, getCurrentInstance } from 'vue';
+import { reactive, ref, getCurrentInstance,defineProps,watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
 
 const { proxy } = getCurrentInstance()
 
+const props=defineProps({
+    count:{
+        type:Number,
+        default:0
+    }
+})
+
+//当前数据数量
+let counti = ref(0)
+watchEffect(()=>{
+    counti.value=props.count
+    console.log(counti.value)
+})
+
 let list = [{
     title: '不限',
     id: ''
@@ -284,7 +298,6 @@ setSchoolData()
 let setSchoolObj = (obj) => {
     schoolSelectObj.id = obj.id
     schoolSelectObj.title = obj.title
-    console.log(schoolSelectObj)
 }
 
 //学校轮播组件
@@ -337,11 +350,9 @@ let watchData = (data) => {
 const route = useRoute()
 let routePath = ref('')
 routePath.value = route.path
-console.log(123,routePath.value)
 
 //底部删除按钮
 let deleteSelect = (id) => {
-    console.log(id)
     selectData.data.splice(id, 1)
 }
 

src/utils/api.js

@@ -15,5 +15,8 @@ export default{
     },
     getLocationData:(params={})=>{//地区选择数据
         return axios.get('/tenement/pc/api/home/getLocationData',params)
+    },
+    getLists:(params={})=>{//获取搜索数据  个人/中介/求房源
+        return axios.post('/tenement/pc/api/lists',params)
     }
 }

src/views/housingView/apartment.vue

@@ -40,7 +40,7 @@ import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import { ref, onMounted, watch } from 'vue';
-import Masonry from 'masonry-layout';
+// import Masonry from 'masonry-layout';
 
 const gridContainer = ref(null);
 const gridItem = ref([]);

src/views/housingView/person.vue

@@ -1,14 +1,16 @@
 <template>
     <div>
         <pageTopBar></pageTopBar>
-        <seachModule></seachModule>
+        <seachModule :count="dataList.count"></seachModule>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <div class="dis-f jus-bet">
+                    <div>
+                        <biserialItem v-for="(item,i) in dataList.data.data" :key="i" :item="item"></biserialItem>
+                    </div>
                     <div>
                         <biserialItem></biserialItem>
                     </div>
-                    <div></div>
                 </div>
             </div>
         </div>
@@ -17,10 +19,26 @@
 </template>
   
 <script setup>
+import {reactive} from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import listBtmPrompt from "../../components/public/have-questions.vue";
+import api from "../../utils/api";
+
+//获取数据
+let dataList= reactive({data:[],count:0})
+let getDataList=()=>{
+    let postData={}
+    api.getLists(postData).then(res=>{
+        console.log(res.data)
+        if(res.code===200){
+            dataList.count=res.data.count
+            dataList.data=res.data
+        }
+    })
+}
+getDataList()
 </script>
 <style scoped>
 img {