289 lines
10 KiB
Vue
289 lines
10 KiB
Vue
<template>
|
|
<div class="detail-container" v-loading="loading">
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane label="基础信息" name="basic">
|
|
<el-descriptions class="margin-top" title="房源基础信息" :column="3" border>
|
|
<el-descriptions-item label="项目名称">{{ roomDetail.projectName }}</el-descriptions-item>
|
|
<el-descriptions-item label="楼宇">{{ roomDetail.buildingName }}</el-descriptions-item>
|
|
<el-descriptions-item label="楼层">{{ roomDetail.floorName }}</el-descriptions-item>
|
|
<el-descriptions-item label="房号">{{ roomDetail.roomNumber }}</el-descriptions-item>
|
|
<el-descriptions-item label="房间数字编号">{{ roomDetail.roomDigitalNumber }}</el-descriptions-item>
|
|
<el-descriptions-item label="房源管理编号">{{ roomDetail.roomManageNumber }}</el-descriptions-item>
|
|
<el-descriptions-item label="建筑面积">{{ roomDetail.buildingArea }} m²</el-descriptions-item>
|
|
<el-descriptions-item label="计租面积">{{ roomDetail.rentalArea }} m²</el-descriptions-item>
|
|
<el-descriptions-item label="计费面积">{{ roomDetail.billingArea }} m²</el-descriptions-item>
|
|
<el-descriptions-item label="套内面积">{{ roomDetail.innerArea }} m²</el-descriptions-item>
|
|
<el-descriptions-item label="虚拟房源">{{ roomDetail.isVirtual === '1' ? '是' : '否' }}</el-descriptions-item>
|
|
<el-descriptions-item label="房源交付时间">{{ roomDetail.deliveryTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="绑定业主">{{ roomDetail.ownerName }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="招商信息" name="merchant">
|
|
<el-descriptions class="margin-top" title="招商信息" :column="3" border>
|
|
<el-descriptions-item label="产权性质">
|
|
<el-tag :type="roomPropertyTypeTagType">{{ roomPropertyTypeText }}</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="租赁状态">
|
|
<el-tag :type="leaseStatusTagType">{{ leaseStatusText }}</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="房源状态">{{ roomStatusText }}</el-descriptions-item>
|
|
<el-descriptions-item label="房源类型">{{ roomTypeText }}</el-descriptions-item>
|
|
<el-descriptions-item label="房源备案号">{{ roomDetail.roomRecordNumber }}</el-descriptions-item>
|
|
<el-descriptions-item label="层高">{{ roomDetail.height }} m</el-descriptions-item>
|
|
<el-descriptions-item label="荷载值">{{ roomDetail.loadValue }}</el-descriptions-item>
|
|
<el-descriptions-item label="装修情况">{{ decorationStatusText }}</el-descriptions-item>
|
|
<el-descriptions-item label="标签">
|
|
<el-tag v-for="tag in roomDetail.tagList" :key="tag.id" size="mini" style="margin-right: 5px">
|
|
{{ tag.tagName }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="招商状态">
|
|
<el-tag :type="roomDetail.businessStatus === '1' ? 'primary' : 'info'">
|
|
{{ roomDetail.businessStatus === '1' ? '招商' : '不招商' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="可租日期">{{ roomDetail.availableDate }}</el-descriptions-item>
|
|
<el-descriptions-item label="报价">
|
|
{{ roomDetail.price }} {{ priceUnitText }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="底价">
|
|
{{ roomDetail.floorPrice }} {{ floorPriceUnitText }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="房源招商编号">{{ roomDetail.businessNumber }}</el-descriptions-item>
|
|
<el-descriptions-item label="招商条件">{{ roomDetail.businessCondition || '-' }}</el-descriptions-item>
|
|
|
|
</el-descriptions>
|
|
|
|
<div class="image-section" v-if="roomDetail.imageUrls && roomDetail.imageUrls.length > 0">
|
|
<div class="section-title">房源图片</div>
|
|
<el-carousel :interval="4000" type="card" height="200px">
|
|
<el-carousel-item v-for="(item, index) in roomDetail.imageUrls" :key="index">
|
|
<img :src="item" class="carousel-image" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="拓展信息" name="extension">
|
|
<el-descriptions class="margin-top" title="拓展信息" :column="3" border>
|
|
<el-descriptions-item label="使用率">{{ roomDetail.usageRate || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="办公格局">{{ roomDetail.officeLayout || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="窗面朝向">{{ roomDetail.windowOrientation || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="免租期">{{ roomDetail.rentFreePeriod || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="最短租期">{{ roomDetail.minLeaseTerm || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="工位数量">{{ workstationCountRange }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<div class="image-section" v-if="roomDetail.floorPlanImageUrls && roomDetail.floorPlanImageUrls.length > 0">
|
|
<div class="section-title">户型图</div>
|
|
<el-carousel :interval="4000" type="card" height="200px">
|
|
<el-carousel-item v-for="(item, index) in roomDetail.floorPlanImageUrls" :key="index">
|
|
<img :src="item" class="carousel-image" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="floor-plan-description" v-if="roomDetail.floorPlanDesc">
|
|
<div class="section-title">户型图说明</div>
|
|
<p>{{ roomDetail.floorPlanDesc }}</p>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getRoom } from '@/api/room'
|
|
|
|
export default {
|
|
name: 'DetailView',
|
|
props: {
|
|
roomId: {
|
|
type: [String, Number],
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
activeTab: 'basic',
|
|
roomDetail: {}
|
|
}
|
|
},
|
|
computed: {
|
|
roomPropertyTypeText() {
|
|
const typeMap = {
|
|
'1': '自持',
|
|
'2': '承租',
|
|
'3': '自持+承租'
|
|
}
|
|
return typeMap[this.roomDetail.propertyNature] || '-'
|
|
},
|
|
roomPropertyTypeTagType() {
|
|
const typeMap = {
|
|
'1': 'success',
|
|
'2': 'primary',
|
|
'3': 'warning'
|
|
}
|
|
return typeMap[this.roomDetail.propertyNature] || 'info'
|
|
},
|
|
leaseStatusText() {
|
|
const statusMap = {
|
|
'0': '待租',
|
|
'1': '已租',
|
|
'2': '预订'
|
|
}
|
|
return statusMap[this.roomDetail.rentalStatus] || '-'
|
|
},
|
|
leaseStatusTagType() {
|
|
const statusMap = {
|
|
'0': 'success',
|
|
'1': 'danger',
|
|
'2': 'warning'
|
|
}
|
|
return statusMap[this.roomDetail.rentalStatus] || 'info'
|
|
},
|
|
decorationStatusText() {
|
|
const statusMap = {
|
|
'1': '精装',
|
|
'2': '简装',
|
|
'3': '毛坯',
|
|
'4': '标准交付',
|
|
'5': '豪装'
|
|
}
|
|
return statusMap[this.roomDetail.decorationStatus] || '-'
|
|
},
|
|
roomStatusText() {
|
|
const statusMap = {
|
|
'1': '公开',
|
|
'2': '关闭',
|
|
'3': '私密'
|
|
}
|
|
return statusMap[this.roomDetail.roomStatus] || '-'
|
|
},
|
|
roomTypeText() {
|
|
const typeMap = {
|
|
'1': '办公',
|
|
'2': '商业',
|
|
'3': '仓储',
|
|
'4': '厂房',
|
|
'5': '多经',
|
|
'6': '公寓',
|
|
'7': '住宅',
|
|
'8': '其它'
|
|
}
|
|
return typeMap[this.roomDetail.roomType] || '-'
|
|
},
|
|
priceUnitText() {
|
|
const unitMap = {
|
|
'1': '元/㎡·天',
|
|
'2': '元/㎡·月',
|
|
'3': '元/月',
|
|
'4': '元/天',
|
|
'5': '元/年'
|
|
}
|
|
return unitMap[this.roomDetail.priceUnit] || ''
|
|
},
|
|
floorPriceUnitText() {
|
|
const unitMap = {
|
|
'1': '元/㎡·天',
|
|
'2': '元/㎡·月',
|
|
'3': '元/月',
|
|
'4': '元/天',
|
|
'5': '元/年'
|
|
}
|
|
return unitMap[this.roomDetail.floorPriceUnit] || ''
|
|
},
|
|
workstationCountRange() {
|
|
if (!this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
|
|
return '-'
|
|
}
|
|
if (this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
|
|
return this.roomDetail.workstationMin + '个'
|
|
}
|
|
if (!this.roomDetail.workstationMin && this.roomDetail.workstationMax) {
|
|
return '不超过' + this.roomDetail.workstationMax + '个'
|
|
}
|
|
return this.roomDetail.workstationMin + '~' + this.roomDetail.workstationMax + '个'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRoomDetail()
|
|
},
|
|
methods: {
|
|
getRoomDetail() {
|
|
if (!this.roomId) return
|
|
|
|
this.loading = true
|
|
getRoom(this.roomId).then(response => {
|
|
if (response.code === '0000000000000000') {
|
|
this.roomDetail = response.data
|
|
|
|
// 处理业务信息
|
|
if (response.data.businessInfo) {
|
|
Object.assign(this.roomDetail, response.data.businessInfo)
|
|
}
|
|
|
|
// 处理扩展信息
|
|
if (response.data.extendInfo) {
|
|
Object.assign(this.roomDetail, response.data.extendInfo)
|
|
}
|
|
|
|
// 处理图片
|
|
if (response.data.roomImages && Array.isArray(response.data.roomImages)) {
|
|
this.roomDetail.imageUrls = response.data.roomImages.map(item => item.imageUrl)
|
|
}
|
|
|
|
// 处理户型图
|
|
if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages)) {
|
|
this.roomDetail.floorPlanImageUrls = response.data.floorPlanImages.map(item => item.imageUrl)
|
|
}
|
|
} else {
|
|
this.$message.error(response.msg || '获取房源详情失败')
|
|
}
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail-container {
|
|
padding: 10px;
|
|
|
|
.margin-top {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin: 20px 0 15px;
|
|
padding-left: 10px;
|
|
border-left: 3px solid #409EFF;
|
|
}
|
|
|
|
.image-section {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.carousel-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.floor-plan-description {
|
|
margin-top: 20px;
|
|
|
|
p {
|
|
padding: 0 15px;
|
|
line-height: 1.6;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
</style> |