LocalLivingServicesUniapp/pages/product/checkMap.vue

<template>
	<view class="map">
		<view class="head">
			<view class="top"></view>
			<view class="title">
				<span class="cuIcon-back" @click="back"></span>
				<span class="text">选择检测站</span>
				<span class="sub" @click="submit">确定</span>
			</view>
		</view>
		<view class="search">
			<view class="left" @click="show = true">
				<image src="/static/index/address.png" mode=""></image>
				<span>{{city}}</span>
				<u-icon size="24" name="arrow-down-fill"></u-icon>
			</view>
			<view class="right">
				<u-icon size="24" name="search" style="margin-right: 10rpx;"></u-icon>
				<u-input v-model="searchWords" @confirm="searchFn" />
			</view>
		</view>
		<!-- <u-select v-model="show" mode="mutil-column-auto" :list="cityList" label-name="areaCname" value-name="id" child-name="child" @confirm="confirm">	</u-select> -->
		<u-select v-model="show" mode="mutil-column-auto" :list="cityList" label-name="areaCname" value-name="id"
			child-name="child" @confirm="confirm"></u-select>
		<view id="amap" class="amap" style="width: 100%; height: 40vh;" :pointList="pointList"
			:change:pointList="ModuleMap.setParkList">

		</view>
		<view class="list">
			<view class="tip" v-for="(item,index) in dataTips" :key="index" @click="select(item)">
				<view class="left">
					<span><text v-show="item.updateTime">已选</text>{{item.inspectionStationName}}</span>
					<span>{{item.detailedAddress}}</span>
				</view>
				<view class="right">
					<image src="/static/coupon/danxuan.png" mode="" v-if="item.check"></image>
					<image src="/static/product/round.png" mode="" v-else></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var amapFile = require('@/static/map/amap-wx.130.js'); //如：..­/..­/libs/amap-wx.js
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({
		key: '915d1d1ed40dc41450eda1d930ea1b2d'
	});
	export default {
		data() {
			return {
				city: '太原',
				searchWords: '',
				show: false,
				cityList: [],
				pointList: null,
				dataTips: [],
				selectList: [], //已选择监测站
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//城市列表
			getCityList() {
				this.$http.post("/sys/area/queryTreeSecondLevel").then(res => {
					if (res.data.code == 200) {
						this.cityList = res.data.result
						console.log(this.cityList)
					}
				})
			},
			confirm(e) {
				console.log(e)
			},
			// 根据内容进行检索
			searchFn() {
				this.getShopList()
				console.log("根据地址检索", this.searchWords);
				myAmapFun.getInputtips({
					keywords: this.searchWords,
					location: '',
					success: (data) => {

						if (data && data.tips) {
							console.log(data.tips)
							data.tips.forEach(item => {
								item.check = false,
									item.detailedAddress = item.address,
									item.inspectionStationName = item.name,
									item.locality = item.district
								this.dataTips.push(item);
							})

							console.log(111, this.dataTips);
						}
					},
					fail: data => {
						console.log(222, data);
					}
				})
			},
			//选中地址
			select(item) {
				console.log(item)
				item.check = !item.check
			},
			//保存勾选检车站
			submit() {
				let localTsMerchantLinkInspection = []
				this.dataTips.forEach(item => {
					if (item.check) {
						const locationParts = item.location ? item.location.split(",") : [];
						localTsMerchantLinkInspection.push({
							country: item.adcode,
							detailedAddress: item.detailedAddress,
							inspectionStationName: item.inspectionStationName,
							locality: item.locality,

							inspectionStationLongitude: item.inspectionStationLongitude || (locationParts[0] || null),
							inspectionStationLatitude: item.inspectionStationLatitude || (locationParts[1] || null),
							// inspectionStationLongitude: item.location.split(",")[0] || item.inspectionStationLongitude,

							// inspectionStationLatitude: item.location.split(",")[1] || item.inspectionStationLatitude,
							merchantId: uni.getStorageSync('login_user_info').merchantId

						})
					}

				})
				this.$http.post("/ts/localTsMerchantLinkInspection/add", localTsMerchantLinkInspection).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '添加成功'
						})
						this.back()
					}
				})
			},
			//获取已选择收费站
			getShopList() {
				let merchantId = uni.getStorageSync('login_user_info').merchantId
				this.$http.get("/ts/localTsMerchantLinkInspection/list?merchantId=" + merchantId, ).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						res.data.result.forEach(item => {
							item.check = true
						})
						this.dataTips = res.data.result
					}
				})
			}
		},
		mounted() {
			this.getCityList()
			this.getShopList()
		}
	}
</script>
<script module="ModuleMap" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				layer: null,
				markers: '',
				isExistImplement: false,
				markerId: '',
				parkList: [],
			}
		},
		watch: {
			//监听位置数据的变化，并初始化地图（有位置数据则默认给个标点）
			parkList(v) {
				setTimeout(() => {
					if (window.AMap) {
						this.initAmap(v);
					} else {
						const script = document.createElement('script');
						script.src =
							'https://webapi.amap.com/maps?v=1.4.15&key=220880dab49e4a565afbf0bd989af006'; //这里是自己申请的高德的key
						script.onload = () => {
							this.initAmap(v);
						}
						document.head.appendChild(script);
					}
				});
			}
		},
		mounted() {

		},
		methods: {

			initAmap(marker) {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [112.557429, 37.90923], //中心点坐标
					zoom: 10, //显示的缩放级别
					// zooms: [6, 30], //地图显示的缩放级别范围
				})
				//地图创建完成 标注点
				this.map.on("complete", () => {
					if (marker && marker.length) {
						this.markers = new AMap.Marker({
							// icon: new AMap.Icon({
							// 	image: 'static/img/map.png',
							// 	size: new AMap.Size(30, 34), //图标所处区域大小
							// 	imageSize: new AMap.Size(30, 34) //图标大小
							// }),
							position: [marker[0], marker[1]],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						this.map.setCenter(marker)
					}
				})
				//点击事件
				this.map.on("click", (e) => {
					if (this.markers) {
						this.markers.setMap(null);
						this.markers = null;
					}
					if (!this.markers) {
						this.markers = new AMap.Marker({
							// icon: new AMap.Icon({
							// 	image: 'static/img/map.png',
							// 	size: new AMap.Size(30, 34), //图标所处区域大小
							// 	imageSize: new AMap.Size(30, 34) //图标大小
							// }),
							position: [e.lnglat.lng, e.lnglat.lat],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						let str = e.lnglat.lng + ':' + e.lnglat.lat
						//地图点击事件 将位置信息传到上面的markerClick函数中
						this.$ownerInstance.callMethod('markerClick', str)
					}
					// this.createLabelsLayer();
				})
			},
			//接收传入的位置数据
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.map {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.head {
			background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

			/*#ifdef APP-PLUS*/
			.top {
				width: 100%;
				height: var(--status-bar-height);
			}

			/*#endif*/
			.title {
				width: 100%;
				height: 112rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.text {
					font-weight: 600;
					font-size: 36rpx;
				}

				.sub {
					display: flex;
					width: 104rpx;
					height: 49rpx;
					background: #2D88F4;
					border-radius: 8rpx;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.cuIcon-back {
					font-size: 40rpx;
					margin-right: 40rpx;
				}

				.case {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}

		.search {
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 1px solid rgba(255, 255, 255, 0.1);
			padding: 20rpx 24rpx;
			display: flex;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				span {
					font-weight: 600;
					font-size: 28rpx;
					color: #181818;
					margin: 0 10rpx;
				}
			}

			.right {
				flex: 1;
				height: 58rpx;
				margin-left: 20rpx;
				background: #F6F7F9;
				border-radius: 33rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;

			}
		}

		.list {
			width: 98%;
			margin: 0 auto;
			flex: 1;
			overflow-y: auto;
			background-color: #ffffff;
			padding: 8rpx 20rpx;

			.tip {
				width: 100%;
				height: 124rpx;
				border-bottom: 1px solid #848484;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-weight: 500;
					font-size: 28rpx;
					display: flex;
					flex-direction: column;
					
					span {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						text{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 80rpx;
							height: 43rpx;
							background: rgba(253,73,18,0.05);
							border-radius: 4rpx ;
							font-size: 24rpx;
							color: #FD4912;
							margin-right: 12rpx;
						}
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}


	}
</style>