<template>
|
<div class="rent-details-container">
|
<h4>房屋详情</h4>
|
<div class="fl-f mr-t-10">
|
<el-image
|
class="house-img"
|
:preview-src-list="[]"
|
:src="detaild.url"
|
fit="cover"
|
>
|
<div slot="error" class="image-slot">
|
<img src="../../../assets/image/default.png" />
|
</div>
|
</el-image>
|
|
<div class="left-list">
|
<div class="title">{{ detaild.title }}</div>
|
<div class="monery">{{ detaild.monthlyRentMoney }}元/月</div>
|
<div class="list">
|
<span>
|
<p>{{ detaild.brn }}室{{ detaild.lrn }}厅{{ detaild.wcn }}卫</p>
|
<p>房型</p>
|
</span>
|
<span>
|
<p>{{ detaild.constructArea ? detaild.constructArea : "无" }}</p>
|
<p>面积</p>
|
</span>
|
<span>
|
<p>{{ detaild.floor }}/{{ detaild.totalFloor }}</p>
|
<p>楼层</p>
|
</span>
|
<span>
|
<p v-if="detaild.decoration == 1">毛坯房</p>
|
<p v-if="detaild.decoration == 2">简装</p>
|
<p v-if="detaild.decoration == 3">精装修</p>
|
<p>装修</p>
|
</span>
|
<span>
|
<p>
|
{{
|
detaild.orientation ? orient[detaild.orientation].text : "无"
|
}}
|
</p>
|
<p>朝向</p>
|
</span>
|
</div>
|
<div class="tags">
|
<span v-for="(text, index) in tag" :key="index">{{ text }}</span>
|
</div>
|
<div class="address">{{ detaild.address }}</div>
|
</div>
|
</div>
|
|
<div class="houseImage custom-padding">
|
<h4>房屋图片</h4>
|
<div class="imgList">
|
<span v-for="(img, index) in detaild.housePictures" :key="index">
|
<el-image
|
style="width: 150px; height: 100px"
|
:src="img"
|
:preview-src-list="detaild.housePictures"
|
>
|
</el-image>
|
</span>
|
</div>
|
</div>
|
|
<div class="custom-padding">
|
<h4>房屋信息</h4>
|
<div class="details-lie">
|
<p>
|
<span>看房时间:</span
|
>{{ detaild.seeHourseDate == 1 ? "随时看房" : "提前预约" }}
|
</p>
|
<p><span>入住要求:</span>{{ detaild.checkInRequirement }}</p>
|
<p><span>房屋介绍:</span>{{ detaild.hourseDescription }}</p>
|
<p>
|
<span>房内物品:</span>
|
<span v-for="(house, index) in hourseItem" :key="index" class="ml"
|
>{{ house.name }}*{{ house.number }}</span
|
>
|
</p>
|
<p><span>保证金:</span>￥{{ detaild.depositMoney }}</p>
|
<p><span>看房电话：</span>{{ detaild.seeHourseTelephone }}</p>
|
<p><span>服务费：</span>￥{{ detaild.serverCharge }}</p>
|
<p><span>定金：</span>￥{{ detaild.dingMoney }}/7天</p>
|
</div>
|
</div>
|
|
<div class="custom-padding">
|
<h4>认证资料</h4>
|
<div class="details-lie">
|
<p><span>房主姓名:</span>{{ detaild.hourseOwnerName }}</p>
|
<p><span>房主电话:</span>{{ detaild.hoursePhone }}</p>
|
<p><span>身份证号:</span>{{ detaild.hourseIdCard }}</p>
|
<div>
|
<span class="fl">产权证明:</span>
|
<span
|
class="imgDown"
|
v-for="(p, index) in detaild.propertyPictures"
|
:key="index"
|
>
|
<el-image
|
style="width: 120px; height: 120px"
|
:src="p"
|
:preview-src-list="detaild.propertyPictures"
|
>
|
</el-image>
|
<p><a :href="p" target="blank" download>下载图片</a></p>
|
</span>
|
<div style="clear: both"></div>
|
</div>
|
<div>
|
<span class="fl">证件照片:</span>
|
<span
|
class="imgDown"
|
v-for="(c, index) in detaild.credentialsPictures"
|
:key="index"
|
>
|
<el-image
|
style="width: 120px; height: 120px"
|
:src="c"
|
:preview-src-list="detaild.credentialsPictures"
|
>
|
</el-image>
|
<p><a :href="c" target="blank" download>下载图片</a></p>
|
</span>
|
<div style="clear: both"></div>
|
</div>
|
<!-- <p class="mt">
|
<span>房屋委托代理合同：</span
|
><span
|
class="down"
|
@click="downCompoy(detaild.houseAgencyContract)"
|
>{{ detaild.houseAgencyContract ? "下载合同" : "暂无" }}</span
|
>
|
</p> -->
|
</div>
|
</div>
|
<div class="footer-btn">
|
<el-button type="primary" @click="$router.go(-1)">关闭</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
id: "",
|
detaild: {},
|
orient: [
|
{
|
text: "无",
|
},
|
{
|
text: "朝东",
|
},
|
{
|
text: "朝南",
|
},
|
{
|
text: "朝西",
|
},
|
{
|
text: "朝北",
|
},
|
{
|
text: "东南",
|
},
|
{
|
text: "东北",
|
},
|
{
|
text: "西南",
|
},
|
{
|
text: "西北",
|
},
|
// {
|
// text:'南北'
|
// },
|
// {
|
// text:'东西'
|
// },
|
],
|
tag: [],
|
hourseItem: [],
|
};
|
},
|
mounted() {
|
this.id = this.$route.query.id;
|
this.getDetails();
|
},
|
methods: {
|
getDetails() {
|
this.$api.get("renting/houses/get", { registerId: this.id }, (e) => {
|
this.detaild = e;
|
this.tag = e.label.split(",");
|
this.hourseItem = JSON.parse(e.hourseItem);
|
});
|
},
|
downCompoy(url) {
|
if (url) {
|
let a = document.createElement("a");
|
a.href = url;
|
a.setAttribute("download", "houseAgencyContract-download");
|
a.click();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.image-slot {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.mt {
|
padding-top: 25px !important;
|
}
|
.ml {
|
margin-right: 5px;
|
}
|
.fl {
|
float: left;
|
padding-left: 10px;
|
color: #333;
|
font-size: 15px;
|
}
|
.list {
|
height: 50px;
|
width: 100%;
|
padding: 8px 0;
|
span {
|
float: left;
|
margin-right: 30px;
|
text-align: center;
|
}
|
}
|
.rent-details-container {
|
padding-top: 20px;
|
overflow: auto;
|
}
|
.house-img {
|
width: 200px;
|
height: 200px;
|
}
|
.left-list {
|
padding-left: 20px;
|
line-height: 25px;
|
.title {
|
font-size: 16px;
|
padding-top: 10px;
|
}
|
.monery {
|
font-size: 18px;
|
color: #f56c6c;
|
font-weight: 500;
|
}
|
.tags {
|
span {
|
padding: 3px 2px;
|
border: 1px #409eff solid;
|
color: #409eff;
|
font-size: 14px;
|
margin-right: 5px;
|
}
|
}
|
.address {
|
padding-top: 10px;
|
}
|
}
|
.custom-padding {
|
padding-top: 25px;
|
}
|
.houseImage {
|
.imgList {
|
width: 100%;
|
overflow-x: auto;
|
height: 110 px;
|
padding-top: 20px;
|
span {
|
width: 150px;
|
height: 100px;
|
display: inline-block;
|
margin-right: 10px;
|
float: left;
|
overflow: hidden;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.details-lie {
|
padding-top: 20px;
|
p {
|
padding: 8px;
|
span {
|
font-size: 15px;
|
color: #333;
|
}
|
}
|
}
|
.footer-btn {
|
padding: 25px 0;
|
}
|
.imgDown {
|
width: 120px;
|
height: 130px;
|
display: block;
|
text-align: center;
|
margin: 10px;
|
float: left;
|
p {
|
font-size: 13px;
|
color: #409eff;
|
cursor: pointer;
|
}
|
img {
|
width: 120px;
|
height: 95px;
|
}
|
}
|
.down {
|
font-size: 13px;
|
color: #409eff !important;
|
cursor: pointer;
|
}
|
</style>
|
