H5/pages/map/model/siteList.vue

<template>
	<view :class="['site-item' , index === 0 ? 'first-site-item' : '']" @click.stop="openSite(info)">
		<view class="site-name">{{info.locationName}}</view>
		<view class="location-text">
			<view class="icon-box">
				<image class="location-icon" src="/static/images/location-text.png" mode="aspectFit" />
			</view>
			<text class="location-val">{{`${info.cityName || ''}${info.areaName  || ''}${info.address  || ''}`}}</text>
		</view>
		<view class="distance-box">
			<view class="distance-num one-row">
				距离{{getDistance(info.centerDistance)}}
				<!-- 距离{{getDistance(info.distance)}} -->
			</view>
			<view class="distance-btns">
				<view class="distance-btn" @click.stop="getPhoneCall(info.mapContactList)">
					<image class="btn-icon" src="/static/images/btn_02.png" mode="aspectFit" />
					<text>电话</text>
				</view>
				<view class="distance-btn" @click.stop="openLocation(info)">
					<image class="btn-icon" src="/static/images/btn_01.png" mode="aspectFit" />
					<text>导航</text>
				</view>
			</view>
		</view>
		<view class="division-box" />
		<view class="time-box">
			<view class="time-label">
				<image class="time-icon" src="/static/images/time.png" mode="aspectFit" />
				<text class="time-text">办公时间：</text>
			</view>
			<view :class="['time-content', isShow ? '': 'hide-content' ]" id="contentText">
				<template v-for="(item , index) in getVal(info.workTimeRemark)">
					<view :class="[index==0 ? 'time-val'  :'' ]">
						<text>{{ item }} </text>
						<view v-if="index === 0 && isExceed" class="exceed-btn" @click.stop="isShow = !isShow">
							<text>{{isShow ? '收起':'展开'}} </text>
							<image :class="['direction' , isShow ? '' : 'show-direction']"
								src="/static/images/direction.png" mode="aspectFit" />
						</view>
					</view>
				</template>
			</view>
		</view>
		<telList ref="telListRef" />
	</view>
</template>

<script>
	import { distanceCalculate, getMapLocation } from "@/utils/tool.js";
	import { openMap } from "@/utils/openApp.js"
	import { EventBus } from "@/utils/vueBus.js"
	import telList from "./telList.vue"
	import map from "./../map.js"
	export default {
		mixins: [map],
		props: {
			index: {
				type: Number,
				require: true,
				default: 0
			},
			info: {
				type: Object,
				require: true,
				default: () => {}
			}
		},
		components: { telList },
		data() {
			return {
				isExceed: false,
				isShow: true,
				// outerPhone
			}
		},
		mounted() {
			this.getContentHeight()
		},
		watch: {
			isShow() {
				this.$emit('refresh')
			}
		},
		methods: {
			getContentHeight() {

				this.$nextTick(() => {
					setTimeout(() => {
						try {
							const query = uni.createSelectorQuery().in(this).select("#contentText");
							query.boundingClientRect((data) => {
									const defaultHeight = uni.upx2px(33)
									console.log("data.height = ", data.height, uni.upx2px(33))
									// const f_s = uni.upx2px(this.contentSize) * this.contentHeight * 5;
									// const content_h = data.height; 
									// // 是否超出
									this.isExceed = data.height > uni.upx2px(33) ? true : false;
									this.isShow = false
									// // 超出就隐藏，否则就不隐藏
									// this.showAllContent = this.exceedHeight ? false : true;
									// this.showContent = true;
								})
								.exec();
						} catch (e) {
							this.exceedHeight = false;
							this.showAllContent = true;
							this.showContent = true;
						}
					}, 10)
				})
			},

			getDistance(num) {
				return distanceCalculate(num)
			},
			getPhoneCall(tel) {
				this.$refs.telListRef.open({ tel })
			},
			openLocation(info) {
				const { areaCode, cityCode, provinceCode, provinceName, cityName, areaName, address } = info
				const name = `${provinceName}${cityName}${areaName}${address}`;
				const code = areaCode || cityCode || provinceCode

				openMap({ name, code, type: "gaode", info })
			},
			openSite(info) {
				this.$emit('checkSiteDetails', info)
				// EventBus.$emit('TianDiTuSite', info)
			},
			getHeight() {
				return new Promise(resolve => {
					let contentH = 0;
					try {
						const query = uni.createSelectorQuery().in(this);
						query
							.select(".site-item")
							.boundingClientRect((data) => {
								if (data) {
									contentH = data.height;
								}
							})
							.exec();
					} catch (error) {}
					resolve(contentH)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.site-item {
		width: 100%;
		padding: 30rpx 30rpx 0;
		border-bottom: 10rpx solid #F5F5F5;

		.site-name {
			font-size: 30rpx;
			font-weight: 700;
			color: #1a1a1a;
			line-height: 42rpx;
		}

		.location-text {
			width: 100%;
			display: flex;
			align-items: start;
			padding: 12rpx 0;

			.icon-box {
				width: 22rpx;
				height: 37rpx;
				flex-shrink: 0;

				.location-icon {
					width: 22rpx;
					height: 37rpx;
				}
			}

			.location-val {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 37rpx;
				color: #666666;
				padding-left: 8rpx;
			}

		}

		.distance-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.distance-num {
				font-size: 26rpx;
				font-weight: 400;
				color: #808080;
			}

			.distance-btns {
				width: 274rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.distance-btn {
					width: 130rpx;
					height: 50rpx;
					border-radius: 10rpx;
					background-color: #61A8FF;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 22rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}

					line-height: 30rpx;
					font-size: 22rpx;
					font-weight: 700;
					color: #ffffff;
				}
			}
		}

		.division-box {
			margin-top: 20rpx;
			width: 100%;
			height: 1px;
			background: #f0f0f0;
		}

		.time-box {
			min-height: 73rpx;
			padding: 20rpx 0;
			font-size: 26rpx;
			font-weight: 400;
			color: #808080;
			display: flex;
			align-items: start;

			.time-label {
				display: flex;
				align-items: center;

				.time-icon {
					width: 27rpx;
					height: 33rpx;
				}

				.time-text {
					padding-left: 8rpx;
					line-height: 33rpx;
					color: #1a1a1a;
				}
			}

			.time-content {
				flex: 1;

				.time-val {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: start;
					line-height: 33rpx;

					.exceed-btn {
						flex-shrink: 0;
						display: flex;
						align-items: center;
						color: #61A8FF;

						.direction {
							width: 42rpx;
							height: 33rpx;
						}

						.show-direction {
							transform: rotate(180deg);
						}
					}
				}
			}

			.hide-content {
				height: 33rpx;
				overflow: hidden;
			}
		}

		// box-shadow: 1px 1px 1px 1px #ccc;
		// background-color: #ccc;
		// .site-name {
		// 	padding-top: 30rpx;
		// 	font-size: 36rpx;
		// 	padding-bottom: 15rpx;
		// 	background-color: #fff;
		// }

		// .site-info {
		// 	background-color: #fff;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;


		// 	.site-left {
		// 		width: 1px;
		// 		flex: 1;
		// 		display: flex;
		// 		flex-direction: column;
		// 		font-size: 28rpx;
		// 		padding-bottom: 15rpx;

		// 		.site-distance {
		// 			color: #7D7D7D;
		// 		}
		// 	}

		// 	.site-right {
		// 		flex-shrink: 0;
		// 		display: flex;
		// 		align-items: center;

		// 		.site-btn {
		// 			margin-left: 10rpx;
		// 			display: flex;
		// 			flex-direction: column;
		// 			align-items: center;

		// 			.site-icon {
		// 				width: 50rpx;
		// 				height: 50rpx;
		// 				line-height: 1;
		// 				border-radius: 50%;
		// 				background-color: #3291F8;
		// 				display: flex;
		// 				align-items: center;
		// 				justify-content: center;
		// 			}

		// 			.icon {
		// 				width: 30rpx;
		// 				height: 30rpx;

		// 				path {
		// 					fill: #fff;
		// 				}
		// 			}

		// 			.site-text {
		// 				font-size: 28rpx;
		// 			}
		// 		}
		// 	}
		// }

		// .site-time {
		// 	background-color: #fff;
		// 	border-top: 1rpx solid #F0F0F0;
		// 	padding: 15rpx 0;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	font-size: 28rpx;

		// 	text {
		// 		flex-shrink: 0;
		// 	}

		// 	.time-lable {
		// 		color: #7D7D7D;
		// 	}

		// 	.site-time-val {
		// 		width: 1rpx;
		// 		flex: 1;
		// 		padding-left: 30rpx;
		// 		// text-align: right;
		// 	}
		// }

		// &:first-child {
		// 	.site-name {
		// 		padding-top: 0;
		// 	}

		// }
	}

	.first-site-item {
		padding-top: 0;
	}
</style>