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 10:45:10 +08:00
parent 5760d0890b
commit 763daf2ab0
8 changed files with 122 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 }]"
v-for="(item, i) in 5" :key="i">
{{ item }}
<div class="tab-item first-tab">
{{ data&&data.gptype||'' }}
</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="" class="s-img" alt="" v-if="false">
<img :src="data&&data.ispic?data&&data.imageurl:data&&data.isvideo?data&&data.imageurl:''" 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>
<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="">
<span class="user-name">123</span>
<div class="btn">456456</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" class="intermediary-tab-img" alt="">
<img :src="data&&data.avatar" class="user-img" alt="">
<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">{{ 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 { useRoute, useRouter } from 'vue-router'
import { ref ,defineProps,reactive} from "vue";
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 {
margin-left: 5px;
.mg-l-8 {
margin-left: 8px;
}
.tab-item {