|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="detial-container"> |
|
|
|
|
|
|
|
|
<div class="detial-container" v-loading="pageLoading" element-loading-text="数据加载中..."> |
|
|
<div class="ditial-banner"> |
|
|
<div class="ditial-banner"> |
|
|
<div class="main-img">123</div> |
|
|
|
|
|
|
|
|
<div class="main-img"> |
|
|
|
|
|
<img :src="formatImg(mainImg)" alt="main-img" /> |
|
|
|
|
|
</div> |
|
|
<div class="main-item"> |
|
|
<div class="main-item"> |
|
|
<div |
|
|
|
|
|
class="main-title" |
|
|
|
|
|
:title="'写字楼出租写字楼出租写字楼出租写字楼出租写字楼出租'" |
|
|
|
|
|
>写字楼出租写字楼出租写字楼出租写字楼出租写字楼出租</div> |
|
|
|
|
|
|
|
|
<div class="main-title" :title="propertyDetail.name">{{ propertyDetail.name }}</div> |
|
|
<div class="main-price"> |
|
|
<div class="main-price"> |
|
|
<span class="price-label">价格：</span> |
|
|
<span class="price-label">价格：</span> |
|
|
<span class="price-value">¥80.00元</span> |
|
|
|
|
|
|
|
|
<span class="price-value">{{ getShowPrice() }}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mian-detail" :title="mainDetailText"> |
|
|
|
|
|
|
|
|
<div class="mian-detail" :title="propertyDetail.introduce"> |
|
|
<span class="mian-detail-span">详情：</span> |
|
|
<span class="mian-detail-span">详情：</span> |
|
|
{{ mainDetailText }} |
|
|
|
|
|
|
|
|
{{ propertyDetail.introduce }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="mian-detail listing-address" :title="listingAddress"> |
|
|
|
|
|
|
|
|
<div class="mian-detail listing-address" :title="propertyDetail.address"> |
|
|
<span class="mian-detail-span">房源地址：</span> |
|
|
<span class="mian-detail-span">房源地址：</span> |
|
|
{{ listingAddress }} |
|
|
|
|
|
|
|
|
{{ propertyDetail.address }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="main-btn"> |
|
|
<div class="main-btn"> |
|
|
<img |
|
|
<img |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="block-title">可选房源</div> |
|
|
<div class="block-title">可选房源</div> |
|
|
<el-table class="block-table" :data="listingList"> |
|
|
|
|
|
|
|
|
<el-table class="block-table" :data="propertyDetail.housingInformationList"> |
|
|
<el-table-column |
|
|
<el-table-column |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:align="'center'" |
|
|
:align="'center'" |
|
|
|
|
|
|
|
|
:key="inx" |
|
|
:key="inx" |
|
|
> |
|
|
> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<div v-if="item.prop == 'img'"> |
|
|
|
|
|
|
|
|
<div v-if="item.prop == 'housingImg'"> |
|
|
<span class="img-icon"> |
|
|
<span class="img-icon"> |
|
|
<el-image |
|
|
<el-image |
|
|
v-if="checkFile(scope.row.img, 'image')" |
|
|
|
|
|
:src="scope.row.img" |
|
|
|
|
|
:preview-src-list="[scope.row.img]" |
|
|
|
|
|
|
|
|
v-if="checkFile(scope.row.housingImg, 'image')" |
|
|
|
|
|
:src="scope.row.housingImg" |
|
|
|
|
|
:preview-src-list="[scope.row.housingImg]" |
|
|
></el-image> |
|
|
></el-image> |
|
|
<video |
|
|
<video |
|
|
v-if="checkFile(scope.row.img, 'video')" |
|
|
|
|
|
:src="scope.row.img" |
|
|
|
|
|
@click="playVideo(scope.row.img)" |
|
|
|
|
|
|
|
|
v-if="checkFile(scope.row.housingImg, 'video')" |
|
|
|
|
|
:src="scope.row.housingImg" |
|
|
|
|
|
@click="playVideo(scope.row.housingImg)" |
|
|
></video> |
|
|
></video> |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else>{{ scope.row[item.prop] }}</div> |
|
|
|
|
|
|
|
|
<div v-else>{{ scope.row[item.prop] | formatNull}}</div> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
|
|
|
|
|
|
:key="inx" |
|
|
:key="inx" |
|
|
> |
|
|
> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
{{ scope.row[item.prop] }} |
|
|
|
|
|
|
|
|
{{ propertyDetail[item.prop] | formatNull}} |
|
|
|
|
|
<span v-if="scope.row.test"></span> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
|
|
|
|
|
|
<span class="title">房源优势</span> |
|
|
<span class="title">房源优势</span> |
|
|
<span |
|
|
<span |
|
|
class="item-span" |
|
|
class="item-span" |
|
|
v-for="(item,inx) of housingAdvantage" |
|
|
|
|
|
|
|
|
v-for="(item,inx) of propertyDetail.advantageList" |
|
|
:key="inx" |
|
|
:key="inx" |
|
|
:style="item.style" |
|
|
|
|
|
>{{ item.label }}</span> |
|
|
|
|
|
|
|
|
:style="getListingColor(item)" |
|
|
|
|
|
>{{ item }}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="housing-advantage facilities"> |
|
|
<div class="housing-advantage facilities"> |
|
|
<span class="title">房源设施</span> |
|
|
<span class="title">房源设施</span> |
|
|
<span |
|
|
<span |
|
|
class="item-facilities" |
|
|
class="item-facilities" |
|
|
v-for="(item,inx) of listingFacilities" |
|
|
|
|
|
|
|
|
v-for="(item,inx) of propertyDetail.facilityList" |
|
|
:key="inx" |
|
|
:key="inx" |
|
|
> |
|
|
> |
|
|
<img |
|
|
<img |
|
|
:src="require('@assets/image/propety/icon' + item.type + '.png')" |
|
|
|
|
|
|
|
|
:src="require('@assets/image/propety/icon' + getListingFacilities(item) + '.png')" |
|
|
alt="icon" |
|
|
alt="icon" |
|
|
:class="['facilities-' + item.type]" |
|
|
|
|
|
|
|
|
:class="['facilities-' + getListingFacilities(item)]" |
|
|
/> |
|
|
/> |
|
|
{{ item.label }} |
|
|
|
|
|
|
|
|
{{ item }} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="housing-detail"> |
|
|
<div class="housing-detail"> |
|
|
<div class="dt">大图</div> |
|
|
|
|
|
|
|
|
<div v-html="parseMarkdown(propertyDetail.details)"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
import Nav from "@components/Header.vue"; |
|
|
import Nav from "@components/Header.vue"; |
|
|
import Footer from "@components/Footer.vue"; |
|
|
import Footer from "@components/Footer.vue"; |
|
|
import "./PropertyDetail.scss"; |
|
|
import "./PropertyDetail.scss"; |
|
|
import ret from "bluebird/js/release/util"; |
|
|
|
|
|
|
|
|
import { getByIdPropertyManage } from "@api/index.js"; |
|
|
|
|
|
import { parseMarkdown, formatImg } from "@/utils/common"; |
|
|
|
|
|
const ListingFacilities = { |
|
|
|
|
|
精装修: 1, |
|
|
|
|
|
有线网络: 2, |
|
|
|
|
|
wifi网络: 3, |
|
|
|
|
|
饮水: 4, |
|
|
|
|
|
空调: 5, |
|
|
|
|
|
"24小时办公": 6, |
|
|
|
|
|
"打印/复印": 7, |
|
|
|
|
|
接发传真: 8, |
|
|
|
|
|
}; |
|
|
export default { |
|
|
export default { |
|
|
components: { Nav, Footer }, |
|
|
components: { Nav, Footer }, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
// 主体详情 |
|
|
|
|
|
mainDetailText: `根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况，如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件，以及主管税务机关要求报送的其他有关资料。有效身份证件，包括纳税人的身份证、护照、回乡证、军人身份证件等。`, |
|
|
|
|
|
// 房源地址 |
|
|
|
|
|
listingAddress: "上海市徐汇区吴中路金辉大厦8楼", |
|
|
|
|
|
|
|
|
pageLoading: false, |
|
|
|
|
|
propertyDetail: {}, |
|
|
|
|
|
// 主图 |
|
|
|
|
|
mainImg: "", |
|
|
// 可选房源 |
|
|
// 可选房源 |
|
|
listingColum: [ |
|
|
listingColum: [ |
|
|
{ |
|
|
{ |
|
|
prop: "img", |
|
|
|
|
|
|
|
|
prop: "housingImg", |
|
|
label: "照片", |
|
|
label: "照片", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v1", |
|
|
|
|
|
|
|
|
prop: "type", |
|
|
label: "租售类型", |
|
|
label: "租售类型", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v2", |
|
|
|
|
|
|
|
|
prop: "housingArea", |
|
|
label: "房源面积", |
|
|
label: "房源面积", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v3", |
|
|
|
|
|
|
|
|
prop: "maxCapacity", |
|
|
label: "最大容纳人数", |
|
|
label: "最大容纳人数", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v4", |
|
|
|
|
|
|
|
|
prop: "decoration", |
|
|
label: "装修状况", |
|
|
label: "装修状况", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v5", |
|
|
|
|
|
|
|
|
prop: "canRegister", |
|
|
label: "可注册", |
|
|
label: "可注册", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v6", |
|
|
|
|
|
|
|
|
prop: "showPrice", |
|
|
label: "单价", |
|
|
label: "单价", |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
|
|
|
|
|
|
// 服务详情 |
|
|
// 服务详情 |
|
|
serverDetailColum: [ |
|
|
serverDetailColum: [ |
|
|
{ |
|
|
{ |
|
|
prop: "v1", |
|
|
|
|
|
|
|
|
prop: "type", |
|
|
label: "房源类型", |
|
|
label: "房源类型", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v2", |
|
|
|
|
|
|
|
|
prop: "shortestRent", |
|
|
label: "最短起租", |
|
|
label: "最短起租", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v3", |
|
|
|
|
|
|
|
|
prop: "payment", |
|
|
label: "支付方式", |
|
|
label: "支付方式", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v4", |
|
|
|
|
|
|
|
|
prop: "parkingFee", |
|
|
label: "停车费", |
|
|
label: "停车费", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v5", |
|
|
|
|
|
|
|
|
prop: "propertyFee", |
|
|
label: "物业费", |
|
|
label: "物业费", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
prop: "v6", |
|
|
|
|
|
|
|
|
prop: "count", |
|
|
label: "可选房源", |
|
|
label: "可选房源", |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
serverDetailList: [ |
|
|
|
|
|
{ |
|
|
|
|
|
v1: "暂无数据", |
|
|
|
|
|
v2: "1年起租", |
|
|
|
|
|
v3: "暂无数据", |
|
|
|
|
|
v4: "--", |
|
|
|
|
|
v5: "20元/㎡/月", |
|
|
|
|
|
v6: "2", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
v1: "暂无数据", |
|
|
|
|
|
v2: "1年起租", |
|
|
|
|
|
v3: "暂无数据", |
|
|
|
|
|
v4: "--", |
|
|
|
|
|
v5: "20元/㎡/月", |
|
|
|
|
|
v6: "2", |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
// 房源优势 |
|
|
|
|
|
housingAdvantage: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: "精装修", |
|
|
|
|
|
style: { |
|
|
|
|
|
"background-image": |
|
|
|
|
|
"linear-gradient(135deg, #01d8ba 0%, #0086e7 100%)", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "面积大", |
|
|
|
|
|
style: { |
|
|
|
|
|
"background-image": |
|
|
|
|
|
"linear-gradient(135deg, #afd801 0%, #00b4e7 100%)", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "享受税收优惠", |
|
|
|
|
|
style: { |
|
|
|
|
|
"background-image": |
|
|
|
|
|
"linear-gradient(135deg, #8d6dff 0%, #5f24eb 100%)", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
// 房源设施 |
|
|
|
|
|
listingFacilities: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: "精装修", |
|
|
|
|
|
type: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "有线网络", |
|
|
|
|
|
type: 2, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "Wi-Fi网络", |
|
|
|
|
|
type: 3, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "饮水", |
|
|
|
|
|
type: 4, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "空调", |
|
|
|
|
|
type: 5, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "24小时办公", |
|
|
|
|
|
type: 6, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "打印/复印", |
|
|
|
|
|
type: 7, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "接发传真", |
|
|
|
|
|
type: 8, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
serverDetailList: [{}], |
|
|
|
|
|
// // 房源优势 |
|
|
|
|
|
// housingAdvantage: [ |
|
|
|
|
|
// { |
|
|
|
|
|
// label: "精装修", |
|
|
|
|
|
// style: { |
|
|
|
|
|
// "background-image": |
|
|
|
|
|
// "linear-gradient(135deg, #01d8ba 0%, #0086e7 100%)", |
|
|
|
|
|
// }, |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// label: "面积大", |
|
|
|
|
|
// style: { |
|
|
|
|
|
// "background-image": |
|
|
|
|
|
// "linear-gradient(135deg, #afd801 0%, #00b4e7 100%)", |
|
|
|
|
|
// }, |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// label: "享受税收优惠", |
|
|
|
|
|
// style: { |
|
|
|
|
|
// "background-image": |
|
|
|
|
|
// "linear-gradient(135deg, #8d6dff 0%, #5f24eb 100%)", |
|
|
|
|
|
// }, |
|
|
|
|
|
// }, |
|
|
|
|
|
// ], |
|
|
|
|
|
|
|
|
// 视频预览 |
|
|
// 视频预览 |
|
|
videoPreview: { |
|
|
videoPreview: { |
|
|
isShow: false, |
|
|
isShow: false, |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
this.getByIdPropertyManage(); |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
getByIdPropertyManage() { |
|
|
|
|
|
this.pageLoading = true; |
|
|
|
|
|
let propertyManagementId = this.$route.query.propertyManagementId; |
|
|
|
|
|
if (!propertyManagementId) { |
|
|
|
|
|
this.$router.push("/"); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
getByIdPropertyManage({ propertyManagementId }) |
|
|
|
|
|
.then((res) => { |
|
|
|
|
|
const data = res.data; |
|
|
|
|
|
if (data.status == 0) { |
|
|
|
|
|
this.propertyDetail = data.data; |
|
|
|
|
|
console.log( |
|
|
|
|
|
this.$cloneDeep(this.propertyDetail), |
|
|
|
|
|
"物业产品详情" |
|
|
|
|
|
); |
|
|
|
|
|
let { imgList } = this.propertyDetail; |
|
|
|
|
|
this.mainImg = imgList ? imgList[0] : ""; |
|
|
|
|
|
} else if (data.status == 101) { |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error(data.msg); |
|
|
|
|
|
} |
|
|
|
|
|
this.pageLoading = false; |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
console.log(err); |
|
|
|
|
|
this.$message.error("获取详情失败，请尝试刷新页面后重试。"); |
|
|
|
|
|
this.pageLoading = false; |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
// 获取价格 |
|
|
|
|
|
getShowPrice() { |
|
|
|
|
|
let { housingInformationList } = this.propertyDetail; |
|
|
|
|
|
return housingInformationList |
|
|
|
|
|
? housingInformationList[0].showPrice |
|
|
|
|
|
: "--"; |
|
|
|
|
|
}, |
|
|
toPath(path) { |
|
|
toPath(path) { |
|
|
this.$router.push(path); |
|
|
this.$router.push(path); |
|
|
}, |
|
|
}, |
|
|
|
|
|
parseMarkdown(str) { |
|
|
|
|
|
return str ? parseMarkdown(str) : ""; |
|
|
|
|
|
}, |
|
|
|
|
|
formatImg(url) { |
|
|
|
|
|
return formatImg(url); |
|
|
|
|
|
}, |
|
|
// 播放video |
|
|
// 播放video |
|
|
playVideo(src) { |
|
|
playVideo(src) { |
|
|
this.videoPreview.isShow = true; |
|
|
this.videoPreview.isShow = true; |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
// 判断是图片还是视频 |
|
|
// 判断是图片还是视频 |
|
|
checkFile(fileValue, type) { |
|
|
checkFile(fileValue, type) { |
|
|
|
|
|
if (!fileValue) { |
|
|
|
|
|
return ""; |
|
|
|
|
|
} |
|
|
let index = fileValue.indexOf("."); |
|
|
let index = fileValue.indexOf("."); |
|
|
let fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀 |
|
|
let fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀 |
|
|
if (type == "video") { |
|
|
if (type == "video") { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
return true; |
|
|
return true; |
|
|
}, |
|
|
}, |
|
|
|
|
|
// 获取房源信息图片 |
|
|
|
|
|
getListingFacilities(key) { |
|
|
|
|
|
return ListingFacilities[key]; |
|
|
|
|
|
}, |
|
|
|
|
|
// 获取房源优势颜色 |
|
|
|
|
|
getListingColor(item) { |
|
|
|
|
|
let wuyeguanli_fangyuanyoushi = |
|
|
|
|
|
this.$store.getters.tabList.wuyeguanli_fangyuanyoushi; |
|
|
|
|
|
let style = { background: "" }; |
|
|
|
|
|
wuyeguanli_fangyuanyoushi.forEach((el) => { |
|
|
|
|
|
if (item == el.text) { |
|
|
|
|
|
style.background = el.color; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
return style; |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
