XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个人房源列表

Browse Source
This commit is contained in:
luJianJun
2023-07-17 15:00:40 +08:00
parent e7909dd4a9
commit 6fb705bde1
2 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/biserialListItem/biserialListItem.vue
View File

@@ -1,92 +1,115 @@
<template> <template>
<div class="list-item"> <div class="list-item" ref="list">
<div class="authentication-box dis-f al-item" v-if="data&&data.verified == 1"> <div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt=""> <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt=""> <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt=""> <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
</div> </div>
<div class="top-box"> <div class="top-box">
<div class="title-text"> <div class="title-text">
{{ data&&data.subject||'暂无标题' }} {{ data && data.subject || '暂无标题' }}
</div> </div>
<div class="mg-t-10 dis-f al-item jus-bet s-w-100"> <div class="mg-t-10 dis-f al-item-start jus-bet s-w-100">
<div> <div>
<div class="dis-f al-item"> <div class="dis-f al-item">
<div class="tab-item first-tab"> <div class="tab-item first-tab">
{{ data&&data.gptype||'' }} {{ data && data.gptype || '' }}
</div> </div>
<div class="tab-item mg-l-8"> <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.type[data && data.type]">
{{ listData&&listData.data&&listData.data.type[data&&data.type]||'' }} {{ listData && listData.data && listData.data.type[data && data.type] || '' }}
</div> </div>
<div class="tab-item mg-l-8" v-if="data&&data.elevator!==-1"> <div class="tab-item mg-l-8" v-if="data && data.elevator !== -1">
{{ listData&&listData.data&&listData.data.elevator[data&&data.elevator]||'' }} {{ listData && listData.data && listData.data.elevator[data && data.elevator] || '' }}
</div> </div>
<div class="tab-item mg-l-8" v-if="data&&data.sunshinearea!==-1"> <div class="tab-item mg-l-8" v-if="data && data.sunshinearea !== -1">
{{ listData&&listData.data&&listData.data.sunshinearea[data&&data.sunshinearea]||'' }} {{ listData && listData.data && listData.data.sunshinearea[data && data.sunshinearea] || '' }}
</div> </div>
<div class="tab-item mg-l-8"> <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.gender]">
{{ listData&&listData.data&&listData.data.gender[data&&data.gender]||'' }} {{ listData && listData.data && listData.data.gender[data && data.gender] || '' }}
</div> </div>
</div> </div>
<div class="address-text dis-f al-item"> <div class="address-text dis-f al-item">
<img src="../../assets/homeImage/addMarker.png" class="img" alt=""> <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<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] }`:'' 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> }}</span>
</div> </div>
<div class="price-text dis-f" style="align-items: end;"> <div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span> <span class="unit">HK$</span>
<span class="price">{{ data&&data.rent }}</span> <span class="price">{{ data && data.rent }}</span>
<span>/月</span> <span>/月</span>
<span class="time" v-show="data&&data.rentalduration!=0">[ 租期{{ data&&data.rentalduration }}{{ data&&data.rentalperiod }} ]</span> <span class="time" v-show="data && data.rentalduration != 0">[ 租期{{ data && data.rentalduration }}{{
data && data.rentalperiod }} ]</span>
</div> </div>
</div> </div>
<div class="img"> <div class="img">
<img :src="data&&data.ispic?data&&data.imageurl:data&&data.isvideo?data&&data.imageurl:''" class="img " alt=""> <div>
<div class="s-img dis-f jus-x al-item" v-if="data&&data.isvideo"> <img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt=""> @load="loadFinish" class="img " alt="">
<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>
</div> </div>
</div> </div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath==='/personHousing'" alt=""> <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=""> <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
</div> </div>
<div class="btm-box dis-f al-item"> <div class="btm-box dis-f al-item">
<img :src="data&&data.avatar" class="user-img" alt=""> <img :src="data && data.avatar" class="user-img" alt="">
<span class="user-name">{{ data&&data.author }}</span> <span class="user-name">{{ data && data.author }}</span>
<div class="btn" v-if="data&&data.isintermediary !== 1&&!data.intermediary_text">{{ listData&&listData.data&&listData.data.intermediary[data&&data.intermediary] }}</div> <div class="btn" v-if="data && data.isintermediary !== 1 && !data.intermediary_text">{{
<div class="btn" v-if="data&&data.isintermediary !== 1&&data.intermediary_text">{{ data&&data.intermediary_text }}</div> listData && listData.data && listData.data.intermediary[data && data.intermediary] }}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data&&data.isintermediary == 1" 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>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref ,defineProps,reactive} from "vue"; import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index'; import store from '../../store/index';
let props = defineProps({ let props = defineProps({
item:{ item: {
type:Object type: Object
},
imgLoad: {
type: Function
},
listId:{
type:[String,Number]
} }
}) })
let data={} let data = {}
data= props.item data = props.item
let listId=props.listId
let imgRef = null
let loadFinish=()=>{
let height=imgRef.ctx.$refs.list.offsetHeight
props.imgLoad(data.id,listId,height)
}
//监听路由 //监听路由
const route = useRoute() const route = useRoute()
let routePath = ref('') let routePath = ref('')
routePath.value = route.path routePath.value = route.path
//地区数据 //地区数据
let location=reactive({data:{}}) let location = reactive({ data: {} })
location.data=store.state.indexData&&store.state.indexData.config&&store.state.indexData.config.location location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
//数据包 //数据包
let listData=reactive({data:{}}) let listData = reactive({ data: {} })
listData.data=store.state.indexData&&store.state.indexData.config listData.data = store.state.indexData && store.state.indexData.config
console.log(listData.data)
onMounted(()=>{
imgRef = getCurrentInstance()
})
</script> </script>
<style scoped> <style scoped>
@@ -105,6 +128,9 @@ img {
.jus-bet { .jus-bet {
justify-content: space-between; justify-content: space-between;
} }
.al-item-start{
align-items: flex-start;
}
.al-item { .al-item {
align-items: center; align-items: center;
@@ -156,7 +182,7 @@ img {
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
position: relative; position: relative;
margin-bottom:20px; margin-bottom: 20px;
.mg-t-10 { .mg-t-10 {
margin-top: 10px; margin-top: 10px;
@@ -164,7 +190,6 @@ img {
.img { .img {
width: 100px; width: 100px;
/* height: 100px; */
object-fit: cover; object-fit: cover;
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
@@ -172,15 +197,16 @@ img {
.s-img { .s-img {
width: 100px; width: 100px;
height:100%; height: 100%;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
background: rgba(51, 51, 51, 0.733333333333333); background: rgba(51, 51, 51, 0.733333333333333);
.img{
width:30px; .img {
height:30px; width: 30px;
height: 30px;
} }
} }
@@ -203,10 +229,6 @@ img {
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
text-align: left; text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.mg-l-8 { .mg-l-8 {
@@ -259,7 +281,7 @@ img {
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #7F7F7F; color: #7F7F7F;
margin-left:15px; margin-left: 15px;
} }
.price { .price {
@@ -288,8 +310,8 @@ img {
padding: 20px; padding: 20px;
border-top: 1px dashed #d7d7d7; border-top: 1px dashed #d7d7d7;
.intermediary-tab-img{ .intermediary-tab-img {
width:85px; width: 85px;
height: 20px; height: 20px;
margin-left: 15px; margin-left: 15px;
} }
@@ -330,8 +352,7 @@ img {
text-align: center; text-align: center;
} }
} }
} }</style>
</style>

49
src/views/housingView/person.vue
View File

@@ -5,11 +5,11 @@
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet"> <div class="dis-f jus-bet">
<div> <div ref="list">
<biserialItem v-for="(item,i) in dataList.data.data" :key="i" :item="item"></biserialItem> <biserialItem v-for="(item,i) in pageList[1]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="1"></biserialItem>
</div> </div>
<div> <div>
<biserialItem></biserialItem> <biserialItem v-for="(item,i) in pageList[2]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="2"></biserialItem>
</div> </div>
</div> </div>
</div> </div>
@@ -19,26 +19,61 @@
</template> </template>
<script setup> <script setup>
import {reactive} from 'vue' import {reactive,onMounted,ref} from 'vue'
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue'; import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue"; import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue' import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue"; import listBtmPrompt from "../../components/public/have-questions.vue";
import api from "../../utils/api"; import api from "../../utils/api";
//获取数据 //获取数据
let pages=ref(1)
let dataList= reactive({data:[],count:0}) let dataList= reactive({data:[],count:0})
let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
let getDataList=()=>{ let getDataList=()=>{
let postData={} let postData={
page:pages.value
}
api.getLists(postData).then(res=>{ api.getLists(postData).then(res=>{
console.log(res.data) console.log(res.data)
if(res.code===200){ if(res.code===200){
dataList.count=res.data.count dataList.count=res.data.count
dataList.data=res.data dataList.data=res.data
console.log(dataList.data)
pageList[1].push(dataList.data.data[0])
pageList[2].push(dataList.data.data[1])
} }
}) })
} }
getDataList()
//添加数据
let addListData=()=>{
let num=null
if(pageList.tab>=19)return
++pageList.tab
console.log(pageList.height1,pageList.height2)
if(pageList.height1>pageList.height2){
num=2
}else{
num=1
}
pageList[num].push(dataList.data.data[pageList.tab])
}
//监听图片加载
let watchImgLoad=(id,listId,height)=>{
console.log(listId,height)
pageList[`height${listId}`]+=height
// console.log(pageList)
addListData()
}
//listImg
onMounted(()=>{
getDataList()
})
</script> </script>
<style scoped> <style scoped>
img { img {