yiliangyiyun-app/pages/grain_pulse/position/position.vue

<template>
	<view class="">
		<view class="header">
			<view class="city Medium">
				<view class="select-city" @click="loadCity">{{city}}</view>
				<u-icon size="20rpx" name="arrow-down"></u-icon>
			</view>
			<u-search bg-color='#F5F6F9' input-align="left" @change="searchAddress" :show-action="false" height="70" placeholder="请输入位置信息"
				v-model="addressName"></u-search>
		</view>
		<view class="header2">
			<view class="header2-tip Regular">
				当前定位
			</view>
			<view class="header2-content">
				<view class="left Medium" @click="selectPosition">
					<image style="width: 22rpx;height:22rpx;margin-top: 15rpx;" src="../../../static/img/liangmai/dingwei.png"></image>
					<view style="padding-left: 15rpx;">{{address}}</view>
					<view class="" v-if="isposition">{{text}}</view>
				</view>
				<view class="reposition Regular" @click="reloadPosition">{{po_tips}}</view>
			</view>
		</view>
		<view class="position-list Regular" v-if="addressName==''">
			<view class="search">
				<view>最近搜索</view>
				<u-icon name="trash-fill" color="#AFB3BF" size="28" @click="delList"></u-icon>
			</view>
			<view class="search-list">
				<view v-for="(item,index) in list" class="search-list-item" @click="toHome(item)">
					{{item.name}}
				</view>
			</view>

		</view>
		<view class="search-content" v-if="addressName!=''">
			<view v-for="(item,index) in searchList" :key="index" class="search-contnet-item"
				@click="addressClick(item)">
				<view class="top">
					<view v-html="item.newName" class="content"></view>
					<view class="distance" v-if="address!='定位失败,请点击重新定位'&& item.distance > 1">{{item.distance}}km</view>
					<view class="distance" v-if="address!='定位失败,请点击重新定位'&& item.distance <= 1">{{(item.distance*1000).toFixed(0)}}m</view>
					
				</view>
				<view class="bottom">
					{{item.adname}}{{item.address}}
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import amap from '@/js_sdk/js-amap/amap-wx.130.js'
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				searchList: [],
				nowRegion: {},
				addressName: "",
				isposition: false,
				isIos: true,
				address: "定位失败,请点击重新定位",
				city: '北京',
				list: [],
				position: '',
				addressObj: {},
				seconds: 3,
				po_tips: '重新定位',
				seach: {
					latitude: 39.92,
					longitude: 116.46,
				},
				positionType: {
					type: ""
				},
				location:{}
			}
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'nowRegion',
				success: (res) => {
					console.log("nowRegion", res.data)
					that.nowRegion = res.data
					this.seach.longitude = res.data.longitude
					this.seach.latitude = res.data.latitude
					that.city = res.data.positionName.cityName
					console.log("that.city", that.city)
					// console.log("city", that.city)
					// uni.removeStorage({
					// 	key: 'nowRegion'
					// })
				},
			})
			uni.getStorage({
				key: 'setPositionType',
				success: (res) => {
					console.log("positionType", res.data)
					this.positionType = res.data

				},
			})
		},
		onLoad(e) {
			// var p1 = [116.434027, 39.941037];
			// var p2 = [116.461665, 39.941564];
			let that = this
			uni.getStorage({
				key: 'SearchList_key',
				success: function(res) {
					that.list = res.data
				}
			});
			this.getLocation()
		},
		methods: {
			addressClick(item) {
				if(item){
					this.list.push(item)
					uni.setStorage({
						key: 'SearchList_key',
						data: this.list
					});
				}
				uni.setStorage({
					key: 'setPosition',
					data: item,
					success: (res) => {
						uni.setStorage({
							key: 'setLocaltion',
							data: item,
							success: (res) => {
								uni.navigateBack({
									
								})
							},
						})
					}
				})
			},
			// 排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			// 经纬度计算距离
			getDistance(lat1, lng1, lat2, lng2) {
				lat2 = parseFloat(lat2)
				lng2 = parseFloat(lng2)
				console.log(lat1, lng1, lat2, lng2)
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				console.log("计算结果", s, 'KM');
				return s
			},
			// 删除最近搜索
			delList() {
				uni.setStorage({
					key: 'SearchList_key',
					data: []
				});
			},
			getLocation() {
				let that = this;
				console.log(11111)
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('获取位置数据：', res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						//拼接当前定位回显地址
						// #ifdef APP-PLUS
						that.location = res
						let _address = res.address
						that.city = _address.city
						that.seach.longitude = res.longitude
						that.seach.latitude = res.latitude
						that.address = _address.province + _address.city + _address.district + _address
							.poiName
						that.searchAddress(_address.poiName)
						that.addressName = _address.poiName
						console.log(that.address)
						// #endif
					},
					fail:function(req){
						console.log(req)
					}
				});
			},
			// 重新定位
			reloadPosition() {
				console.log(111111)
				var that = this
				that.po_tips = '定位中...'
				let countdown = setInterval(() => {
					that.seconds--;
					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							// #ifdef APP-PLUS
							that.location = res
							let _address = res.address
							that.city = _address.city
							that.seach.longitude = res.longitude
							that.seach.latitude = res.latitude
							that.address = _address.province + _address.city + _address
								.district +
								_address.poiName
							that.searchAddress(_address.poiName)
							that.addressName = _address.poiName
							// #endif
						}
					});
					if (that.seconds <= 0) {
						that.seconds = 3
						that.po_tips = '重新定位'
						clearInterval(countdown);
					}
				}, 1000);
			},
			openSetting() {
				// App跳转系统的设置界面
				// #ifdef APP-PLUS
				uni.getSystemInfo({
					success(res) {
						if (res.platform == 'ios') { //IOS
							plus.runtime.openURL("app-settings://");
						} else if (res.platform == 'android') { //安卓
							let main = plus.android.runtimeMainActivity();
							let Intent = plus.android.importClass("android.content.Intent");
							let mIntent = new Intent('android.settings.ACTION_SETTINGS');
							main.startActivity(mIntent);
						}
					}
				});
				// #endif
			},
			// 跳转ios权限界面
			judgeIosPermission: function(permisionID) {
				var result = permision.judgeIosPermission(permisionID)
				// console.log(result);
				var strStatus = (result) ? "已" : "未"
				uni.showModal({
					content: permisionID + '权限' + strStatus + "获得授权",
					showCancel: false
				});
			},
			// 跳转安卓权限界面
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID)
				var strStatus
				if (result == 1) {
					strStatus = "已获得授权"
				} else if (result == 0) {
					strStatus = "未获得授权"
				} else {
					strStatus = "被永久拒绝权限"
				}
				uni.showModal({
					content: permisionID + strStatus,
					showCancel: false
				});
			},
			//设置搜索关键字颜色
			getStringColorReplace(val, val1) {
				let _lat1 = this.seach.latitude
				let _lng1 = this.seach.longitude
				for (let j = 0; j < val.length; j++) {
					var replaceString = '<view style="color:#22C572' + ';">' + val1 + "</view>";
					val[j].newName = val[j].name.replace(RegExp(val1, 'g'), replaceString);
					let _lat2 = val[j].location.split(',')[1];
					let _lng2 = val[j].location.split(',')[0];
					val[j].distance = this.getDistance(_lat1, _lng1, _lat2, _lng2)
				}
				//排序
				this.searchList.sort(this.compare("distance"))
			},
			// 关键字搜索
			searchAddress(val) {
				console.log(1222)
				let parameters = {
					key: 'dd701d394d116b50268dc16470ddd615',
					keywords: val,
					region: this.city,
					page_size: 25
				}
				uni.request({
					url: 'https://restapi.amap.com/v5/place/text',
					data: parameters,
					success: (res) => {
						console.log("searchAddress",res.data);
						this.searchList = res.data.pois
						this.getStringColorReplace(res.data.pois, val)
					}
				});
			},
			// 切换城市
			loadCity() {
				uni.navigateTo({
					url: "../selectCity/selectCity"
				})
			},
			selectPosition(){
				// uni.setStorage({
				// 	key: 'setPosition',
				// 	data: this.location,
				// 	success: (res) => {
				// 		uni.setStorage({
				// 			key: 'setLocaltion',
				// 			data: this.location,
				// 			success: (res) => {
				// 				uni.navigateBack({
									
				// 				})
				// 			},
				// 		})
				// 	}
				// })
			},
			toHome(item) {
				uni.setStorage({
					key: 'setPosition',
					data: item,
					success: (res) => {
						uni.setStorage({
							key: 'setLocaltion',
							data: item,
							success: (res) => {
								uni.navigateBack({
									
								})
							},
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-content {
		padding-left: 170rpx;
	}

	.header {
		position: relative;
		display: flex;
		background: white;
		padding: 20rpx;

		.city {
			top: 0;
			bottom: 0;
			left: 50rpx;
			margin: auto;
			position: absolute;
			display: flex;
			align-items: center;

			.select-city {
				margin-right: 4rpx;
			}

		}
	}

	.header2 {
		background: white;
		border-radius: 0 0 20rpx 20rpx;
		padding: 0 20rpx 34rpx 20rpx;

		.header2-tip {
			font-size: 28rpx;
			color: #AFB3BF;
		}

		.header2-content {
			font-size: 32rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			margin-top: 12rpx;

			.left {
				display: flex;
			}

			.reposition {
				font-size: 28rpx;
				color: #22C572;
			}
		}
	}

	.position-list {
		margin-top: 20rpx;
		background: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 10rpx;


	}

	.search {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.search-list {
		padding: 20rpx;
	}

	.search-list-item {
		display: inline-block;
		background: #F5F6F9;
		border-radius: 32rpx;
		padding: 16rpx 24rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.search-content {
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background: white;

		.search-contnet-item {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 10rpx;
			margin-top: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;

				.content {
					font-size: 28rpx;
					font-weight: 400;
				}

				.distance {
					font-size: 24rpx;
					font-weight: 400;
					color: #AFB3BF;
				}
			}

			.bottom {
				margin-top: 6rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #AFB3BF;
			}
		}
	}
</style>