yicangzongtai_app_240321/pages/government/subNVue/mapLocationInfo.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999" :key="navKey"></navbar>
		<view class="map-location" v-if="detail">
			<view class="content-info">
				<image v-if="detail.icon" class="info-logo" :src="detail.icon" mode="scaleToFill"></image>
				<image v-else class="info-logo" src="@/static/map/default-icon.png" mode="scaleToFill"></image>
				<view class="info-text">
					<text class="info-name zw-one-row">
						{{detail.name}}
					</text>
					<view class="info-more">
						<view class="more-text">
							<view class="">
								<text class="info-tag">{{getTypeName(detail)}}</text>
							</view>
							<text class="info-site zw-one-row">{{getDistance(detail.distance)}}</text>
							<text class="info-site zw-one-row">{{detail.detailedAddress}}</text>
						</view>
						<view class="more-btn" @click.stop="toHere(detail)">
							<image class="toimg" src="@/static/map/location.png" mode="scaleToFill">
							</image>
							<text class="btn-text">到这里</text>
						</view>
					</view>
				</view>
			</view>
			<view class="location-details">{{detail.intro}}</view>
			<view class="location-function" v-if="detail.modules && detail.modules.length>0">
				<view class="fun-btn" v-for="(item,index) in detail.modules" :key="item.id" @click="$openPage(item)">
					<image class="funimg" :src="item.icon" mode="aspectFit"></image>
					<!-- <text class="funtxt">{{item.name}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLocationIinfo
	} from "@/api/government.js"
	import {
		distanceCalculate
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				defaultDetail: null,
				detail: null,
				classifyList: [],
				navKey: 1,
				keyWord: '',
				activeClassify: ''
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('MapInfo', res => {
				const val = res.data?.val || {};
				this.config.title = val?.name;
				this.navKey = Math.random()
				this.classifyList = res.data.classifyList;
				this.keyWord = res.data.keyWord;
				this.activeClassify = res.data.activeClassify;
				this.defaultDetail = val || null;
				this.getDetails();
			});
		},
		onPullDownRefresh() {
			// this.initAtPresent()
			this.getDetails()
		},
		methods: {
			getDetails() {
				if (!this.defaultDetail || this.defaultDetail.locationType === 'gd') {
					this.detail = this.defaultDetail || null;
					uni.stopPullDownRefresh();
				} else {
					try {
						getLocationIinfo(this.defaultDetail.id, this.defaultDetail.latitude, this.defaultDetail.longitude)
							.then(res => {
								this.detail = res.data || this.defaultDetail || null;
								if (this.detail) {
									this.detail.distance = this.defaultDetail.distance;
								}
							}).catch(err => {
								this.detail = this.defaultDetail || null;
							}).finally(() => {
								uni.stopPullDownRefresh();
							})
					} catch (e) {
						//TODO handle the exception
						uni.stopPullDownRefresh();
					}
				}
			},
			getDistance(num) {
				return distanceCalculate(num)
			},


			getTypeName(item) {
				let val = this.classifyList.find(el => el.id === item.classifyId);
				// console.log('----', val, this.keyWord, this.activeClassify?.name)
				return val?.name || this.keyWord || this.activeClassify?.name || ''
				// let item = this.classifyList.find(el => el.id === id);
				// return item.name || this.keyWord || this.activeClassify?.name || ''
			},

			toHere(item) {
				uni.openLocation({
					latitude: parseFloat(item.latitude), // 要去的地址经度，浮点数
					longitude: parseFloat(item.longitude), // 要去的地址纬度，浮点数
					name: item.name, // 位置名
					address: item.detailedAddress, // 要去的地址详情说明
					scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.map-location {
		padding: 66rpx 30rpx 30rpx;
	}

	.content-info {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;

		.info-logo {
			width: 196rpx;
			height: 196rpx;
			border-radius: 20rpx;
		}

		.info-text {
			width: calc(100% - 196rpx);
			padding: 10rpx 0 10rpx 30rpx;
			flex-direction: column;

			.info-name {
				width: 100%;
				height: 52rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-size: 36rpx;
				font-weight: 600;
				color: #1a1a1a;
			}

			.info-more {
				width: 100%;
				height: calc(100% - 52rpx);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;

				.more-text {
					// width: 268rpx;
					width: calc(100% - 122rpx);
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right: 20rpx;


					.info-tag {
						display: inline-flex;
						padding: 5rpx 22rpx;
						background: #e3fcfc;
						border-radius: 20rpx 0px;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #43bdd6;
					}

					.info-site {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						color: #666666;
					}
				}

				.more-btn {
					width: 122rpx;
					height: 50rpx;
					// background: linear-gradient(90deg,#45c7d5 4%, #3cb7d1 93%);
					background-color: #45c7d5;
					border-radius: 25rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.toimg {
						width: 22rpx;
						height: 24rpx;
					}

					.btn-text {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #ffffff;
						padding-left: 4rpx;
					}
				}
			}

		}


	}

	.location-details {

		font-size: 26rpx;
		font-weight: 300;
		color: #666666;
		padding: 20rpx 0 40rpx;
		border-bottom: 1px solid $zw-border-color;
	}

	.location-function {
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.fun-btn {
			width: 210rpx;
			height: 77rpx;
			// display: flex;
			// flex-direction: row;
			// justify-content: center;
			align-items: center;
			margin-right: 30rpx;
			margin-bottom: 20rpx;

			border-radius: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			// height: 77rpx;
			// border-radius: 15rpx;
			.funimg {
				width: 100%;
				height: 100%;
			}

			.funtxt {
				font-size: 28rpx;
				margin-left: 10rpx;
			}

			// &:nth-child(3n) {
			// 	margin-right: 0;
			// 	border: 1px solid #76bcb1;
			// 	background: #e8f4f6;

			// 	.funtxt {
			// 		color: #76bcb1;
			// 	}
			// }

			// &:nth-child(3n - 1) {
			// 	border: 1px solid #3fb9d4;
			// 	background: #edfdfd;

			// 	.funtxt {
			// 		color: #3fb9d4;
			// 	}
			// }

			// &:nth-child(3n - 2) {
			// 	border: 1px solid #215dd9;
			// 	background: #e6edfa;

			// 	.funtxt {
			// 		color: #215dd9;
			// 	}
			// }
		}



	}
</style>