realty/virgo.wzfrontend/wx/pages/houseDetail/houseDetail.vue

<template>
	<view class="house-detail">
		<view class="banner">
			<swiper class="banner-swiper" @change="swiperchange">
				<swiper-item v-for="(item,index) in detail.banner" :key="index">
					<view class="swiper-item" @click="previewImage(item.url)">
						<image :src="item.url" mode="aspectFill" class="banner-swiper-img">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<text>{{current + 1}}/{{detail.banner.length}}</text>
			</view>
		</view>
		<view class="house-info">
			<view class="title">{{detail.name}}</view>
			<view class="price">
				<view class="price-text">￥</view>
				<text class="price-number">{{detail.price}}</text>
				<view class="price-text">元/{{detail.payType === 0 ? '月' : '年'}}</view>
			</view>
			<view class="information">
				<view class="head-tilte">房源标签</view>
				<view class="tag">
					<uni-tag v-for="(tag,i) in detail.tagList" :key="i" :text="tag.name" size="mini"
						class="house-tag" />
				</view>
				<view class="head-tilte">房源信息</view>
				<view class="information-list">
					<view class="information-box">
						<text class="information-title">所属楼宇：</text>
						<text class="information-text">{{detail.projectItemName}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">所属楼层：</text>
						<text class="information-text">{{detail.projectItemTargetName}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">房源类型：</text>
						<text class="information-text">{{$field.findHouseTypeName(detail.roomTypeId)}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">房间号码：</text>
						<text class="information-text">{{detail.roomNumber}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">房源面积：</text>
						<text class="information-text">{{detail.area}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">付款方式：</text>
						<text class="information-text">{{$field.findPayWayName(detail.payWay)}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">产权证书：</text>
						<text class="information-text">{{detail.propertyCertificateNumber}}</text>
					</view>
					<view class="information-box">
						<text class="information-title">是否装修：</text>
						<text class="information-text">{{detail.decoration === 1 ? '已装修':'未装修'}}</text>
					</view>
				</view>
				<view class="desc">
					<view class="head-tilte">房屋介绍</view>
					<view class="desc-text" v-html="detail.introduce"></view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="share color01">签约</view>
			<view class="share color02">咨询</view>
			<view class="share">留言</view>
		</view>
		<preview-video :show="videoShow" :videoUrl="videoUrl" @close="videoShow = false"></preview-video>
	</view>
</template>

<script>
	import previewVideo from '../../components/previewVideo/previewVideo'
	import {
		getHouseDetailById
	} from '@/request/api/house'
	export default {
		data() {
			return {
				videoShow: false,
				videoUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/071c2be54d154f57ae34c31242282788',
				current: 0,
				detail: {
					banner: [],
					tagList: []
				}
			}
		},
		onLoad(body) {
			getHouseDetailById(body.id).then(res => {
				if (res.code === 200) {
					this.detail = res.data;
					if (this.detail.picture) this.detail['banner'] = JSON.parse(this.detail.picture);
				}
			})
		},
		methods: {
			swiperchange(e) {
				this.current = e.detail.current
			},
			// 去预约
			gobook(id, name) {
				uni.navigateTo({
					url: `/pages/book/book?id=${id}&name=${name}`
				})
			},
			// 拨打电话
			isPhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '10086' //仅为示例
				});
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		},
		components: {
			previewVideo
		}
	}
</script>

<style lang="scss">
	.house-detail {
		background: #fff;
		padding-bottom: 140rpx;

		.banner {
			position: relative;
			width: 100%;

			.banner-swiper {
				height: 600rpx;
			}

			.banner-swiper-img {
				height: 600rpx !important;
			}

			.swiper-item image {
				width: 100%;
			}

			.indicator-dots {
				position: absolute;
				bottom: 30rpx;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.indicator-dots text {
				font-size: 24rpx;
				color: $uni-white;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50rpx;
				width: 64rpx;
				text-align: center;
			}

			/deep/ .uni-swiper-dot {
				width: 40rpx;
				height: 4rpx;
				border-radius: 20rpx;
			}
		}

		.house-info {
			position: relative;
			padding: 30rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background: $uni-white;
			margin-top: -30rpx;

			.title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.price {
				padding-top: 20rpx;
				color: $uni-error;

				.price-number {
					font-size: 44rpx;
					font-weight: bold;
				}

				.price-text {
					display: inline-block;
					font-size: 26rpx;
					scale: 0.8;
				}
			}
		}

		.information {
			padding-top: 30rpx;

			.tag {
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;

				.house-tag {
					background-color: #d4d1d7;
					border-color: #d4d1d7;
					padding: 0 10px;
					border-radius: 10rpx;
					margin-right: 20rpx;

					/* #ifdef MP-WEIXIN */
					text {
						background: transparent;
						border: none;
					}

					/* #endif */
				}
			}

			.head-tilte {
				font-size: 30rpx;
				font-weight: bold;
			}

			.information-list {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 20rpx 0;

				.information-box {
					width: 50%;
					display: flex;
					padding: 20rpx 0;
				}

				.information-title {
					font-size: 26rpx;
					color: $uni-extra-color;
				}

				.information-text {
					font-size: 26rpx;
					color: $uni-base-color;
					flex: 1;
					width: 0;
					overflow: hidden;
					white-space: nowrap;
				}
			}

			.desc {
				padding-top: 20rpx;

				.desc-text {
					padding: 20rpx;
					color: $uni-base-color;
					font-size: 26rpx;
				}
			}
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 1%;
			background: #fff;
			box-shadow: $uni-shadow-sm;

			.share {
				flex: 1;
				text-align: center;
				background: #4a55fd;
				border-radius: 8rpx;
				height: 60rpx;
				text-align: center;
				margin: 0 1%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #fff;
			}

			.color01 {
				background: linear-gradient(to right, #fea733, #feb34d, #fdc46b);
			}

			.color02 {
				background: linear-gradient(to right, #ff4761, #fe606e, #fc706f);
			}
		}
	}
</style>