fangtanhua/pages/index/houses-info.vue

<template>
	<view class="houses-info">
		<view class="index-bg"></view>
		<view class="swiper-box">
			<u-swiper :list="swiperlisi" height="367" border-radius="20"></u-swiper>
		</view>
		<view class="houses-tabs u-flex u-row-between">
			<view class="tabs-item u-flex-col u-col-center" @click="showdijia = true">
				<image src="../../static/images/tabs1.png" mode=""></image>
				<text>底价详情</text>
			</view>
			<!-- <view class="tabs-item u-flex-col u-col-center" @click="torizhao">
				<image src="../../static/images/tabs2.png" mode=""></image>
				<text>日照测评</text>
			</view> -->
			<view class="tabs-item u-flex-col u-col-center" @click="toyifang">
				<image src="../../static/images/tabs3.png" mode=""></image>
				<text>一房一价</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="tovideo">
				<image src="../../static/images/tabs4.png" mode=""></image>
				<text>抖音视频</text>
			</view>
		</view>
		<view class="houses-box">
			<view class="box-header u-flex u-row-between">
				<text>{{detail.name}}</text>
				<text @click="toinfo()">详情>></text>
			</view>
			<view class="box-tips">
				备案名：{{detail.record_name}}
			</view>
			<view class="u-flex price">
				<text>参考均价</text>
				<text>{{detail.avg_price}}/㎡</text>
			</view>
			<view class="houses-data u-flex u-flex-wrap">
				<view class="data-item u-flex-col">
					<text>{{detail.floor_area}}</text>
					<text>占地面积</text>
				</view>
				<view class="data-item u-flex-col">
					<text>{{detail.covered_area}}</text>
					<text>总建筑面积</text>
				</view>
				<view class="data-item u-flex-col">
					<text>{{detail.house_min_area}}㎡-{{detail.house_max_area}}㎡</text>
					<text>户型面积</text>
				</view>
				<view class="data-item u-flex-col">
					<text>{{detail.greening_rate}}</text>
					<text>绿化率</text>
				</view>
				<view class="data-item u-flex-col">
					<text>{{detail.plot_ratio}}</text>
					<text>容积率</text>
				</view>
			</view>
			<view class="houses-label u-flex u-flex-wrap">
				<text v-for="(item,inde) in detail.trait" :key="index">{{item}}</text>
			</view>
			<view class="kaifa-box">
				<view style="margin-bottom: 24rpx;">开盘日期: {{detail.sale_time}}</view>
				<view>开发商: {{detail.developers}}</view>
			</view>
		</view>
		<view class="address-box u-flex">
			<u-icon name="map-fill" color="#131415"></u-icon>
			<text class="text">{{detail.project_address}}</text>
		</view>
		<view class="map-box" v-if="detail.latitude && detail.longitude">
			<view class="map-title">
				区域地图
			</view>
			<map @click="tomap" style="width: 100%;height: 376rpx;" :latitude="latitude" :longitude="longitude" :markers="[{id:1,latitude:latitude,longitude:longitude,width:20,height:30}]"></map>
		</view>
		<view class="huxing-box" v-if="detail.house_type.length > 0">
			<view class="huixng-title">
				在售户型
			</view>
			<view class="scroll-box1" style="position: relative;">
				<u-icon name="arrow-left" style="position: absolute;top: 100rpx;left: -20rpx;z-index: 1;"></u-icon>
				<scroll-view scroll-x="true" class="huxing-list">
					<view class="huxing-item" v-for="(item,index) in detail.house_type" :key="index">
						<image :src="item.logo" @click="openimg(item)" class="huxing-img" mode=""></image>
						<view class="name">
							{{item.house_type_name}}
						</view>
						<view class="jianyi">
							建面：约{{item.area}}㎡
						</view>
					</view>
				</scroll-view>
				<u-icon name="arrow-right" style="position: absolute;top: 100rpx;right: -20rpx;z-index: 1;"></u-icon>
			</view>

		</view>
		<view class="" style="height: 170rpx;"></view>
		<view class="houses-btn u-flex u-row-between">
			<text @click="opentel">隐私电话</text>
			<text @click="tochat">在线咨询</text>
		</view>
		<u-popup v-model="showdijia" mode="center" background="rgba(0,0,0,0)">
			<view class="dijia-box u-flex-col u-col-center">
				<image class="dijia-img" src="../../static/images/dijia-bg.png" mode=""></image>
				<view class="u-flex-col u-col-center dijia-text">
					<text>{{detail.discounts_policy}}</text>
				</view>
				<u-icon name="close-circle-fill" color="#fff" size="100" @click="showdijia = false"></u-icon>
			</view>
		</u-popup>
		<u-popup v-model="showtocall" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">您是否进行呼叫？</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showtocall = false">取消</text>
					<text @click="totel">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlisi: [],
				showdijia: false,
				showtocall: false,
				id: '',
				detail: {
					house_type: []
				},
				showlogin: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		computed: {
			latitude() {
				return Number(this.detail.latitude) > Number(this.detail.longitude) ? this.detail.longitude : this.detail.latitude
			},
			longitude() {
				return Number(this.detail.latitude) > Number(this.detail.longitude) ? this.detail.latitude : this.detail.longitude
			}
		},
		methods: {
			tomap() {
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude)
				})
			},
			openimg(item) {
				uni.previewImage({
					urls: [item.logo]
				})
			},
			tologin() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			},
			opentel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = true
				} else {
					this.showlogin = true
				}

			},
			getdata() {
				this.$u.post('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.swiperlisi = res.data.banner
					this.detail = res.data
				})
			},
			tovideo() {
				uni.navigateTo({
					url: "./video?id=" + this.id
				})
			},
			toinfo() {
				uni.navigateTo({
					url: "./info?id=" + this.id
				})
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					this.$u.post('/api/Member/consult_record', {
						type: 2
					})
					uni.navigateTo({
						url: "./chat?hx_username=" + this.detail.hx_username + "&worker_id=" + this.detail.worker_id
					})
				} else {
					this.showlogin = true
				}
			},
			toyifang() {
				uni.navigateTo({
					url: "/pages/h5/yifang?id=" + this.id
				})
			},
			torizhao() {
				uni.navigateTo({
					url: "/pages/h5/rizhao?id=" + this.id
				})
			},
			totel() {
				if (uni.getStorageSync("token")) {
					this.$u.post('/api/Member/consult_record', {
						type: 1
					})
					uni.makePhoneCall({
						phoneNumber: this.detail.privacy_phone
					})
				} else {
					this.showlogin = true
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.houses-info {
		position: relative;
		padding: 1rpx 0;

		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.dijia-box {
			position: relative;

			.dijia-text {
				position: absolute;
				z-index: 10;
				top: 120rpx;
				left: 0;
				width: 100%;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #EC9234;
				padding: 0 150rpx;
			}

			.dijia-img {
				width: 650rpx;
				height: 520rpx;
				margin-bottom: 52rpx;
			}
		}

		.houses-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;
			z-index: 1;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.huxing-box {
			width: 702rpx;
			// height: 450rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 30rpx 20rpx;

			.huxing-list {
				white-space: nowrap;

				.huxing-item {
					margin-right: 20rpx;
					display: inline-block;

					.jianyi {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.name {
						margin: 24rpx 0 10rpx 0;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.huxing-img {
						width: 206rpx;
						height: 206rpx;
					}
				}
			}

			.huixng-title {
				padding: 24rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #131415;
			}
		}

		.map-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 24rpx 20rpx;

			.map-title {
				padding: 24rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #131415;
			}
		}

		.address-box {
			width: 702rpx;
			height: 82rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 22rpx;

			.text {
				flex: 1;
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #131415;
			}
		}

		.houses-box {
			width: 702rpx;
			height: 594rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;

			.kaifa-box {
				padding: 24rpx 20rpx;
				background: #F5F5F5;
				border-radius: 20rpx;

				view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.houses-label {
				padding: 24rpx 0 14rpx 0;

				text {
					line-height: 40rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					padding: 0 10rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.houses-data {
				padding: 20rpx 0;
				// height: 126rpx;
				border-bottom: 2rpx solid #F5F5F5;

				.data-item {
					// width: 134rpx;
					// flex: 1;
					margin-right: 22rpx;

					// margin-right: 10rpx;
					text:first-child {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #131415;
						margin-bottom: 8rpx;
						white-space: nowrap;
					}

					text:last-child {
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.data-item:last-child {
					margin-right: 0;
				}
			}

			.price {
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F5F5F5;

				text:first-child {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 8rpx;
				}

				text:last-child {
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF3B30;
				}
			}

			.box-tips {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.box-header {
				padding: 24rpx 0 12rpx 0;

				text:first-child {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #131415;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1F7EFF;
				}
			}
		}

		.houses-tabs {
			width: 702rpx;
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.tabs-item {
				flex: 1;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-bottom: 20rpx;
				}

				text {
					// margin-top: -34rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
				}
			}
		}

		.swiper-box {
			width: 702rpx;
			margin: 20rpx auto;
		}

		.index-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 556rpx;
			background: linear-gradient(180deg, #1E7DFF 0%, #F6F6F6 100%);
			z-index: -1;
		}
	}
</style>