realty/virgo.wzfrontend/console/src/views/website/homeDetail.vue

<template>
	<div class="home-detail">
		<div class="container">
			<div class="container-box" v-if="detail.id">
				<div class="title">{{detail.projectName}}</div>
				<div class="home-detail-content">
					<div class="home-detail-swiper">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div v-for="item in swiperList" :key="item.id" class="swiper-slide"
									:style="`background-image:url(${item.url})`" @click.stop="openImage(item)">
									<div class="open-video-icon" v-if="item.fileType === 'video'"
										@click.stop="openVideo(item)">
										<i class="iconfont huifont-bofang"></i>
									</div>
								</div>
							</div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
					<div class="home-detail-information">
						<div class="house-name">{{detail.name}}</div>
						<div class="tag">
							<span>{{detail.area}}m²</span>
							<span v-for="(tag,index) in  detail.tagList" :key="index">{{tag.name}}</span>
						</div>
						<div class="house-price">
							<div>
								<span class="average alibaba">{{detail.price}}</span><span class="unit">元/月</span>
							</div>
							<div class="hui-button" @click="reservation">预约看房</div>
						</div>
						<div class="content-title">基本信息</div>
						<div class="information-list">
							<div class="information-box">
								<div class="information-title">所属楼宇：</div>
								<div class="information-div">{{detail.projectItemName}}</div>
							</div>
							<div class="information-box">
								<div class="information-title">所属楼层：</div>
								<div class="information-div">{{detail.projectItemTargetName}}</div>
							</div>
							<div class="information-box">
								<div class="information-title">房源类型：</div>
								<div class="information-div">{{$field.findTypeName('houseType',detail.roomTypeId)}}
								</div>
							</div>
							<div class="information-box">
								<div class="information-title">房间号码：</div>
								<div class="information-div">{{detail.roomNumber}}</div>
							</div>
							<div class="information-box">
								<div class="information-title">房源面积：</div>
								<div class="information-div">{{detail.area}}m²</div>
							</div>
							<div class="information-box">
								<div class="information-title">付款方式：</div>
								<div class="information-div">{{$field.findTypeName('payWay',detail.payWay)}}</div>
							</div>
							<div class="information-box">
								<div class="information-title">产权证书：</div>
								<div class="information-div">{{detail.propertyCertificateNumber?'有':'无'}}</div>
							</div>
							<div class="information-box">
								<div class="information-title">是否装修：</div>
								<div class="information-div">{{detail.decoration === 1 ? '已装修':'未装修'}}</div>
							</div>
						</div>
						<div class="content-title">房源简介</div>
						<div class="desc-text" v-html="detail.introduce"></div>
					</div>
				</div>
				<div class="sub-title">周边配套</div>
				<div class="map-container">
					<div id="map"></div>
					<div class="content-device">
						<div class="people-tell">
							<avatar class="people-avatar"
								:user="{portrait:detail.chargePersonPortrait,name:detail.chargePersonName}" :size="24">
							</avatar>
							<div class="people-text">
								<div class="people-name">{{detail.chargePersonName}}</div>
								<div class="people-organization">组织名称</div>
							</div>
						</div>
						<div class="device-list">
							<div class="device-item"
								v-for="item in $field.findTypeNameByList('supportingFacilities',detail.supportingFacilities)"
								:key="item.id">
								<i :class="'iconfont device-icon ' + item.icon"></i>
								<span class="device-label">{{item.name}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="skeleton-box" v-else>
				<el-empty :description="description">
					<span class="color-blue" style="cursor: pointer;" @click="login" v-if="description === '请登录后查看'">
						点击登录>>
					</span>
				</el-empty>
			</div>
		</div>
		<house-foot></house-foot>
		<el-dialog :close-on-click-modal="false" title="预约看房" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<reservation v-if="visible" @callback="visible = false" :houseId="detail.id" :projectId="detail.projectId"
				:chargePersonId="detail.chargePersonId">
			</reservation>
		</el-dialog>
		<el-dialog title="预览" :visible.sync="fileVisible" width="900px" :append-to-body="true">
			<video v-if="videoSrc && fileVisible" :src="videoSrc" width="100%" height="100%" style="background: #000;"
				controls>
			</video>
		</el-dialog>
		<image-viewer v-if="isShow" :url-list="[imageUrl]" :on-close="()=>isShow = false"></image-viewer>
	</div>
</template>

<script>
	// 引入插件
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入
	import houseFoot from "@/components/website/houseFoot.vue"
	import Crypto from '@/uitls/crypto'
	import {
		getToken
	} from '@/uitls/auth'
	import {
		getHouseDetailById
	} from '@/httpApi/space'
	import {
		mapGetters
	} from 'vuex';
	import reservation from '@/components/website/reservation';
	import imageViewer from 'element-ui/packages/image/src/image-viewer.vue';
	export default {
		data() {
			return {
				swiper: null,
				swiperList: [],
				detail: {},
				detailId: '',
				description: '无房源信息',
				visible: false,
				isShow: false,
				imageUrl: '',
				videoSrc: '',
				fileVisible: false
			};
		},
		mounted() {
			window.scrollTo(0, 0);
			this.init();
		},
		methods: {
			init() {
				if (!getToken()) return this.description = '请登录后查看';
				this.detailId = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.id), 'bosshand');
				if (!this.detailId) return this.description = '无房源信息';
				this.getDetail();
			},
			openImage(item) {
				if (item.fileType === 'video') return;
				this.imageUrl = item.url;
				this.isShow = true;
			},
			openVideo(item) {
				this.videoSrc = item.videoUrl;
				this.fileVisible = true;
			},
			getDetail() {
				getHouseDetailById(this.detailId).then(res => {
					if (res.state) {
						this.detail = res.data;
						let imageBox = [],
							videoBox = [];
						if (this.detail.picture) {
							imageBox = JSON.parse(this.detail.picture).map(node => {
								node['fileType'] = 'image';
								return node;
							});
						}
						if (this.detail.video) {
							videoBox = JSON.parse(this.detail.video).map(node => {
								node['fileType'] = 'video';
								node['videoUrl'] = node.url;
								node['url'] = node.url + '?x-oss-process=video/snapshot,t_0,f_jpg'
								return node;
							});
						}
						this.swiperList = videoBox.concat(imageBox);
						this.getSwiper();
						if (this.detail.coordinates) {
							this.coordinates = this.detail.coordinates.split(',');
							this.initMap();
						}
					}
				})
			},
			initMap() {
				this.$nextTick(() => {
					let position = new T.LngLat(this.coordinates[0], this.coordinates[1]);
					let map = new T.Map('map');
					map.centerAndZoom(position, 18);
					let mark = new T.Marker(position, {
						z: 12
					});
					map.addOverLay(mark);
				})
			},
			getSwiper() {
				this.$nextTick(() => {
					this.swiper = new Swiper(".swiper-container", {
						loop: true,
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					})
				})
			},
			login() {
				this.$store.dispatch('app/changeEvent', {
					type: 'login'
				})
			},
			reservation() {
				this.visible = true;
			}
		},
		components: {
			houseFoot,
			reservation,
			imageViewer
		},
		computed: {
			...mapGetters(['event'])
		},
		watch: {
			event() {
				let event = this.$store.getters.event;
				if (event.type == 'homeDetailReload') this.init();
			}
		},
	};
</script>

<style lang="scss">
	.home-detail {
		padding-top: 60px;
		color: #000;

		.login-toggle {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			font-size: 30px;
			font-weight: bolder;
			line-height: 30px;
			margin: 20px 0;
		}

		.sub-title {
			font-size: 24px;
			font-weight: bolder;
			line-height: 30px;
			margin: 20px 0;
		}

		.map-container {
			display: flex;
			margin-bottom: 30px;

			#map {
				width: 670px;
				height: 400px;
			}

			.content-device {
				width: 470px;
				height: 400px;
				margin-left: 60px;

				.people-tell {
					border-bottom: 1px solid #e7ebee;
					display: flex;
					align-items: center;
					padding: 15px 0;
					margin-bottom: 15px;

					.people-avatar {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 15px;
						overflow: hidden;
					}

					.people-text {
						flex: 1;
						width: 0;
						overflow: hidden;
					}

					.people-name {
						font-size: 20px;
						font-weight: 500;
					}

					.people-organization {
						font-weight: 300;
						font-size: 14px;
					}
				}

				.device-list {
					display: flex;
					flex-wrap: wrap;
					align-content: flex-start;
				}

				.device-item {
					width: 50%;
					display: flex;
					align-items: center;
					margin-bottom: 15px;

					.device-label {
						flex: 1;
						width: 0;
						font-weight: 200;
						margin-left: 10px;
					}

					.device-icon {
						font-size: 18px;
						margin-right: 5px;
					}
				}
			}
		}


		.container {
			width: 1200px;
			margin: 0 auto;
			min-height: calc(100vh - 117px);
		}

		.skeleton-box {
			padding-top: 50px;
		}

		.home-detail-content {
			display: flex;
		}

		.home-detail-swiper {
			width: 670px;
			height: 480px;

			.swiper-container,
			.swiper-wrapper,
			.swiper-slide {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				cursor: pointer;
				position: relative;

				.open-video-icon {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 40px;
					height: 40px;
					border-radius: 40px;
					background: rgba(0, 0, 0, 0.6);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: -20px;
					margin-top: -20px;
					box-sizing: border-box;

					.huifont-bofang {
						color: #fff;
						font-size: 20px;
					}
				}
			}

			.swiper-button-next:after,
			.swiper-button-prev:after {
				color: #eee;
				font-size: 16px;
			}

			.swiper-button-prev,
			.swiper-container-rtl .swiper-button-next {
				left: 0;
				background: rgba(0, 0, 0, 0.3);
				height: 70px;
				margin-top: -35px;
			}

			.swiper-button-next,
			.swiper-container-rtl .swiper-button-prev {
				right: 0;
				background: rgba(0, 0, 0, 0.3);
				height: 70px;
				margin-top: -35px;
			}
		}

		.home-detail-information {
			width: 470px;
			height: 480px;
			margin-left: 60px;

			.house-name {
				font-size: 26px;
				font-weight: 500;
			}

			.tag {
				margin: 10px 0;

				span {
					background: #eee;
					padding: 5px 10px;
					border-radius: 4px;
					margin: 5px 5px 5px 0;
					font-size: 12px;
					color: #7b7979;
				}
			}

			.content-title {
				font-size: 16px;
				font-weight: 500;
			}

			.house-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				span {
					color: $--color-red;
				}

				border-bottom: 1px solid #e7ebee;
				margin-bottom: 15px;
				padding-bottom: 5px;

				.hui-button {
					color: #fff;
					background: $--color-primary;
					width: 100px;
					height: 34px;
					text-align: center;
					line-height: 34px;
					border-radius: 4px;
					cursor: pointer;

					&:hover {
						opacity: 0.8;
					}
				}
			}

			.average {
				font-size: 30px;
				font-weight: 900;
				margin-right: 5px;
			}

			.desc-text {
				margin-top: 10px;
			}

			.information-list {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 10px;

				.information-box {
					width: 50%;
					display: flex;
					padding: 7px 20px 7px 0;
					box-sizing: border-box;
				}

				.information-title {
					color: #979b9e;
					font-weight: 500;
				}

				.information-div {
					flex: 1;
					width: 0;
					overflow: hidden;
					white-space: nowrap;
					font-weight: 300;
				}
			}
		}

		.footer {
			background: #212631;
			min-width: 1200px;

			.footer-box {
				width: 1200px;
				margin: 0 auto
			}

			.foot-information {
				font-weight: 400;
				font-size: 12px;
				color: #98999d;
				line-height: 17px;
				display: flex;
				align-items: center;
				padding: 20px;
				justify-content: center
			}

			.foot-information a {
				color: #98999d;
				margin-right: 30px
			}

			.foot-information img {
				width: 14px;
				height: 14px;
				margin-left: 30px;
				margin-right: 10px
			}
		}
	}
</style>