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-25 19:32:50 +08:00
parent fff3c786a8
commit 7e95fd62f8
6 changed files with 151 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
<template>
<div class="list-item" ref="list" @click="watchInfo">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
<div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType===1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType===2" alt="">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
@@ -19,17 +21,19 @@
v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData && listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1&&data.data.elevator">
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
||
'' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1&&data.data.sunshinearea !== 0&&data.data.sunshinearea">
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
data.data.sunshinearea] || '' }}
</div>
<div class="tab-item mg-l-8"
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]&&data.data.gender">
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
{{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
''
}}
@@ -45,9 +49,9 @@
}}</span>
<span v-if="Array.isArray(data.data.location)">{{
location && location.data && location.data[data && data.data &&
data.data.location && data.data.location[0].substring(0, 1)]
data.data.location && data.data.location[0].substring(0, 1)]
}}>
<span v-for="(item,i) in data.data.location">
<span v-for="(item, i) in data.data.location">
{{ location &&
location.data[item] }}
</span>
@@ -55,8 +59,10 @@
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price" v-if="!Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent }}</span>
<span class="price" v-if="Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
<span class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&& data.data.rent }}</span>
<span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
<span>/月</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
data.data && data.data.rentalduration }}{{
@@ -79,15 +85,21 @@
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
</div>
<div class="btm-box dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
<div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
<div class="dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
{{
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
</div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{
data &&
data.data.intermediary_text
}}</div>
</div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
data.data.intermediary_text
}}</div>
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div>
@@ -103,13 +115,23 @@ let props = defineProps({
type: Object
},
imgLoad: {
type: Function
type: Function,
default: function () {
return () => { }
}
},
listId: {
type: [String, Number]
type: [String, Number],
default: ''
},
detailShow: {
type: Boolean,
default: false
}
})
let data = reactive({ data: {} })
//显示样式
let detailShow = props.detailShow
watchEffect(() => {
data.data = props.item
})
@@ -118,7 +140,7 @@ watchEffect(() => {
let listId = props.listId
let imgRef = null
let loadFinish = () => {
let height = imgRef.ctx.$refs&&imgRef.ctx.$refs.list&&imgRef.ctx.$refs.list.offsetHeight
let height = imgRef.ctx.$refs && imgRef.ctx.$refs.list && imgRef.ctx.$refs.list.offsetHeight
// console.log(data.id, listId, height)
props.imgLoad(data.id, listId, height)
}
@@ -136,19 +158,29 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config
let pageType=ref('')
//跳转
let router=useRouter()
let watchInfo = ()=>{
let router = useRouter()
let watchInfo = () => {
router.push({
path:'/detail',
query:{
id:data.data.uniqid
path: '/detail',
query: {
id: data.data.uniqid,
type:pageType.value
}
})
}
onMounted(() => {
imgRef = getCurrentInstance()
let {type}=router.currentRoute.value.query
console.log('type',type)
if(type){
pageType.value=type
}else{
pageType.value=routePath.value==='/personHousing'?1:routePath.value==='/intermediaryHousing'?2:routePath.value==='/needHousing'?3:''
}
})
</script>
@@ -187,7 +219,7 @@ img {
}
.s-w-100 {
width: 100%;
width: 100% !important;
}
.authentication-box {
@@ -226,6 +258,15 @@ img {
margin-bottom: 20px;
cursor: pointer;
.detail-tab{
width:32px;
height:32px;
position: absolute;
top:0;
right:0;
z-index:66;
}
.mg-t-10 {
margin-top: 10px;
}
@@ -394,8 +435,7 @@ img {
text-align: center;
}
}
}
</style>
}</style>

14
src/components/detail/breadcrumb.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="pos-r">
<div class="authentication-top" v-if="data['data']&&data['data'].isintermediary===1">
<div class="authentication-top" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
<div class="dis-f al-item jus-bet">
<div>
<img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
@@ -8,16 +8,22 @@
</div>
<div class="dis-f al-item">
<div class="dis-f al-item">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房产证明</span>
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
<span>
{{data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房产证明':'真实牌照'}}
</span>
</div>
<div class="dis-f al-item" style="margin-left:20px;">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房东身份证</span>
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
<span>
{{ data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房东身份证':'身份证明' }}
</span>
</div>
</div>
</div>
</div>
<div class="title-top-box pos-r" style="z-index:666;">
<div class="top-round" v-if="data['data']&&data['data'].isintermediary===1">
<div class="top-round" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
<div class="top-round-s"></div>
</div>
<div class="breadcrumb-box">

18
src/components/detail/imageWatch.vue
View File

@@ -5,11 +5,11 @@
<el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="!item.thumbnail">
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
<img :src="item&&item.url" class="img" alt="">
</div>
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
<video :src="item&&item.url" class="img"></video>
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
<source :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
</div>
</div>
</el-carousel-item>
@@ -23,14 +23,14 @@
</div>
<div class="dis-f jus-x al-item">
<div class="list-img-box dis-f al-item jus-x">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r">
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail">
<div class="icon-box dis-f jus-x al-item">
<img :src="item.image" class="icon" alt="">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
</div>
</div>
<div class="img-box-s dis-f jus-x" v-if="item.thumbnail" :class="{ 'select-box': imageTab === i }">
<img :src="item.thumbnail" alt="" class="img-s">
<div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
<img :src="item.thumbnail||item.image" alt="" class="img-s">
</div>
</div>
</div>
@@ -82,6 +82,7 @@ let next = () => {
//点击预览图
let watchSet=(num)=>{
imageTab.value=num
carousel.value.setActiveItem(num)
}
@@ -203,6 +204,9 @@ img {
margin-left: 5px;
border-radius: 8px;
cursor: pointer;
position: absolute;
top:0;
left:0;
.icon-box {
width: 60px;