390 lines
13 KiB
Vue
390 lines
13 KiB
Vue
<template>
|
|
<div class="list-item" ref="list">
|
|
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
|
|
<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">
|
|
{{ data && data.data && data.data.subject || '暂无标题' }}
|
|
</div>
|
|
<div class="mg-t-10 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 && 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">
|
|
{{ 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>
|
|
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
|
|
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
|
<span v-if="!Array.isArray(data.data.location)">{{
|
|
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>
|
|
<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)]
|
|
}}>
|
|
<span v-for="(item,i) in data.data.location">
|
|
{{ location &&
|
|
location.data[item] }}
|
|
</span>
|
|
</span>
|
|
</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>/月</span>
|
|
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
|
|
data.data && data.data.rentalduration }}{{
|
|
data && data.data && data.data.rentalperiod }} ]</span>
|
|
</div>
|
|
</div>
|
|
<div class="img">
|
|
<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 " alt="">
|
|
<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-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>
|
|
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
|
|
data.data.intermediary_text
|
|
}}</div>
|
|
<img src="../../assets/homeImage/intermediaryTabImg.png"
|
|
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" 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
|
|
},
|
|
listId: {
|
|
type: [String, Number]
|
|
}
|
|
})
|
|
let data = reactive({ data: {} })
|
|
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
|
|
console.log(data.id, listId, height)
|
|
props.imgLoad(data.id, listId, height)
|
|
}
|
|
|
|
//监听路由
|
|
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
|
|
|
|
onMounted(() => {
|
|
imgRef = getCurrentInstance()
|
|
})
|
|
|
|
</script>
|
|
<style scoped>
|
|
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%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.list-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;
|
|
|
|
.mg-t-10 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.img {
|
|
width: 100px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.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: 66;
|
|
}
|
|
|
|
.title-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
text-align: left;
|
|
}
|
|
|
|
.mg-l-8 {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 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;
|
|
}
|
|
|
|
.address-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #555555;
|
|
margin-top: 15px;
|
|
|
|
.img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.price-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #555555;
|
|
margin-top: 15px;
|
|
|
|
.time {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
color: #F95D5D;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.unit {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
color: #000000;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.first-tab {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.btm-box {
|
|
padding: 20px;
|
|
border-top: 1px dashed #d7d7d7;
|
|
|
|
.intermediary-tab-img {
|
|
width: 85px;
|
|
height: 20px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.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: 3px 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>
|
|
|
|
|
|
|