H5/pages/map/model/SelectMapNavigation.vue

<template>
	<uni-popup ref="SelectMap" :isMaskClick='true' type="bottom" border-radius="10px 10px 0 0"
		maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
		<view class="map-list">
			<view class="title">请选择地图</view>
			<view class="map-item" @click.stop="goNavigation(item.value)" v-for="item in MapTypeList">
				{{item.label}}
			</view>
			<view class="map-item cancel" @click.stop="close()">
				取消
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { MapTypeList } from "@/utils/openApp.js"
	import { openMap } from "@/utils/openApp.js"
	export default {
		data() {
			return {
				MapTypeList,
				siteInfo: undefined
			};
		},
		mounted() {
			// setTimeout(() => {
			// 	this.open()
			// }, 1000)
		},
		methods: {
			open(info) {
				this.siteInfo = info;
				this.$refs.SelectMap.open()

			},
			close() {
				this.$refs.SelectMap.close()
			},	
			goNavigation(type) {
				const { areaCode, cityCode, provinceCode, provinceName, cityName, areaName, address } =  this.siteInfo
				const name = `${provinceName}${cityName}${areaName}${address}`;
				const code = areaCode || cityCode || provinceCode
				openMap({ name, code,  type, info: this.siteInfo })
				this.$refs.SelectMap.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map-list {
		width: 100%;
		// height: 30vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;

		.title {
			width: 100%;
			text-align: center;
			padding: 30rpx 20rpx 50rpx 20rpx;
			font-size: 28rpx;
		}

		.map-item {
			width: 100%;
			padding: 30rpx 20rpx;
		}

		.cancel {
			padding: 50rpx 30rpx;
			color: #9f9f9f;
		}
	}
</style>