500 lines
17 KiB
Vue
500 lines
17 KiB
Vue
<template>
|
|
<div class="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="">
|
|
</div>
|
|
<div class="top-box">
|
|
<div class="title-text">
|
|
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
|
|
style="float:left;margin:3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
|
|
{{ data && data.data && data.data.subject || '暂无标题' }}
|
|
</div>
|
|
<div class="mg-t-20 dis-f al-item-start jus-bet s-w-100">
|
|
<div>
|
|
<div class="dis-f al-item">
|
|
<div class="tab-item first-tab">
|
|
{{ data && data.data && data.data.gptype || '' }}
|
|
</div>
|
|
<div class="tab-item mg-l-8"
|
|
v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
|
|
{{ 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">
|
|
{{ 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">
|
|
{{ 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">
|
|
{{
|
|
listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
|
|
''
|
|
}}
|
|
</div>
|
|
<div class="tab-item mg-l-8"
|
|
v-if="listData.data && listData.data.rentalduration && data && data.data.rentalduration && pageType == 1&&data.data.verified !== 1">
|
|
{{ data.data.rentalduration
|
|
=== '0' ? '租期不限' :
|
|
listData.data.rentalduration[data.data && data.data.rentalduration] || ''
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="address-text dis-f al-item"
|
|
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
|
|
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
|
<span>{{
|
|
location && location.data && location.data[1] ? `${location && location.data &&
|
|
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
|
|
${location &&
|
|
location.data[data && data.data && data.data.location]}` : ''
|
|
}}</span>
|
|
</div>
|
|
<div class="dis-f" style="flex-wrap: wrap;"
|
|
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
|
|
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
|
|
v-for="(item, i) in data.data.location" :key="i">
|
|
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
|
<span>{{
|
|
location && location.data && location.data[1] ? `${location && location.data &&
|
|
location.data[item.substring(0,
|
|
1)]} >
|
|
${item.length === 1 ? '不限' : location &&
|
|
location.data[item]}` : ''
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="price-text dis-f" style="align-items: end;">
|
|
<div class="unit">HK$</div>
|
|
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
|
|
&& data.data.rent }}</div>
|
|
<div 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] }}</div>
|
|
<span>/{{ data && data.data && data.data.rentalperiod }}</span>
|
|
<span class="time"
|
|
v-show="data && data.data && data.data.rentalduration != 0 && (pageType == 2 || (pageType == 1 && data.data.verified == 1))">[
|
|
租期{{
|
|
listData.data.rentalduration[data.data && data.data.rentalduration]
|
|
}}]</span>
|
|
</div>
|
|
</div>
|
|
<!-- 'img-150':routePath==='/detail' -->
|
|
<div class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }">
|
|
<div class="dis-f">
|
|
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
|
|
@load="loadFinish" @error="loadFinish" class="img "
|
|
:class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }"
|
|
alt=""
|
|
v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false">
|
|
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
|
|
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
|
|
</div>
|
|
</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="">
|
|
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
|
|
alt="">
|
|
</div>
|
|
<div class="btm-line"></div>
|
|
<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 class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{
|
|
listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender]
|
|
}}</div>
|
|
<img src="../../assets/homeImage/intermediaryTabImg.png"
|
|
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
|
|
</div>
|
|
<!-- <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
|
|
v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import store from '../../store/index';
|
|
let props = defineProps({
|
|
item: {
|
|
type: Object
|
|
},
|
|
imgLoad: {
|
|
type: Function,
|
|
default: function () {
|
|
return () => { }
|
|
}
|
|
},
|
|
listId: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
detailShow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
let data = reactive({ data: {} })
|
|
//显示样式
|
|
let detailShow = props.detailShow
|
|
watchEffect(() => {
|
|
data.data = props.item
|
|
})
|
|
|
|
|
|
let listId = props.listId
|
|
let imgRef = null
|
|
let loadFinish = () => {
|
|
// let height = imgRef.ctx.$refs && imgRef.ctx.$refs.list && imgRef.ctx.$refs.list.offsetHeight
|
|
// props.imgLoad(data.id, listId, height)
|
|
}
|
|
|
|
//监听路由
|
|
const route = useRouter()
|
|
let routePath = ref('')
|
|
routePath.value = route.currentRoute.value.meta.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 || {}
|
|
|
|
let pageType = ref('')
|
|
|
|
//跳转
|
|
let router = useRouter()
|
|
let watchInfo = () => {
|
|
let seachData = router.currentRoute.value.query
|
|
if (pageType.value === 4) {
|
|
for (let key in data) {
|
|
store.state.seachSelect['seachPage'][key] = seachData[key]
|
|
}
|
|
}
|
|
// console.log(document.location.origin)
|
|
window.open(`${document.location.origin}/detail?id=${data.data.uniqid}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
imgRef = getCurrentInstance()
|
|
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
|
|
})
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.al-item-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.body-maxWidth {
|
|
width: 1200px;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.intermediary-tab-img {
|
|
width: 85px;
|
|
height: 20px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.authentication-box {
|
|
width: 100%;
|
|
height: 30px;
|
|
|
|
.bg {
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.logo {
|
|
width: 18px;
|
|
height: 18px;
|
|
position: absolute;
|
|
left: 15px;
|
|
}
|
|
|
|
.text-img {
|
|
width: 81px;
|
|
height: 81px;
|
|
position: absolute;
|
|
left: 35px;
|
|
}
|
|
}
|
|
|
|
.item:hover {
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.item {
|
|
width: 590px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: none;
|
|
border-radius: 16px;
|
|
-moz-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);
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
transition: all linear 0.2s;
|
|
|
|
.detail-tab {
|
|
width: 32px;
|
|
height: 32px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 66;
|
|
}
|
|
|
|
.mg-t-20 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.img-150 {
|
|
width: 150px !important;
|
|
}
|
|
|
|
.img {
|
|
width: 100px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.img-100 {
|
|
height: 100px;
|
|
width: auto;
|
|
}
|
|
|
|
.s-img {
|
|
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 {
|
|
padding: 20px;
|
|
|
|
.tab-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 8;
|
|
}
|
|
|
|
.title-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.mg-l-8 {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 2px 5px;
|
|
background: inherit;
|
|
background-color: rgba(242, 242, 242, 1);
|
|
border: none;
|
|
border-radius: 6px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
}
|
|
|
|
.mg-r-15 {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.address-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #555555;
|
|
margin-top: 20px;
|
|
|
|
|
|
.img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
margin-left: -3px;
|
|
}
|
|
}
|
|
|
|
.price-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #555555;
|
|
margin-top: 20px;
|
|
line-height: 17px;
|
|
|
|
.time {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
margin-left: 15px;
|
|
line-height: 19px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
color: #F95D5D;
|
|
line-height: 20px;
|
|
margin: 0 5PX;
|
|
}
|
|
|
|
.unit {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
color: #000000;
|
|
font-size: 14px;
|
|
line-height: 15px;
|
|
}
|
|
}
|
|
|
|
.first-tab {
|
|
background: rgba(51, 51, 51, 1);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.btm-line {
|
|
height: 1px;
|
|
width: 100%;
|
|
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
|
background-size: 2px 1px;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.btm-box {
|
|
padding: 20px;
|
|
|
|
.user-img {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-name {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: #555555;
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.btn {
|
|
margin-left: 10px;
|
|
padding: 0px 5px;
|
|
background: inherit;
|
|
background-color: rgba(242, 242, 242, 0);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(215, 215, 215, 1);
|
|
border-radius: 42px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #555555;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|