realty/virgo.wzfrontend/yui_wx/pages/house/house.vue

<template>
	<view class="house-detail">
		<view class="house-swiper">
			<swiper class="swiper" circular :indicator-dots="true">
				<swiper-item v-for="item in responsibility" :key="item.id">
					<view class="swiper-item-box">
						<image class="image" :src="item.url" mode="aspectFill" @click="openImage(item)">
						</image>
						<view class="open-video-icon" v-if="item.fileType === 'video'" @click="openVideo(item)">
							<uni-icons type="icon-bofang" custom-prefix="iconfont" color="rgba(255, 255, 255, 0.6)"
								size="26">
							</uni-icons>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<uni-icons class="btn" @click="roomCollection" :type="detail.roomCollection ? 'heart-filled' : 'heart'"
				color="#ff4d4f" size="28">
			</uni-icons>
		</view>
		<view class="house-title">
			<view class="house-name">{{detail.name}}</view>
			<view class="tag">
				<text style="margin-right: 6rpx;">{{detail.area}}m²</text>
				<text v-for="(tag,index) in  detail.tagList" :key="index"> | {{tag.name}}</text>
			</view>
			<view class="pirce">
				<text class="number">{{detail.price}}</text>
				<text class="label">/月</text>
			</view>
			<view class="project-label">距离您{{detail.distance || '-'}}km</view>
			<button type="default" class="wx-icon" open-type="share">
				<uni-icons type="weixin" open-type="share" size="38" color="#43b156">
				</uni-icons>
			</button>
		</view>
		<view class="house-label house-article">{{detail.comment}}</view>
		<view class="house-content">
			<view class="content-title">基本信息</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.findTypeName('houseType',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.findTypeName('payWay',detail.payWay)}}</text>
				</view>
				<view class="information-box" style="margin-bottom: 0;">
					<text class="information-title">产权证书：</text>
					<text class="information-text">{{detail.propertyCertificateNumber?'有':'无'}}</text>
				</view>
				<view class="information-box" style="margin-bottom: 0;">
					<text class="information-title">是否装修：</text>
					<text class="information-text">{{detail.decoration === 1 ? '已装修':'未装修'}}</text>
				</view>
			</view>
			<view class="content-title">房源简介</view>
			<view class="desc-text" v-html="detail.introduce"></view>
			<view class="people-tell">
				<avatar class="people-avatar"
					:user="{portrait:detail.chargePersonPortrait,name:detail.chargePersonName}"
					@click="$navigateTo('/pages/person/person?userId='+detail.chargePersonId)" :size="34">
				</avatar>
				<view class="people-text" @click="$navigateTo('/pages/person/person?userId=' + detail.chargePersonId)">
					<view class="people-name">{{detail.chargePersonName}}</view>
					<view class="people-organization">{{detail.organizationName||'-'}}</view>
				</view>
				<view class="people-icon" @click="tell">
					<uni-icons type="phone-filled" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="content-title">地理位置</view>
			<view class="content-map">
				<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
			</view>
			<view class="content-title">配套设施</view>
			<view class="content-device">
				<view class="device-item"
					v-for="item in $field.findTypeNameByList('supportingFacilities',detail.supportingFacilities)"
					:key="item.id">
					<uni-icons class="device-icon" custom-prefix="iconfont" :type="item.icon" size="18"></uni-icons>
					<text class="device-label">{{item.name}}</text>
				</view>
			</view>
			<view class="content-title">
				<text>访客记录</text>
				<text class="more" @click="$navigateTo('/pages/visitor/visitor?houseId=' + houseId)">查看更多>></text>
			</view>
			<view class="visitor">
				<view class="visitor-item" v-for="(item,index) in visitorList" :key="index">
					<image class="visitor-avatar" :src="item.userPortrait" mode="aspectFill">
					</image>

					<text class="visitor-label">{{item.userName}}访问了房源</text>
					<uni-dateformat class="visitor-time" :date="item.date" :threshold="[60000,3600000 * 24 * 365]">
					</uni-dateformat>
				</view>
			</view>
			<view class="content-title">
				<text>房源评价</text>
			</view>
			<view class="evaluate">
				<hb-comment ref="hbComment" @add="addEvaluate" @del="del" @like="like" :deleteTip="'确认删除？'"
					:cmData="commentData" v-if="commentData">
				</hb-comment>
			</view>
		</view>
		<view class="hui-button-box">
			<view class="hui-button-view">
				<view class="hui-button hui-button-light"
					@click="$navigateTo('/pages/reservation/reservation?houseId=' + houseId+'&projectId=' + detail.projectId + '&chargePersonId=' + detail.chargePersonId)">
					<uni-icons class="hui-button-icon" type="calendar" color="#08979c" size="22"></uni-icons> 预约看房
				</view>
				<view class="hui-button"
					@click="$navigateTo('/pages/chat/chat?userId='+detail.chargePersonId+'&userName='+detail.chargePersonName)">
					<uni-icons class="hui-button-icon" type="chat" color="#fff" size="22"></uni-icons>
					在线联系
				</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
		<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
			<video id="myVideo" v-if="videoUrl" :src="videoUrl" controls autoplay>
			</video>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dayjs
	} from '@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min';
	import {
		getHouseDetailById,
		insertVisitor,
		getVisitorByQuery,
		collection,
		disableCollection,
		getHouseEvaluateListByPage,
		insertEvaluate
	} from '@/request/api/house.js'
	import avatar from '@/components/common/avatar.vue';
	export default {
		data() {
			return {
				detail: {
					area: 0
				},
				houseId: 15,
				responsibility: [],
				coordinates: [],
				latitude: 39.90923,
				longitude: 116.397428,
				mapContext: {},
				visitorList: [],
				startTime: '',
				commentData: {
					readNumer: 0,
					commentSize: 0,
					comment: []
				},
				shareButton: false,
				coordinates: '',
				videoUrl: ''
			}
		},
		components: {
			avatar
		},
		onLoad(body) {
			if (body.houseId) this.houseId = body.houseId;
			this.coordinates = this.$store.getters.coordinates;
			this.startTime = new Date().getTime();
		},
		onReady() {
			this.mapContext = uni.createMapContext("map", this);
			this.init();
		},
		onUnload() {
			let endTime = new Date().getTime();
			let time = endTime - this.startTime;
			if (time > 10000) this.createVisitor();
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.name || '',
			}
		},
		methods: {
			init() {
				getHouseDetailById(this.houseId + '?coordinates=' + this.coordinates).then(res => {
					if (res.code === 200) {
						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.responsibility = videoBox.concat(imageBox);
						if (this.detail.coordinates) {
							this.coordinates = this.detail.coordinates.split(',');
							this.latitude = this.coordinates[1];
							this.longitude = this.coordinates[0];
							this.addMarkers();
						}
						this.getVisitor();
						this.getHouseEvaluate();
					}
				})
			},
			getHouseEvaluate() {
				getHouseEvaluateListByPage({
					currPage: 1,
					pageSize: 100,
					projectItemTargetRoomId: this.houseId
				}).then(res => {
					if (res.code == 200) {
						this.commentData.commentSize = res.data.totalCount;
						this.commentData.comment = this.getTree(res.data.dataList.map(node => {
							return {
								"id": node.id, // 唯一主键
								"owner": true, // 是否是拥有者，为true则可以删除，管理员全部为true
								"hasLike": false, // 是否点赞
								"likeNum": 2, // 点赞数量
								"avatarUrl": node.userPortrait, // 评论者头像地址
								"nickName": node.userName, // 评论者昵称，昵称过长请在后端截断
								"content": node.content, // 评论内容
								"parentId": node.parentId, // 所属评论的唯一主键
								"createTime": node.date // 创建时间
							}
						}))
					}
				})
			},
			openVideo(item) {
				this.videoUrl = item.videoUrl;
				this.$refs.popup.open('center');
			},
			openImage(item) {
				if (item.fileType !== 'image') return;
				let imageList = this.responsibility.filter(node => node.fileType === 'image');
				let current = imageList.findIndex(node => node.id == item.id);
				uni.previewImage({
					urls: imageList.map(node => node.url),
					current: current,
					longPressActions: {
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
			addEvaluate(data) {
				insertEvaluate({
					userId: this.$store.getters.user.userId,
					projectItemTargetRoomId: this.houseId,
					content: data.content,
					parentId: data.pId || 0
				}).then(res => {
					if (res.code == 200) {
						this.$toast('评价成功');
						this.getHouseEvaluate();
						this.$refs.hbComment.addComplete();
					}
				})

			},
			mp4Preview() {

			},
			del() {

			},
			like() {

			},
			tell() {
				if (!this.detail.chargePersonPhone) this.$toast('该用户暂未提供手机号');
				uni.makePhoneCall({
					phoneNumber: this.detail.chargePersonPhone
				});
			},
			roomCollection() {
				this.detail.roomCollection ? disableCollection(this.houseId).then(res => this.successCollection(res,
					'取消收藏')) : collection(this.houseId).then(res => this.successCollection(res, '收藏成功'));
			},
			successCollection(res, msg) {
				if (res.code === 200) {
					this.init();
					this.$toast(msg);
				}
			},
			addMarkers() {
				const positions = [{
					latitude: this.coordinates[1],
					longitude: this.coordinates[0],
				}]
				const markers = []
				positions.forEach((p, i) => {
					markers.push(
						Object.assign({}, {
							id: i + 1,
							width: 50,
							height: 50,
							joinCluster: true, // 指定了该参数才会参与聚合
						}, p)
					)
				})
				this.mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {}
				})
			},
			getVisitor() {
				getVisitorByQuery({
					currPage: 1,
					pageSize: 2,
					projectItemTargetRoomId: this.houseId
				}).then(res => {
					if (res.code === 200) {
						this.visitorList = res.data.dataList;
					}
				})
			},
			createVisitor() {
				insertVisitor({
					userId: this.$store.getters.user.userId,
					projectItemTargetRoomId: this.houseId
				})
			},
			share() {
				//根据id获取
				uni.createSelectorQuery().select('#shareButton').node().exec(res => {
					//res[0].node未获取到的指定的dom元素对象
					console.log("res", res[0].node)
				})
			}
		},
	}
</script>

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

		.house-swiper {
			position: relative;

			.btn {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
			}
		}

		.swiper {
			height: 400rpx;

			.image,
			.swiper-item-box {
				width: 100%;
				height: 100%;
				position: relative;
			}

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

		.house-label {
			font-size: 24rpx;
			color: $uni-secondary-color;
			font-weight: 300;

		}

		.house-article {
			font-size: 28rpx;
			padding: 0 30rpx;
		}

		.house-title {
			padding: 40rpx 130rpx 30rpx 30rpx;
			position: relative;

			.house-name {
				font-size: 36rpx;
				font-weight: 500;
			}

			.project-label {
				font-size: 24rpx;
				color: $uni-secondary-color;
				font-weight: 300;
				position: absolute;
				bottom: 50rpx;
				right: 30rpx;
			}

			.tag {
				font-size: 24rpx;
				font-weight: 300;
				color: $uni-secondary-color;
				padding: 12rpx 0;
			}

			.pirce {
				color: $uni-primary;

				.number {
					font-weight: 600;
					font-size: 48rpx;
				}

				.label {
					font-size: 24rpx;
				}
			}

			.wx-icon {
				position: absolute;
				top: 0;
				right: 30rpx;
				transform: translateY(50%);
				line-height: 1;
				background: transparent;

				&::after {
					display: none;
				}
			}
		}

		.content-map {
			width: 100%;
			height: 360rpx;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;

			.map {
				flex: 1;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.house-content {
			padding: 0 30rpx;
			box-sizing: border-box;

			.content-title {
				font-size: 32rpx;
				font-weight: 500;
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.more {
					color: $uni-secondary-color;
					font-weight: 300;
					font-size: 24rpx;
				}
			}

			.people-tell {
				margin: 40rpx 0;
				height: 140rpx;
				border-radius: 20rpx;
				box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				.people-avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 30rpx;
					overflow: hidden;
				}

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

				.people-name {
					font-size: 16px;
					font-weight: 500;
					margin-bottom: 8rpx;
				}

				.people-organization {
					font-weight: 300;
					font-size: 24rpx;
					color: $uni-secondary-color;
				}

				.people-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: $uni-primary;
					text-align: center;
					line-height: 60rpx;
				}
			}

			.visitor {
				.visitor-item {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					font-weight: 300;

					.visitor-avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;
					}

					.visitor-label {
						flex: 1;
						width: 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin: 0 20rpx;
					}

					.visitor-time {
						font-size: 24rpx;
						color: $uni-secondary-color;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.desc-text {
				font-weight: 300;
			}

			.information-list {
				display: flex;
				flex-wrap: wrap;

				.information-box {
					width: 50%;
					display: flex;
					margin-bottom: 30rpx;
				}

				.information-title {
					color: $uni-secondary-color;
					font-weight: 500;
				}

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

			.content-device {
				display: flex;
				flex-wrap: wrap;

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

					.device-label {
						flex: 1;
						width: 0;
						color: $uni-secondary-color;
						font-weight: 200;
						margin-left: 10rpx;
					}

					.device-icon {
						color: $uni-base-color;
					}
				}
			}
		}

		.uni-popup__wrapper {
			width: 100%;
			height: 600rpx;

			#myVideo {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>