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

<template>
	<view class="content">
		<view class="position-details">
			<!-- 滚动广告图 -->
			<view class="banner">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
					indicator-color="#fff" indicator-active-color="#74e0fa" class="banner-swiper"
					@change="swiperchange">
					<swiper-item>
						<view class="swiper-item" @click="previewImage('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5')">
							<image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill" class="banner-swiper-img">
							</image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item" @click="previewImage('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5')">
							<image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill" class="banner-swiper-img">
							</image>
						</view>
					</swiper-item>
				</swiper>
				<view class="indicator-dots">
					<text>{{current + 1}}/4</text>
				</view>
			</view>
			<view class="info">
				<view class="title">name【village_name】</view>
				<view class="price">
					<view class="price-text">￥</view>
					<text>120</text>
					<view class="price-text">元/月</view>
				</view>
				<!-- 房源信息 -->
				<view class="information">
					<view class="head-tilte">房源信息</view>
					<view class="information-list">
						<view class="information-box">
							<text class="information-title">房型：</text>
							<text class="information-text">housing</text>
						</view>
						<view class="information-box">
							<text class="information-title">押付：</text>
							<text class="information-text">oshitsuke</text>
						</view>
						<view class="information-box">
							<text class="information-title">楼层：</text>
							<text class="information-text">floor楼</text>
						</view>
						<view class="information-box">
							<text class="information-title">朝向：</text>
							<text class="information-text">orientation_name</text>
						</view>
						<view class="information-box">
							<text class="information-title">建面：</text>
							<text class="information-text">aream²</text>
						</view>
						<view class="information-box">
							<text class="information-title">电梯：</text>
							<text class="information-text">elevator</text>
						</view>
					</view>
				</view>
				<!-- 房屋介绍 -->
				<view class="desc">
					<view class="head-tilte">房屋介绍</view>
					<view class="desc-text"><text>goods_desc</text></view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="btn">
				<view class="share color01"><text>预约看房</text>
				</view>
				<view class="share color02"><text>电话咨询</text></view>
				<view class="share"><text>留言</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
			}
		},
		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' //仅为示例
				});
			},
			// 去首页
			gohome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: url,
					showmenu: false
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	.position-details {
		width: 100%;
		padding-bottom: 140upx;
	}

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

	.banner-swiper {
		height: 650upx;
	}

	.banner-swiper-img {
		height: 650upx !important;
	}

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

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

	.indicator-dots text {
		font-size: 24upx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50upx;
		width: 64upx;
		text-align: center;
	}

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

	wx-swiper .wx-swiper-dot {
		width: 40upx;
		height: 4upx;
		border-radius: 20upx;
	}

	.info {
		position: relative;
		padding: 30upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		background: #FFFFFF;
		margin-top: -20upx;
	}

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

	.price {
		padding-top: 20upx;
		color: red;
	}

	.price text {
		font-size: 40upx;
	}

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

	.information {
		padding-top: 30upx;
	}

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

	.information-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 30upx 0;
	}

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

	.information-title {
		font-size: 26upx;
		color: #b4b4b4;
	}

	.information-text {
		font-size: 26upx;
		color: #2d2d2d;
	}

	.arrangement {
		padding-top: 30upx;
	}

	.arrangement-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;
	}

	.arrangement-box {
		width: 20%;
		padding-top: 20upx;
		text-align: center
	}

	.arrangement-icon {
		color: red;
		font-size: 64upx;
	}

	.arrangement-text {
		padding-top: 6upx;
		font-size: 24upx;
	}

	.desc {
		padding-top: 20upx;
	}

	.desc-text {
		padding: 30upx 30upx 20upx 30upx;
	}

	.desc-text text {
		line-height: 44upx;
		font-size: 28upx;
	}

	.map {
		padding: 30upx 0 0 0;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20upx 1%;
		background: #fff;
	}

	.share {
		flex: 1;
		text-align: center;
		background: #4a55fd;
		border-radius: 8upx;
		height: 90upx;
		text-align: center;
		margin: 0 1%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.share text {
		font-size: 26upx;
		color: #fff;
	}

	.share button {
		padding: 0;
		margin: 0;
		color: #fff;
		font-size: 26upx;
		border-radius: 8upx;
		height: 90upx;
		background: #4a55fd;
		line-height: 90upx;
	}

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

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

	.bnt-box {
		position: fixed;
		right: 20upx;
		bottom: 12%;

		button {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			margin: 14upx 0;
			width: 76upx;
			height: 76upx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px #e9e9e9;

			text {
				color: #666666;
			}
		}

		.kefunv {
			color: #666666;
			font-size: 40upx;
		}
	}

	.recommend-list {
		padding: 0 10upx;
	}
</style>