fangtanhua/pages/index/info.vue

<template>
	<view class="info1">
		<view class="info1-title">
			基本情况
		</view>
		<view class="u-flex info1-row">
			<text class="text">备案名称</text>
			<text class="u-flex-1">{{detail.record_name}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">销售状态</text>
			<text class="u-flex-1">{{detail.sale_state}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">售楼位置</text>
			<view class="u-flex u-col-top">
				<u-icon name="map-fill" color="#1F7EFF" size="30" style="margin-top: 2rpx;margin-right: 10rpx;"></u-icon>
				<text class="u-flex-1">{{detail.sales_office}}</text>
			</view>
		</view>
		<!-- <view class="u-flex info1-row">
			<text class="text">楼盘位置</text>
			<view class="u-flex u-col-top">
				<u-icon name="map-fill" color="#1F7EFF" size="30" style="margin-top: 2rpx;margin-right: 10rpx;"></u-icon>
				<text class="u-flex-1">上城区三关塘路与华家竹园路交汇处向西200米</text>
			</view>
		</view> -->
		<view class="u-flex info1-row">
			<text class="text">装修状况</text>
			<text class="u-flex-1">{{detail.fitment_state}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">交房时间</text>
			<text class="u-flex-1">{{detail.delivery_time}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">建筑层高</text>
			<text class="u-flex-1">{{detail.floor_height}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">户型面积</text>
			<text class="u-flex-1">{{detail.house_min_area}}㎡-{{detail.house_max_area}}㎡</text>
		</view>
		<view class="u-flex info1-row" v-if="detail.trait">
			<text class="text">楼盘类型</text>
			<text class="u-flex-1" v-if="detail.trait.length > 0">{{detail.trait.join(' ')}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">物业费用</text>
			<text class="u-flex-1">{{detail.property_cost}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">物业公司</text>
			<text class="u-flex-1">{{detail.property_company}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">开盘时间</text>
			<text class="u-flex-1">{{detail.sale_time}}</text>
		</view>
		<view class="xian"></view>
		<view class="info1-title">
			总体情况
		</view>
		<view class="u-flex info1-row">
			<text class="text">项目名称</text>
			<text class="u-flex-1">{{detail.name}}</text>
		</view>
		<!-- <view class="u-flex info1-row">
			<text class="text">项目简介</text>
			<text class="u-flex-1">上城区三关塘路与华家竹园路交汇处向西200米</text>
		</view> -->
		<view class="u-flex info1-row">
			<text class="text">项目地址</text>
			<view class="u-flex u-col-top" @click="tomap">
				<u-icon name="map-fill" color="#1F7EFF" size="30" style="margin-top: 2rpx;margin-right: 10rpx;"></u-icon>
				<text class="u-flex-1">{{detail.project_address}}</text>
			</view>
		</view>
		<view class="u-flex info1-row">
			<text class="text">总户数量</text>
			<text class="u-flex-1">{{detail.resident_num}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">车位配比</text>
			<text class="u-flex-1">{{detail.stall_ratio}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">总栋数</text>
			<text class="u-flex-1">{{detail.tower_num}}栋</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">绿化率</text>
			<text class="u-flex-1">{{detail.greening_rate}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">容积率</text>
			<text class="u-flex-1">{{detail.plot_ratio}}%</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">占地面积</text>
			<text class="u-flex-1">{{detail.floor_area}}</text>
		</view>
		<view class="u-flex info1-row">
			<text class="text">总建面积</text>
			<text class="u-flex-1">{{detail.covered_area}}</text>
		</view>
		<view class="xian"></view>
		<view class="info1-title">
			楼盘简介
		</view>
		<view class="jianjie">
			{{detail.project_synopsis}}
		</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="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 {
				showtocall: false,
				id: '',
				detail: {},
				showlogin: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		methods: {
			tomap() {
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude)
				})
			},
			tologin() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			},
			opentel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = true
				} else {
					this.showlogin = true
				}
			},
			getdata() {
				this.$u.get('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			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
				}
			},
			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
				}
			},
		}
	}
</script>

<style lang="scss">
	.info1 {
		padding: 16rpx 24rpx;

		.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%;
			}
		}

		.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;
			}
		}

		.xian {
			width: 702rpx;
			height: 2rpx;
			background: #CCCCCC;
			margin: 16rpx auto;
		}

		.info1-row {
			margin-bottom: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			.text {
				width: 140rpx;
			}
		}

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

		.info1-title {
			padding: 24rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
</style>